Getting different Flash movies to talk to (and listen for) each other

Problem:

You need to have a SWF file do something, based on something else that happened within a different SWF file.

Restrictions:

Must be Actionscript 2 (for example, because of banner ads, or to support older plug-ins)

Why?

Well, you might not want your site to be a giant Flash movie (thank you). You might have a small control, and want it to change a different interface or content element. You might have custom “rich-media” banner ads that need to interact with each other for a campaign (for some reason, I keep imagining a pong game, with a left paddle that’s controlled by the user, a page of blog content, and a right paddle controlled by Flash…as if the blog is blocking the path of the ball. Probably too hard to play though… :-)

Regardless, the solution is using a local connection object!

Here’s a quick example (download source files here):

The following spheres are two separate SWF files:

(this text is pure HTML — view the source to prove it to yourself)

The left sphere is the “sender” and the right sphere is the “receiver”. Click the left hand sphere to see how it sends a command to the right one (in this case it tells it to change color).

In the first movie (the sender or caller), we’re going to have a sphere with a Play/Pause button. When you click it, it will change the button image, and send a command (via LocalConnection) to the listener (or receiver) movie.

// start by initializing a local connection
var outgoing_lc:LocalConnection = new LocalConnection();
 
// global variable to keep track of whether we're in the
// "play" state or the "pause" state
var flagPlay:Boolean = true;
 
// starting out, set the Pause image to be hidden
theSphere.thePause._visible = false;
 
 
// mouse event when the user clicks on this Flash movie
this.onMouseUp = function () {
  if (flagPlay) {
    // the following executes if we're in the Pause state
    // (i.e. the Play image is visible)
    
    flagPlay = false;
    
    // hide the Play image, show the Pause image
    theSphere.thePause._visible = true;
    theSphere.thePlay._visible = false;
 
    // send the command to the other movie (the one "listening" for events
    // sent to "lc_sphere_receiver"
    outgoing_lc.send("lc_sphere_receiver", "methodToExecute", "play");
    
  } else {
      // do the opposite of the above
    flagPlay = true;
    
    theSphere.thePause._visible = false;
    theSphere.thePlay._visible = true;
    
    outgoing_lc.send("lc_sphere_receiver", "methodToExecute", "pause");
  }
}

Pretty simple… all we really had to do was initialize the connection, and then send it a command (in this case “play” or “pause”). Make sure that the connection name (i.e. “lc_sphere_receiver”) is the same in both movies!

Now, for the listener (aka receiver or destination) movie:

// start by initializing the local connection
var incoming_lc:LocalConnection = new LocalConnection();
 
// hide the green sphere (start this movie from a "stopped" state)
theSphere.theGreen._visible = false;
 
// listen for an incoming command
incoming_lc.connect("lc_sphere_receiver"); 
 
// set up the instructions for when the proper command is sent
incoming_lc.methodToExecute =
  function(param:String):Void {
 
    if (param == "play") {
 
      // show the green sphere
      theSphere.theGreen._visible = true;
      theSphere.theRed._visible = false;
 
    } else { // assume "pause" (i.e. "stop")
 
      // show the red sphere
      theSphere.theRed._visible = true;
      theSphere.theGreen._visible = false;
 
    }
 
};

Basically, all we’re doing is initializing the LocalConnection for this movie, and then creating a function that should be executed whenever it “hears” a command. We could create multiple methods as needed, or just use the one (as I have done) with passed parameters that tell it what to do.

Download the source files here!

jeffrey

About jeffrey

Jeffrey Berthiaume is a multimedia developer and internet architect who has designed and built award-winning websites, kiosks, and content management systems. He bridges the gap between creative and technology with an ability to balance the needs of designers and marketing with the capabilities of existing technology.
This entry was posted in Development, Flash, Tutorials. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>