There is a certain type of preloader often seen on flash sites: the one where
the text showing the percentage of the movie loaded changes color as the loading
bar passes over it. This is done with the use of a mask.
To see what I mean, look at the flash movie below. This is the one you'll be
making in this tutorial. The size of this preloader, including the image of the
sparrow and the logo, is just 5 KB! Now isn't that just extra cool? :)
1. Open a new flash document.
2. Using the rectangle tool (R), draw a
rectangle 300 px wide and 10 px high on the stage. Make its fill color #660000,
and its stroke (edge) color black.
Creating the movie clip containing the preloading bars and text fields
3. Select the rectangle (both the fill and the edge) and
convert it to a movie clip symbol (F8). Call the movie clip
shows loading. Double-click on the movie clip to enter its
timeline.
4. Once inside the movie clip, call the layer you're on
loading bar. Select the rectangle's edge by double-clicking on it. Cut
the edge (Edit > Cut), lock this layer. Create a new layer,
call it frame, paste in place the edge right in it (Edit >
Paste in Place). Lock this layer.
5. Go back to the loading bar layer and unlock it.
Select the rectangle (the fill that stayed after cutting away the edge) and
convert it to a movie clip (F8). Call the movie clip
loading bar. Make sure its registration point is in the upper left
corner. This is important, because you want the loading bar to stretch from left
to right, and not some other way.
6. With the movie clip still selected, go to the Properties
panel and give it the instance name loadingBar. Make its width 1 pixel
by entering this value in the W field. Lock this layer.
7. Create a new layer and call it black text. Put
this layer below the two other layers.
8. Select the Text tool (T) and select the
Dynamic Text option in the Properties panel. Select a cool pixel font made for
flash :)
If you don't have a pixel font, go to the Orgdot's site and download the free pixel
fonts. The folks at Orgdot are way cool because you can use their fonts
completely free, even for commercial projects! I use their fonts in my tutorials
:)
Once you've downloaded their fonts and installed them, make sure you set the
font size to 8 in the Properties panel because they render properly only at that
particular size.
9. Draw a text field on stage by clicking and dragging. It
doesn't have to be big, because it will contain just the numbers showing the
percentage of the external flash movie being loaded.
What's important is that, once you have drawn your dynamic text field, you
must also set its X and Y coordinates in the Properties panel to round numbers
if you wish the pixel font to render perfectly.
10. In the properties panel, give the text field the
instance name blackText. On the right side of the panel, click the
Embed button and select the Numerals property and click OK.
That way, the number characters for this font will be embedded with the
movie. That means every visitor to your site will see the exact same font. Why
is this necessary? Simply because if you don't embed the needed characters in
the movie, Flash player will look for them on the user's machine. And, believe
me, the average user does NOT have an exotic pixel font installed on hers/his
computer.
11. With the text field still selected, copy it, create a
new layer above the layer loading bar and call it white text.
Lock the black text layer. Paste in place the text field in the
white text created layer.
12. Select this second text field and change its Instance
name to whiteText. Lock this layer.
Making the mask
13. Create a new layer above the white text layer
and call it mask. Unlock the loading bar layer, select the
loadingBar movie clip in it and copy it.
Lock the loading bar layer, select the mask layer and paste
in place the movie clip in it. Give this movie clip the Instance name
maskBar.
Right-click on the mask layer and select Mask. This layer will
become a mask layer, and the layer beneath it will automatically get masked by
it.
14. You need to mask the loading bar layer too.
Click on it and drag it upwards until you see a thick line appear indicating
that the layer is ready to fall into place.
Release the mouse and the layer will become masked.
To make things easier to understand, here is a little diagram of the
shows loading movie clip structure I made for you:
The black text field on the bottom is seen right away when the movie starts
loading. There are two layers on top of it, the loading bar and the
white text. The white text is shown in yellow on the diagram,
so you can better see it. They are both masked with the mask layer.
The maskBar is an instance of the loading bar movie clip.
You will animate it later with ActionScript, exactly the same way and at the
same time as the loadingBar movie clip. In that way, the loading bar
will progress, and when it arrives over the text, the white text field will
begin to show (because the mask will get stretched over it thanks to
ActionScript code), and the bar will cover the black text beneath it.
It isn't difficult at all, see? :) A small trick giving you a nice effect.
And, yes, of course, there is the frame on top of everything, giving the user
the possibility to see how much more there is to wait before the movie starts,
in addition to the percentage shown by the two text fields.
15. Now that everything is in place and properly named, go
back to the main scene.
16. The complex movie clip you just exited, select it on
stage and give it the instance name progressTracker. Call the layer it
is situated on progress tracker mc or whatever you like. Lock this
layer.
Creating an empty movie clip
17. Make a new layer and call it place holder mc .
Here you will put an empty movie clip that the main site content will load
into.
18. Go to Insert > New Symbol. Select
movie clip as symbol and call it empty mc. Click OK. Click on Scene 1
link to return to the main scene and create an empty movie clip in that way.
19. Open the Library (CTRL+L for PC and
Command+L for Mac) and drag an instance of empty mc to
the stage. Position it in the top left corner of the stage with the aid of the
Align panel.
In the Properties panel, give it the Instance name placeHolder. Lock
this layer.
Test your movie. The site will load instantly if you've followed everything I
explained to you up to this point. Press CTRL+ENTER
(Command+ENTER on a Mac) again to simulate a modem download.
You should see the preloader at work.
Explaning the ActionScript that makes the preloader work
I won't go into much detail here, because the thorough explanation on how to
make a progress bar can be found in the tutorial
about making a preloader with a loading bar. I will explain the more
important point of this tutorial - how does the ActionScript in conjunction with
the design work to make the effect obtained possible.
tells flash to load the mainsite.swf movie into the clip called
placeHolder.
NOTE 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 defines a function which is linked to the
progressTracker movie clip's onEnterFrame event. That
means the function will be executed as much times per second as there are frames
per second defined in the document's framerate. This document's framerate is set
at the deafult 12 fps, which means the function will execute 12 times per
second.
progressTracker.onEnterFrame = function() { ... all the function's code goes here ... }
The first three lines of code inside the function define three variables:
movieLoaded, movieComplete and
percentage. They respectively hold the values of how much of the
external movie has been loaded so far (in bytes), what's its total size (in
bytes too) and the percentage of the movie loaded so far.
The third variable (percentage) derives its value from the first
two by use of a simple mathematical formula. The formula says that the
percentage is obtained by dividing the part with the whole, and then multiplying
the result with 100. The final result of the operation is then rounded to a
whole number.
Next, the movie clips loadingBar and maskBar have their
_xscale properties manipulated so that they match the percentage of
the movie loaded so far. It can easily be seen from the lines of code that the
two movie clips will get stretched the exact same way at the same time.
Then, you have an if statement. It says that if the value of the
percentage variable is below 10, the text in both
blackText and whiteText text fields should have a zero
character added in front.
This is made so that when the percentage value is below 10 (let's say it's 7)
the fields do not display "7" but "07" instead.
The next portion of code says that if the value of the
percentage variable equals 100, the onEnterFrame for
this movie clip should be deleted. This is done because if the external flash
movie has loaded completely, there's no sense in leaving the event and the
function attached to it occupy memory space.
The line this._visible = false; tells Flash to turn off the
visibility of the progressTracker movie clip. It has served its purpose
and therefore, you are hiding it. Always clean up the things which have served
their purpose and will not have any futher use in your project.
The two commented lines serve the purpose of hiding the movie clip containing
the sparrow image and the movie clip containing the logo. I have commented out
these lines because they are optional. If you want to put the sparrow in your
project, save the image below this paragraph to your computer. The logo is
simple text typed with the Times New Roman font.
So, after that just remove the coments (//) from these lines.
The final else says that if every previous condition does not
exist (percentage less than 10 or equal to 100) the text fields should just
display the value of the percentage variable.
And that's it! Check out my tutorial on creating a preloader
which uses a mask over an image to gradually show a bottle - it looks cool!
Also, don't forget to download the source file for this lesson's preloader
below.
