By: Glenn Mitchell

April 29th, 2003

Reader Rating: 9

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.

Step 2. The Preloader Calculates and Displays the Loading Status.

How do we calculate the values?

To calculate the loading progress, there are two main functions that we’ll need to use:

1. getBytesLoaded()
   
2. getBytesTotal()

These both return numerical values for:

1. the number of bytes that have been downloaded (in the current movie)
   
2. the total number of bytes (in the current movie)

Again, we’ll use ‘_parent.’ to target the main timeline, because bytesLoaded and bytesTotal are properties of the entire ‘main’ movie.

Personally, I don’t really like bytes, they’re very small, slippery, and there are always a lot of them (moving pretty quickly).

To display something more friendly to our visitors, I’m going to turn them into kBytes, the value we usually see when waiting for data transfers and downloads.

There are 1024 bytes in a kByte, so, click on frame 2 and enter the following lines of code into the actionScript window…

kBytesLoaded = _parent.getBytesLoaded()/1024;  
kBytesTotal = _parent.getBytesTotal()/1024;

Armed with this information, we can calculate some more exciting values…

kBytesRemaining = kBytesTotal - kBytesLoaded;  
percentLoaded = 100 * kBytesLoaded / kBytesTotal;  
percentRemaining = 100 - percentLoaded;

Enter these lines of code also.

Ok, enough of that for the moment, let’s look at Step 3.

Step 3. If Still Loading, Return to Step 2, Otherwise Continue Playing the Main Timeline.

In the timeline, click on the third frame of the actionScript layer. Again, the Actions window is empty.

Now our procedure says, “If the movie is still loading, return to step 2” -- frame 2, where our information will be calculated all over again.

Hmm, ‘if still loading’… Well, we’ve got some useful info from our calculations in frame 1, how about:

if (percentLoaded < 100){  
 gotoAndPlay(2);  
}

That is, if whatever is in the brackets (percentLoaded < 100) is true, then do whatever is in the curly brackets {gotoAndPlay(2);}

That looks pretty good…

But I don’t like it! The computer’s doing its best to perform all the calculations, and it does a pretty good job, but sometimes, instead of getting to 100% you may actually end up with 99.9999999999%.

This value would leave the visitor stuck in the loader until the computer decides that 99.9999999999 is not less than 100, and personally, I don’t think it’s going to happen.

So let’s change the code to:

if (percentLoaded < 99){  
 gotoAndPlay(2);  
}

…otherwise continue playing the main timeline.

Modify the code again so that it looks like this:

if (percentLoaded < 99){  
 gotoAndPlay(2);  
 
} else {  
 
 _parent.play();  
 stop();  
}

Here,

‘_parent.play()’ sends the ‘play’ command to the main timeline, which we stopped it earlier using '_parent.stop();'

‘stop();’ will stop the current (preloader) timeline

And we’re done! (See, I told you it was the fun bit)

Test it Out

Before we try this out, we need obviously need to have our preloader in the movie (and not just in the library where it currently is).

So, go to the main timeline, click on the first frame, and drag our ‘preloader’ movie clip from the library to the stage. If you can’t find the library, select it from the ‘Windows’ menu.

Note that if you started out with a blank movie, you’ll need to add some content to it now, otherwise we can’t tell if the preloader is working. Import an image or something else that will increase the movie’s filesize, and place it on frame 2 (or some later frame) in the main timeline.

Ok, test your movie, and make sure you turn on ‘show streaming’ (under the ‘view’ menu) when the preview runs. It should wait on frame 1 until loading is complete, and then continue to play.

Brilliant!

“Ummm, yeah, but there’s nothing on stage,” you’re thinking. “I thought this was all about feedback?”

Alright, alright, I’m getting to it!

Providing Feedback

All of the following changes must be made within the ‘preloader’ movie clip, so if you’re not already there, double click ‘preloader’ in the library.

Before we look at representing the preloader’s progress visually, let’s start by displaying a numerical percentage loaded indicator.

Click on the graphics layer, and draw a text box in the center of the stage. In the ‘Text Options’ panel, select 'Dynamic Text' and type 'progress' as the name for the variable.

In FlashMX, click the Characters... button and select 'Only', then select 'Numerals' and type a '%' into the 'and these characters’ field.

If you're using Flash5, under the font embedding options, click the button marked '123' and type a percentage sign (%) into the field on the right.

This will only embed outlines for numerical characters and the ‘%’. By only embedding some characters, we reduce the bytesize of the font definition, and minimize any potential lag while the font loads.

Note that, if you wish to avoid font loading altogether, choose a system font and don't select any embedding options. This will cause the movie to use a font on the user's system rather than requiring downloaded outlines. Note however, that you will lose control over some of the display properties. System fonts are not able to be rotated, skewed, scaled disproportionately or have alpha values applied.

That’s all we need on stage, but if you test your movie now, you still won’t see anything!

