Paul Schoneveld

I'm mainly an ActionScript 3.0 Developer.  I do any interactive design elements on a site though and am not limited to working with Flash.  I'm experianced with Ajax, JavaScript (jQuery/MooTools), PHP, MySQL, and more.
I used to post tutorials/articles on ClickPopMedia.com and have been working as a freelancer recently.

Check out my blog where I post my portfolio of work.

View all articles by Paul Schoneveld

In ActionScript 2 the _root (or Stage) had the methods getBytesLoaded() and getBytesTotal(). In AS3, we no longer have _root, or either of the getBytes methods (on the stage at least). So, how are we going to check and display the load progress?
It's simple enough. The methods have really just been internalized and made private. We are now provided with 2 read-only properties in the stage.loaderInfo called bytesLoaded and bytesTotal.

So, to get started with your preloader, you will need some code similar to this:

public function DocumentClass() {
    //I usually throw down a stop(); on the main timeline frame 1.
    addEventListener(Event.ENTER_FRAME, handleProgress);
}
private function handleProgress(event:Event):void {
    var loaded:Number = stage.loaderInfo.bytesLoaded
    var total:Number = stage.loaderInfo.bytesTotal
    var percent:Number = loaded/total;
//    trace(Math.floor(percent*100)+"%");
    UpdateProgress(percent);
    if(loaded >= total){
        removeEventListener(Event.ENTER_FRAME, handleProgress);
        gotoAndPlay('begin');
    }
}

We avoid using the PROGRESS and COMPLETE events by using the ENTER_FRAME event. This is a matter a preference I suppose, but I have heard that PROGRESS and COMPLETE events don't work 100% of the time for the stage. Not sure why, but I find things work just fine without them.

So that bit of code is going to run a method called UpdateProgress() every frame until the movie is fully loaded. What you do in the method UpdateProgress is up to you. You could simply display the progress in a TextField:

private function UpdateProgress(prog:Number):void
{
    output_TF.text = String(Math.floor(prog * 100)+"%");
}

or you could have it slowly a mask across a load bar:

private function UpdateProgress(prog:Number):void {
   loadProg_MC.x = initX - (initX * prog);
}

OR you could make an animated movie clip (say, a sunrise) and pregress through the frames at the speed of the load progress:

private function UpdateProgress(prog:Number):void {
    var frame:Number = Math.floor(prog*200); //200 frames makes a smoother animation for preloading.  Otherwise it's jumpy.
    myPreloader.gotoAndStop(frame);
}

Or any combination or cool new idea you can come up with. That is really a project specific thing that I cannot anticipate fully for you.

Once you've built your preloader you can test it by adding some music to the stage on frame 2 or something. You might find that your preloader isn't showing up until everything is finished loading... that really defeats the purpose of a preloader don't you think?

On the next page I'm going to talk about how to avoid the common pitfalls that will stop your perfectly good preloader from doing it's job.