Intermediate Demo Authoring: Preloaders

So far, we haven't much dealt with delivering Flash to the Web, but of course, this is where most of it is bound. Flash SWFs are streaming media, meaning that they will begin playing in the Flash player before they are fully downloaded by a user. (Technically, they are a progressive download type of streaming media.) This is great, because someone downloading your SWF doesn't have to wait, but bad because the player can end up playing faster than the download, causing your movie to stall.

To prevent this, Flash authors create preloaders, small animations that play on frame 1 while code tests the rest of the movie to ensure it is loaded. When the last frame or byte has loaded, the preloader's code sends the movie to frame 2, allowing the movie to play in its entirety.

1. Old Skool Preloader

This is the easiest preloader to understand, but its methods are being deprecated. Still, for the time being, till you understand more about ActionScript, this will stop the gap.

When we made the first player, we really only needed to put all our objects (buttons, frames, etc.) on the first frame of the timeline. The button events did all the work, reaching out to the external SWFs and loading them into an empty movie clip. To have animations, obviously we need to have more room to move. We'll create "bands" in the timeline for each. Your finished timeline with layers will look something like this, and I'll refer back to this image:

> Make a looping animation in a movie clip

Make a new movie clip and call it "preloader_mc". In it, create some sort of animation that says something like "Loading".

> The preloader needs its own frame on frame 1

At the top of the movie you want the preloader for, create a new frame 1 that has nothing but empty keyframes on it. Make a new layer near the top of the stack called "PRELOAD". Place an empty keyframe on frame 2 of the layer, to prevent the preloader playing on anything but frame 1.

> Make a looping animation in a movie clip

In the ACTIONS layer, place a stop();. Let's say the last frame on the timeline is 23; you would then place this function:

ifFrameLoaded (23) {
gotoAndPlay(2);
}

The "ifFrameLoaded()" function is, as I said, being depricated (removed from use), but will work for some time to come. The code tests to see whether frame 23 has downloaded. If it has, the playhead will go to frame 2 and play the rest of the movie.

1. New Skool Preloader

New preloaders don't test for frames loaded, but for the number of bytes loaded versus the total number of bytes in the movie. This is a much more exact way to do things, but the code is far more complex.

Above is a standard preloader set up, with a stop and a preloader clip on the first frame, and nothing else.

Here is a preloader clip. As the movie loads, the percentage readout will show in the dotted-line text box, and the sliver of black beneath the "Loading" text will grow into a bar.

Here's a look inside the preloader clip.

Below is the code that goes on the preloader clip:

onClipEvent (enterFrame) {
loaded = _parent.getBytesLoaded();
total = _parent.getBytesTotal();
percent -= (percent-((loaded/total)*100))*.25;
//per = int(percent);
perc = Math.floor(percent);
percentage = perc+"%";
loadBar._width = perc;
if (percent>99) {
_parent.gotoAndStop(2);
}
}