Flash Animation 13: Creating a Simple Preloader

01
of 09

Creating a New Scene for the Preloader

A Flash preloader is a short, low-key animation that plays while the rest of your animation is loading, and can either loop or show a growing progress percentage. These animations are small enough to load immediately, and generally keep the user entertained while the rest of a larger animation is loading.

This lesson may seem a little confusing at first, because we're diving straight from an introduction into ActionScript programming and into several more complex commands combined to accomplish a simple task. Don't worry if you get a little lost the first time around; it takes practice to become familiar with this sort of thing, and we were all a bit puzzled by it at first.

I'm continuing to use the file we've been building on in previous lessons with my character Lex, though we won't really be looking at him in this lesson. What we're doing is creating a preloader, and so we need to make a separate scene to place the preloader animation on.

Open your scene control dialogue, and insert a new scene before dragging it above all other scenes in your list to make sure that the Flash player reads and loads it first. You may want to rename it--I've named mine Preloader.

02
of 09

Setting Up the Preloader Graphics

This is going to be a basic preloader--just a bar that loads from 0 to 100, by scaling incrementally based on how much of the file size is loaded. To create the basis for this, we're going to draw a simple rectangle at full-size for 100%, on the first frame of our new scene. (The loading text is optional, I just stuck that on there and forgot about it.)
03
of 09

Making Our Preloader Symbol

In order to assign out various actions to the loading bar properly, it needs to be a symbol--specifically, a Movie Clip symbol. Select the fill only of the loading bar (not the outline) and right-click (or hit F8) to convert it to a symbol. Make sure that "Movie Clip" is selected, and enter an appropriate name.
04
of 09

Naming an Instance of a Symbol

Here's the important part; we're going to do something a little different with our symbol, because we're going to be referencing it by name in our ActionScripts. Symbols have instances: iterations of the original. Your original symbol is the symbol stored in your library; an instance is any copy of it dragged onto the stage. You can make edits that only affect specific instances, and you can also name those instances to differentiate them from each other when performing different actions upon them.

Look in the Properties bar, below the dropdown that labels the symbol as a Movie Clip. Here is where you'll type a name for this specific instance; I named mine Loader.

05
of 09

Editing Your Preloader Symbol

Now you need to double-click on the symbol to enter its editing stage. Because the script that controls the size of our load bar uses a scaling variable, you need to move the central axis point of the shape to the left; the loader scales the fill from 1 to 100%, and will scale based on the location of this point. If it's left in the normal position, it will scale expanding outwards on either side from the center. We want it to scale and expand outwards from the left to right, so we need to use the Free Transform tool to select that central axis point and drag it all the way over to the left edge of the shape.
06
of 09

Telling the Movie Where to Go After Loading

Now click on your second frame on your movie clip's timeline, right-click to insert a keyframe, and then open the Actions for this frame. We're going to insert a very simple "goto" command, as we did in this lesson; this will tell the movie to go to our first main scene and start to play the animation. In my case the goto command reads:

gotoAndPlay ("Scene 1", 1) ;

So my movie knows that when the file has completed loading, it should go to the first frame in Scene 1 and begin to play.

07
of 09

Adding the Preloader Code

Now on frame one on the movie clip stage, open your Actions pane and insert the following code:

play() ;
loaded = _root.getBytesLoaded() / _root.getBytesTotal * 100;
if(loaded != 100){
setProperty(Loader, _xscale, loaded) ;
}else{
gotoAndStop(3) ;
}

This is the real workhorse of the lesson, and the preloader; everything else has just been setup to create the various parts for this code to act upon.

08
of 09

Breaking Down the Code

Now let's break the code down so it makes a bit more sense:

play() ;

This just tells the movie clip to play.

loaded = _root.getBytesLoaded() / _root.getBytesTotal * 100;

I know this looks complicated, but it's really not. What this does is define a variable called "loaded", which represents the percentage of the movie loaded.

It's really just a simple math string; _root.getBytesLoaded () is a universal variable that fetches the number of bytes of the document loaded, and _root.getBytesTotal is a universal variable that fetches the number of bytes of the document total. So in this string we're saying "Divide the number of bytes loaded by the number of bytes total, then multiply by 100 to give me the percentage loaded, which equals the variable "loaded"."

if(loaded != 100){

This is the start (and first half) of what's called an "if/else statement" that will perform one action based on certain results, or another action based on any other results, both defined by parameters. What an if/else statement says is, "If this condition is met, then do this. If there's anything else but this condition, then do this instead."

The condition for this statement is "loaded != 100". So it's saying that if "loaded" (the variable we defined as the percent of the movie loaded) doesn't equal 100 (that's what != stands for: it's like of like a notequal sign, as if the ! negates the meaning of the =), then a certain action should be performed.

09
of 09

Breaking Down the Code II

setProperty(Loader, _xscale, loaded) ;
}

The code inside the brackets is the parameter that defines what happens if the condition for the "if" statement is met. The universal variable setProperty assigns a property to an object, and this is where our named instance of our movie clip enters in; inside the parentheses for the parameter we define first the object whose properties are being affected (Loader), then the property to affect (_xscale, or how much the width is scaled up or down on the shape/object), and by what value to affect it (the loaded variable). So what this says, overall, is "If the percent loaded is not 100, then set the width of the symbol named Loader to the same percent as the value of loaded".

else{
gotoAndStop(3) ;
}

This is the "else" condition of the statement, that covers all other existing conditions not met by "loaded != 100". It basically says, "In all other instances, go to frame three of the current movie clip and stop playing", because the movie has loaded and therefore we no longer need to continue scaling our loader bar.