Preloaders

Preloaders

Flash CS4 ActionScript 3.0 Tutorial

 

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

 

 

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, Preloader for External swf or Image File and Preloader for Main swf 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. Image should be imported at frame 10 of the Image layer.

Step Five

Using the Text tool, add a Dynamic Text box to frame 1 of the Preloader layer. Make sure your text color is different than the background color.

Step Six

Assign your text box and instance name of percent_txt in the Properties panel.

Step Seven

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

Step Eight

Copy/Paste the following code to the ActionScript 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;

percent_txt.text=Math.floor((loaded/total)*100) + "%";

if(total==loaded){

gotoAndStop(10);

this.removeEventListener(Event.ENTER_FRAME, loading);

}

}

Step Nine

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

Step Ten

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 loaded percentage displays in your Dynamic text field. Once it reaches 100% the image appears.

Dissecting the Code

The first line of code at Step Eight 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 and multiplies that value times 100. To make it more user friendly, a percentage sign is added. Math.floor rounds the number down to an even whole number value. Once the calculation is made, it is displayed in the percent_txt text field.

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.