Preloading a Flash Movie

In this section, you learn how to preload a Flash movie whose assets are all internal. You will construct a movie timeline containing a preload section. This section contains two consecutive frames that loop until the entire movie has loaded into the Flash Player. While the movie is loading, a loader graphic updates to display the progress of the download. In the following steps, you learn how to build such a preloader.

Note 

The method described in this exercise is compatible with Flash Player 5 and higher. Later in this chapter, you learn how to adapt this method to a Flash Player 6 and higher routine.

On the CD-ROM 

Make a copy of the preloader_fp5_starter.fla file, located in the ch28 folder of this book's CD-ROM.

1. With the starter file open in Flash 8, resave the document as preloader_fp5_100.fla.

   Note 

   If you choose File ð Publish Settings and click the Flash tab, you'll notice that this movie is set to export as a Flash Player 5 movie. As such, all code is written in the ActionScript 1.0 syntax.

2. Rename Layer 1 to content.

3. Create an empty keyframe (F7) on frame 10 of the content layer. Drag an instance of the pilonsImage Graphic symbol to the Stage on this keyframe. Center the instance on the Stage. Select frame 20 of the content layer and press the F5 key to extend the layer to this frame.

4. Create a new layer and rename it labels. Place this layer at the top of the layer stack.

5. Add a keyframe on frame 2 of the labels layer. In the Property inspector, assign this frame a label of preload.

6. Add a keyframe on frame 10 of the labels layer and label this frame main in the Property inspector. Your document should now resemble Figure 28-1.

7. Create a new layer and name it mcLoader. Place this layer underneath the labels layer.

8. With frame 1 of the mcLoader layer highlighted, select the Rectangle tool. Make sure that you have a stroke and fill color specified in the Tools panel. Draw a rectangle on the Stage. In the Property inspector, size both the stroke and fill of the rectangle to 300 x 10. This rectangle is the progress bar that grows as the movie's bytes load into the Flash Player.

   New Feature 

   If you select the Rectangle tool in the Tools panel, and press the Alt key (or Option key on Mac) when you first click the Stage, you'll get a Rectangle Settings dialog box that enables you to enter the width and height of the rectangle shape to draw.

9. With the stroke and fill of the rectangle selected, press F8. In the Convert to Symbol dialog box, choose the Movie clip type. Name the symbol loaderClip and click the top left registration point, as shown in Figure 28-2. Click OK.

10. With the new instance selected on the Stage of the Main Timeline, name the instance mcLoader in the Property inspector.

11. Double-click the mcLoader instance on the Stage. In Edit mode, rename Layer 1 of the loader symbol to mcBar. Create another layer and name it frame. Make sure the frame layer is above the mcBar layer.

12. Select the stroke of the rectangle and cut it (Ctrl+X or z+X). Select frame 1 of the frame layer and paste the stroke in place (Edit ð Paste in Place, or Ctrl+Shift+V or z+Shift+V).

13. On the mcBar layer, select the fill of the rectangle. Convert this fill to a Movie Clip symbol named barClip. In the Convert to Symbol dialog box, choose the middle left registration point, as shown in Figure 28-3.

14. With the new instance selected on the Stage of the loaderClip symbol, name the instance mcBar in the Property inspector. In the Transform panel, scale the width of the instance to 1.0%, as shown in Figure 28-4. When the movie first starts to load, you do not want the mcBar instance scaled at full size (100%) — as the bytes of the movie load into the Flash Player, the _xscale of the mcBar instance increases. (You will insert the code to do this later.)

15. Create another layer and name it text. Place this layer at the bottom of the layer stack.

16. Select the Text tool and create a Dynamic Text field on frame 1 of the text layer. Place the text field underneath the mcBar instance, as shown in Figure 28-5. In the Var field of the Property inspector, assign a name of sLabel. You will use this text field to display the current percent loaded of the Flash movie. You do not need to enable the Show Border option (or other options) for this text field.

    Caution 

    Do not assign a TextField instance name to the field in the Property inspector. In order to make a Flash Player 5-compatible preloader, you can only control the contents of the field via the Var name.

