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?).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.

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'.