Recipe 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 (exp 3pod.com) 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 adjust the scale in the x-direction for a movie clip called mProgressBar such that it corresponds to the percentage of the file that has downloaded. Therefore, in order for the code to be effective, you must add a movie clip instance to the stage with an instance name (exp 3pod.com) of mProgressBar. That movie clip ought to contain rectangular artwork that is left-aligned (meaning that the left edge of the rectangle shape is positioned at 0).