Smooth PreLoader

Written by: James Drake , closebrackets.com
Difficulty Level: Beginner
Download
preloader.fla (version MX)


Intro
This tutorial will show you how to make a smooth preloader for your site. This method does away with the old "ifFrameLoaded" method which led to jerky preloaders such as this one:
preloader2.swf
After you have finished this tutorial you will end up with something like this:
preloader.swf

Note
This tutorial is aimed at users with Flash MX but the ActionScript is identical for Flash 5 . If you wish to acheive this effect in a lower version of Flash it is likely that a lot of re-writing of the script will be necessary, and it may not even be possible. Descriptions of the user-interface within this tutorial are for Flash MX only.

Step by Step

1. Open Flash and start a new project with dimension of 350 X 350, set the frame rate at whatever you want, I usually use 30 fps, set the background colour as whatever you like, I used white for this example.
   
   
2. Name the top layer 'Actions' and make two keyframes on frames 1 and 2. Open the 'Actions' window (Window -> Actions) and select frame 1 in layer 'Actions'. Put the following code into the 'Actions' window:
   stop();
   Do the same for frame 2.
   
   
3. Insert a new layer and name it 'Image', add two keyframes on frames 1 and 2. Import a photo into frame 2, keeping frame 1 empty. This is just to give the preloader some size to work on.
   
   It should now look something like this:
   
   
   
4. Insert a new layer and name it 'PreLoader', and add one keyframe to frame 1, don't put anything in frame 2. In frame 1 use the text tool to write 'Loading:'.
   
   
5. Select this text box with the arrow tool and open the 'Properties' window (Window -> Properties). Make sure the top-left drop-down box says 'Static Text' and then change any other setting to how you like it.
   
   
6. Select this text box with the arrow tool and go to Insert -> Convert to Symbol... Chose 'Behaviour: Movie Clip' and add the name 'PreLoader'. Hit 'OK'.
   
   
7. Double-Click on your new 'PreLoader' movie clip. Name the one layer that is already there 'Static Text' and make three new layers, call them 'Actions', 'Percentage Text' and 'LoadBar'.
   
   
8. Open the 'Actions' window (Window -> Actions) and select frame 1 in layer 'Actions'. Put the following code into the 'Actions' window:
   stop();
   
   
9. On frame 1 of the 'Percentage Text' layer use the Text Tool and drag a text box so it is next to the 'Loading:' text box you already have. Open the 'Properties' window (Window -> Properties), and make sure the top-left drop-down box says 'Dynamic Text'. To the right of the 'Properties' window there is a box labeled 'Var:', give it a value of 'percentage'. Next to that box there is a button labelled 'Character..', click it and then make the following settings. Out of the three options choose 'Only', then check the box that says 'Numerals (0-9)'. In the box at the bottom labelled 'And these characters:' input a value of '%'. Hit 'Done'.
   
   
10. On frame 1 of the 'LoadBar' layer use the Rectangle Tool and draw a small square below the 'Loading:' text box. Select the arrow tool and position your mouse at the very edge of the square and double click. You should have now selected only the border of the square, not the whole thing. Hit 'Delete' on your keyboard.
    
    
11. Select the square and open the 'Info' window (Window -> Info). In the box labelled 'W:' input a value of 1, and in the box labelled 'H:', make it a value of 10. Make sure the values in the 'X:' and 'Y:' boxes end in .0, ie, if you have 34.5 and 23.8, make the values 34 and 24.
    
    
12. Select the small rectange you have now and go to Insert -> Convert to Symbol. Chose 'Behaviour: Movie Clip' and add the name 'LoadBar'. Hit 'OK'.
    
    
13. Open the 'Properties' window (Window -> Properties), and give the box that says '<Instance Name>' a value of 'loadBar'.
    
    It should now look something like this:
    
    
    
