hello people, today lets make an example of what we can do with the localConnection object, to read more about it go here:
I found the localConnection to be a very usefull object, it has a very nice way of setting up a connection between two different swf’s or even inside the same swf. For example you could make something like place two swf’s in a html file and run it in your browser. Then when you would press on a button in one swf, you could make something happen in the other swf.
In this example we are going to delete some text in movieB via a button in movieA and then the other way around. I bet there are a million other ways you could use it, but let us stick with making two swf’s that communicate back and forth with eachother setting and deleting some text and we will also kickoff some effect.
movieA:
Step 1: Setup stage movieA
OpenUp flash mx or mx2004 and make a new file with the dimensions set to about 600×300, give the background a black color.
Save the file as “movieA.fla”.
Step 2: Setting up the textfields in movieA and the effectNode clip
* Look at the end of this tutorial to see how i set it up.
Make 6 textfields and set them up like this:
– 1 dynamic textfield with instance name: movieA_txtb, set the text color to black and give the textfield a border.
– 1 static textfield with as text: MovieA
– 1 static textfield with as text: Push too send instructions to movieB. MovieB is instructed to place some text in a textbox.
– 1 static textfield with as text: Push too make movieA send an instruction to movieB too clear the text from the textbox.
– 1 static textfield with as text: Push too clear the text from the textbox in movieA.
– 1 static textfield with as text: Push too send the startEffect instruction to movieB and start the effect.
– 1 static textfield with as text: Push too send the killEffect instruction to movieB and kill the effect that runs.
Draw a little square or circle with a size of about 60×60:
– Select the shape you just made and convert it into a movie clip (select it and press f8).
– In the convert to symbol menu set these values:
   * name to “effectNode”
   * behavior to movieclip
   * registration point in the middle
   * export for actionscript must be selected.
– Select the clip again and delete it from stage, we only want to have this clip in the library.
Later we will attach it to be used in a little effect.
Step 3: Setting up the buttonMc’s in movieA
– Draw 5 grey squares on stage vertical one under the other, with some space in between.
  * Place them to the left of the textboxes, you’d better check my final result first so you know how set it up visually.
– Select the first square(the upper one) and convert it into a movie clip (select it and press f8).
– In the convert to symbol menu set these values:
   * name to “sendTextToMovieB_btn”
   * behavior to movieclip
   * registration point in the middle
   * export for actionscript must be selected.
– Select the clip again and set its instance name also to sendTextToMovieB_btn.
– Select the second square from above and convert it into a movie clip (select it and press f8).
– In the convert to symbol menu set these values:
   * name to “killTxtInMovieB_btn”
   * behavior to movieclip
   * registration point in the middle
   * export for actionscript must be selected.
– Select the clip again and set its instance name also to killTxtInMovieB_btn.
– Select the third square from above and convert it into a movie clip (select it and press f8).
– In the convert to symbol menu set these values:
   * name to “killTxtInMovieA_btn”
   * behavior to movieclip
   * registration point in the middle
   * export for actionscript must be selected.
– Select the clip again and set its instance name also to killTxtInMovieB_btn.
– Select the fourth square from above and convert it into a movie clip (select it and press f8).
– In the convert to symbol menu set these values:
   * name to “sendStartEffectToMovieB_btn”
   * behavior to movieclip
   * registration point in the middle
   * export for actionscript must be selected.
– Select the clip again and set its instance name also to sendStartEffectToMovieB_btn.
– Select the fifth square and convert it into a movie clip (select it and press f8).
– In the convert to symbol menu set these values:
   * name to “killStartEffectInMovieA_btn”
   * behavior to movieclip
   * registration point in the middle
   * export for actionscript must be selected.
