This tutorial will teach you how to create a very simple preloader for your Flash movies using ActionScript 3.0.

Step 1: Create a new Flash movie with the ActionScript version set to 3.0. The background color, frame rate and the stage size do not matter for this tutorial.

Step 2: Create two new layers, so you will have three layers.

Step 3: Now, select layer 1. Pick the Rectangle Tool (R), set the Stroke color to black and the Fill color to something light.

Step 4: Use the Select Tool (V) and select the bar outline only. Now Press F8 on your keyword to convert it to a symbol.

Step 5: Select the body of the bar and convert it to a symbol. Set the type to Movie Clip and name it Bar and set the Registration Point of the Symbol to the left side. The registration point is the point at which our bar will expand.

Step 6: Select the bar and send it to the back of the stage. This will ensure that our bar does not cover the outline. To do this, select the bar, go through Modify> Arrange> Send to Back or alternatively press Ctrl+Shift+Down Arrow.

Step 7: Select the bar, access the Properties Inspector and set bar_mc as the instance name of the bar. We need the instance name to be able to refer to our bar through ActionScript.

Step 8: As we want the preloader to have a numeric indicator showing how much in percentage the file has loaded, first, select layer 2, then create a dynamic text field. Pick the Text Tool (T) and draw the text field in the center of the bar, then access the Properties Inspector and set its type to Dynamic Text. This is a type that can interact with ActionScript. set the font to whatever that you want and set the Instance Name to loader_text.

Step 9: Coding our Preloader using ActionScript 3.0: click once on the name of the Actions layer and then right-click the only frame on it and select Actions to open Actions panel.

Step 10: Copy and paste this code to your Actions panel.

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void {

 var total:Number=this.stage.loaderInfo.bytesTotal;
 var loaded:Number=this.stage.loaderInfo.bytesLoaded;

 bar_mc.scaleX=loaded/total;
 loader_text.text = Math.floor((loaded/total)*100)+ “%”;

 if (total==loaded) {
  this.removeEventListener(Event.ENTER_FRAME, loading);  
  play();
 }

}

That’s it, We are done ! You can now go through File> Import and just import any large image in this frame. You can add as many frames and objects as you want. Once you are done you can go through Control>Test Movie and then go through View> Simulate Download to see how your preloader works.

Downloads:

Flash CS3: Simple Flash Preloader AS3

Flash CS4: Simple Flash Preloader AS3