Microsheep

Flash tutorial: Dragon flame 

1 Star2 Stars3 Stars4 Stars5 Stars Loading...   |   16,444 views   |   2 comments »

In this tutorial, I’ll show you how to create a flames spitting dragon.
You can see the final result at the end of this tutorial.

Requires: Flash CS3, AS 2.0 knowledge

Step 1: Creating a flame movie-clip

In this step, we’ll crate a realistic flame movie-clip, using some realistic explosion movie frames.

1.1 Search the web for a nice looking animation of an explosion.
Here are some samples:
http://www.geocities.com/starlinesinc/
http://www.polybeast.de/portfolio/_Explosions.htm
http://www.videocopilot.net/products/action2/

I recommend on buying and using a great product by Wondertouch called Particle Illusion:
http://www.wondertouch.com/
Using this tool you’ll be able to create a great looking explosion (and many other great effects)

1.2 After you got yourself a nice explosion animation, break it into seperate frames, erase the background and save them as separate images

1.3 Use these images to create a new movie-clip, for a single “flame”

Get Adobe Flash player

Step 2: Creating the dragon, and preparing the “flame”

In this step, we’ll create the Flash document, draw the dragon and do everything but the coding

2.1 Create a new Flash document

2.2 Draw some sky and a dragon

2.3 Get the “flame” movie-clip you’ve created on step 1, add it yo the library, name it “flame” and export it to Actionscript (linkage identifier should be “flame”)

2.4 Create an empty movie-clip and add it to the stage. Name it “emitter_mc”. This would be the flames source point

Step 3: Adding the logic (code)

In this step, we’ll add the code which makes the magic

3.1 Add another layer to your FLA, name it “action” and paste the following code into it

//############################################################
// CONSTANTS
//############################################################

//############################################################
// VARIABLES
//############################################################

var __flameCount:Number;



//############################################################
//FUNCTIONS
//############################################################

//------------------------------------------------------------
// Init
//------------------------------------------------------------
function Init():Void
{
	// variables
	__flameCount = 0;
	
	// dragon head mover
	emitter_mc.onEnterFrame = EmitterMover;
	
	// spit fire on mouse up
	_root.onMouseUp = SpitFire;
}

//------------------------------------------------------------
// SpitFire
//------------------------------------------------------------
function SpitFire():Void
{
	// set flame count
	__flameCount = 10;
}

//------------------------------------------------------------
// CreateFlame
//------------------------------------------------------------
function CreateFlame():Void
{
	// add flame movie clip
	var depth:Number = _root.getNextHighestDepth();
	var thisFlame_mc:MovieClip =
		_root.attachMovie("flame", "flame", depth);
	
	// set flame position
	thisFlame_mc._x = emitter_mc._x;
	thisFlame_mc._y = emitter_mc._y;
	
	// flame rotation is random
	thisFlame_mc._rotation = 360 * Math.random();
	
	// set azimuth and speed
	thisFlame_mc.azimuth 	= -35;
	thisFlame_mc.speed	= 25;
	
	// mover
	thisFlame_mc.onEnterFrame = FlameMover;
}

//------------------------------------------------------------
// EmitterMover
//------------------------------------------------------------
function EmitterMover():Void
{
	// if __flameCount > 0, spit flame
	if (__flameCount > 0) {
		// create the actual flame movie clip
		CreateFlame();
		__flameCount--;
	}
}

//------------------------------------------------------------
// FlameMover
//------------------------------------------------------------
function FlameMover():Void
{
	// move speed (add lift speed)
	this._x -= this.speed * Math.cos(this.azimuth * Math.PI / 180);
	this._y -= this.speed * Math.sin(this.azimuth * Math.PI / 180) + 5;
	
	// speed decay
	this.speed *= 0.95;
}



//############################################################
// MAIN
//############################################################
Init();

3.2 Publish your file and click anywhere on the screen: your dragon should be spitting flames

Get Adobe Flash player

That’s it!

Here is your dragon, you could use it to create a cool knight / dragon game, or use the same technique to create flame-thrower tank etc.

Here is my version of the flames spitting dragon, with the following changes:
1. Better graphics
2. The dragon “looks” at the mouse pointer
3. A more realistic flame, using blendMode

Download the source files for this tutorial for only $1.99

Get Adobe Flash player
Download the source files for this tutorial for only $1.99

2 comments on “Flash tutorial: Dragon flame”

  1. austin says:

    this is awsome

  2. […] the tutorial here. Download these FLAs and see how […]

Leave a comment

Submit »