JavaScript & Flash	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Tutorial - Communication between Flash Movies: Part 2

Free Flash / JavaScript Tutorial

This tutorial shows you how to send information between different Flash Movies in different Windows (different web pages) such as: Pop Up Windows or other web pages. Theoretically there is no limit to what information can be sent between each Flash Movie, and you can control a Flash Movie on another web page, from your main movie on your main page.

Note: This is part 2 of this tutorial. You can do part 2 without looking at part 1, but the ActionScript is explained in detail in part 1. This tutorial is different from part 1, as it uses JavaScript to control the different Windows or web pages.

Cross Ref: There is another tutorial specifically on how to create Pop Up Windows with Flash. Having said that both techniques work fine, although the technique listed here has more flexibility such as having a close Pop Up button: Pop Up tutorial

Example: Download the Flash file Int 122a

Example of opening pop up windows and then closing them by sending information between Flash Movies.

Step One: Creating the Controller Movie

This is the Movie that you will use to control the other Movies.

1. Open a new: Flash Movie
   The size of my Movie is: 250 x 80 pixels
2. Place on the Main Stage: Three buttons
   Either make your own buttons, or drag them out of the Library: Window > Other Panels > Common Libraries > Buttons
3. Add the following code to your first button :

   on (press) {
       _root.sender.send("myConnection", "doAction", 2);
   } on (release) {
       getURL("javascript:NewWindow=window.open ('pop1.html', 'myWindow', 'width=468, height=60, left=400, top=200, toolbar=No, location=No, scrollbars=No, status=No, resizable=No, fullscreen=No'); NewWindow.focus(); void(0);");//Note from getURL to here is all one line
   }
   
   Note: pop1.html is the name of the web page that will be opened. The size of the page will be 468 x 60 pixels. The left=400, top=200 is the position on screen of the Pop Up Window.
   

4. Add the following code to the second button:

on (press) {
    _root.sender.send("myConnection", "doAction", 2);
}
on (release) {
    getURL("javascript:NewWindow=window.open('pop2.html', 'myWindow', 'width=70, height=70, left=400, top=200, toolbar=No, location=No, scrollbars=No, status=No, resizable=No, fullscreen=No'); NewWindow.focus(); void(0);");//Note from getURL to here is all one line
}

Note: pop2.html is the name of the web page that will be opened. The size of the page will be 70 x 70 pixels.

5. Add the following code to the third Button:

   on (release) {
   _root.sender.send("myConnection", "doAction", 2);
   }
   
   Note: This closes any of the Pop Up Windows that the other buttons may have opened.

6. Add the following code to Frame 1 in the Timeline:

sender = new LocalConnection();

7. Save your file as: sender.fla
8. Now Export you Movie as a Flash Movie (swf file): File > Export > Export Movie
   This will create a file called: sender.swf

Step Two: Creating the Second Flash Movie - Pop Up 1

1. Open a new: Flash Movie
2. Make the Document Size: 468 x 60 pixels
   You can do this in: Modify > Document
3. On Stage create a simple: Animation (This step is not essential)

Cross Reference: If you do not know how to make a simple animation, there are several animation tutorials in the beginners section such as: Tweening

4. Add this code to the first frame of the new Movie:

receiver = new LocalConnection();
receiver.doAction = function(doThat) {
    if (doThat == 2) {
        getURL("javascript:self.close();");
    }
};
receiver.connect("myConnection");

1. Save your file as: pop1.fla
2. Now Export you Movie as a Flash Movie (swf file): File > Export > Export Movie
   This will create a file called: pop1.swf

Step Three: Creating the Third Flash Movie - Pop Up 2

1. Open a new: Flash Movie
2. Make the Document Size: 70 x 70 pixels
   You can do this in: Modify Document
3. On Stage create a simple: Animation (This step is not essential)
4. Add the same code, as you did in the previous Movie, to the first frame:

receiver = new LocalConnection();
receiver.doAction = function(doThat) {
    if (doThat == 2) {
        getURL("javascript:self.close();");
    }
};
receiver.connect("myConnection");

5. Save your file as: pop2.fla
6. Now Export you Movie as a Flash Movie (swf file): File > Export > Export Movie
   This will create a file called: pop2.swf

Step Four: Creating the Web Page - Sender

You need to create three web pages. One for the controller / sender page, and another two: one for each of the Pop Up Movies. There is nothing special about the code that follows and you do not need to code it by hand. If you have Dreamweaver or another web editor, you can create you web pages in your editor and just drag the Flash Movie (swf file) onto the page.

1. Now create three web pages and add the following code to the Body section of the main web page:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="550" HEIGHT="400" id="sender" ALIGN="">
<PARAM NAME=movie VALUE="sender.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="sender.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" NAME="sender" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>

Note: sender.swf is the name of the Flash Movie that sends the info to the other Movies and the size of the Movie will be 550 x 400 pixels.

2. Save the page as: sender.html

Step Five: Creating the Web Page - Pop 1

1. On the second web page in the Body section, add the following code for the first Pop Up:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="468" HEIGHT="60" id="pop1" ALIGN="">
<PARAM NAME=movie VALUE="pop1.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FF0000>
<EMBED src="pop1.swf" quality=high bgcolor=#FF0000 WIDTH="468" HEIGHT="60" NAME="pop1" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

Note: pop1.swf is the name of the Flash Movie that will open in this page and the size of the Movie will be 468 x 60 pixels.

2. Save the page as: pop1.html

Step Six: Creating the Web Page - Pop 2

1. On the third web page in the body section, add the following code for the second Pop Up:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="70" HEIGHT="70" id="pop2" ALIGN="">
<PARAM NAME=movie VALUE="pop2.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFDC5A>
<EMBED src="pop2.swf" quality=high bgcolor=#FFDC5A WIDTH="70" HEIGHT="70" NAME="pop2" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

2. Save the page as: pop2.html
3. Now make sure all the swf files you exported earlier and the web pages are all in the same folder or location on your computer.
4. Then test it. You should find that:
   
   1. If you click the first button it opens a new Pop Up Window, and if the second button pop up window is open, it will close it.
   2. If you click the second button, it will close the first Pop Up Window and open a new one.
   3. if you click the third button it will close any open Pop Up Windows.

Now although opening and closing Pop Up Windows may not seem amazing, it illustrates how you can run commands and send information to and from different Flash Movies. These flash movies can be on the same page or on different pages. You can use this example and modify it to run any function or pass any information between Flash Movies. It is highly adaptable and versatile and is simple to use. It seems to work no matter where you put the flash movies.