Wednesday, September 16, 2009

Create a very Realistic, custom Class, Dynamic Smoke Effect in Actionscript 3












In the root directory of the .fla file create a new folder and name it script. Now open your favourite text editor and copy and paste the following code

/*
*The smoke effect is achieved by creating small circles
*They are continuously moved upwards
*A BlurFilter is applied to make them look realistic
*As they float above their dimensions are increased and the alpha reduced
*Actually only 40 particles are present and they are continuosly
recycled to prevent the main memory occupied by the .swf file
from increasing.
*/


package script{

import flash.display.Sprite;
import flash.display.Shape;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.filters.BlurFilter;
import flash.utils.Timer;


public class Smoke extends Sprite
{
/*this will be the parent container*/
private var smoke_mc:MovieClip = new MovieClip();

/*color of the smoke*/
private var color:uint;

/*radius of each smoke particle*/
private var partRadius:Number = 1;

/*BlurFilter for the smoke particles*/
private var blur:BlurFilter = new BlurFilter(8,8,2);

/*timer to attach smoke particles*/
private var timer:Timer = new Timer(100);


/*
the constructor takes 3 parameters-
X and Y coordinates of the point of origination
and the color of the smoke
*/

public function Smoke(xc:Number,yc:Number,col:uint)
{
/*attach the parent movieClip*/
smoke_mc.x=xc;
smoke_mc.y=yc;
addChild(smoke_mc);

/*assign the color*/
color=col;

/*start the timer*/
timer.start();

/*listener for the timer. the function startSmoke
is called every 100 miliseconds*/

timer.addEventListener(TimerEvent.TIMER,startSmoke);
}

/*attaches one smoke particle to the stage*/
private function startSmoke(e:TimerEvent)
{
/*if 40 particles has been attached
stop attaching any more */

if(smoke_mc.numChildren>40)
{
/*stop the timer*/
timer.stop();

/*remove the timer listener*/
timer.removeEventListener(TimerEvent.TIMER,startSmoke);
}

/*atach a particle to the parent movieclip*/
smoke_mc.addChild(smokeParticle());
}


/*Create and return a fully formed smoke particle*/
private function smokeParticle():Sprite
{
var smokePart:Sprite = new Sprite();

smokePart.graphics.beginFill(color);

/*create the particle at a random point
between +2 and -2 pixels from the given
X coordinate*/

var randX = -2+Math.random()*4;
smokePart.graphics.drawCircle(randX,0,partRadius);

smokePart.graphics.endFill();

/*blur the particle*/
smokePart.filters=[blur];

/*add more randomness to the X coordinate*/
var randDist = -10+Math.random()*20;
smokePart.x+=randDist;

/*move the particles*/
smokePart.addEventListener(Event.ENTER_FRAME,moveUp);

return smokePart;
}


/*
move and resize the particles
change the values to see their
effects on the smoke
*/

private function moveUp(e:Event)
{
/*if the particle is visible*/
if(e.currentTarget.alpha>0)
{
/*move it upwards*/
e.currentTarget.y-=1;

/*increase the width*/
e.currentTarget.width+=0.5;

/*incraese the height at a lesser rate*/
e.currentTarget.height+=0.3;

/*reduce the alpha*/
e.currentTarget.alpha-=.004;
}
/*if the particle is not visible
restore Y to 0 ,X to a random
value, width and height to the
original radius and the alpha to 1*/

else
{
e.currentTarget.y=0;

var randDist = -5+Math.random()*10;
e.currentTarget.x+=randDist;

e.currentTarget.width=partRadius;

e.currentTarget.height=partRadius;

e.currentTarget.alpha=1;
}
}
}
}

This will be your custom class. Save this file in the folder named "script", with the name "Smoke.as". Now open

your .fla file and hit Ctrl+J to bring up the Document Properties window and set the Width and Height to 200

and 300 and the Background Color to 0x000000 (Black).
Click on Ok and then select the first frame of the layer and hit F9. In the Actions window that pops up, Copy

the following lines of code

/*import the custom class*/
import script.Smoke;

/*call the constructor to create a new instance of the Smoke class
change the X and Y coordinates and the Color of the smoke here.
*/

var smoke:Smoke=new Smoke(100,150,0xBBBBBB);

/*add the instance to the stage*/
addChild(smoke);

Thats it. Hit Ctrl+Enter to test your movie.
**
Add Objects to your movie and create multiple instances with different colors for a more complicated effect

Download the source files here

4 comments:

  1. That doesn't look like smoke. It looks more like steam.

    ReplyDelete
  2. since i am a beginner, i liked it.

    ReplyDelete
  3. I think this one is cool too:
    http://activeden.net/item/dynamic-smoke-fx/481438

    ReplyDelete