3 Comments February 23rd, 2009
In this tutorial you will learn how to create a realistic smoke effect. You can change a lot of options, for instance the emitter point, the amount of smoke to be generated and the direction the smoke will fly in.
This is the final result:
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 or Flash CS4. This tutorial is a ActionScript 2 Project (although no ActionScript is required). This effect is also available as ActionScript 3 version.
Note: The performance of the AS3 version is 3-4 times better.
Step 1 – Install the effect component
Step 2 – Create shape Movieclip
Draw a rectangle on the canvas, select it and convert it into a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…”. Give the Movieclip the name “shape”.
Note: Only the dimensions from the Movieclip are taken. The Movieclip will not be visible in the final swf. So color does not mater here.
Set the instance name of the Movieclip. Use “shape_mc”. Its important to set an instance name here, otherwise the component will not find the Movieclip. BTW, the naming is up to you, you can choose another name if you want. Just make sure the instance name is unique project-wide.
Step 3 – Apply the effect to a Movieclip and set parameter
Drag the component onto the Movieclip. The component snaps automatically.
Open the component inspector panel: “Windows” -> “Component Inspector”. Here you can set the parameters for the effect. All Movieclips with instance names in this frame are listed in the “Shape Movieclip” select list. Since you have only one Movieclip the component assumes that you want to apply the effect on the Movieclip “shape_mc”. Here you can set the duration of the transition.
Note: These settings are only applied to this one instance of the effect component. If you drag the component on another Movieclip (somewhere else inside the .fla or in a new project) you have to set the settings again.
Step 4 – Export
Now set the background color of the fla to black. Export the Movie Command -> “Test Movie” or press [Ctrl-ENTER] and see the result. If you’re not satisfied, go back and change the settings in the component inspector panel.
Step 5 – Play!
Now you can play around with the parameter, to customize you effect. You can also use this effect with ActionScript. Find the full documentation here.
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 Flash Smoke Effect Component here.
Here you can find a video tutorial of how to implement a different effect.