• Tutorials
  • Blog
  • About
  • Contact
  • Multi-Touch Eye Candy – Fire (Screencast)

    2009 - 12.02

    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.

    PlayingWithFire(H264).mov

    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);
    		}
    	}
    }
    

    Your Reply