Preloading a Flash Movie Containing Components

If you've used any of the User Interface, Data, or Media components (including the new FLVPlayback component in Flash Professional 8), you may have noticed that the file size of your Flash movie jumps significantly. Adding a List component and a TextInput component to your Flash movie, for example, will add about 49 KB to your final .swf file's size! More importantly, by default, these components export on frame 1 of the Flash movie, as do their respective ActionScript 2.0 (AS2) class files. In this section, you learn how to move the file weight of components to another frame, so that you can create a preloader on frame 1 of your Flash movie.

Caution

If you use the visual data binding features of Macromedia components as discussed in Chapter 34, "Binding Data and Events to Components," you cannot move the components away from frame 1 of the movie. You will need to externally load such movies into another host Flash movie, as we describe later in this chapter.

On the CD-ROM

Before you begin this exercise, copy the movie_with_components_preloader folder from the ch28 folder of this book's CD-ROM to a preferred location on your computer. This folder contains the starter and finished files for the exercises. If you want to preview the starter file, run the list_flvplayback_starter.swf in stand-alone Flash Player 8 or a Web browser. This starter file is fully functional, but all of the file weight is on frame 1 of the movie.

Open the list_flvplayback_starter.fla document in the copied folder from the CD-ROM. Resave this document as list_flvplayback_preload.fla.
Create a new layer named labels. Place this layer at the top of the layer stack.
Add frames on all of the layers, up to frame 15. On frames 5 and 10 of the labels layer, add empty keyframes. Using the Property inspector, add a frame comment of //linked to frame 5. Add a frame label named preload to frame 1, and a label of start to frame 10, as shown in Figure 28-7. In later steps, you will place any exported components to frame 5 of the movie, and move the existing frame 1 elements to frame 10.
Select frame 1 of the actions layer, and drag it to frame 10 of the actions layer, below the start frame label. All of this code's execution will be deferred to this frame, after the movie has been preloaded.
Select frame 1 of the actions layer, and open the Actions panel (F9, or Option+F9 on Mac). Add the script shown in Listing 28-2. This preloading script uses the setInterval() function to continuously check the load status of the Flash movie. When all bytes of the Flash movie have loaded, the movie deletes the interval and jumps to the start frame label.

Listing 28-2: The Preloading Script Routine
```
 var nCheckID:Number; function checkLoad():Void {   var nLB:Number = this.getBytesLoaded();   var nTB:Number = this.getBytesTotal();   if(nLB >= nTB && nTB > 0){           clearInterval(nCheckID);           gotoAndStop("start");    } } nCheckID = setInterval(this, "checkLoad", 30); stop(); 
```
Tip
You can find all code listings on this book's CD-ROM. The listings are saved as .as files, such as Listing28-2.as.
Move the frame 1 keyframes on the cfp, text, and cli layers to frame 10 of their respective layers, as shown in Figure 28-8. You should no longer see the FLVPlayback or List component on frame 1 of your movie.
Create an empty keyframe on frame 5 of the text layer. On frame 1, use the Text tool to add the static text "LOADING…" to the Stage. This text appears as the Flash movie preloads with the script in Listing 28-2.
Save your document, and test it (Ctrl+Enter or z+Enter). While you're testing the movie, open the Bandwidth Profiler by choosing View ð Bandwidth Profiler (Ctrl+B or z+B). Also, make sure the View ð Frame by Frame Graph option is selected. As shown in Figure 28-9, even though the start frame (frame 10) has all of the component instances, frame 1 is still more than 64 KB. Moreover, if you choose View ð Simulate Download, the LOADING… text never appears. The movie hangs on frame 1 without displaying it, and jumps immediately to the start label when the movie has finished preloading.
The reason the Flash movie still has several kilobytes on frame 1 is that the components and their associated classes are being exported on the first frame of the Flash movie. To avoid this problem, you need to alter the Linkage settings for each component in the Library and adjust the Publish Settings for ActionScript 2.0 classes. Here's how to take care of the first half now. Open the Library panel and right-click (or Control+click on Mac) the FLVPlayback component, and choose Linkage in the contextual menu. In the Linkage Properties dialog box (Figure 28-10), clear the Export in first frame check box and click OK.

Note
Whenever you deselect the Export in first frame option, you must place an instance of the symbol somewhere on the Stage of your Flash movie. You'll perform that step shortly.
Repeat Step 9 for the List component in the Library panel. If you were performing these steps with a file of your own and your Library panel had additional components or exported symbols, you would repeat this step for those elements as well.
Once you've prevented all of the Library assets from exporting on the first frame, you need to put an instance of each symbol on the Stage of the movie. We prefer to build a Movie Clip symbol containing all linked assets first, and then place an instance of that symbol on the stage. Create a new empty symbol named linkedAssets by choosing Insert ð New Symbol. In the Create New Symbol dialog box, name the symbol linkedAssets and choose the Movie clip type, as shown in Figure 28-11.
Inside of the linkedAssets symbol, place an instance of each component from the Library, including the FLVPlayback and List components. You don't need to separate the instances on to their own layers, nor do you need to name the instances.
Go back to the Main Timeline (that is, Scene 1) of your Flash document, and create a layer named mcLinked. On frame 5 of this layer, create an empty keyframe and place an instance of the linkedAssets symbol on to the Stage at this frame. Insert another empty keyframe on frame 6 of the mcLinked layer to prevent the linked assets from persisting into the start label of the movie. Refer to Figure 28-12. Optionally, you can name the linkedAssets symbol mcLinked in the Property inspector. You won't need to address this clip with ActionScript, but naming instances is a good habit to make.
Before you can test the movie, though, you need to tell Flash to export all ActionScript 2.0 (AS2) classes on frame 5 as well. The general rule is to make sure you export the AS2 classes before or on the same frame as the first appearance of the Flash components within your movie. As such, you will set the AS2 classes to export on frame 5 of your movie. Choose File ð Publish Settings and select the Flash tab. Click the Settings button to the right of the ActionScript version combo box. For the Export frame for classes value, type 5, as shown in Figure 28-13.
Save your Flash document, and test the movie (Ctrl+Enter or z+Enter). The movie should jump immediately to the start label, and function as the original starter file did. However, if you choose View ð Simulate Download, you'll see the LOADING… text. When the movie finishes the simulated download, the movie jumps to the start label. If you view the Bandwidth Profiler (Figure 28-14), the majority of the file size is now contained on frame 5. As such, the first frame can load and display much more quickly in the Flash movie.

image from book
Figure 28-7: A timeline structure for preloading a movie with components

image from book
Figure 28-8: The start label with the Flash components

image from book
Figure 28-9: The Bandwidth Profiler showcasing the distribution of bytes

image from book
Figure 28-10: The Linkage Properties for the FLVPlayback component

image from book
Figure 28-11: The settings for the linkedAssets symbol

image from book
Figure 28-12: The timeline of the Flash movie

image from book
Figure 28-13: The ActionScript 2.0 Settings dialog box

image from book
Figure 28-14: The Bandwidth Profiler showcasing the optimized layout

On the CD-ROM

You can find the finished file, list_flvplayback_100.fla, in the movie_with_components_preloader folder, located in the ch28 folder of this book's CD-ROM.

Later in this chapter, you learn how to make a versatile loader clip that can be used in place of the LOADING… text to display an accurate loading progress indicator in the Flash movie.

Web Resource

You can search the Web for several JSFL (aka JavaScript Flash) applets that will automate the process of setting symbols' linkage properties and placing instances of them on the movie's Stage. Go to the "JSFL Utilities" section of the www.flashsupport.com/links page for more information.