Flash Preloader
by Charlie Abbott, Reader rating: 7.0
Charlie Abbott is Director of Disc7.com Ltd, a London UK-based web design firm, and founder of Best Flash Animation Site.com.
Preview this tutorial preloader example here
Preloaders are essentially a usability aid. That is a way to make a visitor's browsing experience easier (modem or broadband) by displaying a short message or detailing how long the content their looking for on your site will take to appear.
This tutorial demonstrates how to build a status bar preloader showing the size of your movie in kilobytes in Flash MX, (you can also use Flash 5 or either of the Flash MX 2004 series).
Setting up your Flash preloader
Create a new movie in Flash and add three new layers (screen shot below) called Labels, Actions and Preloader. You may have noticed i've also locked these. Locking them prevents any objects (movie clips, graphics etc.) ending up in these layers as it's generally considered best practice to keep scripts, labels and objects on separate layers.
Set up your keyframes to match the screen shot above.
Select Frame 1 of your Actions layer then opening the actions panel place in the following code:
totalBytes = Math.round(getBytesTotal() / 1024);
loadedBytes = Math.round(getBytesLoaded() / 1024);
percentDone = Math.round((loadedBytes / totalBytes) * 100);
if (_root._framesloaded>= _root._totalframes) {
gotoAndPlay("start");
}
In the first three lines we tell Flash to initialize three variables called totalBytes, loadedBytes and percentDone. The first two use the getBytesTotal() and getBytesLoaded() methods which returns an integer of the total size in bytes of the movie and amount of bytes currently loaded respectively. To retrieve the actual amount in kilobytes we divide both by 1024, then using the Math.round method to convert the floating-point numbers to the nearest integer.
The percentDone variable is the loaded kilobytes divided by the total movie size in kilobytes which we're multiplying by 100 to arrive at a number between 1 and 100.
The fourth line sets up an 'if' conditional statement, in this case if the main timeline's frames loaded is higher than or equal to the total frames, tell the play head to go to and play the Frame Label called 'start'.
Next up select Frame 2 of the actions layer and in your actions panel add the following code:
gotoAndPlay(1);
This forces the play head back to Frame 1 which updates our loading variables and checks if the condition statement is met. If you're not adding the preloader to an existing movie on Frame 3 of the Actions layer add a:
stop();to prevent your movie looping.
In the Labels layer select Frame 3 and in the properties panel add the frame label 'start'.
As soon as the conditional statement is met the play head misses out frame 2 and continues onto 'start'.
