The Candle Flame Fluttered In The Breeze With Actionscript 3.0 Open Source Library TeraFire

safe_image.php TeraFire is an open source as3 library which can help you to make the candle flame fluttered effect in the breeze. Similar the previous library: How To Calculate The Average Between 2 Colors In ActionScript 3.0, there is only one as3 source file in TeraFire library. You can easily to modify and to adapt to other flame.

Below is the source code:

TeraFire.as

package com.trick7.effects{
	import flash.display.BitmapData;
	import flash.display.GradientType;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.DisplacementMapFilter;
	import flash.filters.DisplacementMapFilterMode;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.geom.Rectangle;

	public class TeraFire extends Sprite{
		//horizontal waver speed
		public var phaseRateX:Number;
		//vertical waver speed
		public var phaseRateY:Number;
		private var offsets:Array= [new Point(),new Point()];
		private var seed:Number = Math.random();
		private var fireW:Number;
		private var fireH:Number;
		//fire color
		//private var fireColorIn:uint;
		//private var fireColorOut:uint;

		private var ball:Sprite;
		private var gradientImage:BitmapData;
		private var displaceImage:BitmapData;
		//deviation
		private var focalPointRatio:Number = 0.6;
		private const margin:int = 10;
		private var rdm:Number;

		//construct
		public function TeraFire(xPos:Number=0, yPos:Number=0, fireWidth:Number=30, fireHeight:Number=90, fireColorIn:uint = 0xFFCC00,fireColorOut:uint = 0xE22D09){
			fireW = fireWidth;
			fireH = fireHeight;
			phaseRateX = 0;
			phaseRateY = 5;
			var matrix:Matrix = new Matrix();
			matrix.createGradientBox(fireW,fireH,Math.PI/2,-fireW/2,-fireH*(focalPointRatio+1)/2);
			var colors:Array = [fireColorIn, fireColorOut, fireColorOut];
			var alphas:Array = [1,1,0];
			var ratios:Array = [30, 100, 220];

			var home:Sprite = new Sprite();
			ball = new Sprite();
			//the fire body
			ball.graphics.beginGradientFill(GradientType.RADIAL,colors, alphas, ratios, matrix,"pad","rgb",focalPointRatio);
			ball.graphics.drawEllipse(-fireW/2,-fireH*(focalPointRatio+1)/2,fireW,fireH);
			ball.graphics.endFill();
			ball.graphics.beginFill(0x000000,0);
			ball.graphics.drawRect(-fireW/2,0,fireW+margin,1);
			ball.graphics.endFill();
			addChild(home);
			home.addChild(ball);
			this.x = xPos;
			this.y = yPos;
			addEventListener(Event.ENTER_FRAME,loop);

			//Fluttered Bitmap
			displaceImage = new BitmapData(fireW+margin,fireH,false,0xFFFFFFFF);
			var matrix2:Matrix = new Matrix();
			matrix2.createGradientBox(fireW+margin,fireH,Math.PI/2,0,0);
			var gradient_mc:Sprite = new Sprite;
			gradient_mc.graphics.beginGradientFill(GradientType.LINEAR,[0x666666,0x666666], [0,1], [120,220], matrix2);
			gradient_mc.graphics.drawRect(0,0,fireW+margin,fireH);
			gradient_mc.graphics.endFill();
			gradientImage = new BitmapData(fireW+margin,fireH,true,0x00FFFFFF);
			gradientImage.draw(gradient_mc);
			//random same size fire
			rdm = Math.floor(Math.random()*10);

			//verification code
			/*this.startDrag(true);
			import flash.display.Bitmap;
			var bmp:Bitmap = new flash.display.Bitmap(displaceImage);
			bmp.x = -fireW/2;
			bmp.y = -fireH*(focalPointRatio+1)/2;
			home.addChild(bmp);
			bmp.alpha = 0.4;
			home.addChild(gradient_mc);
			*/
		}
		private function loop(e:Event):void{
			//misty image scollbar up
			for(var i:int = 0; i < 2; ++i){
				offsets[i].x += phaseRateX;
				offsets[i].y += phaseRateY;
			}
			displaceImage.perlinNoise(30+rdm, 60+rdm, 2, seed, false, false, 7, true, offsets);
			displaceImage.copyPixels(gradientImage,gradientImage.rect,new Point(),null, null, true);
			var dMap:DisplacementMapFilter = new DisplacementMapFilter(displaceImage, new Point(), 1, 1, 20, 10, DisplacementMapFilterMode.CLAMP);
			ball.filters = [dMap];
		}
	}
}

You also can download full source code from here.

Usage:

import com.trick7.effects.TeraFire;//x:100, y:100 fluttered
var fire:TeraFire = new TeraFire(100,100);
addChild(fire);

It also can be used such as:

TeraFire(xPos:Number=0, yPos:Number=0, fireWidth:Number=30, fireHeight:Number=90)

Official URL(Japanese):

http://www.trick7.com/blog/2008/07/27-205806.php

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can leave a response, or trackback from your own site.

Leave a Reply