Learn to create the basic preloader with a loading bar showing how much of
the movie has loaded. The advantage of a graphical preloader of this kind is
that is the most intuitive for a user to see how much more she or he must wait
to acces your site. Here's a nice preview of what you'll be creating in this
tutorial:
Placing the elements on stage
1. Open a new Flash document. Create two more layers, so you
have three of them in total. Call them (bottom to top): bar,
frame and actions. Lock the upper two layers.
2. In the "Colors" part of the Tools panel, choose a stroke
color that is in good contrast with a fill color of your choice. Don't choose
white if your movie background is white.
3. Choose the Rectangle tool (R) from the
Tools panel and choose "hairline" as type of border in the Properties panel,
below the stage.
4. Click and drag on stage to draw a long and thin rectangle
- your preloader bar.
If you accidentally deselected the bar, select it now again with the
Selection tool (V). Be sure to have selected both the fill and
the outline. Now, in the properties panel, check that the coordinates for your
drawing (X and Y) are whole numbers. If they are not, make them so by entering a
number manually (for example,120.0 is OK, while 120.5 is NOT).
5. Select the outline by double-clicking on it.
6. Cut the outline by choosing Edit >
Cut or pressing CTRL+X (Command+X on
a Mac).
7. Lock the current (bar) layer and unlock the
frame layer. Click on its first keyframe to select it and choose
Edit > Paste in Place to place the outline exactly in the
same position as before, but on a different layer.
8. Lock the frame layer and unlock the bar
layer. Select the fill color shape in the bar layer and choose
Modify > Convert to Symbol. In the Convert to Symbol dialog,
choose "Movie clip" as Type and be sure that the Registration point of your
movie clip is in its top left corner (see image below). Call the movie clip
progress bar mc or whatever you like. Click OK.
Cool! Now, why is the registration point important? Because it is from this
point that your progress bar will stretch when told to do so via actionscript.
If the registration point of your movie clip were in the center, the movie clip
would stretch to both sides (left and right) as your site loads, instead of only
to the right.
9. With the movie clip you just created still selected, go
to the Properties panel and give it an Instance name, so you can manipulate it
with actionscript. Call it loadingBar.
10. Create a new layer, call it placeholder. This
is the layer where you'll place a movie clip into which the external SWF (your
site) will load. Select its first keyframe (and only one).
11. Create an empty movie clip into which your site will be
loaded. Do this by choosing Insert > New Symbol. Call it
empty mc, select "Movie clip" as Type and click OK. Now, just click on
the "Scene 1" link above the timeline. There! You just created an empty movie
clip!
12. Open the library (Window > Library)
and you'll see empty mc inside. Drag an instance of this movie clip
onto the scene. If you followed everything correctly up to this point, your
empty movie clip should be situated in the placeholder layer. The empty
movie clip is represented on the stage just by its registration point. Move this
movie clip to a suitable position (remember, your external SWF file which
contains your site will be loaded in it) - the top left corner of the stage is
ok.
13. With the empty movie clip still selected, go to the
Properties panel and give it an instance name: siteLoader, for
example.
Lock the placeholder layer.
Preparing the site files
14. Save your document if you haven't already (making saving
often the documents you are working on a habit). Now, in the same folder where
you saved this document, put your SWF file containing your flash site. If you
haven't got one right now, download
the sample SWF file I made so you can quickly continue with the following
steps.
Writing the actionscript
15. Select the first keyframe in the actions layer.
Open the Actions panel (Window > Actions). Enter the
following code:
16. Test your movie (Control > Test
Movie). While in test mode, select View > Simulate
Download to simulate a 56 K modem user downloading your movie from the
web. You will see your preloader showing how much more there is to wait before
the site shows up.
makes the external file mysite.swf load into the siteLoader
movie clip. This is done with the loadMovie command. With this same
command, you can load JPEG images in your flash movie, which is very handy,
especially if you have a picture gallery.
IMPORTANT Always specify the full path to the SWF
you want to load, otherwise it might not work. This is because of security
measures implemented in the Flash player. And, don't forget to put http:// in
the address.
The next line,
loadingBar._xscale = 1;
tells the loadingBar movie clip (the progress bar) to set its
_xscale property to 1. Why? To make its width the smallest
possible, because at this point, the outer movie has just begun loading.
REMEMBER The _xscale property tells
how much an object is wide in relation to its original width. This is a
percentage value. To explain this, imagine that your movie clip is for example
300 pixels wide. If you set its _xscale property (the default value
of which is 100) to 1, it would mean 1% of the original 300 pixels, which is 3
pixels.
We'll return to the _xscale property soon, let's see what's
next:
This whole piece of code is an onEnterFrame event assigned to
your loadingBar movie clip. This is a movie clip type of event -
buttons don't have it. The onEnterFrame event tells a movie clip to
do something repeatedly, so many times per second as the framerate of your movie
is set to (e.g. if your movie framerate is 12 fps, the event will do the
specified things 12 times in a second).
In this case, the movie clip executes the function. A function is a set of
methods (commands, things to do) and variables (pieces of data) put together to
be executed when the function is called upon.
define two variables, kBytesLoaded and kBytesTotal
which store how much of your site movie has been loaded up to this point and
what is the total filesize (in kiloBytes) of your movie.
Since you want flash to know how much of the site has been loaded, you must
write the right path to the movie clip which is loading the external file.
That's why there is this._parent.siteLoader before the
getBytesLoaded() method. It tells flash, this (this
movie clip the actionscript is assigned to, in this case, loadingBar)
_parent movie clip (the root, or main timeline, in this case) has a
movie clip called siteLoader on it. Tell that movie clip to see how
much of the external file you told it o load in the first line has been loaded
up to this point.
The second line is the same, except it tells the siteLoader movie
clip to look the total filesize of the external file that is being loaded.
The information obtained and stored in both variables is divided by 1024,
because in that way, you get kilobytes from bytes (a kiloByte, or KB, has 1024
bytes).
Next, that information is used to obtain a percentage from it, and store it
in a variable called percentage. This a simple mathematical
operation - divide the part with the whole, multiply it with 100 and you get the
percentage. the whole operaqtion is rounded with the Math.round
method to, well, round the result of the operation. :)
This line of code tells flash that this (remember,
this refers to the loadingBar movie clip) movie clip's
_xscale property should be equal to the value stored in the
percentage variable. In short, this says that the width of the
progress bar should be equal to the percentage of the total size of the external
file loaded up to this point. Now, ain't that cool? :)
this._xscale = percentage;
Finally, when nearly all of the movie has been loaded, you tell Flash to
delete the onEnterFrame event because it makes no sense to leave
this operation running in a loop if it served its purpose. You also take the
load off the use computer's CPU by doing this, which is important. Always
discard any unnecessary operations once you've achieved what you wanted.
if (percentage == 99) { delete
this.onEnterFrame; }
You can also tell Flash to hide the preloader movie clip if needed, or to
turn it off completely, but you've learned enough important concepts in this
tutorial, so I'll leave that for some other lesson. Download the source FLA file
for this preloader below.
