Free Flash Tutorials	Home • Tutorials • Forum • Webwasp Members • Templates • Mates • Food • Contact

Flash - Preloader

105 Intermediate
Flash Compatibility: MX (Also for Flash MX04 or Flash 5)

Written by: Phil Schulz
Sub Editor : Wendy Saunders

Length: 1800 words

Assumed Knowledge : How to create a Flash Movie

There is nothing worse than having to wait for a movie to load and not know what it is doing. Is it loading or has the web page crashed? A preloader resolves this. The viewer can see what is happening. It is particularly important for full page Flash movies such as the webwasp home page.

Example: Download the Flash file  Int 105a

To view preloader press refresh or F5 (if you have broad band it may load too quickly to see).

The preloader displays the percentage of the movie loaded and a loader bar which gives a visual display of the percentage done.

Cross Ref: This tutorial has an updated version. If you are using Flash 5 or Flash MX continue reading here. If you are using a newer version of Flash you should follow the updated tutorial: Flash MX04 and Flash 8

 

Cross Ref: There are also several other Flash Pre-Loader tutorials on this site. To ensure that you are following the right tutorial for your needs, you may wish to read a brief description of each: Preloader Tutorial Listing

Two ways of setting up a preloader:

1. Total Load: The preloader described in this tutorial waits for the entire movie to load, then plays. This is usually necessary for games, which may not play correctly, if they are not fully loaded, or Flash movies that have most of the content in the first few frames.
   
2. Partial Load: The preloader in the webwasp site, only loads part of the movie, and then goes to the content page. This means that even though the main page loads, about half the movie is still loading. Thus viewer may not see all the graphics, but they can navigate the movie, as all the menus are loaded. As they move around the remaining graphics load. It is a compromise between 'visual effect' and speed. I give an example of a partial loader right at the end of the tutorial.

Step one: Create a loader bar on stage

1. Create a new Movie. Mine is: 200 x 130px
2. Right click (Mac - Ctrl click) on frame 2 and select: Insert Frame
   The preloader needs to be two frames long.
3. Rename Layer 1 to: Loader bar
4. Use the rectangle tool to create a long thin rectangle. Mine is: 150 x 10px.
5. Double click the stroke (outline), so that only the stroke is highlighted.
   
   Stroke is dotty when highlighted.
6. Go to: Edit > Cut
7. Click on the insert Layer button .
8. Go to: Edit > Paste in Place
   The stroke should now be in its own layer and in the correct position. If you refresh the page (F5) to play the movie above, you will see the bar moves and the outline does not, which is why you need to do this.
9. Rename the Layer: Loader outline

Step two: Convert loader bar to symbol instance

1. Select your: Rectangle
   Not the stroke.
2. Go to: Insert > Convert to symbol
3. Name your symbol: Loader bar
4. For Behavior select: Movie Clip
5. For Registration select: Top Left
   
   Registration: Top Left
   
6. Click: OK
7. Open your Property panel: Window > Properties
8. Type in an Instance name: BAR
   
   Instance name: BAR
   
   Note: Actionscript is case sensitive, so type it exactly the same way.

Step three: Percentage display text box

1. Create a new layer called: Text box
2. Drag the text tool on stage to create a small text box, it need only be enough to display up to four characters: 100%
3. In the Property panel select: Dynamic Text
   
   
4. In the Property panel type in a var (variable) name: TEXT
   
   Do not get this confused with Instance name!
   
5. In the Property panel select any type style, font and colour that you may want.

Step four: Actionscript frame 1

1. Create a new Layer called: Actions
2. Right click on the empty keyframe and select: Actions
3. Apply the following actions:
   
   Note: You can copy and paste the actions from here (or the Flash movie if you have downloaded it). Use the key commands Ctrl C (copy) and Ctrl V (paste). To do this the Actions Panel must be in expert mode. You select Expert mode by clicking on the side menu button ( ) which is just under the cross on the top right hand side of the panel. Select: Expert
   
       LOADED = Math.round(getBytesLoaded());
       TOTAL = Math.round(getBytesTotal());
       PERCENT = LOADED/TOTAL;
       BAR._width = PERCENT*150;
       TEXT = Math.round(PERCENT*100)+"%";
       if (LOADED == TOTAL) {
           gotoAndPlay(3);
       }
   
   I will explain the actionscript presently. First I would like to finish the movie.

Step five: Actionscript frame 2

1. Place the following actionscript in frame 2
   
       gotoAndPlay(1);

Step six: Testing the Preloader

1. In one of the Layers (I used Loader bar) right click in frame three and select: Insert Blank Keyframe
2. Place something large (in file size) in this frame so that you can test the movie. A Jpeg is best.
   Note: On a PC the easiest way to get a temporary image is to press the Print Screen button on the keyboard and paste the screen grab into the new frame.
   
   
   Your Layers should look similar to this
   
   
