In this tutorial, you will learn how to make a preloader that shows the progress of the movie being downloaded as progress bar. Before starting this tutorial, I strongly recommend that you are comfortable with the interface of Flash.

This particular method of making a preloader is pretty standard, but is very nice because it leaves lots of room for personal customization, as which you will soon find out about. So, without further ado, let's get to it.

---

To begin, start by adding a scene and naming it "Preload."

Click: Window >> Scene (ctrl+U)

Once you have competed that, you should have a scene named Preload and a scene named Scene 1 in your scene dialogue box. It would be a good idea to change the name of Scene 1 to something other than that. For the case of this tutorial, I will rename it to S1. Also, make sure your scenes are in chronological order (top to bottom), so, put your preloader. :)

This is where it could get tricky, so read carefully:

You will need to make some movie clips which will work as the display of your loading bar, so it's time to open the Library and New Symbol boxes.

Click: Window >> Library (ctrl+L)
Click: Insert >> New Symbol... (ctrl+F8)

In the New Symbol dialogue box, click the Movie Clip radio button, and name the new clip LoadBar and click enter. The moment you click OK, the stage should be clear with only a small cross in the center. This is where you will draw your load bar.

Draw: Take the Rectangle Tool and draw a rectangle so it starts with it's top left corner right on the cross in the center of the stage.

Now it's time to duplicate that very movie you just made (right click in the library and click duplicate) and naming the duplicate to LoadBar Outline. The only difference in this movie is that the blue part, or whatever color you choose, is deleted, leaving the outline.

The last step is to make one last movie clip (I named it LoadingText) for a text animation or anything else to keep the viewer distracted.

Take a breather and make sure you've got all of that.

Coding the Percentage Bar:

1. Open the movie clip "LoadBar" (double click it's icon in the Library)
2. Create a new layer and rename it "Actions"
3. Add an extra frame to Layer 1 so it spans two frames - Press F5
4. In the Actions layer create key frames for frame one and two - Press F6
5. Go to the key frame in frame one of the Actions layer and get ready to add some code
6. In the actionscript window pane, enter the following code:

Let me explain what you see here...
The layer labeled "Layer 1" consists of all three movie clips spanning three frames. The LoadBar Outline movie clip placed on top of the LoadBar movie clip, with the Loading Text movie clip above it.

Above Layer 1, the layer labeled actions consists of three frames, all being key frames. The first key frame is empty. The second key frame should contain this code:

if (_root.getBytesLoaded() != _root.getBytesTotal() ) {
gotoAndPlay (1);
}

You could call this frame the gatekeeper since it's main job is to push the play head back to frame one if the movie is not (!=) loaded. Keep that in mind, because on frame three, you will add this code:

gotoAndPlay ("S1", 1);

You could think of layer three as being the other side of the gate, because this frame lets you jump to Scene "S1", frame one. So, until the movie isn't totally loaded, it will continually loop back and forth between frame one and frame two, all the while displaying the movie clips of the load bars which show the progress. Just make sure when you're testing this tutorial, you use something over one megabyte if you are on a cable connection, so you can actually see something loading (or emulate an internet connection).

Of course this is very simple tutorial, but if you think about it, you could change a lot of the cosmetics to make this preloader look really cool... Think masks, alpha effects, etc. Pretty cool, huh?

Affiliates and Uber Linkage