Simple Flash Preloader

As the size of your flash file increases, so too does the time it takes to load it. Visitors to your site may get irritated if they have to wait for the animation to load. Using a preloader can help that - It will load all the necessary pieces prior to displaying the animation. It will also show its progress so visitors will be able to see how much is loaded and hopefully wait for it to finish!

Step 1 What we'll need to do is set up the necessary layers. We'll need one for Actions, which is the scripts being used for the preloader. The Text layer will show the percentage complete for the preloader as text. The Stroke is just the stroke outside the progress bar. We want the progress bar to fill up within the stroke. The Progress bar will visually show the preloader's progress by using a rectangle. And finally, the last layer is the actual animation you want playing after the preloader has finished.

Step 2 On Frame 1 of the Progress Bar layer I inserted a keyframe and drew a red rectangle 200 pixels wide and 20 pixels high: I then selected the progress bar and hit F8 to make it a movie clip. Make sure the registration point is set as below. Why? Well... because we want the progress bar to fill from left to right! In the Properties panel, name your progress bar preloader: On Frame 1 of the Stroke layer, I inserted a keyframe and drew the following rectangle: The above is just a stroke with no fill. The Stroke layer is above the Progress Bar layer. Why did we do it this way? Its quite simple really - we want the progress bar to fill within the stroke area. If we added a stroke to the progress bar itself, it wouldn't look right! On Frame 1 of the Text layer I inserted a keyframe and added a text box as follows: I then selected the text box and on the Properties panel I set it to Dynamic Text and named it loadText:

Step 3 Now that we have laid all the groundwork for our animation we can get to the script that will actually make this preloader work. On Frame 1 of the Actions layer add the following code: var amountLoaded:Number = _root.getBytesLoaded()/_root.getBytesTotal(); preloader._width = amountLoaded * 200; loadText.text = Math.round(amountLoaded * 100) + "%"; I highlighted the important pieces in the script. "preloader" was the name we gave the progress bar. "loadText" was the name we gave the text box. And "200" was the pixel width of the progress bar.

Step 4 On Frame 2 of the Actions layer add the following code: if(_root.getBytesLoaded() == _root.getBytesTotal()) { gotoAndPlay(3); } else { gotoAndPlay(1); } What this script is saying is if the bytes that have been loaded equals the total number of bytes in the file then the preloading is done and you can go to frame 3 and begin playing the animation. If the bytes loaded does not equal the total then go back to frame 1 and keep preloading. NOTE: You may be asking why frame 3 has blank frames for the Text, Stroke, and Progress Bar layers. This is because we don't want the preloader to display once the actual animation is playing, which begins on frame 3. Also, you may not even see your preloader display if your file size isn't that big. What you could do is add a few more objects to your design and then go to Control > Test Movie. The flash player should appear and your movie will play. On the Flash player menu go to View > Download Settings and choose the slowest setting. Then test the movie again and you should see your preloader working.