Creating a Flash Preloader

This tutorial was written for the Flash Designer software, which allows you to create flash animations in a much easier way than by using Macromedia Flash. You may get Flash Designer here.

To keep visitors waiting for your animation to load you should always display a preloader and advise users how long they will have to wait. In Flash you have to program the preloader manually using getBytesLoaded, getBytesTotal and gotoAndPlay functions. Fortunately Flash Designer does the ActionScript part for you, all you have to do is to put a nice "progress" animation on the preloader frame.

You can create your own animation or use one of stock preloader clips ready to insert on the preloader frame, like the one below (the actual animation doesn't load for demonstation purposes):

To customize the preloader:

1. Open or create your animation
2. Choose "Movie" > "Edit Preloader"
3. Choose "Movie" > "Insert Flash Designer Clip". Navigate to "c:program filesseltecoflash designerloaders" and choose one of the clips. Click OK.
4. Press F9 to preview the preloader
5. Export SWF file and the web page, choose "File" > "Export HTML Page".
6. Upload SWF and HTML file to your web site.
7. Launch the browser and navigate to the page you've just uploaded to watch the preloader loading your animation.

NOTE: The preloader will display only when the animation takes some time to load. This happens only when you download the flash animation over the internet connection and only for the first time. When you view the file locally (for example when you press "Play Animation") the preloader doesn't appear because the animation loads at once, and the preloader has no chance to start showing the progress.

To test the preloader, publish your file on the web site. To display the preloader again you have to clear the cache of your browser.