Preloader for Main swf File

Preloader for Main swf File

Flash CS4 ActionScript 3.0 Tutorial


How to Let End User Know that the Content is being Downloaded in Flash



Depending on the size and user's connection speed, a swf file may several seconds to download. Preloaders are added to give the user feedback that the content will arrive shortly, so don't go away.

Preloaders can be added at the start of your host file or used to count down the loading of an external swf or image file. For more information, see topics, Loading External File with UILoader and Preloader and Preloader for External swf or Image File.

The following is an example of a preloader that is added to the beginning of the main timeline.

Tutorial Elements

An image that matches your stage dimensions


Step One

Open a new Flash document and add two new layers.

Step Two

Name the top layer Actions, the middle layer Preloader and the bottom layer Image.

Step Three

Click frame 10 of the Image layer and press F6 to add a keyframe.

Step Four

Import an image (same size as the stage) by choosing File > Import > Import to Stage.

Step Five

Using the Rectangle tool, add a rectangular box to frame 1 of the Preloader layer.

Step Six

Click the box and convert it to a Movie Symbol by pressing F8. Set the registration point in the upper left corner

Step Seven

Assign your Movie Symbol an instance name of bar_mc in the Properties panel.

Step Eight

Option double-click (PC - Alt double-click) the keyframe in the Actions layer to open the ActionScript panel.

Step Nine

Copy/Paste the following code to the ActionScript panel.


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;




this.removeEventListener(Event.ENTER_FRAME, loading);



Step Ten

Click the Auto Format icon at the top of the ActionScript panel.

Step Eleven

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). Press Cmd/Return (PC - Ctrl/Enter) a second time to simulate a specified download speed. The speed can be changed by choosing View > Download Settings. The bar expands to show the download progress.

Dissecting the Code

The first line of code at Step Nine stops the main timeline at frame one.

The next line adds an enter frame event listener. Enter frame events occur at your project's frame rate. In other words, if your project were set to 24fps, the loading function would be run 24 times per second.

Line three defines a function called loading. Inside the function, two new variables are introduced. The total variable measures the total number of bytes for the external image file. The loaded variable checks to see how may bytes have actually been downloaded.

Line six calculates the percentage by dividing the loaded by the total. This value starts at zero and ends at one, once the file is downloaded. As the value moves from zero to one, the bar_mc scales from zero to 100%. A scale value of 1 equals 100%.

The following line is an if statement. If total equals loaded, the main timeline goes to frame 10 and stops.

The final line removes the event listener so it stops monitoring the download progress.


Shutterfly 50 Free Prints 160x600