Burning Cursor Effect

Creating eye-catching effects in Flash might not be an easy task. Well, unless you know some tricks!

For example, only the most skilled Flash developers can create impressive effects with Actionscript alone. Why not then combine your traditional animation skills (by "traditional" I mean "not Actionscripted") with just some basic AS code?

This tutorial is an example of this tactic. In order to create a "buring cursor effect", or a "flame trailer" if you will, like the one you can see below, we are first going to create a short animation within a Movieclip, and then do the magic out of this by writing a few lines of code.



 

Before we begin

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, that the flame is in fact composed of many exactly the same animations that are copied right where you mouse is. This is the "trick" I talked about.

Anyway, in order to make understanding this tutorial easier, I have divided it into 3 parts: drawing, animating and coding.


 Let's get started!

 i. First off, create a new Flash document, set its width to 550 and its height—400. The fps should be less than 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 be composed of at least 3 colors:  light yellow, orange and red. If you want your fire to be more refine, then adding more colors is an option.

Above is the image of the gradient I used. As you can see, it's not very complex.


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 is a way of getting inside, or "entering" if you will, a 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, to enhance the look of our flame,  it's a great idea to add a Glow Filter to it.



Once finished, the whole thing should look more or less like in the below image:


Okay, we are now free to animate!


Animating

i. Go inside the insidefire Movieclip. Select the 15th frame and press F6 to create a keyframe there.

 


ii. On this keyframe, do the following:

1. Decrease the alpha of all gradient swatches, as if the fire was fading.

2. Make our flame much thinner.

3. Drag the flame up—let it go about 30 pixels upwards.

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

iv. Select the 16th 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 your Timeline should look at the end of this section ]


Remember that you can see my FLA if you are not sure of something. You can find it on the next page of this tutorial.

On the next page, we're going to have a look at how to make magic out of this animation by using Actionscript code.

Average: 4.2 (66 votes)