Internal PreLoading in ActionScript 3

Paul — Mon, 07 Apr 2008 17:26:42 +0000

I’m going to walk through the steps of making a preloader for your animation, game, or application and provide easily implemented source files that you can copy and change to fit your own project. Making a preloader in ActionScript 3 is more difficult to figure out then it was in ActionScript 2, but the code itself is not any harder.

To start off, you can access the stage’s bytesLoaded and bytesTotal through it’s loaderInfo.
Once you know that, building a preloader becomes very easy:

package {
import flash.display.MovieClip;
import flash.text.TextField;
import flash.events.*;

public class ClickPopPreLoader extends MovieClip {
var initX:Number;

public function ClickPopPreLoader() {
initX = loadProg_MC.x;
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);
/*stage.getChildAt(0) can cause an error message that is
really a warning. Turn off Strict mode in "Publish Settings"
and it will compile just fine.*/
stage.getChildAt(0).gotoAndPlay(‘begin’);
}
}
private function UpdateProgress(prog:Number):void {
loadProg_MC.x = initX – (initX * prog);
output_TF.text = String(Math.floor(prog * 100)+"%");
}
}
}

The code is so short I would feel silly cutting it up.

The code above would be a class file for a MovieClip that contains another MovieClip called loadProg_MC that acts as a mask for some kind of load bar (in my example it’s unmasking the glow behind the words “Click Pop Media”). The MovieClip would also have a TextField called output_TF to display the % loaded.

Notice that I’m using the ENTER_FRAME event rather then the PROGRESS event. You really could use the PROGRESS and COMPLETE events, but I’ve heard that it doesn’t work consistently in IE6 on PCs (supposedly that has been fixed in Flash Player 9.0.115). I haven’t really checked this myself because I don’t have Internet Explorer 6, but I just take their word for it because ENTER_FRAME works just as well.

Once you get the stage.loaderInfo what you do with it and how you display the load progress is up to you. That’s actually not the part that raises questions for most people. What usually happens is that they will add all the right code and make a really good preloader animation and then when they test it out… the preloader doesn’t show up until AFTER everything is loaded.

The problem that we run into is that Flash Player loads a movie starting with frame one and then works its way up. Although you may only have your preloader on frame one you need to take a look at the “linkage” of each of your library items.

The checkbox, which by default is selected, called “Export in first frame” needs to be unchecked for as many, if not all, of your library symbols (especially larger items like sounds and music). “Export in first frame” means that until this item is loaded the first frame can’t play. Thus, if everything is exported in the first frame then your preloader won’t have a chance to show anything loading before it’s already done.

This leads to another problem though! If you are creating instances of your library symbols dynamically using ActionScript and that code loads before the symbol does, then you will get runtime errors. This isn’t really a problem if you have a pure animation without any code. For a game though, avoiding this little problem is messy, but it can be done easily enough and without being noticed by the end users.

What you have to do is, in a frame BEFORE any of your main code, create one instance of each library item that is going to be instantiated dynamically… but still after your preloader. A good practice would be to have your preloader on frame 1 and then all your instances on frame 2. When your preloader is done (and maybe the play button is clicked) it will jump PAST frame 2 and go straight to the beginning of your animation/game/app.

————————————————————————————-

For those of you who either don’t want to turn off strict mode or want to avoid OOP (Object Oriented Programming), here is the same code I gave you before, but modified to reside on the stage instead of in a class.

var initX:Number = PreLoader.loadProg_MC.x;
addEventListener(Event.ENTER_FRAME, handleProgress);

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’);
}
}
function UpdateProgress(prog:Number):void {
PreLoader.loadProg_MC.x = initX – (initX * prog);
PreLoader.output_TF.text = String(Math.floor(prog * 100)+"%");
}

You can also make a document class if you wanted (for those who like OOP, but still want to keep Strict mode for some reason), but I’m not going to get into that here.

As promised, here is the source files to a working preloader: ClickPopMedia Preloader
There is instructions all over the place within those files.

ClickPopMedia » PreLoader

Internal PreLoading in ActionScript 3