What to Think About When Designing Your Preloader

As I mentioned above, the Flash preloader does not always have to be a rectangular bar moving from left to right. However, there are some guidelines that you need to keep in mind when creating your custom preloader.

Progress Animation

The progress animation is the meat of the preloader. This animation needs to communicate graphically the progress of the load by indicating the following information:

• How much has loaded
• How much is left to load
• How fast is it loading

To be truly effective, the animation needs to have a clear beginning and an end. For example, if your animation is a shape that gradually changes color from red to green as the file loads, the user won't know that they are waiting for green or how far from red they have come. Anyone should be able to know what the load status is at any point in the preloader’s progress animation. There are ways to achieve this without restricting yourself to the standard rectangular bar.

If you are especially tied to something like the color change idea, or some looping animation, then you should include a text field that displays the percentage of the load that is complete. I've included an example that features both an animation and a percentage indicator later in this article.

File Size

Macromedia Flash Player will not display the contents of a frame until everything on that frame is completely loaded. If there is a movie clip on a frame of the main Timeline, the frame will not display until that entire clip, and every other clip on that frame, has loaded. This is very important to keep in mind when creating your preloader and placing it in your file. The preloader needs to be the first item that appears in the Timeline, and it needs to be alone on the Timeline for at least one frame to ensure that it will load completely and be ready to display before other content starts loading.

It is also important to keep the byte size of your preloader as low as possible. Otherwise, the user will be looking at a blank screen before the preloader loads. When testing the movie in Flash, use the Bandwidth Profiler to check the byte size of each frame of the main Timeline to make sure that the frame where the preloading will occur is light.

This file size rule does not necessarily apply to preloaders that are used within a site to load additional content. The example code included with this article creates a preloader that can be used for the initial load of the site, and then easily reused to load additional content. On sites where the preloader idea just couldn’t be made small enough, I use a very simple loader for the initial load, and then the more elaborate version later in the site to load additional content.