14. Exit editing the PreLoader movie clip by double-clicking anywhere on the grey area around the movie, or clicking on the text 'Scene 1', this is just below the list of all the layers in the 'Timeline' window. You should now be back to editing the main timeline.
    
    
15. Open the 'Actions' window (Window -> Actions) and select the 'Preloader' movie clip you have made. Put the following code into the 'Actions' window:
    

    onClipEvent (enterFrame) {
            loading = _parent.getBytesLoaded();
            total = _parent.getBytesTotal();
    if (percent == undefined) percent = 0;
            percent -= (percent-((loading/total)*100))*.25;
            per = int(percent);
            percentage = per+"%";
            loadBar._width = per;
            if (percent>99) {
                    _parent.gotoAndStop(2);
            }
    }

How does this ActionScript work?

1. onClipEvent (enterFrame) {
   This had strange wording for what it actually does. By the look of it it runs each time the movie clip enters a frame, but in fact the effect it actually has it just constantly running the code within it. Just like a loop, but indefinitely.
   
   
2. loading = _parent.getBytesLoaded();
   This gets the amout of bytes of the .swf file that have loaded and assigns it to a variable named 'loading'.
   
   
3. total = _parent.getBytesTotal();
   This gets the total size of the .swf file and assigns it to a variable named 'total'.
   
   
4. percent -= (percent-((loading/total)*100))*.25;
   Now, this is where the magic happens. You don't really need to understand the script, but what it effectivly does is add a 'lag' to the progress of the loading. For example, when he percent of the .swf file loaded goes from 10% to 30%, the old style of preloader would do the same, the loading bar would jump straight from 10% to 30%. This is what we want to get rid of with our preloader. This line of the script makes the loading bar smoothly move up from 10% to 30%, instead of jumping straight up.
   
   
5. per = int(percent);
   This takes the percent of the .swf file loaded and changes it to an integer for display in our text box. We don't want our preloader displaying something like 34.8484847449% do we?
   
   
6. percentage = per+"%";
   Remember the text box we gave a variable of 'percentage'? This line of script writes the percentage loaded to that text box, and adds a 'percent' sign on the end.
   
   
7. loadBar._width = per;
   Remember the small rectange we named 'loadBar'? This line of script increases the width to the percent of the .swf file loaded. So, when the percent loaded is 34%, the loading bar will be 34 pixels wide.
   
   
8. if (percent>99) {
   This says 'if the percent of the .swf file loaded is greater than 99% (ie. 100%) perform the following action'.
   
   
9. _parent.gotoAndStop(2);
   This is the action for the previous 'if' statement to execute. It moves the main timeline to frame 2, the frame containing your picture.
   
   
10. }
    Closes the 'if' statement.
    
    
11. }
    Closes the 'onClipEvent' function.

I'm stuck, how do I use this on my site?
Of course you won't use this EXACT preloader on your site. The purpose of this tutorial is so you can learn by example. If you have followed this through you should have an idea of which bits you can change to suite your site, and which bits you have to keep. But, if you're still stuck, help is at hand.

Within your preloader movie clip there are three things, your static 'Loading:' text box, your dynamic text box for the percentage value and the 'LoadBar' movie clip. Both text boxes can be customised to fit your site and additional graphics and such can be added. Make sure that the box you intend for the percentage to show up keeps it's 'percentage' variable intact.

Next is the LoadBar. I think the easiest way to do this is to position in and resize it (using the 'Info' window) as you want it to be when the movie has loaded 100%. When you have done that write down the current width of it, and then reduce the width to 1. When you exit back to the main timeline, select the 'preLoader' movie clip to edit it's actions. What you need to change is this line here:
loadBar._width = per;
Take the number you previously wrote down, and divide it by 100 (if it was 100 you don't need to do anything). So if your number was 134, you should now have a value of 1.34. Now change that line of code to this:
loadBar._width = per*1.34;
Obviously you will substitue your own values depending on your design.

That's about it. One other thing you may want to be aware of is this line:
_parent.gotoAndStop(2);
This is the action that the preloader performs when the .swf file has finished loading. You should make the beginning of your movie start on frame 2.

Credits
Thanks go to Craig Kroeger at miniml.com and JD Hooge at gridplane.com for help with the ActionScript in this preloader.