Simple Flash Preloader

Posted on Sat, 2006-09-30 12:36

This tutorial with guide you through how to make a simple preloader in Flash.

1. Create a new document in Flash.
2. Create 2 new layers, so you have 3 layers and name them Labels, Actions and Content.
3. Press F6 in the Labels layer on the second frame. In the Properties panel give it the name content.
4.

In the first frame of the Actions layer insert the following actionscript.

stop();
5.

Create a blank keyframe in frame 2 of the Actions layer and put the following code in:

stop();
6.

Now in your Content layer create a new movie clip symbol by press Ctrl + F8. Name it loading_info.
7.

In the new movie clip create another label and name this Actions, name the original layer Content.
8.

On the content layer create a dynamic text box. In the extended Properties panel under var type loaded.

If you are not using a standard font, click the Embed icon in the Properties panel and select Numerals from the list.

Then press F5 to create a frame in frame 3 of the Content layer.
9.

In frame 3 of the movie clip on the actions layer create a blank key frame.

In frame 1 type the following code:

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

This sets the variable loaded to get the percentage of the file loaded. This is then put in to our dynamic text box as we set the variable. We need the _root to tell Flash we want it to get the total size of the whole file not just the movie clip.

Then in frame 3 type the following code:

if (loaded == 100){
_parent.gotoAndPlay("content");
} else {
gotoAndPlay(1);
}

This checks to see if the variable is at 100% yet, if it is it will go to our main scene and play the content, if not, it will go back to frame 1 of our loading_info movie clip and update the loaded percentage then go to frame 3 again to check the percentage.
10.

Go back to the main scene and in frame 1 of our Content layer drag and drop the loading_info movie clip in to frame 1.
11.

Now add a large file such as a bitmap in to the 2nd frame of the Content layer so that we can test the preloader.
11.

To test the file, press Ctrl + Return then Ctrl + Return again, this will make it simulate a download.
12.

You should get a scene that just has a number that increases over time, if it flashes by, make sure you have your simulate download speed set low. This can be done by going to View ยป Download Settings in the Flash preview window and select a new speed.
13.

Now go back to the loading_info movie and add a percentage sign by using another text box and putting a % sign in it.

You now have a simple preloader.