Display Download Status In Your Flash Preloader

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.