Macromedia Flash 8 Bible

Basic Overview of Flash Site Architecture

You can produce and distribute straight Flash content on the Web in the following two primary ways:

• Create several small .swf files, with each one living within a standard HTML page on a Web site.

• Create one HTML page that hosts one main .swf file that loads additional content through the Flash Player plug-in.

Figure 28-15 illustrates these alternatives.

Figure 28-15: The diagram on the left illustrates a Web site that uses multiple HTML pages, each with an individual .swf file. The diagram on the right shows a Web site that uses one HTML page (or frameset, or iframe) that has one primary .swf file, which loads other .swf files as needed.

If you decide to break up your Flash movies across several HTML pages, your Web visitors will experience the following:

• Short download times for each page

• Easy bookmarking of discrete sections of your Web site

• Abrupt transitions between each section of the Web site

However, if you use one primary Flash movie in one HTML page (or frameset), your visitors will benefit from:

• Short download times for each swf file (download times vary with file size)

• Seamless integration of new Flash content

• Controllable transitions between SWF asset changes

Which method should you use for your Flash projects? The answer depends on the specifics of each Web project. You may decide to use a combination of both methods, especially for larger sites that use several Web technologies (Apple QuickTime, Macromedia Flash and Shockwave, Real Systems RealOne, Microsoft Windows Media, and so on). In either scenario, you can use the loadMovie() action to manage Flash content more easily.

Storing Multiple Movies

You may already be wondering how these newly loaded movies are managed relative to the original movie. Macromedia Flash uses the metaphor of levels to describe where the movies are kept. Levels are something like drawers in a cabinet: They are stacked on top of each other and can contain things. You can place things in any drawer you like, but once a drawer is full, you have to take its contents out before you can put anything else in. Initially, the bottom level, referred to in ActionScript as _level0 ("Level 0"), contains the original movie, the first movie that loads into the Flash Player. All movies subsequently loaded into the Flash Player must be placed explicitly into a target level. If a movie is loaded into Level 1 or higher, it appears visually on top of the original movie in the Player. If a movie is loaded into Level 0, it replaces the original movie, removing all movies stored on levels above it in the process. When a loaded movie replaces the original movie, it does not change the frame rate, movie dimensions, or movie background color of the original Flash Stage. Those properties are determined by the original movie and cannot be changed, unless you load a new HTML document into the Web browser. You can also use a getURL() action to load a new .swf file into the browser to "reset" the Flash Player.

Loading an External .swf File into a Movie

A new movie is imported into the Flash Player when a loadMovie() action is executed. In the following steps, you'll learn how to make a button click load an external movie named bandwidth.swf.

1. Create a new Flash document (File ð New). Save this document as loadMovie_100.fla in the same location as your copy of the bandwidth.swf file.

2. Rename Layer 1 to cbtLoad.

3. Drag an instance of the Button component from the Component panel to your document's Stage. Place the instance in the lower-left corner of the Stage. In the Property inspector, name the component cbtLoad. In the Parameters tab, select the label field and type Load Movie. Refer to Figure 28-16 to see these settings.

   Cross-Reference

   We discuss components more thoroughly in Chapter 33, "Using Components."

4. Create a new layer and rename it actions.

5. Select frame 1 of the actions layer and open the Actions panel (F9, or Option+F9 on Mac). In the Script pane, type the code shown in Listing 28-3. This code creates a listener for the cbtLoad instance. When the cbtLoad instance is clicked, the bandwidth.swf movie loads into Level 1.

   Listing 28-3: The Listener Code for the cbtLoad Instance

   var cbtLoad:mx.controls.Button;
   
   var oLoader:Object = new Object();
   oLoader.click = function(){
      loadMovieNum("bandwidth.swf", 1);
   };
   
   cbtLoad.addEventListener("click", oLoader);
   
   

   Caution

   The URL used in loadMovie() or loadMovieNum() actions contains the network path to the movie file that you want to load. That path must be specified relative to the location of the page that contains your main movie, not relative to the location of the movie itself. If you are designing a Web site for early browsers, pay attention to the URL path. Internet Explorer 4.5 (or earlier) for the Macintosh does not resolve paths correctly. For more information, please see Macromedia's tech note at: www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_13638

