Flash 8 Cookbook

20.4. Using a Progress Bar to Create a Graphical Preloader

Problem

You want to create a preloader that displays a progress bar indicating how much of the movie has loaded.

Solution

Modify the script from Recipe 20.2 to update the _xscale property of a movie clip.

Discussion

Although simply displaying a text-based progress indicator to the user (as in Recipe 20.3) may work for some applications, you’ll more frequently want to display the progress in some sort of visual, animated manner. The most common such indicator is the progress bar. The progress bar, as the name suggests, is a rectangular shape (the bar) that indicates the progress as the file downloads. Although you can certainly make more elaborate sorts of indicators, the progress bar is the standard, and the basic principals in creating a basic progress bar apply to any progress indicator.

The script in Recipe 20.2 takes care of the majority of the work in creating any sort of basic preloader—graphical or not. So you’ll want to use the same script when adding a progress bar. However, you’ll want to then add just one line of code (shown in boldface):

	stop();
	var nPreloaderInterval:Number = setInterval(this, 'checkPreloader', 100);
	
	function checkPreloader():Void {
	var nLoadedBytes:Number = this.getBytesLoaded();
	var nTotalBytes:Number = this.getBytesTotal();
	mProgressBar._xscale = nLoadedBytes / nTotalBytes * 100;
	if(nLoadedBytes >= nTotalBytes) {
	  clearInterval(nPreloaderInterval);
	  play();
	}
	}

The new line of code tells Flash to ...