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

Flash Tutorial: Standard Preloader

Free Flash Tutorial

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.