– Select the clip again and set its instance name also to killStartEffectInMovieA_btn.
– Press save.
Step 4: Setting up the Actionscript in movieA
With movieA still open make a new layer named something like “code”,and place this script.
first we setup the receiver localConnection Object.
stop();
receiverMovieA = new LocalConnection();
This is the function that is executed when the connection id is received. I set it up so that if you send a different string, then a different instruction is executed. The names should say enough about what they instruction does.
receiverMovieA.executeOnReceive = function(input) {
//i set it up so that if you send a different string, then a different instruction is executed.
//the names should say engough about what it will do.
if(input=="sendTxt")movieA_txtb.text = "movieA received instructions from movieB";
if(input=="killTxt")movieA_txtb.text = "";
if(input=="startEffect"){
   movieA_txtb.text = "startEffect instructs received from movie B";
   executeTheEffect();
};
if(input=="killEffect"){
   movieA_txtb.text = "startEffect is killed by instruction from movieB";
   removeTheEffect();
};
};
//Here we'll setup the connection.
receiverMovieA.connect("movieB_sender_to_movieA_receiver_connectionID");
This is the sending part of the script, we setup a LocalConnection object again. Then we send the connection id, the name of the function to execute and the parameters that’ll be used in that function when you press a button.
MovieB takes in these instructions and serves its master. Again the names should say enough.
senderMovieA = new LocalConnection();
sendTextToMovieB_btn.onPress=function(){
   senderMovieA.send("movieA_sender_to_movieB_receiver_connectionID","executeOnReceive","sendTxt");
};
killTxtInMovieB_btn.onPress=function(){
   senderMovieA.send("movieA_sender_to_movieB_receiver_connectionID","executeOnReceive","killTxt");
};
killTxtInMovieA_btn.onPress=function(){
   movieA_txtb.text = "" ;
};
sendStartEffectToMovieB_btn.onPress=function(){
   senderMovieA.send("movieA_sender_to_movieB_receiver_connectionID","executeOnReceive","startEffect");
};
killStartEffectInMovieA_btn.onPress=function(){
   senderMovieA.send("movieA_sender_to_movieB_receiver_connectionID","executeOnReceive","killEffect");
};
Be prepared…the following part not for the beginner in actionscripting. Now we’ll make the effect that needs to kickoff on instruction. This tutorial isnt really focused on the effect we are going to make, the tuts focus was the the localConnection object. This piece of code is just extra, so although i have commented it thoughout the script, keep in mind that it wasnt the main focus. And it isnt optimised cause i just made the script to run the effect in movieA, then copied the code into movieB to also get the effect in that swf.
I could have made the effect in another clip and use loadMovie or something, but whatever…… its just for fun.
// this function will hold our effect and thisone will be triggered by the instruction from the other movie.
executeTheEffect = function(){
   // first we will make a clip that holds our effect node clips.
   _root.createEmptyMovieClip("effectHolder",100);
   //We place it in the middle of the screen, if clips would be send deep back into z ,
   //they will would eventually disappear in this point
   effectHolder._x=0//Stage.width/2;
   effectHolder._y=0//Stage.height/2-20;
   //a variable containing how many clips we wanna have as effect nodes
   totalEffectNodes=18
   // this is our focus, we will use this in the formula to get a scale ratio (scaleRatio = focus/(focus+z))
   //if you change this values it will have an impact on how things show through the cam
   focus =56;
   //this is our camera object with 3 variables are their values.
   cam= {x:0,y:0,z:0};
   //in this array we will place the effect nodes
   effectNodesArray = [];
   //this function will run for each node in the node array every frame.
   displayEffectNodes = function(){
    // x y z relative to the cam object.
    var x = this.x - cam.x;
    var y = this.y - cam.y;
    var z = this.z - cam.z;
    this.z -= this.vz;
    //the formula to handle the faking of 3d by scaling the objects into perspective.
    var scaleRatio = focus/(focus+z);
    //finally assign the _x and _y of the node to be the x * scaleRatio and y * scaleRatio
    this._x = x * scaleRatio;
    this._y = y * scaleRatio;
    // scale to get te right perspective and fake 3d
    this._xscale = this._yscale = 100 * scaleRatio ;
    // to shoot the effect nodes back into the screen when it reaches z =0
    if(z
Now save this file again and close it.
movieB:
Step 5: Setup stage movieB
Make a new file with the dimensions set to about 600x300, give the background a black color and save the file as "movieB.fla".
Step 6: Setting up the textfields in movieB and the effectNode clip
* Look at the end of this tutorial to see how i set it up.
Make 6 textfields and set them up like this:
- 1 dynamic textfield with instance name: movieB_txtb, set the text color to black and give the textfield a border.
- 1 static textfield with as text: MovieB
- 1 static textfield with as text: Push too send instructions to movieA. MovieA is instructed to place some text in a textbox.
- 1 static textfield with as text: Push too make movieB send an instruction to movieA too clear the text from the textbox.
- 1 static textfield with as text: Push too clear the text from the textbox in movieB.
- 1 static textfield with as text: Push too send the startEffect instruction to movieA and start the effect.
- 1 static textfield with as text: Push too send the killEffect instruction to movieA and kill the effect that runs.
Draw a little square or circle with a size of about 60x60:
- Select the shape you just made and convert it into a movie clip (select it and press f8).
- In the convert to symbol menu set these values:
   * name to "effectNode"
   * behavior to movieclip
   * registration point in the middle
   * export for actionscript must be selected.
- Select the clip again and delete it from stage, we only want to have this clip in the library.
Later we will attach it to be used in a little effect.
Step 7: Setting up the buttonMc's in movieB
- Again draw 5 grey squares on stage vertical one under the other, with some space in between.
* Place them to the left of the textboxes.(check my final result first;)
- Select the first square(the upper one) and convert it into a movie clip (select it and press f8).
- In the convert to symbol menu set these values:
* name to "sendTextToMovieA_btn"
* behavior to movieclip
* registration point in the middle
* export for actionscript must be selected.
- Select the clip again and set its instance name also to sendTextToMovieA_btn.
- Select the second square from above and convert it into a movie clip (select it and press f8).
- In the convert to symbol menu set these values:
   * name to "killTxtInMovieA_btn"
   * behavior to movieclip
   * registration point in the middle
   * export for actionscript must be selected.
- Select the clip again and set its instance name also to killTxtInMovieA_btn.
- Select the third square from above and convert it into a movie clip (select it and press f8).
- In the convert to symbol menu set these values:
   * name to "killTxtInMovieB_btn"
   * behavior to movieclip
   * registration point in the middle
   * export for actionscript must be selected.
- Select the clip again and set its instance name also to killTxtInMovieB_btn.
- Select the fourth square from above and convert it into a movie clip (select it and press f8).
- In the convert to symbol menu set these values:
   * name to "sendStartEffectToMovieA_btn"
   * behavior to movieclip
   * registration point in the middle
   * export for actionscript must be selected.
- Select the clip again and set its instance name also to sendStartEffectToMovieA_btn.
- Select the fifth square and convert it into a movie clip (select it and press f8).
- In the convert to symbol menu set these values:
   * name to "killStartEffectInMovieA_btn"
   * behavior to movieclip
   * registration point in the middle
   * export for actionscript must be selected.
- Select the clip again and set its instance name also to killStartEffectInMovieA_btn.
- Press save.
Step 8: Setting up the Actionscript in movieB
With movieB still open make a new layer named something like "code",and place this script.
First we setup the receiver localConnection Object.
stop();
receiverMovieB = new LocalConnection();
This is the function that is executed when the connection id is received. Again i set this up so that if you send a different string, then a different instruction is executed. The names should say enough about what they instruction does.
receiverMovieB.executeOnReceive = function(input) {
if(input=="sendTxt"){
   movieB_txtb.text = "movieB received instructions from movieA" ;
};
if(input=="killTxt"){
   movieB_txtb.text = "" ;
};
if(input=="startEffect"){
   movieB_txtb.text = "startEffect instructs received from movie A" ;
   executeTheEffect();
};
if(input=="killEffect"){
   movieB_txtb.text = "startEffect is killed by instruction from movieA" ;
   removeTheEffect();
};
};
//Here we'll setup the connection.
receiverMovieB.connect("movieA_sender_to_movieB_receiver_connectionID");
This is the sending part of the script, we setup a LocalConnection object again. Then we send the connection id, the name of the function to execute and the parameters that'll be used in that function when you press a button.
MovieB takes in these instructions and also serves its master. Again the names should say enough.
senderMovieB = new LocalConnection();
sendTextToMovieA_btn.onPress=function(){
   senderMovieB.send("movieB_sender_to_movieA_receiver_connectionID","executeOnReceive","sendTxt");
};
killTxtInMovieA_btn.onPress=function(){
   senderMovieB.send("movieB_sender_to_movieA_receiver_connectionID","executeOnReceive","killTxt");
};
killTxtInMovieB_btn.onPress=function(){
   movieB_txtb.text = "" ;
};
sendStartEffectToMovieA_btn.onPress=function(){
   senderMovieB.send("movieB_sender_to_movieA_receiver_connectionID","executeOnReceive","startEffect");
};
killStartEffectInMovieA_btn.onPress=function(){
   senderMovieB.send("movieB_sender_to_movieA_receiver_connectionID","executeOnReceive","killEffect");
};
// this function will hold our effect and thisone will be triggered by the instruction from the other movie.
executeTheEffect = function(){
   // first we will make a clip that holds our effect node clips.
   _root.createEmptyMovieClip("effectHolder",100);
   //We place it in the middle of the screen, if clips would be send deep back into z ,
   //they will would eventually disappear in this point
   effectHolder._x=0//Stage.width/2;
   effectHolder._y=0//Stage.height/2-20;
   //a variable containing how many clips we wanna have as effect nodes
   totalEffectNodes=18
   // this is our focus, we will use this in the formula to get a scale ratio (scaleRatio = focus/(focus+z))
   //if you change this values it will have an impact on how things show through the cam
   focus =56;
   //this is our camera object with 3 variables are their values.
   cam= {x:0,y:0,z:0};
   //in this array we will place the effect nodes
   effectNodesArray = [];
   //this function will run for each node in the node array every frame.
   displayEffectNodes = function(){
    // x y z relative to the cam object.
    var x = this.x - cam.x;
    var y = this.y - cam.y;
    var z = this.z - cam.z;
    this.z -= this.vz;
    //the formula to handle the faking of 3d by scaling the objects into perspective.
    var scaleRatio = focus/(focus+z);
    //finally assign the _x and _y of the node to be the x * scaleRatio and y * scaleRatio
    this._x = x * scaleRatio;
    this._y = y * scaleRatio;
    // scale to get te right perspective and fake 3d
    this._xscale = this._yscale = 100 * scaleRatio ;
    // to shoot the effect nodes back into the screen when it reaches z =0
    if(z
Now close movieB.fla
The html file:
Step 9: Setting up the html file containing movieA and movieB
- Open up movieA , goto file> publish and press it to publish the swf into a html file
- Close movieA
- Open movieB , goto file> publish and press it to publish the swf into a html file
- Close movieB
- Make a new html file, and place a table in it to hold the swf's.
- Then cut and paste the code between the OBJECT /OBJECT tags from the two published html files into the tables.
- If you couldn't follow along with this step check the source files for the main.html and see how it was setup.
Or check this link if you want to learn about html tables: html table basics
The Final Product:
You should now have a main html file with a table in it that holds our two swf's. The swf's have a link to eachother and by pressing a certain button a certain instruction is being send to the other swf. You can send and remove text now by pressing the buttons, also we are sending a starteffect instruction that triggers an effect. Click here and scroll to the bottom of the page to see the final result.
My name is Erwin Schiphouwer a.k.a deamothul, im 25 and live in Groningen in
the Netherlands.
Im totally hooked on actionscript and especially in combination with php and
mysql.
I taught what i know by myself and still learn new things every day.
I hope to spread some love for scripting and make it a bit more easy for
people just starting out.
