Display Download Status In Your Flash Preloader

We've all heard the hype, but you and I both know that Flash is a powerful tool, and needn't be a turn-off for users (yes, even those on dial-up connections).

You can spend a lot of time honing your sites and movies to make the Flash experience more enjoyable for your visitors. For instance, you can help smooth the playback of Flash movies by displaying a 'loading' graphic to the user while the files download, and programming the movie to start playing back only once it’s fully loaded.

However, these techniques can leave your visitors wondering 'just how long is this going to take?' Even worse, they may abandon your download before it’s completed -- let alone beginning to play.

The solution? Keep your visitors informed!

Use a feedback mechanism to inform your users of the download’s progress. Providing feedback through your Flash preloader will keep your visitors much happier, and reduce the risk of download abandonment.

The feedback you provide to users could be numeric, visual, and/or display any of:

• percentage loaded
• bytes loaded
• percentage remaining
• bytes remaining
• estimated time remaining

The Basic Mechanism

When complete, our preloader will perform the following procedure:

1. The movie starts. Stop the main timeline and display the preloader.
   
2. Calculate and display file loading status.
   
3. If the movie is still loading, return to Step 2, otherwise
   
4. Continue to play the main timeline.

Firstly, we’ll need a blank frame at the start of your movie (on the main timeline). Insert this before there's anything else on the stage.

I've also added a layer for the preloader just because I want to -- this will help keep the movie organised.

Make the first frame of the preload layer a keyframe: click on it and press F6, or select Insert > Keyframe from the menu.

Now, let’s create our preloader movie clip.

Select ‘New Symbol…’ from the ‘Insert’ menu. Name it something logical, and make sure it’s a Movie Clip, then click ok.

You’ll now see a blank stage and timeline for the new clip. Add a new layer here. Our preloader only needs two layers in total: one for the actionScript, and one for the graphics.

The Script

This is the fun part! Our new ‘preloader’ clip is going to be 3 frames long, and each of these will contain actionScript.

Now, to add code to any particular frame, it must be a keyframe. So, add a new layer, click on the second frame, and choose ‘Insert > Keyframe’ from the menu (or press F6). Click on the third frame and make it a keyframe, too. We don’t need to do this for the first frame of our movie, as, by default, the first frame is always a keyframe.

Ok. Now let’s take the process step by step, and see what we need to do to achieve in each

Step 1. The Movie Starts. Stop the Main Timeline and Display the Preloader.

In the actionScript layer, click on the first frame. If it’s not already open, bring up the ‘Actions’ window (you’ll find it under the ‘Windows’ menu).

The ‘Actions’ window has two modes, ‘Normal’ and ‘Expert’. For us to be able to type code directly into the window, it will need to be in ‘Expert’ mode. To change modes, click on the arrow in the top-right corner on the window, and select 'Expert Mode' from the drop-down list.

The Actions window will be empty. Enter the following into the actionScript window:

_parent.stop();

That’s all for frame 1 (simple, yet effective!). Let’s look at what this code does…

We use the ‘stop()’ action, because we want to stop the main timeline. But, because we’re inside the preloader movie clip, just calling ‘stop()’ is going to stop the preloader’s timeline (while the main timeline happily keeps playing).

What we need to do is send the ‘stop’ message to the main timeline. Notice the '.' (dot/full stop or period) in the statement. The best way to pass messages between timelines and movieclips is to use this ‘dot syntax’. It works liked this:

target.message

(or target.property, as we’ll see later)

In our case, ‘_parent’ is the target (the parent object is the one that contains the referring clip).

So, _parent.stop(); sends the timeline we’re within (i.e. the main timeline), the ‘stop()’ command.