Quick Tip: Create Instant Fire Particles With TeraFire

Quick Tip: Create Instant Fire Particles With TeraFire

Tutorial Details
  • Difficulty: Beginner
  • Program: Flash
  • Estimated Completion Time: 10 mins
  • Language: AS3

Fire effects can be difficult to create, as they require advanced use of ActionScript and can take a lot of time to accomplish. In this Quick Tip, I’ll introduce you to an ActionScript class that will help you speed up the process.


Final Result Preview

Let’s take a look at the final result we will be working towards:


Step 1: Brief Overview

Using a brilliant class called TeraFire, we will recreate a candle flame. You can download the source of the class from the developer’s site.


Step 2: Set Up Your Flash File

Launch Flash and create a new Flash Document, set the stage size to 320x280px and the frame rate to 24fps.


Step 3: Interface

This is the interface used in the example, a background previously created to place the resulting flame. You can find it in the FLA in the source download.


Step 4: ActionScript

Create a new ActionScript Class (Cmd+N), save the file as Main.as, and write the following lines; please read the comments in the code to fully understand the class behavior.

package 
{
	import flash.display.Sprite;
	import com.trick7.effects.TeraFire; //Import TeraFire class
	
	public class Main extends Sprite
	{
		public function Main():void
		{
			/* Creates a terafire instance */

			var fire:TeraFire = new TeraFire();
			
			/* Position the fire particle */
			fire.x = 158;
			fire.y = 130;
			
			/* Add to stage */
			addChild(fire);
		}
	}
}

You can customize the way the particle looks by passing parameters to the TeraFire constructor. These are the parameters available:

  • xPos: The x position to create the fire, default is 0
  • yPos:The y position to create the fire, default is 0
  • fireWidth: Width of the resulting fire, default is 30
  • fireHeight: Height of the resulting fire, default is 90

Step 5: Document Class

Add the class name to the Class field in the Publish section of the Properties panel.


Conclusion

Now you’re aware of this easy way to create fire for your movies, you’ll find it comes in really handy when building games. Implement your own!

I hope you liked this tutorial, thank you for reading!

  • Ben Stanley

    Awesome! Looks really cool. Would be a great effect for games :)

  • http://infinityspiral.com Chris Norton

    Just a heads up the source file doesn’t include the class file so compiling this project could easily turn from a beginner project to and advanced project really quick.

    You can download the class from here:
    http://www.libspark.org/svn/as3/TeraFire/src/com/trick7/effects/TeraFire.as

    In the folder with your flash file you’ll need to create a new folder called ‘com’
    inside com create a new folder called ‘trick7′
    inside trick7 create a new folder called ‘effects’
    drop the downloaded file in the effects folder

    • http://snaptin.com Ian Yates
      Staff

      Quite right Chris, thanks for picking up on that!

      There should really have been a step in there to outline what you’ve described – just stating “import com.trick7.effects.TeraFire; //Import TeraFire class” didn’t necessarily make it clear..

      Cheers :)

  • http://www.drotardesign.com Thomas Drotar

    anyway you can give us an example of using the fireWidth and fireHeight as well?

  • frustrated guy

    srsly what kind of tut is this =? som1 actually got 100$ for this? what it teaches except it promotes some class which i’m guessing doesn’t belong to author of tut…
    author doesnt even show the usage of it… what it shows is
    1. create instance of some class =?
    2. position some sprite using sprite.x = myint1:int ; sprite.y = myint2:int ; =?
    3. sprite method addChild(displayObject:DisplayObject); =?
    none of the methods or properties are explained what they do how they act or nothing like that….
    that class sucks because the proper usage of it would be passing xPos and Ypos to instance….
    for example
    var fire:TeraFire = new TeraFire(xPos:int, yPos); srsly…. whou would want to do that =?
    ps. if you want to change the coulours of fire go open class and change
    private var fireColerIn:uint = 0xFFCC00;
    private var fireColerOut:uint = 0xE22D09;
    to your preferences …. i mean athor of tut could at least write that but i guess he doesn’t actually know what he is writing …. really drop in quality active tuts

  • email58

    COOl..It is really beautiful!

  • http://thonbo.com Thonbo

    did this with no need for external classes

    http://thonbo.com/filtersOnTheRun/test.html

    im blitting the turbulance map animation for better performance – if there is only a little flame then it could easily be generated in runtime