How the Preloader Works
The Preloader is contained in the Home Page movie, which contains three distinct segments. From the CH03-files/CH03-Originals folder on the CD, copy the movie titled homepage.fla to the appropriate folder on your hard drive. Open the movie in the Flash application and test it.
The Preloader exists in the first few frames of the movie inside of the scene titled Preloader. Its job is to make sure all of your content is downloaded before the main section plays. The Preloader employs a script that continually checks to see if all the content in the frames of the main Timeline are present. It also contains a script that moves the green loader graphic to the right as the frames load and sends the value of the percentage of frames loaded to a dynamic text field. When all of the frames are loaded, the play head will go to the Introduction. While the preloading process is taking place, your viewer will see a green load bar graphic fill up its outline and a text field that is updated to read "100%" when all of the frames of your movie have been downloaded. Since you're playing this movie from your hard drive, all of the frames are immediately available and this section will zoom by you in the blink of an eye.
Take a look at the main Timeline of homepage.fla in Flash, and make sure you're in the Preloader scene. You'll see a green graphic load bar and a text message enclosed in a light blue boarder on a gray background. You'll see several layers, but for the purposes of explaining the Preloader, we're only concerned with three of these layers. The top layer is titled Actions and the first keyframe has a stop() action. The layer Loading MC contains the Movie Clip with the Preloader script as well as the green bar and text graphic you see on the Stage. The bottom Temp Background layer contains a graphic symbol that is filled in with gray.
The real action takes place in the Loading MC layer, so lock down all of the others and double-click the green load bar graphic. You'll be in the Timeline for the Loader Main Movie Clip.
This Clip has four layers with two keyframes per layer. The top layer is titled Scripts. The second keyframe contains the code that checks to see if the all of the frames are loaded and gives the play head to go ahead to play the rest of the movie.
Figure 3.14 The Timeline of the Loader Main Movie Clip illustrates the layer structure.
){kind=link}
Open the ActionScript panel and click the second keyframe of the top layer. You'll see the following script:
/*
This line of code figures out how many frames
have loaded out of the total number of frames.
Then it multiplies that number by 100, to get an accurate percentage.
*/
loaded = int((_root._framesloaded/_root._totalframes)*100);
/*
This line of code puts the variable "loaded" and "%" into the field
named "percentage".
*/
percentage = loaded add "%";
/*
This line of code sets the x scale of the movie clip "Bar" to the current number
in the variable, "loaded". This is so the loading bar will accuratly represent
the total percentage loaded.
*/
setProperty ("Bar", _xscale, loaded);
/*
This code sends the play head on the main timeline to the frame labled,"loadDone",
if the movie has completly loaded.
Or if the movie has not loaded yet, it sends the play head to back to the
previus frame, based on its current position.
*/
if (Number(loaded) == 100) {
_root.gotoAndPlay ("loadDone");
} else {
_root.gotoAndPlay (_currentframe -1);
}
While you won't need to alter this code, it's good to know what it does so that you understand what you can and can't safely alter in the preloader section. In simple terms, this is an if-then statement. When you invoke the statement, Flash checks to see whether all the frames are loaded. If they aren't, the Clip loops back to the first frame and waits to see whether the "all frames loaded" condition is true the next time around. While Flash is performing the frames loaded function, another script is feeding the variable named percentage to the dynamic text field. There is also a script that is tweening an instance of the Movie Clip SliderMax (named Bar) on the X axis so that as the frames load the green load bar will move to the right and fill the black outline. These scripts refer to specific variable and instance names so you must make sure that you don't alter an instance of a symbol on the Stage in a way that will interfere with the script doing it's job, such as deleting an instance and replacing it with one of your own. If you're familiar with the intricacies of ActionScripting, you can alter the code to reflect an alternate design; if not, it's best to follow the instructions as to how to alter the elements listed in the sections titled Background, Text Fields and Green Load Bar Graphic.