Adobe Flash CS5.5 and AS3 – How to create a basic, but clean and simple Flash Preloader

One of the problems many flash developers face is creating a preloader that works correctly. If your like me, my first attempt resulted in asking the question, “Why does my preloader first appear on stage beginning at around 70% complete instead of startintg at 0%?” Probably because you put your preloader in frame 1 of your only SWF file.

The problem is within flash itself. Even if you tell flash to begin loading objects in frame 2 within your ActionScript settings, there are certain objects that flash insists on loading in frame 1. To work around this, we will create our preloader as its own SWF file that in turn loads our main SWF file.

Let’s say your main flash program is called, Main.swf

Let’s call our preloader project simply, preloader that will create our preloader.swf file.

Click the Text Tool and draw a TextField in the center of your stage. Call the instance of the TextField, txtPercentLoaded.

Add the following ActionScript to the frame:

var _URLLoader:Loader = new Loader;
var _URLRequest:URLRequest = new URLRequest("Main.swf");  
_URLLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loop);
_URLLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, done);
_URLLoader.load(_URLRequest);

addChild(_URLLoader); function loop(e:ProgressEvent):void
{
var perc:Number = e.bytesLoaded / e.bytesTotal;
txtPerecentLoaded.text = (Math.ceil(perc*100).toString());
} 

function done(e:Event):void
{
removeChild(txtPerecentLoaded);
txtPerecentLoaded = null;
} 

In your HTML file, point to the preloader.swf file.

Enter the URL of your domain that points to your HTML file containing the pointer to preloader.swf and watch the percentage go from 0 to 100% as the preloader loads your main movie, Main.swf