UberPages :: Tutorials :: Flash Tutorials :: Basic Preloader

Quick Menu

In this tutorial, you will learn how to create a simplistic, yet effective preloader with the use of ActionScripting. Before you start, it is advised you know a bit about the layout of Flash and basic usability.

This particular preloader should only be used for smaller flash files, since it doesn't display the progress of the download itself, but only a looping animation (or whatever you have used to kill time with). For any large Flash presentations, a bar/percentage preloader should be used, which actually shows the amount of data loaded. That being said, lets begin!


The first step is to make a scene to put the ActionScript and graphics inside. You could think of this as making a class or a code modual for a program, because we will be using this scene for a specific purpose.

Click: Window >> Scene (ctrl+U)

You will now be presented with a box showing you all your scenes and three buttons along the bottom: Duplicate Scene, Add Scene, and Delete Scene. Click "Add Scene."

Now, double click the text "Scene 1" and rename it to "Preload," or whatever you want as long as you know what this scene is for. You can also name "Scene 2" something else if you want to (I usually just name it S2). Important Note: It's good to name your scenes all before you start doing any ActionScripting, because if you change the scene names once you have done some coding, your code may not point to the same scene anymore since you changed the name!

Now it's time to start adding the code to your new preloader scene, so make sure your in it.

Make a second layer, and name one of them "Actions" just for clarity reasons. Then, on the other layer you can add whatever you wish, you could even make more than one. In these layers, it's a good idea to add a text animation displaying "Loading..." or something like that.

Once you have made your loading animation, it's time to make the code for it:
In the Actions layer goto the first keyframe (make one if you need to), and enter this code in the ActionScript box:

loadedbytes = getBytesLoaded();
totalbytes = getBytesTotal();

This chunk of code pushes the amount of data loaded into one variable, and the total data of the movie into another variable. These two variables will be checked against each other at the end of the scene to see if the movie is ready to play... Read on.

The last step is easy, all you need to do is make one more keyframe on the same frame number where your "loading" animation left off. In this frame, add this code:

if (loadedbytes == totalbytes) {
gotoAndPlay("S1", 1);
} else {
gotoAndPlay("Preload", 1);
}

This bit of code says: If the loaded data is equal to the total data of the movie, then go to the scene ("S1" in this case) specified, and the frame specified (frame "1" in this case) and then play. Else (anything else but a fully loaded movie), would make the playhead go back to the Preload scene's first layer and start all over.


So! To recap:

1. Add a new scene.
2. Turn a scene into a place to put your preloader.
3. In the preloader scene, make as many layers as you want.
4. Make a loading animation, or something to distract the viewer.
5. Make an action layer with two sections:
5a. The first frame loads the load data into variables (code chunk 1).
5b. The last frame checks to see if the movie is loaded and ready to play (code chunk 2).

Setting up a basic flash preloader










Affiliates and Uber Linkage