Generic Flash Preloader

With the introduction of Flash Mx came numerous actionscript improvements. One of which setInterval proves really handy for building preloaders. This function lets us control when to execute a procedure, thus relieving us from having to depend upon for example onEnterFrame event loops.

I have build a generic preloader that you can use out of the box with any existing or new flash project of you own. The idea was to provide a simple and efficient solution that could serve as the foundation for much more sophisticated graphical design.

Recipe

These are the most important steps for building a preloader like the one I have provided here. You can safely skip this chapter and continue reading under usage or download if you are not too concerned about the inner workings of the tool.

1. Create a new fla file
2. Press F8 to create a new symbol, select movieclip
3. Name it something reasonable
4. Rename the first layer “Progress bar”
5. Create a rectangle with the dimensions you prefer for your progress bar symbol.
6. When you are done with the graphics, convert it to a movie clip with a name like “progressbar graphics”
7. Make sure you set the registration point in the corner instead of the middle.
8. Name the instance “progressbar”
9. create a new layer called “Text”
10. In the text layer, insert dynamic text fields to hold the numeric progress information. Use variable names from the code.
11. All labels on the text layer if necessary
12. Add a new layer and name it “Action”
13. Write the following code in frame 1 of the action layer:

         _parent.stop();
         function preloader() {
            bytesloaded=_parent.getBytesLoaded();
            bytesTotal=_parent.getBytesTotal();
            percent=Math.round(bytesLoaded/bytesTotal*100);
            if (bytesLoaded>=bytesTotal) {
                _parent.play();
                clearInterval(ms);
            }
           progressBar._xscale=percent;
         }
         ms=setInterval(preloader, 10);
    

And that’s really all there is to it.

Usage

1. Make sure you insert a new keyframe in the first frame.
2. Import the preloader and drag it to the stage in frame 1

That’s it – you are ready to go. Make sure you upload your swf file to a server and test it from your browser, otherwise it might load to fast for the preloader to surface.

Download

I have made two versions of the package available with source code:

1. The full demonstration package including a tiny video in order to give the preloader gets some exposure is available here: [download#1#nohits]
2. A lean package with just the preloader followed by a single frame with some text. This is what you want, if you just want the preloader functionality. Get it here: [download#2#nohits]