Building Preloaders - 20.4 Using a Progress Bar to Create a Graphical Preloader
(Page 5 of 7 )
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 adjust the scale in the x-direction for a movie clip calledmProgressBar 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 ofmProgressBar. 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).
Next: 20.5 Creating Preloaders for Files with Exported Symbols >>
More Flash Articles
More By O'Reilly Media
|
 This article is excerpted from chapter 20 of the Flash 8 Cookbook, written by Joey Lott (O'Reilly, 2006; ISBN: 0596102402). Check it out today at your favorite bookstore. Buy this book now.
|
|
/ 16 
