Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Pre-Loaders

VCB424 Advanced Interactive Design IV

Pre-Loaders

Flash movies stream by default. However, it is not always desirable to have a flash file begin to play until it is fully downloaded. This is where pre-loaders (or just "loaders") come in. Pre-loaders are "mini" animations that download quickly and play in the "foreground" while the main file downloads in the "background." Some preloaders contain little animations to entertain the user, others shown a progress bar which lets the user know how much of the movie has downloaded (I like these best). With this exercise we'll create a couple different kinds from simple to more complex.

Simplest Loader

This loader just plays a little animation until the movie is fully downloaded.

  1. Open a flash file [to truly see a loader in action you need to put it at the front of a timeline of a longer movie. You may want to open an old project (like the "lip sync") to use for this. Select all frames and slide them one frame to the right to make room for the loader in frame 1].
  2. Create a new movie clip. Inside the clip, create a simple animation (like a spinning object). Put the clip in frame 1 (make sure it lasts only one frame)
  3. Create an "actions" layer (unless one already exists). Put a keyframe in frame 1 of the actions layer.
  4. Add a stop(); to the frame in layer 1. This will cause the little movie clip animation to play indefinately. To get the movie to proceed once it has downloaded we need to add an action to the movie clip itself (see next step).
  5. Select the movie clip in frame 1. Add the following action:

onClipEvent(enterFrame) {
if (_root.getBytesLoaded() == _root.getBytesTotal() ) {
_root.play();
}

}

This action compares the amout of imformation downloaded (getBytesLoaded) with the total number in the file (getBytesTotal). Once they are the same (==), the movie plays.

Try it, but be warned, if it is a small .swf file you might not see much of the loader other than a really quick flash.

Less-Simple Loader

This loader adds some text that tells the user what percentage is downloaded thus far.

  1. Open a flash file (you could just use the same file). Once again we need a frame at the beginning of a movie in which to put the loader.
  2. Make sure there is a stop(); in frame 1.
  3. Draw a dynamic text box on the stage (make sure it's in frame 1). In the Properties window, look for the "Var:" field (lower right). Type displayText (this becomes the text field's variable name).
  4. As before, create a simple movie clip and put it in frame 1.
  5. Add the following script to the movie clip:

onClipEvent(enterFrame) {
bytesLoaded = _root.getBytesLoaded();
bytesTotal = _root.getBytesTotal();
percentLoaded = Math.round(100*bytesLoaded/bytesTotal);
_root.displayText = "Loading: "+percentLoaded+"%";
if (bytesLoaded == bytesTotal) {
_root.play();
}

}

This script first creates two variables called "bytesLoaded" and "getBytesTotal." Each is then assigned a value (the number of bytes loaded so far, and the total number of bytes, respectively). Next a "percentLoaded" variable is created. Inside this variable a mathematic function divides the amount loaded by the total number of bytes to find the percentage downloaded so far. This amount is then written into the dynamic text field. As the movie plays this script is executed over and over again; each time the numbers are updated, so the percentage grows until it hits 100%. Then the main movie starts.

Complex Loader

This loader adds a graphical display—a progess bar that grows as the movie loads.

  1. Once again create a new movie, or insert a blank frame at the beginning of an existing movie, or delete the stuff we put in frame 1 of a previous loader.
  2. Draw a wide, skinny rectangle, with both fill and border colors (this will be the progress bar so size & position accordingly).
  3. Select the entire rectangle (include the border!) and convert it to a movie clip.
  4. In the movie clip timline, separate the fill and border onto two separate layers (the border layer should be above or "in front" of the fill layer). Do this by cutting & pasting.
  5. Select the fill convert it to a movie clip (so you'll have a movie clip inside a movie clip) Make sure for registration you choose the upper-left corner. In the properties window, give this movie clip the instance name barFill.
  6. Add a third layer to the movie clip timeline. Draw a dynamic text field and give it a Var name of displayText. (If you're using the loader we made previously for this exercise, make sure you delete the text field on the main timeline).
  7. Now go back to the main timeline (scene). If you still have the little movie clip from the Simplest Loader in frame 1, either delete it, or remove the action (that was added in Less-Simple Loader). We're going to put some actions on the loader bar movie clip and we don't want them to conflict.
  8. Select the loader bar movie clip. Attach the following action:

onClipEvent(enterFrame) {
bytesLoaded = _root.getBytesLoaded();
bytesTotal = _root.getBytesTotal();
percentLoaded = Math.round(100*bytesLoaded/bytesTotal);
displayText = "Loading: "+percentLoaded+"%";
barFill._xscale = percentLoaded;
if (bytesLoaded == bytesTotal) {
_root.play();
}

}

There are two differences from the previous action. First, the "_root." has been removed from the "displayText" command. The reason is that we've moved the dynamic text box into the movie clip that contain this script, so we only need what amounts to a direct, relative link. When the text field was on the main timeline, we had to reference it by its absolute path name; "_root" means that it is on the root level.

The second difference is the addition of the "barFill" line. This line causes the barFill movie clip to expand as the movie loads. Pretty slick, eh?

Test it out. You probably won't see much. However, if you upload a .swf with a loader to the server and view it there, you may see the loader in action.

Course Outline

Syllabus

Student Resources