FlashMyMind - Flash and ActionScript 3 Tutorials

In this tutorial, I’m going to show you how to build a preloader. You should have your own preloader in minutes!

1. Create a new document.

2. Name the first layer to “loader bar”

3. Draw a line. This line will be our preloader bar.

4. Convert the line into a movie clip. Set the registration point to the top left corner.

5. Give the line an instance name of “preloaderBar”.

6. Create a new layer called “actions”

7. Type the following in the “actions” layer

preloaderBar.scaleX = 0;
var loader = new Loader();
loader.load(new URLRequest("main.swf"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler);
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
addChild(loader);

Explanation: First we set our preloader’s X scale to zero. This way, the user can’t see the preloader at the beginning of the loading process. Then, we create a Loader object. The Loader object is used to load SWF files or image files. After the Loader is created, we tell it load our main movie (main.swf). Then comes the important part, we assign event handlers for the loader. To be more specific, we are using the “contentLoaderInfo” to access loading progress information and statistics. In this case, we want to know when the loading is still in progress (progressHandler) and when the loading is complete (onCompleteHandler). Last, we add the loader to the stage.

NOTE: You must have the “main.swf” file in the same directory as this loader file!

8. Now that we have our loader ready, we can write the functions that are responsible for animating the preloader. Type the following

function onCompleteHandler(e:Event):void {
        preloaderBar.visible = false;
}
function progressHandler(e:ProgressEvent):void {
        var per = e.bytesLoaded/e.bytesTotal;
        preloaderBar.scaleX = per;
        loader.visible = true;
}

Explanation: The “onCompleteHandler” is called when the loading is done. In this case, we don’t want to show the user our preloader anymore, so we make it invisible. The “progressHandler” is called everytime the loading progresses. Here, we simply calculate the percentage that has been loaded (loaded/total size). Then, we assign into the preloader’s X scale property the precentage value. So when the percentage is 1 (loading is done), the “preloaderBar” will be at full width (scaleX = 1).

9. Test your movie!

NOTE: You can simulate a download in the Flash IDE. Test your movie and go to View-> Simulate Download.

Final Code

preloaderBar.scaleX = 0;
var loader = new Loader();
loader.load(new URLRequest("main.swf"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler);
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
addChild(loader);
 
function onCompleteHandler(e:Event):void {
        preloaderBar.visible = false;
}
function progressHandler(e:ProgressEvent):void {
        var per = e.bytesLoaded/e.bytesTotal;
        preloaderBar.scaleX = per;
        loader.visible = true;
}

Download .fla