What we have to do is get a message from our calculations in frame 2 into the dynamic text field we’ve just created.

Click on frame 2 in the actionScript layer, and if you’ve closed it, open the actions window again.

What we want to do now is set the variable ‘progress’ (our dynamic text field) to display something like ‘75%’. Well, not really 75, but whatever is calculated by the ‘percentRemaining’ code, which will be updated repeatedly as the movie loops through frame 1.

After the existing code, enter the following…

progress = percentRemaining add ‘%’;

This will add a ‘%’ character to the end of ‘percentRemaining’, and put the result into the ‘progress’ text field.

Test again it now!

Chances are you don’t like it. I don’t, either. The code we entered will display numbers like 27.568793256432%. In fact, because we didn't embed a decimal point with our characters, it will probably display figures like 27568793256432% which is just silly.

Although we're about to get rid of all these numbers, go back to the character embedding options and add a full stop/period/decimal point (or whatever you'd like to call it) into the field with the '%'. You might want it later.

Now, we need to chop all those decimal places off the end of our number. And there’s a nice simple way to do it.

Flash contains a whole bunch of math-related functions, one of which is ‘floor()’.

Give the floor function a number, and it will find the integer (whole number) that is immediately below it. That’s exactly what we want! ‘87.568793256432’ becomes ‘87’.

So, change the last line to…

progress = Math.floor(percentRemaining) add ‘%’;

Test it again… Beautiful!

Ok, that was percent remaining to load, but you might want something else, and, chances are, it’s just as easy.

How about those messages that say things like ‘125 of 200 kBytes loaded’

The message is a little lengthy, but let’s do it anyway -- it'll give those waiting users something to read.

progress = Math.floor(kBytesLoaded) add ‘ of ’    
add Math.floor(kBytesTotal) add ‘ kBytes loaded’;

Easy, huh?

No! Wait a minute, we’ve just added a whole bunch of characters that we didn’t include, and they may not display on a machine that doesn’t have your font installed. Click on the ‘progress’ text field and in the font embedding options add ‘ofkByteslad’ into the field to embed these characters as well.

Getting Graphic

Ok, enough with the text messages. How do you do one of those snazzy, progress-indicating loading bars?

Well, it’s really simple.

Draw a solid rectangle on the stage underneath your text field (or wherever you want it to appear, really).

With the selection tool, single click on the rectangle’s fill (this will select the fill, but not the stroke). I’m going to only scale the fill and leave behind the stroke as an indicator of the total size.

Convert the selected fill into a symbol (menu: ‘Insert’ > ‘Convert to Symbol…‘ or press F8). The Symbol Properties dialog box appears. Enter a symbol name and click ‘OK’.

Note that if you're using FlashMX, you must select a registration point option on the left in the little grid. If you're using Flash5, we'll need to fix something else in just a minute.

Now, when you create or place a movieClip on the stage, you may have noticed that you can give it an 'instance' name (this is on the 'Properties' panel in MX and on the ‘Instance’ panel in 5). This name allows the clip to be identified by actionScript, and various clip properties can inspected and controlled.

On the 'Properties' / 'Instance' (FlashMX / Flash5) panel, enter ‘loadBar’ as the instance name.

Just as we used our calculated variables to set the text in our text field, we’ll now use them to set the scale of our ‘loadBar’.

To help you differentiate them from functions and variables, property names start with the underscore character ‘_’.

The property we will set is ‘_xScale’. There’s also a ‘_width’ property, but they differ slightly. ‘_width’ sets the actual width of a clip in pixels, whereas ‘_xScale’ sets the width as a percentage of the clip's defined size.

_xScale is the best choice in this case, as we’ve just defined the clip at a size that fits perfectly into the stroke we left on the stage (when it has a scale of 100%). Our ‘percentLoaded’ value also ranges from 0% to 100%, so they should be very happy together.

Note that you could also use the width property, however, unless you wanted to scale from 0 to 100 pixels width, there would be a tiny bit more maths involved. In this situation, xScale is easier.

Now, to set the properties of a movieClip, we must tell Flash which movie we’re talking about. This is the instance name we entered before (loadBar). This is how it looks…

loadBar._xScale = percentLoaded;

It’s dot syntax again, but this time we’re using it to set a property, rather than calling a function.

Go ahead and add it to the script on frame 2. Now it looks like ...

kBytesLoaded = _parent.getBytesLoaded()/1024;    
kBytesTotal = _parent.getBytesTotal()/1024;    
kBytesRemaining - kBytesTotal - kBytesLoaded;    
percentLoaded = 100 * kBytesLoaded / kBytesTotal;    
percentRemaining = 100 - percentLoaded;    
progress = Math.floor(kBytesLoaded) add ' of '    
add Math.floor(kBytesTotal) add 'kBytes loaded';    
loadBar._xScale = percentLoaded;