6. Save your Flash document and test it by choosing Control ð Test Movie (Ctrl+Enter or z+Return). When you click the cbtLoad instance, the bandwidth.swf movie's top-left corner aligns with the top-left corner of the hosting SWF's stage (see Figure 28-17). You can reload the same .swf file by clicking the Load Movie button again.

Figure 28-16: The cbtLoad instance

Figure 28-17: The bandwidth.swf file loads into the top-left corner of the Stage.

You can apply this technique to any .swf file that you wish to load into another Flash movie. You can make a series of buttons, each one loading a different .swf file. You can modify the click() method of the oLoader object to switch the URL of the loaded movie, depending on which button is pressed.

When a movie is loaded above any other movie (including the main movie), the Buttons and Movie Clips in the movies on lower levels will continue to be active, even though they may not be visible. To prevent this undesired behavior, you need to send movies on lower levels to an idle or blank frame where no buttons are present. Do that by adding a goto action before your loadMovie() action that sends the current movie to the idle frame. This technique is known as "parking" the movie. If you have to park multiple movies, you'll need to know how to communicate between movies on different levels. We will discuss this shortly.

_level0 or _root: What's the Difference?

You may have seen the Main Timeline referred to as _root in ActionScript. If you don't employ Levels in a Flash movie, _root always refers to the Main Timeline of the Flash movie that is loaded into a browser. However, if you start to use levels to load external SWF files, _root will be relative to the level that's executing actions.

For example, if the main movie uses a _root reference in an action, such as:

_root.gotoAndStop(10);

the Main Timeline Playhead will go to frame 10 and stop.

If a loaded movie has the same action within its timeline, it will go to frame 10 on its timeline and stop.

While this works with movies that are loaded into level locations, it will not work with Movie Clip instance targets. As you'll see in the following sections, a movie loaded into a Movie Clip target becomes an instance located within the level that the Movie Clip target resides. Therefore, _root will still refer to a different timeline than that of the loaded .swf file.

Flash Player 7 introduced the _lockroot property of MovieClip objects, which enables MovieClip objects to act as _root references to loaded movies. We discuss this property in Chapter 25, "Controlling Movie Clips."

How Flash Handles Loaded Movies of Differing Dimensions

