|
Steps
Optional: Download the working files for this lab
1. Copy the .fla file from Lab 4 in to a new folder called Lab 5. Rename the file yourname_lab5.fla. Open this new file in Flash.
2. Create a third Scene, and place it first so that it comes before the Intro Scene. Rename the scene from Scene 3 to Preloader.
3. In the Preloader scene we want to loop a short section of the timeline and wait for all the bits of the movie to load. In order to do this, first set a keyframe around frame 5. Right-click on that keyframe and select Actions. Write this action to loop the movie back to frame 1:
gotoAndPlay(1);
Note that we've created an infinite loop here. The movie will never finish because we're going to keep looping to the start of the preloader scene. In order to quit out of this infinite loop we'll need to set another gotoAndPlay command that will get us to the start of the Intro scene once all the bits have been loaded.
4. Create a new keyframe at Frame 1. Right-click on the keyframe and select Actions. In this action we first need to find out if the whole movie has been loaded yet. The following Actionscript will accomplish this:
if (this.getBytesLoaded() == this.getBytesTotal())
{
}
The command this.getBytesLoaded() is a Flash Actionscript command that figures out the number of bytes of the movie that have been loaded. The command this.getBytesTotal() is a Flash Actionscript command that calculates the total number of bytes that need to be loaded. So when the number of bytes loaded equals the total number of bytes we know the movie is fully preloaded on the local machine. You'll also notice that the syntax for an if statement is the following:
if (condition)
{
do this stuff between the brackets;
}
You¹ll also notice that in the if condition we use == to mean "this is the same amount as that" because = means "assign the value of that to this".
5. Okay, so now we're checking to see when the movie is finished loading, but we need to use Actionscript to send us to the start of the Intro scene once everything is loaded. Here is the completed if statement with the gotoAndPlay command added:
if (this.getBytesLoaded() == this.getBytesTotal())
{
gotoAndPlay("Intro", 1);
}
6. Now we need to add a progress bar to give the user feedback that the movie is loading. Create a new layer and rename it from Layer 2 to Content. Rename Layer 1 (where we had been writing our Actionscript) to Actions. On the Content layer, draw a rectangle on the stage to act as the container for the progress bar. Inside the rectangle draw a box that will scale horizontally to indicate progress. To start off, have the box that acts as a progress bar fill the rectangle as if it were at 100% of the overall progress.
7. In order to control the width of the progress bar, we need to convert the box you just drew to a symbol. Select the box and choose Insert > Convert to SymbolŠ Name the symbol Progress Bar and leave it as type Movie Clip.
8. In the Property palette give the symbol an instance name of PreloaderProgress. Then, in order to get the progress bar to grow out from the left to the right, change the registration point for the progress bar by double clicking on it and moving it over.
9. Now we're going to use Actionscript to determine the width of the progress bar dynamically. Right-click on frame 1 in the Actions layer and select Actions. Now change the Actionscript we had previously written to the following:
percentloaded = this.getBytesLoaded()/this.getBytesTotal();
setProperty("PreloaderProgress", _xscale, percentloaded * 100);
if (percentloaded == 1)
{
gotoAndPlay("Intro", 1);
}
The first line creates a variable named percentloaded to store the value of the percent that has been loaded as a decimal value between 0 and 1. The second line says to set the horizontal scale of the PreloaderProgress box to a percentage value based on the value we have stored in percentloaded. We have to multiple percentloaded by 100 because the setProperty function expects a value between 0 and 100, not 0 and 1.
10. Just as a touch of completeness, write LoadingŠ under the progress bar.
11. Optional: Write the total percent loaded as text next to the progress bar.
In order to test this lab, post the file on a server and watch carefully as it loads the first time. If you want to see it again, make sure you clear your web browser¹s cache so that you can see it load.
Learn More
Macromedia
TechNotes: How to create movies that download before playing
FlashKit.com's Sample Preloader's
|