Communicate: Flash Movies	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Communication between Flash Movies: Part 1

Free Flash Tutorial

This tutorial shows you how to send information or instructions from one Flash Move to another on the same web page. There is theoretically no limit to what information can be sent between each Flash Movie. You can control and communicate between any two Flash Movies on the same page or on different pages. It is also be possible to communicate between more than two Flash Movies.

Note: There is a second part to this tutorial which deals with how to send information from Flash Movies that are on different web pages or Pop Up Windows: Part 2

Example: Download the Flash file Int 121a

The above movies are what I will show you how to create in this part of the tutorial. The blue Movie on the right has 50 frames and simply plays automatically. It is the pink Movie that controls the blue Movie.

Example: Download the Flash file Int 121b

Example: Download the Flash file Int 22a

Example of opening and closing Pop Up Windows.

Note: This last example is explained in the next tutorial. Opening and closing Pop Up Windows involves JavaScript so it has been separated from this tutorial. This tutorial only uses ActionScript.

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
2. Make the Document Size: 120 x 80 pixels
   You can do this in: Modify > Document
3. Place on the Main Stage: Two buttons
   Either make your own buttons or drag them out of the Library: Window > Other Panels > Common Libraries > Buttons
4. Type under the first button the word: Stop
5. Type under the second button the word: Play
   
   
   Your Movie should look similar to this.
   
   
6. Add the following code to your Stop button:

   on (release) {
       _root.mySender.send("myConnections", "myAction", 2);
   }
   
   

7. Add the following code to your Play button:

on (release) {
    _root.mySender.send("myConnections", "myAction", 1);
}

Note: The only difference between the two bits of code is the number at the end of the second line. In one case it is a number: 1 and in the other it is a number: 2

The code above sends the number to a function in the other Movie. The number you send, will determine what the function will do. In this case either Play or Stop. It is possible to have additional buttons with additional numbers. Each individual command or set of 'Actions' would need its own unique number.


8. Add the following code to the frame 1 in the Timeline:

   mySender = new LocalConnection();
   
   Note: This sets up the variable: mySender
   

9. Save your file as: movie_1.fla
10. Now Export you Movie as a Flash Movie (swf file): File > Export > Export Movie
    This will create a file called: movie_1.swf

Step Two: Creating the Second Flash Movie

1. Open a new: Flash Movie
2. Make the Document Size: 80 x 80 pixels
   You can do this in: Modify > Document
3. Using the Text Tool drag out a small: Text Box
4. In the Property Inspector set the Text Box as: Dynamic Text
5. Give the Text Box a Variable name: displayNumber

   Note: Do not use Instance Name, it is not the same as a variable name.
   
   
   Your Property Inspector should look similar to this.
   
   

6. Using the Text Tool type under the Text box the Label: Frame Number
7. As the previous Text Box was set to Dynamic Text you will probably see that the new text (Frame Number) is also set to Dynamic text, make sure you go to the Property Inspector and reset it to: Static text
8. Add this code to the first frame of the Movie:

onEnterFrame = function () {
    _root.displayNumber = _root._currentframe;
};

myReceiver = new LocalConnection();
myReceiver.connect("myConnections");
myReceiver.myAction = function(doThis) {
    if (doThis == 1) {
        play();
    } else if (doThis == 2) {
        stop();
    }
};


9. Go to frame 50 in the Timeline and right click (Mac: Ctrl click) and select: Insert Frame
10. Test your Movie: Control > Test Movie (Short Cut Key: Ctrl + Enter)
    
    You should find that the Text Box displays the current frame number like this:
    
    
    Frame numbers being displayed as the Movie plays.
    
    
11. Save your file as: movie_2.fla
12. Now Export you Movie as a Flash Movie (swf file): File > Export > Export Movie
    This will create a file called: movie_2.swf

The ActionScript Explained

The code below displays the current frame number. It sends the frame number to the Dynamic Text Box that is on stage. The only reason for this is so that you can see if the Movie is Playing or not.

onEnterFrame = function () {
    _root.displayNumber = _root._currentframe;
};


It is the function below that does all the work. If Movie 1 sends a parameter (the numbers 1 or 2) it does the appropriate action. In this case either: play or stop

myReceiver = new LocalConnection();
myReceiver.connect("myConnections");
myReceiver.myAction = function(doThis) {
    if (doThis == 1) {
        play();
    } else if (doThis == 2) {
        stop();
    }
};


If you wanted additional actions you would add the extra action like this:

myReceiver = new LocalConnection();
myReceiver.connect("myConnections");
myReceiver.myAction = function(doThis) {
if (doThis == 1) {
        play();
    } else if (doThis == 2) {
        stop();
    } else if (doThis == 3) {
        do some other action;
    }
};

If you wanted two way communication between Flash Movies like in the second example (see example: Int121b) at the top of this page, you need to edit the code. Each time you use the code you would need to change all the variable names otherwise chaos will ensue! You would do this like this:


//code coming from Movie 1
myReceiver_1 = new LocalConnection();
myReceiver_1.connect("myConnection_1");
myReceiver_1.doAction_1 = function(doThat_1) {
if (doThat_1 == 1) {
play();
} else if (doThat_1 == 2) {
stop();
}
};

//code going to Movie 2
mysender_2 = new LocalConnection();

If you find this confusing download the example files Int121b and look how the variable names have been changed. Remember to look in both the buttons and the Timeline: Download Flash Samples

Step Three: Creating the Web Page

To test your Movies you need to place the swf files that you created onto a web page.

The potential for individual Flash movies interacting with one another is endless. This very simple code opens up the interaction of Flash Movies to a completely different level. It is highly adaptable and versatile and is simple to use. It seems to work no matter where you put the flash movies.