Flash Tutorial: Preloader	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial: Standard Preloader

Free Flash Tutorial

This is a very robust pre loader. It works in both ActionScript 1 and AS 2. It also woks in all versions of Flash from 5 up. It is the simplest Preloader that I have come across, which is probably why it is so reliable. It is straight forward to create and works. What more could you want from a preloader!!

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. This is the preloader that is used on the webwasp home page.

There are no Components used in this preloader so you have to build this preloader from scratch. This means that it takes a little longer to make but it also meant that it is a very lean and small file. Components save on build time but are bulky on file size.

Cross Ref: This tutorial was originally written for Flash MX. If you wish to view the original: Flash MX

 

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 Listings

Example: Download the Flash file  Int 105a

Flash 8 example of preloader: Pancake Rocks , New Zealand.

Note: If you can see the photo and not the preloader press Refresh (F5) in your Browser. Once a Flash Movie has loaded the Browser may not truly refresh or re-load the Movie. Therefore if you did not see the preloader in action: Click here

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

Different 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: Setting up the Document

We need a new Flash file that is smaller than the Jpeg photo.

1. Go to: File > New > General Tab > Flash Document > OK
2. Go to Modify > Document
3. Set the width to: 550 pixels
4. Set the height to: 400 pixels
5. Click: OK

Step Two: Setting up the Publish Settings

1. Go to: File > Publish Setting
2. Under the Formats Tab for Type Select: Flash
   
   
   
   
3. Click the: Flash Tab
4. Select: Flash Player 6 (you could select from 5 up)
5. Select: ActionScript Version 1 or 2
   
   
   Selecting Player 6 and ActionScript 1.
   
   
   If you are building a preloader it is likely that your Flash Movie is large. So I would suggest that you also select Compress Movie. This can make a dramatic difference to the size of the final Movie. I have often seen up to 40% reduction in the file size, depending on the Movie's content. In my experience compressing a Movie makes no difference to the performance.
   
   
6. Select:
   
   
7. Click: OK

Step Three: Drawing the Loader Bar

1. Right click (Mac: Ctrl click) on Frame 2 and select: Insert Frame (Not Keyframe)

Note: The preloader needs to be 2 frames long.

2. Rename Layer 1 to: Loader Bar
3. Select the Rectangle Tool:
4. Create a long thin: Rectangle
5. Return to the standard Selection Tool:
6. Select any colours that you might want for either the: Fill or Stroke
7. Double click in the Centre of your rectangle to select both: Stroke & Fill
8. Move you rectangle to the: Centre
9. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctr4l F3)
10. Set the rectangle width to: 150px
11. Set the height to: 10px.
12. Double click the stroke (outline), so that only the stroke is highlighted.
    
    
    Stroke is dotty when highlighted.
    
    
13. Select an appropriate stroke width. Mine is: 2px
14. Go to: Edit > Cut
15. Click on the Insert Layer button:
16. Go to: Edit > Paste in Place

Note: The stroke should now be in its own layer and in the correct position. What we are aiming for is a bar that animates but with a static outline as in the illustration below:




17. Rename the Layer 2 to: Loader Outline
    
    
    Timeline so far.

Step Four: Converting Loader Bar to an MC

1. Select your: Rectangle (Not the stroke)
2. Go to: Insert > Convert to symbol
3. Name the symbol: Loader Bar
4. For Behavior select: Movie Clip
5. For Registration select top left:
   
   
   Symbol settings.
   
   
6. Click: OK
   
   
7. In the Property Inspector type an Instance Name: myBar
   
   
   Instance Name: myBar

   Note: Actionscript is case sensitive, so type it exactly as it is here: myBar

Step Five: Percentage Display Text Box

1. Create a new layer called: Text
2. Select the Text Tool:
3. Drag the Text tool on Stage to create a small: Text Box

Note: The Text Box needs to be big enough to display up to four characters: 100%

4. In the Property panel select: Dynamic Text
   
   
   Selecting Dynamic Text.
   
   
   
5. In the Property Inspector type in a Variable (Var) Name: myText
   
   
   Do not get this confused with Instance name!
   
   
6. In the Property Inspector select any: Type style, Font and Colour
   
   
   The Text Box positioned just below the Loading Bar.
   

Step Six: Actionscript Frame 1

1. Create a new Layer called: Actions
2. In the Actions Layer right click on Frame 2 and select: Insert Keyframe (not frame)
3. Select Frame 2 of this frame and open the Action Panel: Window > Actions (F9)

Note: In Flash 8 you can now use the context Menu: Right click on Frame 2 and select: Actions (F 9)

