Exploring Flash Database localConnection object

by Deamothul

I found the localConnection to be a very useful 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:

Flash Database - Step 1: Setup stage movieA

OpenUp flash mx or mx2004 and make a new file with the dimensions set to about 600x300, give the background a black color. Save the file as "movieA.fla".

Flash Database - 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 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.

Flash Database - 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.

Flash Database - 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<-150){
this.z += 5000
};
//we need to swap depths to make an object that is deeper into z
//appear behind an object that is close by ( low z )
this.swapDepths(-z);
};
//in this do while loop we attach the clip from the library and assign variables to it.
//we make as much copies of it as the variableEffectNodes value.
var i = 0// init i
do{
/*
here we attach a clip from the library, i could use createEmptyMovieClip here with the drawing Api But i personally find it more efficient to not do that, but attach a clip from the library. thisway you can change the whole look of certain effects in no time. just change the clip in the lib. e.g. i made this effect script in movieA, then copied it into movieB, then i changed the clip that will be attached by the script in movieB, and voila the effect also runs in movieB but with a different look. so i drew a shape, converted it into a movieClip and named it effectNode. */ //we attach it here and assign variables to it,

effectNode = effectHolder.attachMovie("effectNode","effectNode"+i,150 + i);
effectNode.x=random(Stage.width);// X init value ;
effectNode.y=random(Stage.height);//Y init value ;
effectNode.z=5000 + i* 450 //Zinit value the i * 50 makes the clips spread out deep into z
effectNode.vx=0;//velocity X init value
effectNode.vy=0;//velocity Y init value
effectNode.vz= 145 + random(35);//velocity Z init value
effectNode.displayer = displayEffectNodes;//link the function displayEffectNodes to a variable for every node
effectNodesArray.push(effectNode);//push the effect node clips into the array.
i++
}while(i<=totalEffectNodes);
//This function will be executed every frame by the effectHolder.onEnterFrame
//and it loops through the effect nodes array and executes the function displayEffectNodes per node.
//So every Effect node knows what to do..... gotta love it.
setEffectNodesInMotion = function(){
//the loop through the array that holds our effect nodes and execute the function displayEffectNodes per node
var i =0//init i
do{
//assigns the function to each effect node
effectNodesArray[i].displayer();
i++
}while(i < effectNodesArray.length); //condition
};
//assign the setEffectNodesInMotion function to the effectHolder onEnterFrame
effectHolder.onEnterFrame = setEffectNodesInMotion;
};//close executeTheEffect
//remove the effectNodes holder clip and thus they are gone too
removeTheEffect = function(){
effectHolder.removeMovieClip();
};
Now save this file again and close it.

movieB

Flash Database - 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".

Flash Database - 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.

Flash Database - 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 "sendTextToM"