Workshop Chapter 17. Using the LocalConnection Object for Inter-Movie Communication

CONTENTS

Workshop Chapter 17. Using the LocalConnection Object for Inter-Movie Communication

The new LocalConnection object lets one movie trigger functions in another. The steps covered in Chapter 16, "Interfacing with External Data," were straight-forward: multiple movies create instances of the LocalConnection object using a common name, and then the "listening" movie specifies which functions will be available to the other Flash movies. Although the steps might be simple, you really need to see a practical application to begin to understand how powerful the LocalConnection object really is.

In this workshop chapter, we'll build an application that uses the LocalConnection object for a help system. Users will be able to open an additional browser window and get help for any other part of the web site they visit (see Figure W17.1). Ideally, this workshop chapter will inspire other ideas. Although this example is powerful, it's rather simple. Seeing what's possible, however, should spark more ideas.

Figure W17.1. The movie in the background will send messages to the "help" window in front.

Here are the steps to follow:

1. First we'll create the help window. Because this movie will receive function calls from other movies, it will be the most complex file. Resize the document properties (Ctrl+J) so that the Stage is 300X200.

2. Create a Dynamic Text field that's almost 300 pixels wide and about 180 pixels tall. Give this field an instance name of display_txt and be sure that the line type is set to Multiline.

3. Just in case more text needs to be displayed, drag the ScrollBar component onto the display_txt Dynamic Text field.

4. Finally, you can add some static text such as "Help Info" above the field.

5. Into the first keyframe of this movie, type the following code:

   1 my_lc = new LocalConnection();  2 display_txt.text="Help will appear here.";  3 my_lc.displayHelp = function(param) { 4      display_txt.text=param;  5 }  6 my_lc.connect("incoming");

   This code should look familiar. Line 1 instantiates an instance of the LocalConnection object (into the variable my_lc). Line 2 just puts some starter text into the text field. Lines 3 5 specify that other movies connected to this movie (through a common LocalConnection name, in this case, incoming) will get access to the displayHelp function. If displayHelp were a regular function (it isn't), it would appear like this:

   function displayHelp(param){   display_txt.text=param;  }

   However, in order for other movies to have access, it must appear as a callback, as originally shown. Notice that line 6 is where we get "connected" to the incoming name. That step must appear below all the functions to which we're giving other movies access.

6. Save this movie as help.fla, and then select Control, Test Movie to publish an .swf. Start a new file (named help_sender_a.fla) and save it in the same location as help.fla.

7. Draw a few shapes in the help_sender_a movie perhaps a circle and a square. Individually, convert each to a Movie Clip. Give one an instance name of circle and the other an instance name of square.

8. Place the following code in the first frame of the movie:

    1 function triggerHelp(message){  2   var my_lc = new LocalConnection();   3   my_lc.send("incoming", "displayHelp", message);   4   delete my_lc;   5 }   6 circle.onRollOver=function(){  7   triggerHelp("This is a circle")   8 }   9 square_btn.onRollOver=function(){ 10   triggerHelp("This is a square")  11 }

   Notice that we consolidate some work by creating the triggerHelp() function that each clip will invoke. Adding more shapes later will be easy. Inside the triggerHelp() function in quick succession a LocalConnection instance is created (my_lc), the function displayHelp() (in the other movie) gets triggered, and then the LocalConnection instance is deleted. The fact that we named the variable my_lc is unimportant. (The other movie can have the same named variable without incident.) However, what is significant is that line 3 executes the send method and specifies three parameters: "incoming" (the same name as in the other movie), "displayHelp" (a string version of the function name in the other movie), and message (the value of the parameter passed to triggerHelp(), which, in this movie, gets passed as a parameter to the displayHelp() function in the other movie). Finally, you can see at the end that each clip invokes the triggerHelp() function with a parameter that contains a helpful string.

9. Create an .swf by selecting Control, Test Movie. Finally, find the folder where the two movies (help.swf and help_sender_a.swf) reside. Double-click each one and position the windows so that you can see both movies. Rollover the circle and square shapes to see help appear in the small help window.

   At this point, you can make a copy of help_sender_a and change the text messages and appearance of the shapes. Users will be able to launch any combination of movies; if the help.swf is running, they'll see the text change, as appropriate. Of course, if you want this to run in a browser, you'll have to create an HTML file for each file. If you add a bit of JavaScript, you can even make the help window appear as a pop-up that stays on top of other windows.

   You can think of help.fla as the source version of a function that's shared among several other files. As long as you don't expect to receive additional parameters, you won't ever need to adjust the various "help_sender" movies.

10. Just for fun, let's add some (arguably gratuitous) features to the help.fla. Go back to the source file and import a short sound. (I just copied a sound from Window, Common Libraries, Sounds.) Set the linkage identifier for the imported sound to chime. Next, add the following code above everything else in the first frame of help.fla:

    s=new Sound();  s.attachSound("chime");

    This creates a Sound object instance in the variable s.

11. Now just insert the following line of code within the displayHelp() definition (above or below line 4 in step 5):

    s.start();

    Now when you test the movie, a sound effect will play every time the help text changes to prompt the user.

This strategy can be very effective in other projects that have a similar structure. For example, if you plan to display several Flash movies in separate HTML table cells or framesets, one movie can contain all the audio. As the user navigates to different parts of the site, new movies can appear to contain sounds (even though they don't) and they'll load fast. This way, you could have one movie (such as "help") with all the sounds as well as a lot of small "send_help" files that cause sounds to play (even though they don't contain sounds).

CONTENTS