Animation Tip: Flash Loading Bar

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

Here we are with another animation tip for Macromedia Flash. This time around, we're expanding on the previous lesson on loading screens. If you've read that one and experimented a little, you've no doubt created your own basic loading screen. Now we'll take the lesson a bit further and learn how to add a percentage bar to your loading screen. It's a bit more complicated than creating a simple loading screen, but well worth the effort.

Check Your Bandwidth

Last time around, you learned the basics of creating a loading screen. One of the limitations of the loader you made for that exercise is that although members of your audience will know that your animation is loading, they will have no idea how long they have to wait. If you've got a complicated movie, someone with a slow connection might have time to go out and get some coffee before it's done loading. To give people an idea of how long a wait they are in for, you can include a percentage bar in your loading screen.

One of Flash's useful features is the bandwidth profiler. This handy tool can be accessed in the Flash Player by hitting Ctrl-B (Command-B for Macs). The bandwidth profiler shows you a graphical breakdown of how much bandwidth each part of your animation will eat up. This has several uses: You can see which parts of your animation you might want to pare down to save download time, and, more importantly for our purposes, you can see how much of your animation has loaded at each frame.

Looking at the bandwidth profiler, label keyframes that correspond to what percentage of your movie has loaded. Once you've done that, return to your movie.

Set Your Scenes

Another key feature of Flash is the ability to divide your animation into scenes. In my lesson on loading screens, the preloader was simple enough to keep it in the main scene of your animation. This one, however, is a bit more complex, so it'll need its own scene. To make a new scene, go to the Scene Inspector under the Windows menu and add a scene named "preloader." Drag the new scene above your main scene.

Now, in your preloader scene, you need five layers: one for the original loading text from the previous lesson, one for the static percentage bar, one for the blocks that will fill up the loading bar, one for the numerical percentage readout, and one for actions. (Did I mention that this lesson is a bit more complicated than the last one?)

Set up the loading text and percentage bar in the center of the screen. At frame 10, add one block to the percentage bar in the blocks layer. At frame 20, add another. Repeat until you have 10 blocks at frame 100.

Do the same thing for the numerical percent readout. At frame 10, it should read "10%"; at frame 20 it should read "20%", and so on.

Add Some Actions

Now it's time for actions. Add a keyframe to the first frame of the actions layer and bring up the frame properties box. Hit the plus sign and select "If frame is loaded." Select your main scene as the scene to check, and put in the frame that corresponds to 10 percent of the total size of your animation. Then add a "Goto" action, pointing to frame 10 in your preloader. Make sure you check the "Goto and play" box. Repeat this step at frame 20, 30, and so on, with each new "If frame loaded" action while looking for the frames in your main scene that correspond to 20 percent of the size of your animation, 30 percent, and so on.

Next, you need to add some loops. At frame 9 of the actions layer, add a keyframe and bring up the frame properties box. Put in a "Goto" command and set the target to frame 1. Do the same for frame 19, 29, etc. Frame 19 should goto frame 10; frame 29 should goto frame 20... you get the drift.

Now your preloader should happily loop through each section until enough of your main scene has loaded before moving to the next section. Once it finally reaches frame 100, your main scene should start. You may want to add one more 10-frame section at the end of your preloader, so viewers get to see the glory of a fully loaded percentage bar.