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.
-
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.
|
-
Rename Layer 1 to content.
-
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.
-
Create a new layer and rename it labels. Place this layer at the top of the layer stack.
-
Add a keyframe on frame 2 of the labels layer. In the Property inspector, assign this frame a label of preload.
-
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.
-
Create a new layer and name it mcLoader. Place this layer underneath the labels layer.
-
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.
|
-
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.
-
With the new instance selected on the Stage of the Main Timeline, name the instance mcLoader in the Property inspector.
-
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.
-
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).
-
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.
-
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.)
-
Create another layer and name it text. Place this layer at the bottom of the layer stack.
-
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.
|
-
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.
-
Create a new layer and name it actions. Place this layer underneath the labels layer.
-
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.
|
-
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.
