How to make a custom AS3 preloader

Many designers seem to think that Actionscript 3 made things more difficult. To some extent that is true, but there's a bunch of things that are still easy. Preloaders are a good example and in this tutorial, you will learn how to make a custom looking preloader using Flash and AS3. Best of all - no programming experience is required so absolute beginners can do this.

A preloader displays the download progress of your Flash file. You probably know the classic "loader bar". It's allright, but this tutorial will show you how to make a custom AS3 preloader. This preloader can contain text, animation and whatever you wish and it requires no programming, just a cut'n'paste of code.

Why Preload?

Preloaders are often an afterthought. You start off building your project and after working for some time you notice that the file size keeps growing. It would be tempting to just say "everyone's on DSL these days" but that's not the reality. Even if your users have DSL, they may not always achieve the theoretical maximum speed as promised by their internet provider. If their DSL speed is 768Kb, a one megabyte file will take ten seconds to download fully. Look at the wall for ten seconds. Count "onethousandandone, onthousandandtwo" and so on. Amazing how long ten seconds is, isn't it?

If you look at a watch instead, it will seem as if time goes faster. On the watch, you'll actually have something to look at that will give you an idea of how long it's going to take. Preloaders to the rescue. By adding a preloader, you can give the user an idea of how long this is going to take. By adding a custom preloader, you can even use this to extend the brand experience. Using the technique described in this tutorial, you'll be able to make a custom preloader so it looks even better.

This approach can be used to create any kind of custom preloader for any Flash project. The basic steps we need to do are:

1. Create a new scene and name it preloader

2. Create a custom movie clip with a 100 frame animation and place it on the preloader scene

3. Name the custom movie clip "preloaderMC" and paste script in frame 1

4. Add the stop command where your content resides

Think you can do that? Great! Let's get started!

How to Preload with AS3

Let's assume that we've landed our dream client - the company that creates the most beautiful cars that even has a Flash based navigation system. We've built a simple slideshow using plain timeline animation, but the file clocks in at almost half a megabyte when exported. Click here to download and open the sample FLA so you can follow along with the rest of this tutorial.

For a preloader to have any purpose, it must be displayed and loaded before the rest of your Flash movie. The easiest way to ensure that the preloader is loaded first, is to add a new Scene and move it to the start of your movie. Open Windows -> Other Panels -> Scene to view the Scene Panel. Unless you've already added more Scenes, you'll only have the default "Scene 1" in the list.

Click the plus-sign at the bottom of the panel. This will add a new scene AFTER the existing one. Click and drag the new scene ("Scene 2") to the top of the list, above the old one ("Scene 1"). Double click "Scene 2" and rename it to "Preloader". Your Scene panel should now look like this:

Clicking the name of each Scene will display that scene in Flash. Click the Preloader scene and you'll see the black, empty stage. Open the Library if it's not already open (Window -> Library) and drag the "Meter" movieclip to the middle of the stage.

Double-click the Meter movieclip to take a look at how it is built. It's really just a pre-made animation that is 100 frames long. The preloader script will show the same frame as the percentage downloaded. When 50% is downloaded, it'll display frame 50. Exit the movieclip by double clicking somewhere there is nothing on stage.

For the script to work, you will need to set the instance name of this MC to "preloaderMC" in the Properties panel.

Click on frame 1 in your timeline, open the Actions panel (Window -> Actions) and paste the code below:

import flash.events.ProgressEvent;
function update(e:ProgressEvent):void
{
    var percent:Number = Math.floor( (e.bytesLoaded*100)/e.bytesTotal );
     if(preloaderMC is MovieClip){
         preloaderMC.gotoAndStop(percent);
     }
     if(percent == 100){
         play();
     }
}
loaderInfo.addEventListener(ProgressEvent.PROGRESS, update);

// Extra test for IE
var percent:Number = Math.floor( (this.loaderInfo.bytesLoaded*100)/this.loaderInfo.bytesTotal );
if(percent == 100){
	nextFrame();
}
stop();

So - what's happening here? I'll explain this line by line so that beginners can understand it. If you understand the code above, just skip ahead to the next heading.

Line 1: First we import the ProgressEvent class. A class is a set of predefined functions and these deal with the loading of files.

Line 2-11: We create a function called "update". A function is a block of commands that we can start at any given time. What commands that are contained within the function are defined by the curly brackets. The "{" bracket starts the definition and the "}" bracket ends it. You can see these brackets further down the script as well, defining blocks of commands.

Line 4: Here we calculate the percentage downloaded by looking at the variables "bytesTotal" and "bytesLoaded". After calculating this, we use the Math.floor function to round the number. If we did not round the number, Flash would display an error as we tried to go to frame 1.325 in the speedometer movieclip. Flash only has whole frames.

Line 5-7: Makes sure that our custom preloader is a MovieClip before displaying the appropriate frame in the preloader movieclip. If you did not name your preloader instance "preloaderMC" as written above, Flash will show the error message: "1120: Access of undefined property preloaderMC" and your movie will just flash along like mad. If you did name the movieclip instance and still get this error, make sure you spelled it 100% correctly. Flash is picky when it comes to this as it has now way to guess what is right.

Line 8-10: If the entire movie is downloaded, we'll issue the play() command to resume playback of the movie.

Line 12: Here we ask Flash to call the update-function every time the download progresses. We do this by adding a listener (addEventListener) to the loaderInfo for this Flash movie. Flash has a lot of Events like this that we can use for various purposes. As an example: there are events for detecting mouse clicks, double clicks, rollovers, mouse buttons up/down, as well as scrolling the mouse wheel.

UPDATE:
Line 16-20: Emil Thorbjørnsson alerted me to a bug in the first version that caused IE to just loop and play the preloader if the SWF was reloaded. The problem is that the ProgressEvent never triggers (as it should) in IE. The solution is to add an extra test at the end of the script to check if the file is already 100% loaded. 

Finishing off

If we tested the movie now, it would look odd. The preloader would play for a brief second, the slideshow would flicker and then we'd be back at the preloader. When we issue the play() command from our preloader script, we'll also need to stop playback when we get to the Slideshow. In the Scene panel, click "Scene 1" to go to the scene where our slideshow is.

Click on frame 1 in the timeline, open the Actions panel (Window -> Actions) and paste "stop();" into the empty window.

Checking how it works

Now you're ready to test the preloader (Control -> Test movie). When the preview opens, select View -> Download Settings. Select the DSL setting (32.6 Kb/sec). Next, Select View -> Simulate download and you'll see the meter moving as the file downloads. You can also select View -> Bandwidth Profiler to see the detailed download information and then simulate the download again. If you run into trouble, just click here to download the finished FLA. Use this to compare with your own file to see what went wrong. Click here to see the finished file.

One last word of caution - I've seen preloaders that are so complex that they weigh in at more Kb than the main movie. Only use preloader if the main content of your movie takes a while to download and make sure that the preloader does not add too much size to the overall movie or the whole point of it will disappear.

Note: This tutorial assumes that you've not set up any library assets to "Export for Actionscript". This is often set for components and other assets so they can be used from the ActionScript language. By default, these assets are exported in Frame 1 of your movie, rendering your preloader rather useless. To fix this, open File -> Publish Settings -> Flash -> Settings and set the frame number under "Export classes in frame" to the frame after your preloader.

Tutorial by Jens C Brynildsen (May 23rd 2008)