Also in Flash 8 Macromedia have brought back the old Flash MX Normal/Expert mode to the Actions Panel. Yeah!!

Just to make it seem like a new feature they have re-named it: Script Assist which is either switched on (Normal Mode) or off (Expert Mode). Look for the new button in the Actions Panel:



You can only type, copy or paste in the Actions Panel if Script Assist is switched off. You do this by clicking the button above or by going to the side menu button:    This is just under the cross on the top right hand side of the Actions Panel. If Script Assist is ticked you can't paste into the Actions Panel. Remove the tick:



To copy and paste use: Ctrl C and Ctrl V.



4. Apply the following ActionScript to Frame 2:
   

   myLoaded = Math.round(getBytesLoaded());
   myTotal = Math.round(getBytesTotal());
   myPercent = myLoaded/myTotal;
   myBar._width = myPercent*150;
   myText = Math.round(myPercent*100)+"%";
   if (myLoaded == myTotal) {
       gotoAndStop(3);
   } else {
       gotoAndPlay(1);
   }
   
   
   I will explain the ActionScript presently. First I would like to finish the Movie.

Step Seven: Testing the Preloader

Before it is possible to test the preloader you must have some content that is reasonable large in file size:

1. Create a new frame and call it: Content
2. Right click in Frame 3 and select: Insert Blank Keyframe
   
   
   The Timeline now has all it's Layers.
   
   
   

Note: You need to place something large (in file size) in this frame so that you can test the Movie. A Jpeg photo is best.

Example: Download the Flash file  Int 105b.jpg


Google Image Search : An easy way to find a picture is to use: Google Image Search

Save any image to a suitable place on your computer where you will remember its location.

3. With Frame 3 still selected go to: File > Import > Import to Stage (Ctrl R)
4. Browse to the location of your image, select it and click: Open

Note: You should now be able to see your Jpeg Photo on the main Stage. If so you are ready to test the Movie:

5. First save your file: File > Save (Ctrl S)
6. Hold the Ctrl Key down and press Enter: Ctrl + Enter

Note: This will open a new Window.

7. Go to: View > Download Settings > 56K

Note: This will make Flash emulates a 56k modem. I guess this is fast becoming very slow but it is always best to test worst case scenario.

8. Hold the Ctrl Key down and press Enter: Ctrl + Enter

   Note: The second time you do this key combination, it reloads the Movie as if downloading on a 56k modem. You should see the percentage counter going up and the bar moving from left to right.

ActionScript Explained:

myLoaded = Math.round(getBytesLoaded());
myTotal = Math.round(getBytesTotal());
myPercent = myLoaded/myTotal;
myBar._width = myPercent*150;
myText = Math.round(myPercent*100)+"%";
if (myLoaded == myTotal) {
    gotoAndStop(3);
} else {
    gotoAndPlay(1);
}

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

1. Finds out how many Bytes have loaded so far 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 myLoaded is used in the script.

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

Line 3: myPercent = myLoaded/myTotal;
Creates a new variable called myPercent which divides the number of loaded bytes by the total file size. This returns a decimal number between 0 and up to 1. So to get a percent we will need to times it by 100.

Line 4: myBar._width = MyPercent*150
Remember that we named the bar on stage: myBar. 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: myText = Math.round(myPercent*100)+"%";
We named the text box: myText. 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 (myLoaded == myTotal) {
If the total number of loaded bytes is the same as the total bytes in the movie then do the following...

Line 7: gotoAndStop(3);
Go to and Stop on frame 3. This is the main content of the Movie. You may want it to be: gotoAndPlay(3);

Line 8: } else {
Otherwise do the following...

Line 9: gotoAndPlay(1);
Go to and play 1 creates a loop as the Play Head will return to 1 and play onto frame 2 and continue doing this until the condition on line 6 is correct. This loop ensures that the bar and the text box is continually updated with the latest information.

Line 10: }
Closes the 'else' statement.

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!

Partial Load

myLoaded = Math.round(getBytesLoaded());
myTotal = 101012;
myPercent = (myLoaded/myTotal);
myBar._width = myPercent*150;
myText = Math.round(myPercent*100)+"%";

ifFrameLoaded (3) {
    gotoAndStop(3);
} else {
    gotoAndPlay(1);
}

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

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

Line 2: myTotal = 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.

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

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

Tip: I personally do not like that the Preloader uses up frames 1 and 2. I prefer to build it as above and then the Movie content will start on frame 1 scene 2. I find this neater and simpler when testing. To achieve this change the line:

gotoAndStop(3);

To:

gotoAndStop("Scene 2", 1);

I hope that you have found this useful. Happy Flashing.