Flash Explained

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.

5 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.

6 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.

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

8 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.

9 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.

Top of page

Creating the preloader

10 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.

11 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.

12 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.

13 In the Properties panel, give the field the instance name loadingText.

14 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.

15 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.

Top of page

Making the preloader follow the mouse with ActionScript

16 Create a new layer and call it actions.

17 Select its keyframe (the first and the only one) and open the Actions panel (F9). Write in the following code:

stop();
Mouse.hide();
loaderCursor.onMouseMove = function() {
this._x = _xmouse;
this._y = _ymouse;
updateAfterEvent();
};
loaderCursor.onEnterFrame = function() {
movieLoaded = Math.round(this._parent.getBytesLoaded()/1024);
movieTotal = Math.round(this._parent.getBytesTotal()/1024);
percentage = Math.floor(movieLoaded/movieTotal*100);
if (percentage<10) {
this.loadingText.text = "00"+percentage;
} else if (percentage>=10 && percentage<100) {
this.loadingText.text = "0"+percentage;
} else if (percentage>=100) {
this.loadingText.text = percentage;
gotoAndPlay("site", 1);
Mouse.show();
delete this.onMouseMove;
delete this.onEnterFrame;
}
};

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

loaderCursor.onMouseMove = function() {
this._x = _xmouse;
this._y = _ymouse;
updateAfterEvent();
};

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

movieLoaded = Math.round(this._parent.getBytesLoaded()/1024);
movieTotal = Math.round(this._parent.getBytesTotal()/1024);
percentage = Math.floor(movieLoaded/movieTotal*100);

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.

} else if (percentage>=100) {
this.loadingText.text = percentage;
gotoAndPlay("site", 1);
Mouse.show();
delete this.onMouseMove;
delete this.onEnterFrame;
}
};

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!

Download the zipped source FLA file.

Comments

Submit a comment