::: Tutorials > Flash

Percentage Preloader
Create a preloader indicate the percent loaded.


Tutorial by Ka Ming
Tuesday March 31, 2003

Download the source files from this tutorial: Download (17kb)

You had probably seen many of the web sites with flash content that said “Please wait, loading…” This is the preloader, which is an indicator that tells the visitor that the flash content is loading, instead of seeing a blank screen causing confusion to the visitors.

This tutorial will cover two of the action scripts that are required in the making of a preloader. They are:

.getBytesLoaded ()
.getBytesTotal ()

What do they mean?
.getBytesLoaded () : Tells how many bytes you had download on the movie.
.getBytesTotal () : Tells how big the movie is.

Let’s start our percentage preloader:

1

Create a new movie. The first step we'll do is add three frames in the timeline (you can also select the first frame and press the F6 key twice to archive this).
On the first frame add a dynamic text box (text tool>properties> dropdown menu> select "dynamic"). Name this text box as the instance of percent. Now copy the first frame and paste it in the second frame of the movie.
The third frame is where you start putting your contents, you should put some content in that frame so that you can test if the preloader is working.

TIP: You may also want to add some animation or sound clips in the first frame to keep your visitors entertained while your movie is loading.

2

Now select the first frame and right click> actions to open the action script window. Copy the following script:

percent = Math.floor(getBytesLoaded()/getBytesTotal()*100);
percent.text = percent + "% is loaded";


and paste them in the action script window (right click on the blank space and select paste).

3

Right click on the second frame and open the action script window, copy the following script:

if (percent == 100){
gotoAndStop(3);
}else{
gotoAndPlay(1);
}


and paste it in the action script window with the same process as step two.


4

Finally add the script: stop(); to the fourth frame’s action script window, this makes sure that the movie will not loop by itself so that the visitors will not see the loading screen forever!



Copyright 2002 BLUEPRINT Los Altos High School Web Club. All rights reserved.
201 Almond Ave. Los Altos, CA 94022