Building Preloaders - 20.3 Building a Preloader that Displays Load Percentage

(Page 4 of 7 )

Problem

You want to build a preloader that continually updates a display of the percent loaded.

Solution

Divide getBytesLoaded( ) by getBytesTotal( ), multiply the output by 100, and use a dynamic text field to display the output.

Discussion

The basic preloader script discussed in the previous recipe serves as the foundation for this preloader script. With the preceding script, nothing happens until the movie is fully downloaded, at which time the if statement checking load status evaluates to true, a play( ) action is executed, and the preloader movie clip is removed.

In this variation of the script, I’ve added a line of code (shown in boldface) that outputs the percent that has loaded to a dynamic text field on the stage:

  stop();
  var nPreloaderInterval:Number = setInterval(this, "checkPreloader", 100);

  function checkPreloader():Void {
    var nLoadedBytes:Number = this.getBytesLoaded();
    var nTotalBytes:Number = this.getBytesTotal();
    tProgress.text = Math.round(nLoadedBytes / nTotalBytes * 100) + "% downloaded";
    if(nLoadedBytes >= nTotalBytes) {
      clearInterval(nPreloaderInterval);
      play();
    }
  }

In addition to adding the script, you need to add the dynamic text field to the stage in frame 1. Create a dynamic text field, and give it an instance name oftProgress.

See Also

Recipe 8.2, Recipe 20.2

Next: 20.4 Using a Progress Bar to Create a Graphical Preloader >>
 

More Flash Articles
More By O'Reilly Media

Comments On: Building Preloaders

· This article is an excerpt from the book "Flash 8 Cookbook," published by O'Reilly....   >>> Post your comment now!

Buy this book...

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.