The Flash Preloader

The Flash preloader is usually the first scene that is seen while a lengthy Flash movie is downloading from the Web. You may see a horizontal bar increasing in length as the movie loads to show the progress graphically. Additionally there is usually a percentage of movie loaded data shown and fancy preloaders may even show number of bytes loaded, bytes remaining as well as length of time remaining. The preloaders use Actionscript to obtain the number of bytes loaded to be divided by total bytes of the movie to calculate the percentage of movie loaded. Dynamic text is used to display this data.

The older Flash movies used the ifframeloaded command, but Macromedia decreed this command as being "deprecated" a few years ago and stated that it with the other depracated commands should be avoided. This command would search for say, the 500th frame out of a total of 600 and could start the movie to play while the last 100 frames were still loading. Older Flash movies using versions 4 and 5 would use this.

Now we are to typically use the getBytesLoaded and getBytesLoadedTotal commands with a 'if' and 'then' for the preloader along with say a movieclip that's the graphical bar that grows as the movie downloads. Additionally, simple division of the number of total bytes by bytes loaded, times 100 can yield a percentage to be displayed by dynamic text.

The actionscript for a preloader might look something like this:

bytes_loaded = Math.round(_root.getBytesLoaded());
bytes_total = Math.round(_root.getBytesTotal());
getPercent = bytes_loaded/bytes_total;
_root.loadBar._width = getPercent*100;
_root.loadText = Math.round(getPercent*100)+"%";
if (bytes_loaded == bytes_total) {
_root.gotoAndStop(3);
}

bytes_loaded is the variable is calculated from the getBytesLoaded commanded and of course bytes_loaded is derived from the getBytesTotal commanded. getPercent is the first variable divided by bytes_total. When multiplied by 100, one gets percentage.

loadBar is the name of the movieclip which is the graphic, a horizontal bar which lengthens as the download progress. The _width function is what controls it's width as a function of the getPercent value. The greater the getPercent, the longer loadBar is. Note: when a movieclip is created such as the loadBar here, it's register must be set on the left. Otherwise it will be centered by default and the movieclip will increase in size from the middle, not the left.

The second frame has the following Actionscript:

gotoAndPlay(1);

If bytes_loaded doesn't equal bytes_total, the preloader loops back to frame 1. Once those two equal, the action goes to frame 3 where a stop action holds things in place and a Play button can be pressed to play the movie, obviously!

on (release)
{
play();
}

is the actionscript for the Play button.

There are 2 preloader files available below. Both have loading bars and percentage readout. They're in Flash version 6 and are ready to use, but can be readily customized however one wishes. They're both Zipped.

A little fancier one with more data displayed will be coming shortly.

For further study on preloaders get the book, "Teach Yourself Flash MX ActionScript in 24 Hours from Sams books from any good bookstore or Amazon.com. Some good material can be read at Flashkit.com as well. Enjoy!