ActionScript 3 Code for Flash CS3 Preloader

In our last tutorial, we set up the architecture for our example Flash^R website. This site has a large bitmap image as the background of the scene. Therefore, we have added a preloader. If you remember, we designated the first frame on the Timeline for the preloader and the second frame to the opening scene of the website. Now we will write the ActionScript code that will run the preloader and then move on to the main movie.

So far, we have placed a stop(); code on both frames of the Timeline. One prevents the main Flash movie from playing until the preloader is done and the other stops the main movie from looping back to Frame 1 and the preloader. Now, we can concentrate on the code for the preloader itself. Our first step is to create two Event Listeners that will run the preloader.

On Frame 1 of the Actions layer, open the Actions panel and type the following code under the stop(); code.

this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onWatch);

This first line of code adds the Event Listener to loaderInfo. The Event Listener keeps an eye on the download of the main movie and runs the onWatch function. This function tells Flash how much of the main movie has downloaded.

this.loaderInfo.addEventListener(Event.COMPLETE, onTotal);

This second line of code adds a second Event Listener which alerts Flash when the download is complete and calls the onTotal function which moves our website on to Frame 2.

function onWatch(event:ProgressEvent):void
{
var load:Number = event.target.bytesLoaded;
var total:Number = event.target.bytesTotal;
var percent:Number = load/total;
loadAmt.text = (Math.round(percent * 100)) + "%";
}

This major part of the preloader code creates three numeric variables that gather information about the download. The first variable "load" holds the number of bytes that have been downloaded. Variable "total' holds the total number of bytes to be downloaded. The third variable "percent" has a little math that divides the amount of bytes downloaded so far by the total number of bytes to be downloaded. Finally with the loadAmt.text, we do a little more math to determined the percent of download to display in the text box of our preloader. As you can see, we use the Math.round function to obtain a whole number for our percentage. We also add the "%" text to the numeric percentage.

When all is downloaded, we can move on to the main movie. As mentioned earlier, the onTotal function does just that. Also, we can remove our Event Listeners.

function onTotal(event:Event):void
{
nextFrame();
this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onWatch);
this.loaderInfo.removeEventListener(Event.COMPLETE, onTotal);
}

Test your movie and you should see the preloader count down the percentage of the main movie as it downloads. When you test your movie on your local machine, the preloader may not be visible because it happens to fast. You can simulate a slower download. With the test movie browser window still open, click View – Simulate Download from the Menubar.