17. Go back to the Main Timeline (that is, Scene 1). Select the mcLoader instance on the Stage and center it using the Align panel. Select frame 4 of the mcLoader layer and insert an empty keyframe (F7). You only need the loader instance to appear as the movie is preloading.

18. Create a new layer and name it actions. Place this layer underneath the labels layer.

19. Select frame 3 of the actions layer and insert an empty keyframe (F7). With this frame selected, open the Actions panel (F9). In the Script pane, type the code shown in Listing 28-1. Do not type the character in your actual code. This symbol indicates a continuation of the same line of code. Each line of code is explained in comments within the code.

    Listing 28-1: The Preloading Script Routine

     // nLB stores the current bytes that have loaded var nLB = this.getBytesLoaded(); // nTB stores the total bytes of the movie var nTB = this.getBytesTotal(); // nPL calculates the percent of the movie that // has loaded into the Flash Player. var nPL = Math.floor((nLB/nTB)*100); // Apply the nPL value to the X scale of the // bar instance within the loader instance mcLoader.mcBar._xscale = nPL; // Fill the percent text field within the loader instance // with the nPL value followed by the text // "% of "and the total kilobytes of the movie. For // example, when half of a 64K movie has loaded, the text // field will display "50% of 64K loaded." mcLoader.sLabel = nPL + "% of "+ Math.floor(nTB/1024) +    "K loaded."; // If the loaded bytes are greater than or equal to the // total bytes of the movie and the total bytes are // greater than 0 if (nLB >= nTB && nTB > 0) {   // Check to see if the nCount variable is greater than   // or equal to 12. If it is, execute the nested code.   // This if/else code pauses the movie once 100% of the   // movie has loaded into the Flash Player.   if (nCount>=12) {     // exit the loading sequence     gotoAndStop("main");   // otherwise, if the movie has completely loaded and   // nCount is less than 12.   } else {     // add 1 to the nCount variable     nCount++;     // continue to loop the loading sequence     gotoAndPlay("preload");   } // if the movie hasn't finished loading into the Flash // Player then execute this code } else {   // loop back to the "preload" frame label   gotoAndPlay("preload"); } 

    Note 

    In Listing 28-1, the variable named nCount is never declared with an initial value. As such, when the line nCount++ is executed, the variable nCount is both initialized and incremented by 1. In ActionScript 2.0 syntax, you can't declare a variable and increment it at the same time.

20. Save your Flash document and test it (Ctrl+Enter or z+Return). When you enter Test Movie mode, choose View ð Simulate Download or press Ctrl+Enter or z+Return again. As shown in Figure 28-6, you will see the movie's download progress reflected in the _xscale property of the bar_mc instance as well as an updating percent value and total file size in the sLabel field. When the movie is fully loaded, the loader will pause for about a second and go to the main label.

Figure 28-1: The content of this movie starts on the main label.

Figure 28-2: The rectangle artwork will be part of the loader symbol.

Figure 28-3: The barClip symbol settings

Figure 28-4: Decrease the X scale of the bar_mc instance to 1.0% in the Transform panel.

Figure 28-5: The percent field will display the current percent loaded of the movie.

Figure 28-6: The progress bar grows as the movie loads into the Flash Player.

On the CD-ROM 

You can find the completed file, preloader_fp5_100.fla, in the ch28 folder of this book's CD-ROM. You can also find a Flash Player 6 or higher compatible version of this document, preloader_fp6_100.fla, that uses a setInterval() routine. You learn more about this technique in the next section and later in the chapter.

Caution 

We recommend against using the ProgressBar component for internal preloading. This component is compatible with Flash Player 6 when the file is published with ActionScript 2.0 support. Because the component itself is nearly 60 KB, the first frame of the movie will "pause" on an empty screen until the component has fully loaded. The ProgressBar component is truly designed to work with external assets, as we discuss later in this chapter.