I will show you how to make a preloader that acts as the cursor on the
screen.
As you can see in the example below, the preloader moves and acts as the
substitute of your mouse. This example is a document with small dimensions.
However, what you will learn in this lesson can be applied to any flash
document.
Of course, the user has to move the mouse over the flash area on the page in
order to see the effect.
Setting up the scenes
1. Open a new flash document. Open the Document Properties
dialog (CTRL+J) and set the Frame rate to 24 fps.
2. Call the layer you're now working in
background.
3. Draw a borderless rectangle of any size on stage using
the Rectangle tool (R).
4. Go to the Color Mixer panel (Window > Color
Mixer) and select the fill color by clicking on the small bucket icon
if it isn't already selected.
Choose Linear as Type.
In the strip near the bottom of this panel, click on little square on the
left and type in #000000 (yes, black!) as color code. Click on the small square
on the right and enter #003399 as code for the color.
This will produce a nice dark gradient.
4. Select the Paint Bucket Tool (K) and
fill the rectangle top to bottom with the gradient you just made.
Select the rectangle and make its dimensions equal to those of the stage.
Then, align it so that it is placed exactly over the stage, covering it
perfectly. You can do all this very quickly by using
the Align panel.
Lock this layer.
5. Open up the Scene panel (Window > Other Panels
> Scene). Double-click on the label of the current scene (the only
one, for now) and call it loader.
6. Click on the Duplicate scene button to make an exact copy
of the current scene. This is really handy - when you need to duplicate some
scene, this simple procedure copies everything - drawings, animations, layers
and actionscript.
Call this new scene site. Close the scene panel. You are now on the
site scene.
7. Create a new layer and call it content. Put an
image on this scene. Let its filesize be between, for example, 60 KB and 100
KB.
This is done just to have some content here. Otherwise, you wouldn't be able
to see the preloading, because the scene would load instantly. When working on a
real site after this tutorial, you will put here the real content, of
course.
8. Create a new layer and call it actions. Click on
this new layer's first keyframe.
Open the Actions panel (Window > Actions). Insert this
simple code here:
stop();
This will prevent the movie from going back to the beginning.
That's it - you have just finished the site scene.
Creating the preloader
9. Go back to the loader scene. You can do this by
clicking on the small icon situated above the timeline, on its right side, and
choosing the appropriate scene.
10. Create a new layer and call it cursor.
Choose the Text tool. In the Properties panel, select Dynamic Text on the
left side of the panel. Set the font size to 16 or bigger. Then, choose a font
you like. Any one, because you are going to embed the necessary characters into
the field.
Click on the Embed button and select Numerals.
In this way, every user will see the font in exactly the same way you see it
on your machine. That's because the information about the shape of these
characters (numerals) will be embedded inside the SWF. And, this will load
quickly because embedding just 11 characters won't add much to the file size.
Click OK.
11. Click and drag on the stage to create a text field. Do
this so that there is enough space for three characters in the text field. You
can type them in to check if there is enough space, and then delete them after
that.
12. In the Properties panel, give the field the instance
name loadingText.
13. With the text field still selected, choose
Modify > Convert to Symbol to convert it to a movie clip.
Call it preloader text or whatever you like. Select movie clip as type
and click OK.
14. Once again in the Properties panel, call the movie clip
you just created loaderCursor (the Instance name again).
Lock this layer.
With everything of the content in place, let me explain you how to use
actionscript to make this nice preloader work.
Making the preloader follow the mouse with ActionScript
15. Create a new layer and call it actions.
16. Select its keyframe (the first and the only one) and
open the Actions panel (F9). Write in the following code:
17. Test your movie (CTRL+ENTER). The site
will load instantly. Test it again while it is running
(CTRL+ENTER again). Move your mouse over the movie and you'll
see how the cursor became the preloader!
Now, let me explain you how this is done.
The first two lines of code,
stop(); Mouse.hide();
stop the movie from going on to the other scene, and then hide the mouse (the
standard cursor of your operating system).
Next, the following code makes the preloader follow the mouse:
The first line defines a function assigned to the onMouseMove
event handler for the loaderCursor movie clip. This means that the
lines between the curly braces { and }, will be executed each time the mouse is
moved.
Between the curly braces, there are two commands that instruct the movie clip
with the dynamic text field to follow the mouse.
The expression this._x means the X coordinate of
this, that is, of the object this function belongs to, i.e. the
loaderCursor movie clip. Next, it says that its X coordinate will equal
the current X coordinate of the mouse (_xmouse). The same thing is
done for the movie clip's Y coordinate in the next line.
The last line is simple:
updateAfterEvent();
It makes these lines inside the curly braces execute each time after the
event has fired. In other words, immediately after a mouse movement is detected.
This makes the preloader follow the mouse placement on the screen smoothly. For
a movement like this, it is better than the onEnterFrame event
handler that comes next.
After that, comes the mechanism that is powering the preloader. It is a
function assigned to the movie clip's onEnterFrame event handler.
This means that this function (everything between its curly braces) will execute
at the speed of the movie (24 fps - 24 times per second).
loaderCursor.onEnterFrame = function() {
I will quickly go over the next lines. If you are interesting in every aspect
of this preloader code, look at the basic
internal preloader tutorial. The first three lines look up the size of the
movie loaded so far, the total size of the movie and make a percentage out of
them.
The last line is simple:
updateAfterEvent();
It makes these lines inside the curly braces execute each time after the
event has fired. In other words, immediately after a mouse movement is detected.
This makes the preloader follow the mouse placement on the screen smoothly. For
a movement like this, it is better than the onEnterFrame event
handler that comes next.
After that, comes the mechanism that is powering the preloader. It is a
function assigned to the movie clip's onEnterFrame event handler.
This means that this function (everything between its curly braces) will execute
at the speed of the movie (24 fps - 24 times per second).
loaderCursor.onEnterFrame = function() {
I will quickly go over the next lines. If you are interested in every aspect
of this preloader code, look at the basic
internal preloader tutorial. The first three lines look up the size of the
movie loaded so far, the total size of the movie and make a percentage out of
them.
Then you have some interesting conditional (if, else if)
statements. The first one tells flash what to do when the percentage is below
10. It puts two zeroes in front of the percentage value so that it would look
better. For example, if the percentage is 8, you will have "008" written in the
text field.
if (percentage<10) { this.loadingText.text = "00"+percentage;
The next else if does the same, but for values between 9 and
100.
} else if (percentage>=10 &&
percentage<100) { this.loadingText.text =
"0"+percentage;
Now, what comes next is the final condition that is fulfilled when the movie
is completely loaded. The value 100 will be displayed in the text field, and the
movie will jump to the next scene (with the gotoAndPlay
method).
Next, the mouse cursor will appear again (Mouse.show). And the
last two statements are important. They are deleting the
onMouseMove and onEnterFrame event handlers. You must
do this, because these two handlers are putting a considerable load on the user
machine's processor. So, once they have fulfilled their purpose, you simply
erase them and move on.
This effect can be applied to both internal and external preloaders. Enjoy
this and try applying some additional effects to this, like changing the movie
clip's opacity in relation to the mouse movement, or its size, color, etc. Play
and experiment! You can download the source file for the preloader shown in this
lesson below.
