Creating a Preloader in Adobe Flash with Actionscript 3

Preloaders are used when the user will need to wait more than a few seconds to see the Flash content. This lets them know that something is coming and that there are no problems. Of course this is not an excuse for making bad, overweight (large file size) flash projects.

Types of Preloaders

While all preloaders are designed to let the user know that content is coming, there are several different types that designers will create.

• The basic animation – I sometimes call this the spinning orb. They designer just has a small animation, like a spinning disc, a ball bouncing up and down, etc.
• The progress bar – this shows a bar which goes from left to right to bottom to top to show the amount of the file which has been downloaded.
• The text update – gives you a number, so you know how much has been uploaded. For example 36%.
• Combo – a designer can incorporate multiple forms into their display, for example a progress bar and a text update.

Setting up the Stage

This set up will assume a simple two frame Flash project. The first frame will be the preloader, the second frame the content.

1. You will need four layers. 1 for actions, one for the progress bar, one for the progress text, and finally one for the second frames content.
2. On the progress bar layer, create a rectangle (not in object mode) with a stroke. Convert the fill part of the rectangle into a movieclip. Make sure the registration point is on the far left side (not the center). Give it an instance name of progressBar.
3. For the text layer, add a classic text object. Give it an instance name of progressTxt.

Finally, make sure there is enough content on the second frame to spend some time downloading.

What we need to know

In order to develop anything besides the basic animation, the designer needs to know two specific pieces of information. How big the SWF is, and how much has been downloaded by the end user.

Luckily Flash gives us that information in the for of a built in data object called the loaderInfo. To access loaderInfo, use this.loaderInfo, then they property you need to access.

bytesTotal – is the property from loaderInfo which stores the total size of the Flash SWF file.

bytesLoaded – is the property from which loaderInfo lets you know how much of the file has been loaded so far. This gets updated very often.

The Script

Step one is to stop the script on the first frame. Use the stop() command.

Then we will call to listen for the event.

stop(); // stop the playback head where it is, 
// so you don't move forward before the script is loaded

// define the event listener
addEventListener(Event.ENTER_FRAME,frameEvtHandler );

At this point however, all we’ve done is stop the movie from continuing to play, and set up the event listener. This means that you will want to create an ENTER_FRAME event handler, to handle the event you just listened, and (in this case) “heard”.

So we will write a function to server as the handler. In it, you will need to get the size of your SWF, and how much has been loaded already.

LoaderInfo is an object which stores this information for us, so we can quickly get the number of bytes a movie is, and how many bytes have been loaded so far. It can be accessed by call this, which is a reference to the movie object we are currently in.

function frameEvtHandler(event:Event) {
  var total:Number = this.loaderInfo.bytesTotal;
  var loaded:Number = this.loaderInfo.bytesLoaded;
}

We put the values into a variable, so they are easier to access. i.e. less for us to type, and therefore make fewer typing mistakes.

To figure out how much has been loaded as part of the whole (a percentage), you divide loaded from total.

var percentage:Number = loaded/total; // this gives you a number between 0 and 1.

Displaying the percentage loaded as a progress bar

We will want scale our slider bar (progressBar), so we can see it moving. Our progressBar movie clip object has a scaleX property, that allows us to scale the item horizontally. It takes a number between 0 (not scaled) and 1 (full size).

So we will want to add to our function something that looks like:

progressBar.scaleX = percentage; // scale the width of our progress bar

If you set the center point of the movie clip to one edge, and test your movie, you should see the bar grow from the edge. If you left it in the center of your movie clip, you will see it grow out from the edges.

Continue on to Part II of Creating a Flash Preloader with Actionscript 3

Watch on YouTube

Creating a Preloader in Adobe Flash with Actionscript 3 was originally found on Access 2 Learn