Flash glossary: Preloader

To accommodate the loading of large SWF files or graphic assets in your Adobe Flash Professional project, you can build preloaders to control how the content loads and use functions to define the loaded content's appearance. Because users do not enjoy looking at a blank screen, preloaders make it possible to display a message, image, or animation that indicates to the user that new content is loading.

Using ActionScript, you can programmatically display the percentage of the loaded file. Alternately, you can create a short animation (such as wine pouring into a goblet) that moves at the speed of the loading content and finishes just as the load is complete. By offering this type of communication, you can entertain users while providing them with precise information about the status of the loading process.

Since the preloader may be one of the first elements that users encounter when visiting your site, you owe it to yourself to craft a well-designed preloader that matches the site's design and purpose. A good preloader will keep the user informed and entertained, so that they don't leave the site prematurely.

A simple rectangular progress bar or percentage indicator will suffice, but an engaging animation makes the time spent waiting for the content takes to load seem shorter.

To test a preloader, you can use the Simulate Download feature. After you test the movie, choose View > Simulate Download and select the desired connection speed. Experiment with different bandwidth settings so you get an idea of how the preloader performs at different connection speeds. You can also use the Bandwidth Profiler to ensure that your preloader clip is small enough, and to compare the actual load progress with the progress reported by your preloader. Try loading an extremely large, high-resolution bitmap image to see how the preloader works as a large file loads on a machine with a slower connection.

While it is always useful to test the preloader in the Flash authoring environment, it is a best practice to upload the files and test the live site. If possible, test the project on the same server where the finished site will reside.

To see a gallery of creative preloaders, visit the Pretty Loaded gallery. To learn more about creating preloaders, see the section on ProgressEvent in the ActionScript 3 Reference.