Alex Brooke

This is a tutorial on how to make a very simple AS3 (CS4) preloader for your Flash movies. This tutorial assumes you are a beginner at Flash.

1) Create a new flash document and  a draw rectangle on the stage. This will be our preloader bar.

2) Select it, then click Modify in the top menu and then Convert to symbol

3) Give it any name you like and make sure that the Type is selected to Movie Clip. Also make sure you select the middle left box on the registration point as we want it to expand from left to right. Click OK to save.

click to enlarge

4) Underneath the preloader bar you just drew, insert a dynamic text field.

5) Give the preloader bar an instance name of “loaderBar” and give the text field an instance name of “loaderText”

6) Make a new layer above the current one and label it “actionscript”. You can also give the bottom layer a name such as “bar” if you want.

Click on the first frame of the actionscript layer and open the actions window. (Click Window and then Actions in the top menu)

7) Insert the following code:

stop();
import flash.display.*;
this.stop();
this.loaderInfo.addEventListener (ProgressEvent.PROGRESS, PRELOADER);
function PRELOADER(event:ProgressEvent):void {
var percent:Number=event.bytesLoaded/event.bytesTotal*100;
loaderBar.scaleX=pcent/100;
loaderText.text=int(percent)+”%”;
if(percent==100){
this.gotoAndStop(2);
}
}

Make a new blank frame at frame two of the layer with the preloader bar you drew and import a picture so we have something to load.

9) Click Control and then Test Movie and… it won’t work properly. As you are loading this file from your computer, it will load instantaneously. We need to slow down the load rate for us to check it works.

10) Click on View in the top menu and then Simulate download. You should now see your preloader bar slowly expand with the progress in a percentage underneath. If you are still having problems you can adjust the download simulation rate in View and then Download settings

Download the example file here

NOTES

If you have an animation that plays from frame 2 onwards you can change the line “this.gotoAndStop(2);” to “this.gotoAndPlay(2);”

Please leave your questions, comments and responses to this article. Please let me know of any mistakes, inaccuracies or problems with this tutorial and I’ll try to fix it. Enjoy!