A Flash preloader is useful in preventing partial loading of a movie while it plays. The preloader is usually made attractive to the viewer to keep him/her occupied while the full flash movie or some external data is loaded in the background. We are going to learn how to create a very simple preloader while concentrating on the actionscript that makes it work.

Compatible Versions of Flash for this Tutorial

Flash MX 2004 & below | Flash 8 | Flash CS3 | Flash CS4
Note: For uses of lower versions of Flash some visual interface images would differ.
Recommended Version: Adobe Flash CS4 Professional

You Are Here ::: Home >> Free Tutorials >> Flash Tutorials >> Simple Flash Preloader

Create the Simple Flash Preloader

Once you understand the basics behind the Flash preloader you will be able to create more advanced preloaders with moviclips and additional actionscripting. Follow the steps given below:

1. Preloader Frames: First you will have to create your preloader frames.

Make two layers called preloader and actions. Go to the first frame in the preloader layer and place a text displaying "Loading" on it (as shown below).

This preloader uses ifFrameLoaded actionscript
Double click the same frame and in the frame actions tab give the following action script:

FLASH 5, MX and MX 2004, Flash 8, Flash CS3, Flash CS4
ifFrameLoaded ("end") {
gotoAndPlay ("start");
}

FLASH 4
If Frame Is Loaded ("end")
Go to and Play ("start")
End Frame Loaded

Logic: This actionscript checks if the last frame of your movie (labeled "end") is loaded and then only starts playing your flash file at the starting frame labeled "start". Thus this action script decides whether to continue the preloader loop or to break free and start playing the movie.

2. Preloader Loop: Now we need to make a loop that executes till the last frame is loaded. To make use of a very basic animation we will display three dots after the loading text to show that loading is taking place. To do this insert three key frames after the first frame in the actions layer. Now place one dot, two dots and three dots in the three frames respectively (as shown below).

frame 2 (actions layer)

frame 3 (actions layer)

frame 4 (actions layer)

Now we need a frame to return to the first frame as the condition is being checked there. For this double click the fifth frame in the actions layer and give the following action script.

gotoAndPlay (1);

Logic: We just return the control to the first frame to complete a loop.
Now click on the sixth frame in the Preloader layer and give it the label start. That's it your simple preloader is ready. Just make sure that all the stuff that you want to be displayed in your movie starts from the 6th frame and that you label the last frame of your completed movie as "end". Alternatively for Flash 5 and above you can use the following code instead of the code given in the first frame:

ifFrameLoaded (_totalframes) {
gotoAndPlay ("start");
}

Here, we have just replace the "end" frame with the inbuilt variable _totalframes which contains the total number of frames in the main movie timeline.
We recommend you create an attractive movie clip and place it in frame 1 to make your preloader look more interesting then the plain loading text used here :-)

Finished Flash Preloader Interface

Check if your preloader timeline matches our figure above.

Test your movie for a 64KB modem by pressing Ctrl+Enter twice. You will be able to see how the preloader progresses and then starts playing at frame "start".

That's it, your simple Flash preloader is ready! Now continue with the rest of your animation.

TIP: Keep a new document with your favorite preloader (with nothing else in it) so you can start on your next project with a copy of it (preloader ready).

We would love to hear your comments and any suggestions on future tutorials we can add to this section. Thanks!

Bookmark & Share

Bookmark and Share this web page.