Building a Flash Preloader

A preloader is often used on large Flash files that may take a while to download i.e. those containing lots of bitmap graphics, video clips, sounds, or lots of keyframes. It gives the user some indication of how the download is progressing – which is more reassuring to users than a blank screen.

The preloader is usually a short animation or some other kind of indicator of the progress of the download of the Flash file.

The information presented here shows you how to create a ‘progress bar’ – a rectangular bar of colour that grows in length as the Flash movie downloads. It should be straightforward to amend this to show the download progress as a percentage or some other metric.

1. Insert a new Movie Clip Symbol. Draw a rectangular block of colour, and ensure its registration point is on its left hand edge. Place an instance of this movie clip on the main timeline and give it an instance name of ‘progressbar’.
2. On the main movie stage draw an unfilled rectangle around the progress bar – this will represent the area that will be filled up as the file downloads.
3. Add the following code to Frame 1 of the main movie:

   stop();
   
   // creates a timer that runs the preloader function every 10ms
   myInterval=setInterval(preloader,10); 
   
   // defines a function called preloader
   function preloader(){
   
   	// checks if all the frames are loaded or not	
   if (_framesloaded < _totalframes){
   	// scales the progress bar as a percentage of frames loaded
   		_root.progressbar._xscale=(_framesloaded/_totalframes)*100;
   	} else {
   		// plays the main movie and clears the timer
   		play();
   		clearInterval(myInterval);
   	}
   }
   

4. Insert a new blank keyframe at Frame 2 of the Flash Movie. Continue the rest of your movie here. To enable you to test the preloader script – import some large bitmaps, sound files or video clips, then upload your file to the web server and try it out. Alternatively you can test your movie using Flash’s Bandwidth Profiler, ensuring that the option to ‘Show Streaming’ is switched on.

Note: for flash files that don’t have a lot of frames to load, the number of bytes loaded could be used instead.

To obtain the total number of bytes (size) of a Flash file use the following:

tbytes=getBytesTotal();

bloaded=getBytesLoaded();

In the example code, replace _framesloaded with bloaded, and replace _totalframes with tbytes

Another Preloader tutorial