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

< Back to Main

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

March 12, 2009

Jeffrey Berthiaume

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!

6 Comments


21 May 2009	Paulie Hi. Thank you, this is just what I want to do... however does not seem to work in Firefox for me. Works nicely in Safari though.
21 May 2009	Paulie Hi. Thank you, this is just what I want to do... however does not seem to work in Firefox for me. Works nicely in Safari though.
21 May 2009	Paulie Hi. Thank you, this is just what I want to do... however does not seem to work in Firefox for me. Works nicely in Safari though.
21 May 2009	Jeffrey Did you have both pages open at the same time? Interesting "bug" (related to LocalConnection): If you load it first in Safari, and then load it in Firefox, but minimize the windows (so you can see both at the same time)...clicking either "Play" button will make one (and only one) of the balls change...
29 Jun 2009	Pete I'm glad you posted that bug. I had the same problem during testing, but in reverse. Once I killed Firefox and refreshed the page in Safari, the Flash apps in Safari started communicating.
26 Nov 2009	Jim Hi thanks for putting this up, I was wondering, if you can help me sync the two with each other once both are getBytesLoaded = getBytesTotal. once they have both fully loaded, they play together. I'm having a bit of difficulty with this. please help, would be great

interactive · design · studio