Preloader in Flash Develop

From my previous post, once you have started to embedding swf (huge ones especially) you probably notice that while loading, you are faced with a blank screen or suffers from preload animations... depends on how your project is. So there must be something to do away with this... ... something called preloader. Thankfully, there is a project type in Flash Develop called..."AS3 Project with Preloader"

What it does is it creates a project with a preloader.as. Yup...

And if you view in the Main.as, you will spot the preloader in the

[Frame(factoryClass="Preloader")]

Just compile away and you have your very own swf with a preloader.

Now look into preloader.as

You get comment sections like

// TODO show loader 
// TODO update loader
// TODO hide loader

They are simply placeholders that you can add codes into.

Now in a preferred situation, you will want to add a background image in your preloader. First make an image. I name mine "preloading.jpg"

Put it in the same directory as the codes and add in

[Embed(source = "preloading.jpg")] public var PreloadLogo:Class;

right at the start of the class Preloader declaration. Now in order to use the jpg image you need to add

import flash.display.Bitmap;

at where the imports are. Now at the // TODO show loader, add

var activeLoadBitmap:Bitmap = new PreloadLogo();
addChild(activeLoadBitmap);

That's it. Just compile and run it. Yeah.. it works...

What do you mean you want more?
Wha?
Status? Progress?

Ok I will add a textfield to this just to show the progress status.
Now in order to use a textfield, you need to add

import flash.text.TextField;

Then at the start of the class declaration add in

public var textFiled01:TextField = new TextField;
public var loadperc:int;

Now right after the addChild(activeLoadBitmap); add...

addChild(textFiled01);

Now at the // TODO update loader add in these two lines...

loadperc  = e.bytesLoaded / e.bytesTotal * 100;
textFiled01.text = "Load " + loadperc.toString() + " %";

Compile and ran... that's it. now your preloader comes with a 'Load xxx %" shown on the top left corner! And it will automatically goes to the "main" after finish loading. Here is how mine look like...