Ananth: Fire Effect with Mouse Sensitivity

Wednesday, 9 July 2014

Fire Effect with Mouse Sensitivity

Summary

In this tutorial you’ll learn how to create a fire effect that react on the distance of the mouse to the flame. To closer the mouse cursor is to the flame, the bigger the flame will become.
Move the mouse over the flash movie below to see the effect:

Requirements

Flash 8, Flash CS3 or Flash CS4.
Note: The screenshot in this tutorial is made in Flash CS3. It works exactly the same in Flash 8 and Flash CS4. This tutorial is ActionScript 2 (Although no ActionScript is required).

Step 1 – Install the effect component

Download the Fire Flame Effect here. Please follow the installation instructions and drag the component from the component panel into the libary of your .fla file.

Step 2 – Create a shape Movieclip

Create a shape with the shape tool. The shape should be 30px x 312px. The color of the shape doesn’t mater since only the size of the shape will be taken for the calculations of the flame effect and the user will therefor never see this shape.

Convert the shape into a Movieclip [press F8] or right click on the Movieclip -> “Convert to Symbol…”. Give the Movieclip the name “shape”.

Set the instance name of the Movieclip. Use “shape_mc”. Its important to set an instance name here, because otherwise the component will not find the Movieclip. BTW, the naming is up to you, just make sure, that the instance name is unique projectwide.

Step 3 – Apply the component to the Movieclip

Drag the component onto the Movieclip. The component snapps automatically.

Open the component inspector panel Windows -> “Component Inspector”. Set the parameter to the ones in the screenshot. All Movieclip (with proper instance names) are listed in the “Target Shape” select list.

Note: These settings are only applied to this one instance of the effect component. If you draw the component on another Movieclip (somewhere else inside the .fla or in a new project) you have to set the settings again.

Step 4 – Set the instance name of the effect

Give the effect the instance name “fire_effect”.

Step 5 – Add mouse script

Create a new layer, name it “script”, open the ActionScript window with [press F9], Window -> “Actions” or right click on the just created layer and then “Actions”.

Add the following code:

defaultAmount = 5;

defaultInterval = 6;

fire_effect.onMouseMove = function()

{

    var a:Number = 15 - fire_effect._xmouse;

    var b:Number = 312 - fire_effect._ymouse;

    var d:Number = Math.sqrt(a*a+b*b);

    var f:Number = Math.round(d/80);

    fire_effect.amount = defaultAmount - f;

    fire_effect.interval = defaultInterval - f;

}

In line 1 and 2 you define the dafault values to be applied. The onMouseMove function in line 4 will be executed every time the mouse is moved inside the flash movie.
Line 6 and 7 calculates the distance from to bottom middle point of the flame to the position of the mouse. The distance from the mouse point to the flame is calculated in line 9. The variable f in line 10 is the number you will subtract from the default vars set earlier. Finally in line 12 and 13 the new parameter are passed to the component.

Step 6 – Export

Export the Movie Command -> “Test Movie” or [press Ctrl-ENTER] and see the result. If you’re not satisfied, go back and play around both with the parameter in the component inspector panel and the calculations in the ActionScript code.

Download

Click here to download the fla of this tutorial. Note: The .fla includes the trial version of the effect component, which will only work in the Flash IDE (Flash 8, Flash CS3 or Flash CS4) but not inside the browser.
You can also download the Fire Flame Effect Component here.

Ananth