A movie loaded onto Level 1 or higher that is smaller in width and height than the Level 0 movie is positioned in the top-left corner of the Stage. You may have noticed this phenomenon in the last section. In this situation, it is possible to have elements that are off-stage within the loaded .swf file. However, when you load a smaller .swf file Stage into a larger .swf file Stage, these off-stage elements are displayed on the Stage of the larger .swf file. To prevent objects from being displayed, you would have to create a curtain layer or a Mask layer above all the other layers in the Level 1 movie that covers up the Work area (the space outside the movie's Stage).

Movies loaded onto Level 0 that are smaller than the original Level 0 movie are automatically centered and scaled up to fit the size of the original movie. (The manner in which they are scaled depends on the Scale setting in the Publish Settings.)

Movies loaded onto Level 0 that are larger than the original Level 0 movie are cropped at the right and bottom boundaries defined by the original movie dimensions.

Placing, Scaling, and Rotating Externally Loaded Flash Movies

Especially when your movies have different width and height dimensions, it's not very convenient to have newly loaded movies dropped ingloriously in the top-left corner of the Stage. To give you more flexibility with the placement, rotation, and scale of your loaded movies, ActionScript provides the capability to load a Flash movie file (.swf) into a Movie Clip instance. So far, this may not make a whole lot of sense. Loading a movie into a Movie Clip instance seems like a strange feature at first, until you find out what it can do — then it seems indispensable. The easiest way to understand what happens when you load a movie into a Movie Clip is to think of the loadMovie() action as a "Convert Loaded Movie to Movie Clip" action.

When a movie is loaded into a Movie Clip instance, many attributes of the original Movie Clip instance are applied to the newly loaded movie:

• The timeline of the loaded movie completely replaces the original instance's timeline. Nothing inside the original Movie Clip (including actions on keyframes) remains.

• The loaded movie assumes the following properties from the original Movie Clip instance:

  • Instance name

  • Scale percentage

  • Color effects, including alpha

  • Rotation degree

  • Placement (X and Y position)

  • Visibility (with respect to the _visible property)

• Any onClipEvent() handlers (and actions within them) that are written for the original Movie Clip instance will still be available (and executing) on the loaded movie.

• Any event handlers, such as onMouseMove() or onEnterFrame() or variables assigned to the original Movie Clip instance, will be erased once an external .swf file is loaded into the instance.

We like to refer to Movie Clips that are used to load other movies as Movie Clip holders. Usually, you load movies into empty Movie Clips that don't have any artwork or actions. However, because you may need a physical reference to the actual area that your loaded movie will occupy on the Stage, it's useful to create temporary guides or artwork that indicates this area.

The following steps show you how to create a Movie Clip holder and how to load an external .swf file into it. You will use the same file you created in the previous section.

1. Open the loadMovie_100.fla document. Resave this document as loadMovie_101.fla.

2. Create a new layer on the Main Timeline and rename the layer to mcHolder. Place this layer at the bottom of the layer stack.

3. Select the Rectangle tool and draw a rectangle on frame 1 of the holder_mc layer. The shape should have the same dimensions as the external Flash movie's Stage, as defined in its Document Properties dialog box. For our example, size the rectangle to 640 x 400 using the Property inspector.

   Note

   You do not need to include an outline (or stroke) with the rectangle artwork.

   Tip

   With Flash 8, you can select the Rectangle tool and Alt/Option+click the Stage to enter custom width and height settings for a new rectangle shape.

4. With the rectangle selected, choose Modify ð Convert to Symbol or press the F8 key to convert the artwork into a symbol. In the Convert to Symbol dialog box, name the symbol holderClip and choose the Movie clip type. In the Registration grid, click the top-left corner point, as shown in Figure 28-18. Movies loaded into Movie Clip instances load from the top-left corner of the original target Movie Clip.

5. With the new instance on the Stage selected, name the instance mcHolder in the <Instance Name> field of the Property inspector. Position the instance on the Stage, where you want the external SWF movie to appear. At this point, you can also tween, scale, or apply any color effect to the instance as well. For our example, apply an orange tint to the instance in the Property inspector.

   Caution

   Filter effects are not passed on to loaded movies. Any filter effect applied to an instance prior to loading will be removed on the new load.

   Now, you need to modify the click() handler of the oLoader object called by the cbtLoad component instance (already on the document's Stage). This method needs to target the mcHolder instance.

6. Select frame 1 of the actions layer on the Main Timeline. Open the Actions panel (F9, or Option+F9 on Mac), and change the loadMovieNum() action to the following lines shown in bold:

   var cbtLoad:mx.controls.Button;
   var mcHolder:MovieClip;
   var oLoader:Object = new Object();
   
   oLoader.click = function(){
      mcHolder.loadMovie("bandwidth.swf");
   };
   cbtLoad.addEventListener("click", oLoader);
   
   

   Note

   The instance must be resident on Stage at the time the loadMovie() action occurs. Any instance can either be manually placed on a timeline or created with ActionScript code, such as the duplicateMovieClip(), attachMovie(), and createEmptyMovieClip() methods. If any specification of the loadMovie() action is incorrect, then the movie will fail to load. The Flash Player will not start a request for an external .swf file if the Movie Clip instance target is invalid.

7. Save the Flash document, and test it (Ctrl+Enter or z+Enter). When you click the Load Movie button, the bandwidth.swf file will load into the top-left corner of the mcHolder instance. The orange tint effect applied to the mcHolder instance will also be applied to the loaded movie.

Figure 28-18: An instance of the holderClip symbol will hold the loaded .swf file.

To avoid seeing the rectangle artwork in your final Flash movie, go into the Movie Clip symbol for holderClip and turn the layer containing the rectangle artwork into a Guide layer. Guide layers will not export with the .swf file. Also, add a new empty layer on the holderClip timeline. This empty layer can be above or below the original artwork layer.

If you need to add functionality to the loaded movie, use ActionScript to control the new loaded movie instance. The next section shows you how to communicate with loaded movies.

loadMovie() versus loadMovieNum()

You may have noticed that a loadMovie() action is used with Movie Clip instances, whereas loadMovieNum() is used with a level location. Because you can specify variables (that point to dynamic targets) as a location value, ActionScript needs a way to distinguish a numeric level location from a Movie Clip instance.

Also, if you want a loadMovie() action to be compatible with Flash Player 4 (or earlier), you will need to specify the Movie Clip target name as a string (that is, enclosed in quotes).

Communicating between Multiple Movies on Different Levels

After a movie or two are loaded onto different levels, you may want each timeline to control the other, just as Movie Clips can control each other. To communicate between different levels, you simply need to address actions to the proper level. The method for addressing a level that controls a timeline on a different level is identical to the method for addressing a Movie Clip target that controls the timeline of another Movie Clip instance, except for one small change. You have to indicate the name of the level you want to target rather than the name of the Movie Clip. Level names are constructed such as this: First, there's an underscore (_); then there's the word level; then there's the number of the level that you want your action to occur on.

This tells the movie loaded onto Level 1 to go to frame 50:

_level1.gotoAndStop(50);

This tells the Main Timeline to go to frame 50:

_level0.gotoAndStop(50);

You can also target Movie Clips that reside on the timelines of movies on other levels. Here's an example:

_level3.mcProducts.play();

This sends a play() action to the Movie Clip named mcProducts on the timeline of the movie loaded onto Level 3.

Unloading Movies

To lighten the memory required by your Flash movies in the Flash Player or to clear the loaded movie from the Stage, you can explicitly unload movies in any level or Movie Clip target by using the unloadMovie() action. The only option for unloadMovie() is the path to the desired location (for example, _level1, _root.instanceName).

Loading External Files Through Proxy Servers

If you are creating Flash movies that will be loaded through proxy servers set up by internal company networks or large Internet service providers (ISPs) on the Internet, you may need to know how to trick them into loading "fresh" .swf files every time a user visits your site. What is a proxy server? With the growth of high-speed Internet connections, such as DSL and cable, many networks will process all outgoing HTTP requests through a go-between computer that caches previous requests to the same URL. Anytime you type a Web site URL into a browser, you're m aking an HTTP request. If that computer, called a proxy server, sees a request that was made previously (within a certain time frame), then it serves its cached content to the end-user instead of downloading the actual content from the remote server.

Why do you need to be concerned about caching? If you or your client needs accurate usage statistics for a Web site, you will likely want to know which portions of the site your users are actively using (that is, downloading into their browsers). Your Web server will not log a request it never receives — if a proxy server delivers the content to the end-user, you will not even know a user is looking at your content.

When a Flash movie makes an HTTP request with a loadMovie() action, a proxy server may serve the cached .swf file instead of the one that actually exists on your server. Why is this a problem? If you are updating that .swf file frequently or if you want precise Web usage statistics for your Flash movies and content, then you'll want users to download the actual .swf file on your server each time a request is made.

The question remains: How do you trick a proxy server into serving the real .swf file instead of its cached one? The proxy server knows what's in its cache by the URL for each cached item. So, if you change the name of the loaded Flash movie each time you make a request for it, the proxy server won't ever see an identical match with its cached content.

To change the name of a loaded Flash movie, simply add a random number to the end of the movie's name in the loadMovie() action. This random number won't actually be part of the movie's filename. Rather, it will appear as a query at the end of the filename. Place the following actions on the event handler that initiates a loadMovie() action:

var sDate:String = escape(new Date().toString());
mcHolder.loadMovie("external_1.swf?cacheBuster=" + sDate);

In the preceding example, a variable called sDate is established and given a value of the current date and time. Each time the event handler calling these actions is executed, a different date is appended to the filename of the loaded movie. The proxy server thinks that each request is different and routes the request to your Web server.

Not only does this method prevent a proxy server from serving a cached Flash movie file, it also prevents some browsers from caching the loaded movie in the user's local cache folder.

LoadMovie() as a Method for Movie Clip Targets

Both loadMovie() and unloadMovie() can be used as either an ActionScript method or action for Movie Clip targets. What does this mean? You can apply some actions in ActionScript in two ways: as methods of a MovieClip object (or some other ActionScript object, as we have discussed in previous chapters) or as a stand-alone action.

As an action, loadMovie() and unloadMovie() start the ActionScript line of code. When you use actions in this manner, the target of the action is specified as an argument (option) within the action. In the following example, the file external_1.swf is loaded into the mcHolder instance:

loadMovie("external_1.swf", "mcHolder");

As a method, actions are written as an extension of the object using the action. Therefore, the target is already specified before the action is typed. The same example shown previously could be rewritten as a method of the holder_mc MovieClip object:

mcHolder.loadMovie("external_1.swf");

or

_root.mcHolder.loadMovie("external_1.swf");

Because we have specifically referenced the mcHolder instance as an object, the loadMovie() action (now a method) knows where to direct the loading of external_1.swf.