ActionScript.org Flash, Flex and ActionScript Resources - http://www.actionscript.org/resources
Adding a PreLoader to your AS3 project
http://www.actionscript.org/resources/articles/752/1/Adding-a-PreLoader-to-your-AS3-project/Page1.html
Paul Schoneveld
I'm a hard core ActionScript 3.0 programmer.  I wouldn't go back to working in AS 2 if you paid me (well, how much are you offering?).
I work for ClickPopMedia as their lead ActionScript/Flash developer.
 
By Paul Schoneveld
Published on April 8, 2008
 
Difficulty: Easy
Time: 15 minutes
Expected knowledge: Understanding of events and basic animation using ActionScript 3.0

Description: I’m going to walk through the steps of making a preloader for your animation, game, or application in ActionScript 3. Making a preloader in AS3 is more difficult to figure out then it was in AS2, but the code itself is not any harder to understand.

Creating your preloader

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:
[as]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');
}
}[/as]


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:
[as]private function UpdateProgress(prog:Number):void {
output_TF.text = String(Math.floor(prog * 100)+"%");
}[/as]


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

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

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

[as]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);
}[/as]

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.


Common Pitfalls
So, we've got our preloader made and sitting there on frame 1 and as far as we can tell it SHOULD work just fine.  So why isn't it showing us your load progress?  Why isn't it showing up at all until the load progress is done?
The answer we seek is in the "linkage properties" of our library symbols.
Uncheck Export in first frame

If you leave checked [default] the checkbox "Export in first frame" then the first frame of you Flash Movie won't play until that library symbol is loaded.  In other words, your preloader won't be displayed until almost everything in your library is loaded.

So now the scenario goes that you've gone through your library and unchecked that box for all the symbols, FLVs, graphics, images, and sound objects that are exported for ActionScript.  But, when you try and run your movie/game/application you get error messages saying that some class or object that you made doesn't exist!  Well you know that's not true because it existed before you unchecked "Export in first frame."

The new problem that we are running into is that Flash is loading code that implements library items that haven't finished loading yet.  Even though that code isn't being executed, it is still checking all the references withing it to make sure they exist.
The solution to this problem?  Instead of exporting in the first frame like we were doing before, we will export in the second frame!

It feels a little messy to do this, but it will never be noticed by the end user.  You have to drag one instance of each sound object, MovieClip, etc. that has checked "Export for ActionScript" onto the stage in the second frame. Then create an empty keyframe on frame 3 and start you animation/game/app there.  Your preloader goes to the frame label 'begin' when it's done loading, so just add that label to frame 3 and the end user will never see frame 2 with all that stuff on it.

The final issue that could arise for you, is IF you are using a Document Class (and if you don't know what that is, it's the class file associated with your movie.  You set it in the document properties) then all of your code is loaded on frame 1 and frame 2 is already too late to load your library.
Well, if you've written clean code using all the proper practices, then you will be able to turn your entire animation/game/app (not including the preloader) into one big MovieClip and associate your original document class with that.  Then add that movie clip to the stage at label 'begin'.