Burning Cursor Effect

In this tutorial, I'm going to show you how to create an effect in which your cursor becomes a burning ball!

Note: you will need Flash Adobe 8 to complete this tutorial.

Before we start

If you were to move your mouse very quickly around the stage, you would no doubt notice something that betrays the way this effect was achieved. Namely, you would notice that the flame is in fact composed of many exactly the same animations that are copied right where you mouse is. Pretty cool, isn't it?

Anyway, I divided this tutorial into 3 parts: drawing, animating and coding so that it's easier to read.

Let's get started!

i. First off, create a new Flash document, set its width to 550 and height - 400. The fps should be >30 this time. Also, set the background color to black.

Drawing

i. First, draw a circle with your Oval Tool (O).

Tip: A good way to draw a circle, not an oval, is to hold down the shift key when drawing.

ii. Open your Color Mixer, select the circle and put a gradient on the circle.

The gradient should include colors such as light yellow, orange and red.

Above you can see how your circle will look like when you put a gradient on it.

iii. Convert the circle to a Movieclip by pressing F8 and selecting Movieclip in Type. Name it fire.

iv. Double-click on the Movieclip. This will get you inside the Movieclip.

v. Once inside, select the circle and convert it to a Movieclip again. This time, name it insidefire.

vi. Before we proceed to animating, we need to make it more fire-like. The best way to do that is to apply filter to the insidefire Movieclip we've just created. To to that, simply select the Movieclip and go to the filters tab in your Properties Window.

Set both the x and y blur to 25.

Also, it's a great idea to add a glow filter to it.

Now, we're free to animate!

Animating

i. Select the 15-th frame and press F6 to create a keyframe there.

ii. On this keyframe, do the following:

a) decrease the alpha of all gradient swatches, as if it was fading.

b) make our flame much thinner.

c) drag the flame up.

iii. Then, right-click anywhere between the 1-th and 15-th frame and create a shape tween there.

iv. Select the 16-th frame and press F7 to create a blank keyframe there. Now, we want the animation to stop at this point. To do that, we will use a very simple code. So, select the blank keyframe and press F9. In the Actionscript window that should appear, type the following code:

stop();

What this code does is, of course, stop the animation. It is necessary that we do that because otherwise the animation will keep looping infinitely.

[This is how you timeline should look like in the end]

Remember that you can see my FLA, if necessary.

On the next page, we're going to have a look at how to make everything work by using Actionscript code.