Animation Tip: Flash Loading Screens

Want to breathe some life in to your website? You need to get animated!

Here we are with another animation tip for Macromedia Flash. If you've been following the previous lessons and adding a bit of your own imagination, you've undoubtedly created some cool animations.

Trouble is, even though Flash is great at making small files to download, sometimes they just aren't small enough. If you've created an epic masterpiece, people trying to watch it over the web could face an equally epic loading time before they get to see it. In this one-click-away-from-the-dot-com-deathwatch world, the last thing you want to do is give your short attention spanned viewers a blank screen to stare at while your animation loads. To keep them from clicking away before seeing your creation, you need a loading screen.

Making a Loading Screen

A loading screen is a small animation that loads quickly and plays while your main animation is loading. It can be a static screen, a short, looping animation, or even a small game. Just make sure that whatever you use as a loading screen is very simple. Otherwise, you'll be faced with the dilemma of having a loading screen that needs a loading screen. Or a loading screen that needs a loading screen that needs a loading screen... you can see how this could get out of control quickly.

A loading screen consists of two things: the animation you want to use to entertain folks while they wait, and some simple actions that will loop your loading screen until your entire animation is loaded.

We need to make an example of a simple loading screen. Nothing too fancy, just a gentle reminder to the viewer that everything is ok, their computer hasn't locked up, and if they just stay patient a little bit longer, they will be rewarded with a fabulous entertainment experience.

Since Flash files automatically start to play while they load, the easiest way to make a loading screen is to put it at the beginning of your main animation. To make space for your loading screen, select your whole animation in the timeline, and slide it off to the right. For an example to create, I move the beginning of your main animation to frame 21.

You can use a loading screen has two parts: 1) the static background and 2) some witty text, and the maybe a fading "Loading..." text. To create text that fades in and out, you need to convert the text to a symbol (Insert-- Convert to Symbol). Then set keyframes at frames 5, 10, 15, and 20 in your timeline. At frames 5 and 15, you'll need to make your text invisible. To do this, select Modify-- Instance. Under the Color Effect tab, select Alpha and turn the slider all the way down. To fade smoothly between frames, double click your keyframes at frame 1 and 10, and select the Tweening tab. Select motion from the Tweening options. Your text should now fade in and out while the loading screen plays.

Make Your Loading Screen Work

Now that you've got your loading screen, you need to make it functional. This is done with some simple actions. Add a new layer above your loading animation and call it "Loading actions" or some such name. There should already be a keyframe at frame 1. Add another at frame 20.

The first action to add will make Flash check to see if your entire animation has loaded. If it has, your movie will start playing. Doubleclick the keyframe at frame 1 and select the actions tab. Now select "If Frame is Loaded" from the options under the plus sign. Set the frame number to the last frame in your main animation. Go to the options list under the plus sign again and select "Go To." Set the frame number to 21, or whatever the first frame of your main animation is. Then click "Go to and Play."

The second action to add will loop your loading screen. Doubleclick the keyframe at frame 20 and select the actions tab. Select "Go To" from the options. Set the frame number to 1, and check "Go to and Play."

Now the first thing your movie will do when it starts loading is to check if the last frame of your movie has loaded. If it has, It will jump straight to your main animation. If it hasn't, it will play your loading screen. At the end of your loading screen, it will loop back to the beginning and check again, and so on, until everything is ready to roll.