Creating a flash preloader

A preloader is a display that tells the user how much of the flash movie has loaded. In this tutorial, we will create a simple preloader with a progress bar and percent loaded.

Create a long rectangle. Convert the fill of the rectangle to a movie clip symbol. This will be the progress bar. Name it "progressBar". Set the registration point to the far left.

Create a dymanic text field and name it "percentloaded". Your stage should look like this:

Select the first keyframe and add the following code:

stop();
myInterval = setInterval(preloader, 10);
function preloader() {
if (getBytesLoaded() >=getBytesTotal()) {
play();
clearInterval(myInterval);
}
progressBar._xscale = (getBytesLoaded()/getBytesTotal())*100;
percentloaded.text=Math.round(getBytesLoaded()/getBytesTotal()*100)+"%"
}

Let me explain the code:
stop()
Tells flash player to stop playing the movie
.

myInterval = setInterval(preloader, 10);
Defines a variable called myInterval. myInterval identifies a setInterval action. The setInterval action calls the function preloader every 10 milliseconds.

function preloader() {
if (getBytesLoaded() >=getBytesTotal()) {
play();
clearInterval(myInterval);
Creates a function called preloader. The condition if creates a loop. (getBytesLoaded() >=getBytesTotal()) retrieves the number of bytes loaded and the total number of bytes of the flash movie and compares them. The >= is used in conjuction with the if to specify the condition for the loop. If the number of bytes loaded is greater than or equal to the total size of the flash movie, then... The play(); statement tells Flash player to play the movie if the condition is true. clearInterval(myInterval); clears the myInterval variable. Since the movie has downloaded, the myInterval variable is no longer needed. clearInterval() removes it.

progressBar._xscale = (getBytesLoaded()/getBytesTotal())*100;
This statement changes the width of the movie clip progessBar. (getBytesLoaded()/getBytesTotal())*100 yields a percentage of the downloaded movie. This percent is corresponded with the width of the movie clip progressBar.

percentloaded.text=Math.round(getBytesLoaded()/getBytesTotal()*100)+"%"
This statement generates the text in the dynamic text field percentloaded. getBytesLoaded()/getBytesTotal()*100 yields the percentage of the movie that has loaded. The Math.round() command rounds the percentage to a whole number. +"%" adds a percent sign to the end.

There are many ways to use this preloader. I created a seperate scene in my movie called preloader and pasted this frame as the first keyframe of preloader. You can also paste this frame into the first keyframe of your movie.

You can download the finished preloader here.

To see this preloader coupled with a movie, see my photo album.

Back to my flash showcase

| email me |