Tutorials

July 1, 2009

Graphic Design – Making Smoke in Flash

More articles by »
Written by: Par
Tags: , , , , , , , ,
thepuff-tn

Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg ThisSubmit to reddit

What good is smoke? Let’s think for a second. What produces smoke? Failing mechanical equipment, grenades, guns, volcanoes, factories, fires, vehicles, and probably a million other things. So does your Flash game need smoke, well, that’s for your to decide. But the fact of the matter is we can produce some rather convincing smoke with a very simple bit of code and a little Adobe Photoshop. So let’s make some smoke.

Creating Our Smoke Graphic Texture in Photoshop

Open up Photoshop and create a new document 40×40. Now go to your brushes window (F5) and select the brush in the image below.

thepuff-0

and change a few of the settings on this brush as in the image below.

thepuff-01

Now simply go in the middle of your canvas and make a smoke puff. Set the opacity down a little maybe 20% and start drawing. Make a little texture to it.

thepuff-1

It should look a little something like the above. Take your puff and save it as a png. If you don’t like how your puff looks then you can feel free to copy mine above. Just save it, it’s a png and will work well.

Setting Our Smoke Puff up in Flash

Okay. Very simple, Import from the Library your smoke puff. File > Import > Import to Library…

Now just drop the image of your smoke puff dead center in the middle of a new MovieClip, name is SmokePuff.  Your stage should look like the image below:

thepuff-2

Okay so one more thing left to do and you are set. Right click your SmokePuff MovieClip from the Library(CTRL+L) and select Linkage… Now just copy what you see below and click okay.

thepuff-3

One last thing… set your document class to Main. Nice. Flash is ready, let’s start writing some code.

Writing the Actionscript to make some Smoke

Okay guys, this has been a super quick tutorial so far. Lots of images and little to say. Let’s get into the code that will say everything we need to make our smoke fly beautifully. Honestly guys this code is so straight forward, let me just post the Smokepuff.as class at once and explain it later. Make sure you save it to com/asgamer/graphics

package com.asgamer.graphics
{
 
	import flash.display.BlendMode;
	import flash.display.MovieClip;
	import flash.events.Event;
 
	public class Smokepuff extends MovieClip
	{
 
		public var vx:Number;
		public var vy:Number;
 
		public function Smokepuff() : void
		{
			alpha = Math.random();
			vx = Math.random() - Math.random();
			vy = Math.random() * 3 - 5;
			scaleX = scaleY = Math.random();
			addEventListener(Event.ENTER_FRAME, loop, false, 0, true);
		}
 
		private function loop(e:Event) : void
		{
			alpha -= 0.01;
			y += vy;
			x += vx;
			scaleX = scaleY += 0.02;
 
			if (alpha < 0)
				removeSelf();
		}
 
		private function removeSelf() : void
		{
			removeEventListener(Event.ENTER_FRAME, loop);
			parent.removeChild(this);
		}
 
	}
 
}

Let’s break it down:

  • We have a vx(velocity x) and vy(velocity y) class variable. Both are numbers and will hold the velocity of our smoke puff.
  • In our constructor we set up some basic information we need to use through our smoke puff.
  • alpha = Math.random(); We need some diversity with our puffs, let’s make them all start at a random alpha.
  • vx = Math.random() – Math.random(); Set the vx to something randomly between -1 and 1
  • vy = Math.random() * 3 – 5; We need a negative vy so our smoke will move upward. This line will give us a number between -5 and -2 and some diversity in the speed of our smoke.
  • scaleX = scaleY = Math.random(); Choose a random value to start our smoke’s size. Once again to add some diversity.
  • addEventListener(Event.ENTER_FRAME, loop, false, 0, true); each time we enter a frame… call loop.
  • alpha -= 0.01; Make the alpha go down with each frame.
  • y += vy; x += vx; Apply our velocity to our smokepuff.
  • scaleX = scaleY += 0.02; Make our smoke spread out as it travels.
  • if (alpha < 0)  removeSelf(); If our smoke is no longer visible… let’s get rid of it.
  • removeSelf() no need to fully explain this. It simply removes our event listener and removes the smoke puff from the display stack.

Alright, so that makes our smoke move.  Let’s write the code for the main class.

package
{
 
	import flash.display.Stage;
	import flash.display.MovieClip;
	import flash.events.Event;
	import com.asgamer.graphics.Smokepuff;
	import flash.display.Sprite;
 
	public class Main extends Sprite
	{
 
		public function Main() : void
		{
			addEventListener(Event.ENTER_FRAME, loop, false, 0, true);
		}
 
		private function loop(e:Event) : void
		{
			var smokepuff:Smokepuff = new Smokepuff();
			smokepuff.x = 250;
			smokepuff.y = 250;
			stage.addChild(smokepuff);
		}
 
	}
 
}

