If you use flash to create web animations or websites then you really need to know how to make and add a preloader to it. Everyone doesn’t have a superfast internet connection and adding some information that there is something loading keeps the viewers stay for it. In this tutorial I’m going to show you just how to create a simple preloader.

Step 1

Open up the animation you wish to add a preloader to. I’m going to use an animation I have for my podcast intro.

Step 2

Open the Scene panel by going under Window > Other Panels > Scene.

Step 3

Here you will see that there are already a scene present with your animation, it’s currently called Scene 1. Double click the name to rename it to ”animation”. Click the little plus icon (circled in red in the figure above) to add a new scene. Name this ”preloader” (without the quotes, all in lowercase). Then after doing that, click, hold and drag it above animation scene to make it load before the animation, which is what we want for the preloader.

Step 4

Now that we have our new preloader scene set up properly, click on it to get working in it. If you have any backgrounds in your other animation that you wish to have in the preloader, add them in again. However be aware that it should be as lightweight as possible!

Step 5

Now we are going to be designing the main preloader. Start by making a new layer and call it ”loading graphic”. After that, grab the text tool (T) and add the text ”Loading” or similar to your page and position it where you want. The properties box should have the type set to static (as seen in the graphic above).

Step 6

Next, we are going to be adding the text box that will make the loading percentage appear. Create a new layer above the loading graphic layer and name it ”percent”. Grab the text tool (T) and where you want it (probably below the loading text) type the text 100 %. The reason for typing 100 % is pretty simple. It is the longest you will have to go, so you can now style it to your liking. Finally, change the text type from Static Text to Dynamic Text and remove the text you had entered before and scale the box as wide as needed.

Step 7

To be able to control the input in the dynamic text field we just created later with actionscript, we need to give it an instance name. So in the box highlighted in red above, type in ”loadingPercent” (without the quotes, but with a capital P).

Step 8

Now it is time to put all of this together and create the loader with a little bit of actionscript. Create a new layer and call it ”actions”. We also need to expand the timeline because we want an action to happen after we’ve loaded it all. So click on the second frame on the actions layer and press F6 to add a new keyframe. Next click on frame two on the percent layer and shift-click the one on the loading graphic layer. Then press F5 to create a new normal frame there. Your layers panel should now look like the image below.

Step 9

Click back on frame one on the actions layer and bring up the actions window, either by going to Window > Actions or by pressing Option + F9 (PC: Alt + F9). In the actions panel, type the following code:

percent = Math.floor(getBytesLoaded()/getBytesTotal()*100);
loadingPercent.text = percent + " %";

What this code will do is calculate percent, based on the amount of bytes that are loaded, divided by the amount of total bytes of the file, multiplied by 100. Then on the second line it is saying that the variable loadingPercent (which is what we caled the dynamic text field above) is text and that it should have the output of what you get from the percent calculation at the first line and add the percent sign at the end. Relatively simple.

Step 10

Now we do have our basic preloader and we can go ahead and press Command + Enter (PC: Ctrl + Enter) to preview our movie. What you will notice though is that it doesn’t take us to the animation once it has loaded. Well, that’s because we haven’t told it to.

So click on frame two of the actions layer and again bring up the actions panel. Paste the following lines of code in there:

if (percent ==100){
	gotoAndPlay("animation",1);
}else{
	gotoAndPlay(1);
}

To break this down. It is a rather simple if/else statement. What it does is say if the value of percent equals 100 then goto and play the scene names animation and start at frame 1. If percent doesn’t equal 100, then go back and play frame one of this scene.

Step 11

Now that we have added this code we can go ahead and test our movie again and the preloader should load and after take us to the animation.

This is really a simple preloader that could be animated a bit further but just remember to keep it lightweight. People don’t want to wait for the preloader or to preload the preloader.