Flash tutorial - Generic Preloader
NOTE: This is a Flash5 tutorial and although it will work in MX, some shortcuts / placement of elements may be different.
  This tutorial will teach you the fine art of creating your own generic preloader. That is, a preloader that you can drag and drop into ANY movie clip without modifying the code in any way.
  The preloader in this tutorial includes:
    - an indication of the percentage loaded
    - a preload 'bar' that gets wider as the movie loads
    - a countdown letting the user know how much left is to load
 
Step 1: Setting things up
  Ok, first of all, create a new movie in Flash for the preload file (Ctrl-N) and Modify->Movie (Ctrl-M) so that the frame rate is 30FPS, 250 x 250 pixels wide and high and the background color is white.
   Next, draw a thin box for the preload bar with no outer lines / stroke. Choose any color you want for the bar.
  My bar was set up like this:
    W:200
    H:10
    Color: #FF66CC
  Now, switch to the Text tool (t) and in the Text Options section of the Character panel (Ctrl-T) set it to Dynamic Text. Drag out three text boxes all of the same size above the top-left corner of your bar. Holding <SHIFT> whilst dragging the boxes out is a good idea. Use any font and color you like, but bear in mind using the _sans, _serif or _typewriter fonts will reduce your filesize considerably as they don't need to be exported with the .swf file.
  Select the first box and set the variable field to 'percent' (without the quotes), the next box should be set to 'kLeft' and the last should be set to 'speed'. Note the use of capitals. The variables names must be EXACTLY as they are written here.
  You should now have something that looks like the image to the right.

Step 2: Making the movie clip

  Select everything (all the textboxes and the bar) and Insert>Convert To Symbol (F8). Name the new movie clip 'generic preloader'. Hit OK. Double click on the 'generic preloader' symbol you just created on your canvas in order to edit it, or right click on it and Edit In Place.
  Next, select the bar you created and convert it to a symbol as well (F8). Name it 'preload bar'. In the 'preload bar' movie clip (double click on the bar in order to edit it), align the left edge of the bar to the stage. It should look something like this:

  Go back up a level into your 'generic preloader' symbol (click on it's name at the very top of the screen):

  Now, realign the bar so it is back where you want it to be.
  Finally, add the stop() action to frame 1 of your layer (Ctrl-Alt-A or Window->Actions in order to bring up the Object Actions palette). It's easier to switch to Expert mode and type it in. The image on the right shows you where the script should be and how to do it.

Step 3: Adding the brain

  Righty, Insert->New Symbol and name it 'preloader script'. In frame one of your 'preloader script' symbol type this script using Expert Mode in the Object Actions palette:

decLoaded = (_parent._parent.getBytesLoaded()/_parent._parent.getBytesTotal());
percLoaded = Math.round(decLoaded*100);
bytesLeft = (_parent._parent.getBytesTotal() - _parent._parent.getBytesLoaded());

_parent.percent = percLoaded add "% loaded";
_parent.Kleft = (Math.round(bytesLeft/1024)) add "K left";
_parent.bar._width = percLoaded*(200/100);

Note that on the last line of the script, the '*(200/100) should change depending on the width of your bar. If your bar is, say, 150 pixels wide you should change it to *(150/100). If it's 75 pixels wide, change it to *(75/100) and so on. Create a blank keyframe on frame 2 of the 'preloader script' symbol and add this script:


if(percLoaded != 100){
     gotoAndPlay(_currentframe-1);
} else {
    _parent._parent.play();
}

The _parent._parent.play() in this script is what will happen when the movie holding your preloader is loaded. I ususally stop() the main movie whenever I put a preloader in, so here a command to play() will be fine - after the movie is loaded, the preloader tells the main clip to carry on playing. You may want to change this though to something else - it really is up to you.
 

Step 4: Finishing off

  Finally, in your 'generic preloader' symbol, give the 'preload bar' symbol the instance name 'bar'. In Flash5, you will need the Instance Panel to do this (Window->Panels->Instance or Ctrl-I).
  Next, open the Library (Ctrl-L), create a new layer and drag and drop your 'preloader script' from the library onto the canvas. It doesn't matter where you put it. The script will show up as a small circle on your canvas but will not show up when you actually play the movie.
   And that's the complete preloader! Save your file. Whenever you need a preloader for anything again, simply File->Open As Library your generic preloader FLA file and drag and drop the 'generic preloader' symbol from the library onto your main movie.
 
Some notes on implementation
  Testing offline -
Although the preloader will work fine when offline, the load speed will be so fast that you probably won't see it appear for any more than 1/30th of a second. Therefore, please try testing it within one of your own movies and upload it!
  Best use - Since the preloader you have construced will tell the movie it is in to play() when everything's loaded, you will need to stop() your main movie (the one that holds the 'generic preloader' script) on the same frame that you have placed the preloader in. Make sure your preloader is on your timeline for ONLY THIS FRAME as well. To make it clearer, this is how I have mine set up: