Flash tutorial: Dragon flame
/rating_on.png)
/rating_half.png)
/rating_off.png)
Loading ...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”
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | //############################################################ // 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
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
Download the source files for this tutorial for only $1.99
[...] the tutorial here. Download these FLAs and see how [...]
this is awsome