Rounded Bar Percentage Preloader for Flash Tutorial

By Evan Mullins | Published: 22 September 2008

I’ve had a couple inquiries about how to do a simple preloader in Flash. The technique and also the actionscript which implements the technique. So here is a percentage preloader example with source code and a source file to play with.

Overview

So the idea of a preloader is to hold the swf until the file has sufficiently loaded. Once it’s is fully loaded, then the preloader advances to swf to the actual content.

There are different types of preloaders: status preloaders and percentage preloaders. Status preloaders only tell you the status of the loading file. So it will have a simple looping animation like a spinning wheel and you just wait until it is fully loaded. Percentage preloaders will actually tell you how much has been loaded or how much is left and usually will have a bar or something that fills as the file loads or at least tell you in numbers how much has been loaded.

These techniques require the same first few steps. As you can guess, the percentage preloader takes a couple extra steps, but it is much worth the extra few minutes in my opinion. It gives the users valuable information about the program or file they are waiting on. If they are waiting and have no idea how much longer their wait will be, who knows how long they will stick around and watch an hourglass.

In actionscript the only special methods we use for a preloader are getBytesLoaded and getBytesTotal. Once we know the bytes loaded and the total bytes to load, with a little math we calculate what percentage is loaded.

Steps

Hold the viewers at frame 1
Check if file is loaded yet (percentLoaded)
If not loaded, update display (if applicable) and check again
If loaded, continue

Example

This is a preview, note that it is not actually a preloader, just what one looks like. You can see this preloader working in my Interactive Image Viewer…

Actionscript

I’ve put this code on the preloader movieclip which sits alone on frame one with a simple stop(); actionscript command. Frame 2 contains the beginnings of the actual content. To break down the code, we first see that it is performed every frame: onClipEvent(enterFrame), so every frame we will see how much has loaded. In this case the frame rate is 20 frames per second, so we check the amount loaded every 20th of a second!
First we find the percentLoaded by dividing the total bytes to load by the number of bytes currently loaded. Then we display the percent loaded in a text box named feedback and adjust the xscale of the orange bar according to percentLoaded. Finally we’ll check to see if the percentLoaded has reached 100 yet, and if it has we play the parent clip (which in this case is the root, but it could be used to load numerous objects on the stage). When we play the parent clip, we then go to frame 2 or the actual content of the swf and this preloader is removed from the stage and the code will stop executing. But if percentLoaded is not 100% yet this frame is repeated and the code executes all over again, finding the (hopefully) new number of bytes loaded, and updating the display to inform the user. The code executes so fast that the preloader will actually animate the loading process and inform the user simultaneously.

1
2
3
4
5
6
7
8
9
10

onClipEvent (enterFrame) {
percentLoaded = _parent.getBytesLoaded() / _parent.getBytesTotal() * 100;

this.feedback.text = "%" + Math.ceil(percentLoaded );
this.bar._xscale = percentLoaded ;

if (percentLoaded => 100) {
_parent.play();
}
}