Hot Tips Logo

A step-by-step Flash Preloader
Flash5

I get so many requests for "how to make a preloader" that I put together another one. Below are the steps I took.
This file has so many images that it needs it's own preloader :).

#1

I made 1 of these and copied it 5 times. In each one I moved the light part of the gradient a little. Five keyframes with one vector image in each. That's my "page loading" animation.
I called this layer "object" simply because I didn't have a name for the swirl I drew.
I named this scene "preloader".

#2

Next I inserted another scene so I could test my preloader. Were I to use this as a template, I would just leave it with the one scene. To demonstrate how the whole thing works I added the second layer and called it "main".

The exact naming conventions are important. A tip would be to keep the names all lowercase, be consistent and you can use the same preloader over and over by changing one behavior. Make sure your preloader screen is the top scene as shown in the screen shot below.

I added a simple shape tween to frames 1-40. I use a cable modem and this was too small for me to see my preloader work so I imported a .SWF file I made a few weeks ago in a layer called "bugs". Notice the way Flash broke down the .SWF file into individual keyframes 41-80. Cool huh? My modem was still too fast so I imported a good size GIF into frame 80. Keep in mind I'm adding all this so you can see it work. If you use a regular dialup modem it should display just fine. This concludes my main movie. The things you need to keep in mind are the final frame number (80), and the scene name (main).

#3

Switch back to your "preloader" scene. Now we add the guts to it. I added another layer and called it "actions" because this is where I tell the movie what to do. Then I thought to myself what is it that needs to happen?? I want the preloader to play until all the frames of my movie have loaded so that there are no jerky movements. I looked at the available frame actions and the closest fit was "if frame is loaded". Sounds good to me. Then I thought .. if "which" frame is loaded? Remember the last frame of our main movie was 80? I entered 80 in the dialog box and the scene name was main. Using the same screen shot the next question is "what do I want to happen when frame 80 of main is loaded? I want the movie to play from the beginning! So I double click the "go to" action and enter "main and frame 1" in the dialogue box. This is really very simple so reread till it makes since. Ask yourself questions and answer them logically.

#4

The last thing to do is make the preloader play. In the actions layer we told it to keep checking to see if frame 80 of the main scene has loaded. Back to the object layer in frame one I placed a *label and called it "begin". I'm not sure of it's value but that's how I was taught in school. In the last frame of my preloader (5) I added another behavior. "Go to and play "preloader" frame "1".   *labels are useful when you've got a lot going on in your movie, so that you can look back at a movie 6 months later and tell a great deal by reading the labels.

This sounds more complicated than it is. Practice a couple of times.

Keep in mind some modems are fast enough that you won't see your preloader run. To be absolutely sure import an image into the last frame of your main scene... not a new frame (because you are going to come back and delete it) just stick it somewhere in it and then test.

Good luck. If this tutorial did you some good I would appreciate a note saying so, and then I will put together others primarily on DreamWeaver and Flash.

Back to Index
Source Code and images proprietary©99-2009 Bobbye, All Rights Reserved.
For questions or further information, contact ImWebLover@aol.com
This site is optimized in 800 x 600 resolution
.