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:
|
|