Display Download Status In Your Flash Preloader

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!