10 Minutes with Flash: SWF-to-SWF Communication
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
In the world of complicated web applications, there's often a need to communicate between multiple SWF files and transfer data from one to another. For example, an application might contain a chat widget that handles server connectivity, but also contain a List component that needs to display other data from the server in another SWF. In this case, you wouldn't want to create a second server connection because this method would bog down the server unnecessarily. So what's a geek to do?
Today I'll show you a simple example of SWF-to-SWF communication, made possible via the LocalConnection class, which is intrinsic to Flash Player versions 6 or higher. Today's example will simply send a string from one SWF to another and display the string in the second SWF, but the techniques used to accomplish this can be applied in many situations.
Because ActionScript 2.0 is also compatible with Flash Player 6 or higher, we'll use it for the exercise. If you're new to ActionScript 2.0, don't worry—I'll explain the code as we go along.
The Sender
The first step of sending a string from one SWF to another is to create an SWF with something to send, so let's start there. Soon, we'll create a second SWF to receive the message sent by the first SWF.
Launch Flash MX 2004 and create a new Flash document. Save it as sender.fla to your desktop.
Change the stage dimensions to 300 x 60.
Open the Components panel (Window > Development Panels > Components) and expand the UI Components set.
Drag a TextInput component instance to the stage and assign it the instance name sendTxt via the Properties panel.
With the sendTxt instance still selected, use the Properties panel to resize it to 285 x 22; then position it toward the top of the stage, similar to Figure 1.
)
Figure
1 Size and position the TextInput component instance so it looks as pretty
as mine does.
Next, we need a button with which to send the string we'll eventually add to the TextInput instance. To create the button, follow these steps:
Drag a Button component instance from the Components panel to the stage and position it underneath the TextInput instance.
Assign the Button instance the instance name btn via the Properties panel.
With the btn instance still selected, enter Send into the Label field in the Properties panel, which displays the word Send inside the button.
To get the rest of this file working, we need to add some code. First, we need to import the class that controls the TextInput component. Then we need a few variables, a LocalConnection object, and an event handler for the Send button.
Create a new layer and name it actions.
Select frame 1 of the actions layer and open the Actions panel (Window > Actions, or F9).
Enter the following code to import the controls for the TextInput component:
import mx.controls.TextInput;
-
Next, create three variables: one to contain the btn instance, one to contain the sendTxt instance, and one to contain the string that we'll be sending to the second SWF. Because we're using ActionScript 2.0, we'll assign datatypes to the variables as we declare them:
var btn:Button; var sendTxt:TextInput; var txtVar:String;
Now we need a LocalConnection object. The LocalConnection class enables communication between SWF files. To create this, we need one more variable:
var lc:LocalConnection = new LocalConnection();
Finally, we need an event handler for the Send button:
btn.onRelease = function(){ txtVar = sendTxt.text; lc.connect("myConn"); lc.send("myConn", "receiveMethod", txtVar); }
In the function above, we first assigned the value of the sendTxt instance to the txtVar variable. Next, we told the lc instance (the LocalConnection instance) to connect to the other SWF (which we have not yet created) via a connection named myConn. Finally, we used the send() method of the lc instance to send txtVar to the receiveMethod() function (which we'll create in a second SWF) via the myConn connection.
To finish up the file, follow these steps:
Publish the movie by choosing File > Publish.
Save your work and close sender.fla.
Next, we'll create another SWF to receive the message we send from send.swf.