3. Now you are ready to test the movie: Hold the Ctrl key down and press Enter.
4. Go to Debug and select: 28.8
   This emulates a 28.8k modem, yes very slow, always test worst case scenario.
5. Hold the Ctrl key down and press Enter.
   The second time you do this key combination, it reloads the Movie as if downloading on a 28k modem. You should see the percentage counter going up and the bar moving from left to right.

ActionScript Explained: Frame 1

LOADED = Math.round(getBytesLoaded());
TOTAL = Math.round(getBytesTotal());
PERCENT = LOADED/TOTAL;
BAR._width = PERCENT*150;
TEXT = Math.round(PERCENT*100)+"%";
if (LOADED == TOTAL) {
    gotoAndPlay(3);
}

Note: All the script that is in caps, are random Variable names and have no meaning in actionscript. They are simply containers to hold information.

Line 1: LOADED = Math.round(getBytesLoaded());
The variable named LOADED does two things:

1. Finds out how many Bytes have loaded getBytesLoaded
2. Rounds this number off into a whole number Math.round

Flash then remembers this number and applies the number every time the variable named LOADED is used in the script.

Line 2: TOTAL = Math.round(getBytesTotal());
Finds the total file size in Bytes and rounds this number off into a whole number .

Line 3: PERCENT = LOADED/TOTAL;
Creates a new variable called PERCENT which divides the number of loaded bytes by the total.
Flash will then remember this number.

Line 4: BAR._width = PERCENT*150
Remember that we named the bar on stage: BAR. This script controls the width of the bar. Remember my bar is 150 pixels wide. If your bar is a different size, change the 150.

Line 5: TEXT = Math.round(PERCENT*100)+"%";
We named the text box: TEXT. This line controls what is displayed in this box. You do not want your percentage counter to go over 100%, so do not change this number! The +"%" adds the percentage symbol % onto the end of the number.

Line 6: if (LOADED == TOTAL) {
If the total number of loaded bytes is the same as the total bytes in the movie then...

Line 6: gotoAndPlay(3);
Go to and play frame 3.

Note: If this is not true it will be ignored, which means that the movie will go and play frame 2.

ActionScript Explained: Frame 2

Line 1: gotoAndPlay(1);
This is the script that is in frame 2. The purpose of this to send the play head back to frame 1. Flash then re-does all the maths and updates the display on stage. If you did not have this Flash would calculate the maths once and the display would get stuck on 1%.

Tip and Notes

Remember a preloader can have all sorts of content, including something for the viewer to read and animation. Don’t make the preloader too big or you will need a preloader to load the preloader!

When you upload your movie, the preloader will not display the percentage from 1% but will start on a higher number. That is because the preloader has to load and although the size of the preloader is small, it is still part of the total file size, which is how the preloader calculates the percentage. This is resolvable, but not worth the hassle, few people will mind that a percentage of the movie has already loaded, what they want to know is how long they have to wait!

There are two preloader in the webwasp sample files. They display more information than this preloader, such as how many KB the movie has to load:

Sample 1    Sample 2

Partial Load

LOADED = Math.round(getBytesLoaded());
TOTAL = 101012;
PERCENT = (LOADED/TOTAL);
BAR._width = PERCENT*150;
TEXT = Math.round(PERCENT*100)+"%";

ifFrameLoaded (3) {
    gotoAndPlay(3);
}

A partial preloader is very similar to the one you created in this tutorial. There are only 2 lines that are different: Line 1 and 6.

Lines 1 - 5: Controls what is displayed on screen.

Line 1: LOADED = Math.round(getBytesLoaded());
Returns the number of bytes loaded to the nearest whole number.

Line 2: TOTAL = 101012;
Represents the total number of bytes that you wish to preload. You will need a different number. You can find out what this number should be by going to: File > Publish Settings > Flash (tab) and select the option: Generate Size Report. Click on: Publish. This will create a text file in the same location as your Flash movie. Open the text file and you can read how many bytes have to load for each frame of your movie.

Line 3: PERCENT = (LOADED/TOTAL);
Returns a percentage.

Line 4: BAR._width = PERCENT*150;
Controls the size of the bar.

Line 5: TEXT = Math.round(PERCENT*100)+"%";
Displays the percentage.

Lines 6 - 7: Controls the movie. The two sections of script are not related!

Line 6: ifFrameLoaded (3) {
Checks to see if Frame 3 is loaded then ... (not the entire movie, as in the previous preloader)

Line 7: gotoAndPlay(3);
If frame 3 is loaded, movie will go to and play frame 3.

Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here