Okay breaking this down is extremely simple. We’re just creating an event listener to call loop on every enter frame like we did in Smokepuff. In the loop class we simply are creating a Smokepuff and positioning it at (250, 250) and adding it to the stage. From here our Smokepuff code will do everything on it’s own with a little help from garbage collection in the end.

Ready to see what it looks like?

Awesome we’re done. Here’s the final source:
Making Smoke in Flash Source Code Zip Archive

Similar Posts:


Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg ThisSubmit to reddit


About the Author

Par
Hey! Don't be surprised, I'm a flash developer. While Flash is definitely one of my favorite languages to develop in, most of all I just like making games. If you want to see the games I've developed so far head over to my website, DigitallyBold, in the link below. If you want to know more about what I'm working on now and in the future be sure to follow me on twitter.




23 Comments


  1. A nice and simple but effective tutorial. Nice one!


  2. Looks clean, simple and effective.
    Will keep this in mind.

    Thanks!


  3. Josh

    As far as 2D game particles go, I’d always stick with using bitmapdata and render buffer system. This way you wont run into performance issues later on when you have thousands of particles moving and sometimes interacting with each other on the screen.


  4. Very usefull man!

    You can put a movieclip in Multiply for better effect :D


  5. very cool! thanks for the tut.


  6. Par

    Definitely good point. Thanks.


  7. Great effect, thanks.


  8. I’m new to CS4 so I’m running into a problem when trying to right click on the movie clip and selecting linkage. I can do this in CS3 but its not showing up in CS4. Anyone care to help out on this?


  9. Heruka

    Actually, you have to right-click on the movieclip in the Library and select Properties. in that, you can link your clip with a class by checking “Export for ActionScript” and specifying the class.

    If you’re directly right-clicking a movieclip on the stage, you can try selecting “Show in Library” to find it in the Library and then perform the actions I mentioned earlier.


  10. Lee

    Im loving the tutorials, they have helped me more then any other site has, hoping you’ll put out more eventually :D


  11. noshun

    How can you apply this for lets say a dust trail from someone running? I also found this tutorial it looks similar:

    http://www.rnel.net/tutorial/Flash/11015

    Im going to try both and see the results.


  12. Great tutorial. I am in the process of switching from AS2 to AS3, I am still a little clueless about AS3.


  13. Great, it’s as simple as useful.
    You could add some realism just adding a little rotation:

    In the constructor:
    rs = Math.random() * 6 – 3;

    In the Loop:
    rotation += rs;

    An it will look with a little turbulence effect.

    Thank you very much.


  14. Nice to see a tutorial start out in Photoshop before getting to the Flash implementation!

    If you look at real smoke (search google for “smoke column”) you’ll notice that smoke actually has a lot of volume and as a result it has clear lighting and shading. If you implement that in your smoke sprite, so it almost has a 3D sphere appearance (but smokey, of course) you end up with a much more realistic end effect.


  15. gotoAndStop

    I’m curious about efficiency of the code is it better to use “Math.random() – Math.random()” or “(Math.random()-.5)*2″?


  16. Great! Let’s add some wind now!!
    in the Loop, change:

    x += vx

    to

    x += vx + wind_speed

    and then, see the result :D


  17. Candlejack

    I found that using:

    if (this.alpha < 0)
    {
    removeSelf();
    }

    meant that none of the particles ever removed themselves. I changed it to ‘alpha <= 0′ instead and that seemed to fix the issue. Other than that, I’ve had no problems with this code whatsoever, it’s a really fun particle design :D


  18. This is a great effect and coded very well. Great job, keep up the banging job! this site has taught me so much I can’t get enough, thank you for taking the time to explain so much!


  19. APepIT

    Hi there,

    I’m a complete novice when it comes to AS3, how would I duplicate the smoke so I could have to smoke trails?


  20. Stevie steve

    Thanks! was looking for this for 2 days! Thank you very much!


  21. varDacha

    Good stuff, although for performance sake, maybe it would be better to re-position the particles(in array) back to bottom “startY” once they get alpha =0, thus breaking the tedious cycle off add-remove display objects on ENTER_FRAME.
    Recycling is always better :)
    Aside me playing smart ;) great pack of tuts You got here! Carry on!



Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">


Advertisement