Howdy ladies and gentlemen,

So in this tutorial we’re going to use a few blurs and color transforms to put together a fun multi-touch visual effect called Fire.

Here’s the code for the fire class:

package fire
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BlendMode;
	import flash.display.StageAlign;
	import flash.display.StageDisplayState;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.TouchEvent;
	import flash.filters.BlurFilter;
	import flash.geom.ColorTransform;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.system.Capabilities;
	import flash.system.TouchscreenType;
	import flash.ui.Multitouch;
	import flash.ui.MultitouchInputMode;

	import mx.core.UIComponent;

	public class Fire extends UIComponent
	{
		protected var canvas:BitmapData;
		protected var canvasBitmap:Bitmap;

		protected var p1:Point;
		protected var p2:Point;
		protected var p3:Point;

		protected var r:Rectangle;
		protected var blobRect:Rectangle;

		protected var bf:BlurFilter;
		protected var ct:ColorTransform;
		protected var ct2:ColorTransform;

		protected var m:Matrix;
		protected var starterCanvasSize:Number = 400;

		protected var noise:BitmapData;

		public function Fire()
		{
			super();
			addEventListeners();
		}

		override protected function createChildren() : void
		{
			super.createChildren();
			canvas = new BitmapData(starterCanvasSize, starterCanvasSize, false, 0);
			canvasBitmap = new Bitmap(canvas);
			addChild(canvasBitmap);

			p1 = new Point();
			p2 = new Point();
			p3 = new Point();

			r = new Rectangle(0,0, canvas.width, 2);

			blobRect = new Rectangle();

			bf = new BlurFilter(6, 6, 1);

			ct = new ColorTransform(1.05, 1.03, 1.00, 1,-1, -1, -1, 0);
			ct2 = new ColorTransform(1, 1.25, 2.5);

			m = new Matrix();
			m.translate(0, -1);

			noise = new BitmapData(canvas.width, canvas.height);
			noise.perlinNoise(6, 6, 3, 7, false, false, 1|2|4, true);
		}

		protected function addEventListeners():void
		{
			if(stage)
			{
				addedToStage(null);
			}
			else
			{
				addEventListener(Event.ADDED_TO_STAGE, addedToStage);
			}

			addEventListener(MouseEvent.MOUSE_MOVE, updateFireOnMouseMove, false, 0, true);
			addEventListener(Event.ENTER_FRAME, updateFire, false, 0, true);

			if(Capabilities.touchscreenType == TouchscreenType.FINGER)
			{
				Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
				addEventListener(TouchEvent.TOUCH_BEGIN, touchEventHandler, false, 0, true);
				addEventListener(TouchEvent.TOUCH_END, touchEventHandler, false, 0, true);
				addEventListener(TouchEvent.TOUCH_MOVE, touchEventHandler, false, 0, true);
			}
		}

		protected function updateFireOnMouseMove(event:MouseEvent):void
		{
			r.y = (r.y+1) % noise.height;
			if(stage)
			{
				drawBlob( 1, event.stageX, event.stageY);
			}
			//blur
			canvas.applyFilter(canvas, canvas.rect, p1, bf);
			canvas.draw(canvas, m, ct);
		}

		protected function touchEventHandler(event:TouchEvent):void
		{
			r.y = (r.y+1) % noise.height;
			if(stage)
			{
				drawBlob(event.touchPointID, event.stageX, event.stageY);
			}
			//blur
			canvas.applyFilter(canvas, canvas.rect, p1, bf);
			canvas.draw(canvas, m, ct);
		}

		protected function addedToStage(event:Event):void
		{
			stage.addEventListener(Event.RESIZE, stageResized, false, 0, true);
			removeEventListener(Event.ADDED_TO_STAGE, addedToStage);
			stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
		}

		protected function stageResized(event:Event):void
		{
			stage.align = StageAlign.TOP_LEFT;
			canvasBitmap.width = stage.width;
			canvasBitmap.height = stage.height;
		}

		protected function drawBlob(id:int, mx:Number, my:Number) : void
		{
			p3.x = int(mx * starterCanvasSize/stage.stageWidth) - 4;
			p3.y = int(my* starterCanvasSize/stage.stageHeight) - 4;
			blobRect.left = p3.x;
			blobRect.top = p3.y;
			blobRect.bottom = p3.y + 8;
			blobRect.right = p3.x + 8;
			var m2:Matrix = new Matrix();
			m2.translate(p3.x, p3.y);
			canvas.draw(noise, m2, ct2, BlendMode.ADD, blobRect);
		}

		protected function updateFire(event:Event):void
		{
			r.y = (r.y+1) % noise.height;
			canvas.applyFilter(canvas, canvas.rect, p1, bf);
			canvas.draw(canvas, m, ct);
		}
	}
}

This entry was posted on Wednesday, December 2nd, 2009 at 9:05 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.