Thanks for checking it out:

Here is a link to a similar drawing application that James Ward did on his blog.  Thanks for keeping it real James.

And here is a zip file of the entire application.

It’s mostly just me talking through my slides but the presentation uses an Adobe Air application that I cooked up. The application uses multitouch by connecting to my iPhone over a UDP socket connection. Fun stuff.

I’d also recommend people go back and check out some of the first multitouch tutorials I did where we trace out some of the new touch events as well as the new transform gesture events.

Here’s a link to demos and the actual presentation on github

The current version of SimTouch requires an additional socket server and communicates via the TUIO protocol. The newest version will contain it’s own socket server (thank you Air 2) and be able to dispatch native Flash touch events. I’m expecting to wrap up some sort of working version by March 1st.

Here is a quick screencast of some of the features:

RotatableScalable:

package com.mlegrand
{
 import flash.display.DisplayObject;
 import flash.events.Event;
 import flash.events.TouchEvent;
 import flash.events.TransformGestureEvent;
 import flash.geom.Matrix;
 import flash.geom.Point;

 ///////////////////////////////////////////////////////////////////////////////////////
 //
 //  Original class can be found at :
 //  http://touchlib.googlecode.com/svn/trunk/AS3/int/app/core/action/RotatableScalable.as
 //
 //////////////////////////////////////////////////////////////////////////////////////

 public class RotatableScalable
 {
 //States
 protected static const NONE:String = 'none';
 protected static const DRAGGING:String = 'dragging';
 protected static const ROTATE_SCALE:String = 'rotateScale';

 //
 protected static const GRAD_PI:Number = 180/3.14159;
 protected static const HALF:Number = 0.5;

 protected var displayO:DisplayObject;

 protected var blobs : Array = [];
 protected var blob1 : Object;
 protected var blob2 : Object;
 protected var pointMap : Object = {};

 protected var state:String;
 protected var curScale:Number;
 protected var curAngle:Number;
 protected var curPosition:Point = new Point(0,0);

 protected var point1:Object;
 protected var point2:Object;

 protected var dX:Number;
 protected var dY:Number;
 protected var dAng:Number;

 protected var _rp:Point = new Point();

 //
 // Properties
 //
 public var draggable:Boolean;

 public function RotatableScalable(displayObject:DisplayObject)
 {
 displayO = displayObject;
 state = NONE;
 blobs = new Array();
 dX = 0;
 dY = 0;
 dAng = 0;
 addGestureEventListeners();
 addTouchEventListeners();
 }

 //
 //  Event Listeners
 //

 protected function addGestureEventListeners():void
 {
 displayO.addEventListener(TransformGestureEvent.GESTURE_ROTATE,
 onGestureRotate);
 displayO.addEventListener(TransformGestureEvent.GESTURE_ZOOM,
 onGesturePinch);
 }

 protected function addTouchEventListeners():void
 {
 displayO.addEventListener( TouchEvent.TOUCH_BEGIN, onTouchBegin );
 displayO.addEventListener( TouchEvent.TOUCH_END, onTouchEnd );
 displayO.addEventListener( TouchEvent.TOUCH_MOVE, onTouchMove );
 displayO.addEventListener( Event.ENTER_FRAME, update );

 displayO.addEventListener(TransformGestureEvent.GESTURE_ROTATE,
 onGestureRotate);
 displayO.addEventListener(TransformGestureEvent.GESTURE_ZOOM,
 onGesturePinch);
 }

 //
 //  Gesture Event Handlers
 //

 private function onGesturePinch(pinchEvent:TransformGestureEvent):void{

 pinchEvent.stopImmediatePropagation()
 var pinchMatrix:Matrix = displayO.transform.matrix;
 var pinchPoint:Point =
 pinchMatrix.transformPoint(
 new Point((displayO.width/2), (displayO.height/2)));
 pinchMatrix.translate(-pinchPoint.x, -pinchPoint.y);
 pinchMatrix.scale(pinchEvent.scaleX, pinchEvent.scaleY);
 pinchMatrix.translate(pinchPoint.x, pinchPoint.y);
 displayO.transform.matrix = pinchMatrix;
 }

 private function onGestureRotate(rotateEvent:TransformGestureEvent):void
 {
 rotateEvent.stopImmediatePropagation()
 var rotateMatrix:Matrix = displayO.transform.matrix;
 var rotatePoint:Point =
 rotateMatrix.transformPoint(
 new Point((displayO.width/2), (displayO.height/2)));
 rotateMatrix.translate(-rotatePoint.x, -rotatePoint.y);
 rotateMatrix.rotate(rotateEvent.rotation*(Math.PI/180));
 rotateMatrix.translate(rotatePoint.x, rotatePoint.y);
 displayO.transform.matrix = rotateMatrix ;
 }

 //
 //  Touch Event Handlers
 //

 private function onTouchBegin( event : TouchEvent ) : void
 {
 var p:Point;
 if(event.stageX == 0 && event.stageY == 0)
 {
 p = new Point(event.localX, event.localY);
 }
 else
 {
 p = new Point(event.stageX, event.stageY);
 }
 event.stopImmediatePropagation();
 pointMap[ event.touchPointID.toString() ] = p;
 addBlob( event.touchPointID, p.x, p.y );
 }

 private function onTouchEnd( event : TouchEvent ) : void
 {
 event.stopImmediatePropagation()
 removeBlob( event.touchPointID );
 delete pointMap[ event.touchPointID.toString() ];
 }

 private function onTouchMove( event : TouchEvent ) : void
 {
 event.stopImmediatePropagation()
 var p:Point;
 if(event.stageX == 0 && event.stageY == 0)
 {
 p = new Point(event.localX, event.localY);
 }
 else
 {
 p = new Point(event.stageX, event.stageY);
 }

 if ( pointMap[ event.touchPointID.toString() ] )
 {
 pointMap[ event.touchPointID.toString() ].x = p.x;
 pointMap[ event.touchPointID.toString() ].y = p.y;
 }
 update(null)
 }

 private function addBlob(id:Number, origX:Number, origY:Number):void
 {
 for(var i:int=0; i<blobs.length; i++)
 {
 if(blobs[i].id == id)
 return;
 }

 blobs.push( {id: id, origX: origX, origY: origY, myOrigX: displayO.x, myOrigY:displayO.y} );

 if(blobs.length == 1)
 {                
 state = DRAGGING;
 curScale = displayO.scaleX;
 curAngle = displayO.rotation;                    
 curPosition.x = displayO.x;
 curPosition.y = displayO.y;                
 blob1 = blobs[0];
 }
 else if(blobs.length == 2)
 {
 state = ROTATE_SCALE;
 curScale = displayO.scaleX;
 curAngle = displayO.rotation;                    
 curPosition.x = displayO.x;
 curPosition.y = displayO.y;        

 blob1 = blobs[0];                                
 blob2 = blobs[1];        

 var tuioobj1 : Object = pointMap[ blob1.id ];
 var tuioobj2 : Object = pointMap[ blob2.id ];

 var midPoint:Point = Point.interpolate(displayO.globalToLocal(new Point(tuioobj1.x, tuioobj1.y)),displayO.globalToLocal(new Point(tuioobj2.x, tuioobj2.y)),0.5);

 setRegistration(midPoint.x,midPoint.y);

 // if not found, then it must have died..
 if(tuioobj1)
 {
 var curPt1:Point = displayO.parent.globalToLocal(new Point(tuioobj1.x, tuioobj1.y));                                    
 blob1.origX = curPt1.x;
 blob1.origY = curPt1.y;
 }                

 }

 }

 private function removeBlob(id:Number):void
 {
 for(var i:int=0; i<blobs.length; i++)
 {
 if(blobs[i].id == id)
 {
 blobs.splice(i, 1);

 if(blobs.length == 0)
 state = NONE;
 if(blobs.length == 1)
 {
 state = DRAGGING;                    

 curScale = displayO.scaleX;
 curAngle = displayO.rotation;                    
 curPosition.x = displayO.x;
 curPosition.y = displayO.y;                    

 blob1 = blobs[0];        

 var tuioobj1 : Object = pointMap[ blob1.id ];

 if(tuioobj1)
 {                        
 var curPt1:Point = displayO.parent.globalToLocal(new Point(tuioobj1.x, tuioobj1.y));

 blob1.origX = curPt1.x;
 blob1.origY = curPt1.y;
 }

 }
 if(blobs.length >= 2) {
 state = ROTATE_SCALE;

 curScale = displayO.scaleX;
 curAngle = displayO.rotation;                    
 curPosition.x = displayO.x;
 curPosition.y = displayO.y;                

 blob1 = blobs[0];                                
 blob2 = blobs[1];        

 tuioobj1 = pointMap[ blob1.id ];

 if(tuioobj1)
 {
 curPt1 = displayO.parent.globalToLocal(new Point(tuioobj1.x, tuioobj1.y));                        
 blob1.origX = curPt1.x;
 blob1.origY = curPt1.y;
 }                                    
 }
 return;                    
 }
 }            
 }

 private function getAngleTrig(X:Number, Y:Number): Number
 {
 if (X == 0.0)
 {
 if(Y < 0.0)
 return 270;
 else
 return 90;
 } else if (Y == 0)
 {
 if(X < 0)
 return 180;
 else
 return 0;
 }

 if ( Y > 0.0)
 if (X > 0.0)
 return Math.atan(Y/X) * GRAD_PI;
 else
 return 180.0-Math.atan(Y/-X) * GRAD_PI;
 else
 if (X > 0.0)
 return 360.0-Math.atan(-Y/X) * GRAD_PI;
 else
 return 180.0+Math.atan(-Y/-X) * GRAD_PI;
 }         

 private function update(e:Event):void
 {

 if(state == DRAGGING)
 {
 var tuioobj:Object = pointMap[ blob1.id ];

 if(!tuioobj)
 {
 removeBlob(blob1.id);
 return;
 }

 var curPt:Point = displayO.parent.globalToLocal(new Point(tuioobj.x, tuioobj.y));  

 var oldX:Number, oldY:Number;
 oldX = displayO.x;
 oldY = displayO.y;

 displayO.x = (curPosition.x + (curPt.x - (blob1.origX )) > 0)? curPosition.x + (curPt.x - (blob1.origX ))  : 0 ;        
 displayO.y = (curPosition.y + (curPt.y - (blob1.origY )) > 0)? curPosition.y + (curPt.y - (blob1.origY ))  : 0;

 dX *= HALF;
 dY *= HALF;                        
 dAng *= HALF;
 dX += displayO.x - oldX;
 dY += displayO.y - oldY;        

 }
 else if(state == ROTATE_SCALE)
 {

 var tuioobj1 : Object = pointMap[ blob1.id ];

 if(!tuioobj1)
 {
 removeBlob(blob1.id);
 return;
 }                

 var curPt1:Point = displayO.parent.globalToLocal(new Point(tuioobj1.x, tuioobj1.y));                                

 var tuioobj2 : Object = pointMap[ blob2.id ];
 // if not found, then it must have died..
 if(!tuioobj2)
 {
 removeBlob(blob2.id);
 return;
 }                                

 var curPt2:Point = displayO.parent.globalToLocal(new Point(tuioobj2.x, tuioobj2.y));                
 var curCenter:Point = Point.interpolate(curPt1, curPt2, 0.5);    

 var origPt1:Point = new Point(blob1.origX, blob1.origY);
 var origPt2:Point = new Point(blob2.origX, blob2.origY);
 var centerOrig:Point = Point.interpolate(origPt1, origPt2, 0.5);
 var offs:Point = curCenter.subtract(centerOrig);

 var len1:Number = Point.distance(origPt1, origPt2);
 var len2:Number = Point.distance(curPt1, curPt2);                    
 var len3:Number = Point.distance(origPt1, new Point(0,0));

 var newscale:Number = curScale * len2 / len1;

 if(newscale<4)
 {

 setProperty2('scaleX', newscale);
 setProperty2('scaleY', newscale);
 }
 var origLine:Point = origPt1;
 origLine = origLine.subtract(origPt2);

 var ang1:Number = getAngleTrig(origLine.x, origLine.y);

 var curLine:Point = curPt1;
 curLine = curLine.subtract(curPt2);

 var ang2:int = getAngleTrig(curLine.x, curLine.y);
 var oldAngle:int = displayO.rotation;

 setProperty2("rotation", curAngle + (ang2 - ang1));    

 oldX = displayO.x;
 oldY = displayO.y;

 dX *= HALF;
 dY *= HALF;        
 dAng *= HALF;                

 dX += displayO.x - oldX;
 dY += displayO.y - oldY;

 dAng += displayO.rotation - oldAngle;

 } else {
 if(dX != 0 || dY != 0)
 {
 //this.released(dX, dY, dAng);
 dX = 0;
 dY = 0;
 dAng = 0;
 }
 }

 }    

 public function setRegistration(x:Number=0, y:Number=0):void{
 _rp = new Point(x, y);
 }

 public function setProperty2(prop:String, n:Number):void{
 var a:Point = new Point();
 var b:Point = new Point();
 if(displayO.parent != null){
 a = displayO.parent.globalToLocal(displayO.localToGlobal(_rp));
 displayO[prop] = n;
 b = displayO.parent.globalToLocal(displayO.localToGlobal(_rp));
 }else{
 a = displayO.localToGlobal(_rp);
 displayO[prop] = n;
 b = displayO.localToGlobal(_rp);
 }
 displayO.x -= b.x - a.x;
 displayO.y -= b.y - a.y;
 }
 }
}

Here is the class that drives most of the application:

RotatableScalable:

package com.mlegrand
{
	import flash.display.DisplayObject;
	import flash.events.TransformGestureEvent;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.ui.Multitouch;
	import flash.ui.MultitouchInputMode;

	public class RotatableScalable
	{

		protected var disO:DisplayObject

		public function RotatableScalable(displayObject:DisplayObject)
		{
			disO = displayObject;
			if(Multitouch.supportsGestureEvents)
			{
				Multitouch.inputMode = MultitouchInputMode.GESTURE;
				addGestureEventListeners()
			}

		}

		protected function addGestureEventListeners():void
		{
			disO.addEventListener(TransformGestureEvent.GESTURE_ROTATE, gestureRotateHandler);
			disO.addEventListener(TransformGestureEvent.GESTURE_ZOOM, gestureZoomHandler);
		}

		protected function gestureRotateHandler(event:TransformGestureEvent) : void
		{
			event.stopImmediatePropagation();
			var m:Matrix = disO.transform.matrix;
			var p:Point = m.transformPoint(new Point(disO.width/2, disO.height/2));
			m.translate(-p.x, -p.y);
			m.rotate(event.rotation*(Math.PI/180));
			m.translate(p.x, p.y);
			disO.transform.matrix = m;
		}

		protected function gestureZoomHandler(event:TransformGestureEvent):void
		{
			event.stopImmediatePropagation();
			var m:Matrix = disO.transform.matrix;
			var p:Point = m.transformPoint(new Point(disO.width/2, disO.height/2));
			m.translate(-p.x, -p.y);
			m.scale(event.scaleX, event.scaleY);
			m.translate(p.x, p.y);
			disO.transform.matrix = m;
		}

	}
}

Other notes:

I noticed the matrix transform over at Justin Imhoff’s blog.  I highly recommend that you add his blog to your feed reader.  I also mentioned the Natural User Interface Group.  Their forums are very active and may have helpful ideas for anyone interested in multitouch development.

Here’s David’s Blog post and the source for his flash app.

Here’s the code that we came up with for the screencast:

<?xml version=”1.0″ encoding=”utf-8″?>
<s:WindowedApplication xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/halo”
width=”1010″ height=”670″ creationComplete=”windowedapplication1_creationCompleteHandler(event)”>
<fx:Script>
<![CDATA[
import com.derschmale.fluids.ShallowWaterContainer;

import flash.events.TouchEvent;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;

import mx.events.FlexEvent;

protected var ripple:ShallowWaterContainer;

[Embed (source='CloudyWaves.jpg')]
protected var CloudyWave:Class;

protected var touchMap : Array  = [];

protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
{
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
addRipple();
}

protected function addRipple() : void
{
ripple = new ShallowWaterContainer(1000,650, 200, 200);
ui.addChild(ripple);
ripple.timeStep = 1;
ripple.viscosity =0.2;
ripple.relaxation = 0.15;
ripple.relaxationSteps = 2;

ripple.addChild(new CloudyWave());

this.addEventListener(TouchEvent.TOUCH_BEGIN, touchBeginHandler);
this.addEventListener(TouchEvent.TOUCH_END, touchEndHandler);
this.addEventListener(TouchEvent.TOUCH_MOVE, touchMoveHandler);
}

protected function touchBeginHandler(event:TouchEvent):void
{
var key : String = event.touchPointID.toString();
var touchPoint:Object = {};
touchPoint.x = event.localX;
touchPoint.y = event.localY;
touchPoint.sizeX = event.sizeX;
touchPoint.sizeY = event.sizeY;
touchMap[ key ] = touchPoint;
}

protected function touchEndHandler(event:TouchEvent):void
{
var key : String = event.touchPointID.toString();
delete touchMap [ key ];
}

protected function touchMoveHandler(event:TouchEvent):void
{
var key : String = event.touchPointID.toString();
if(touchMap [ key ])
{
ripple.addVelocity( event.localX, event.localY,
(event.localX – touchMap[key].x),
(event.localY -  touchMap [ key ].y), 5, 1);
ripple.addPressure(event.localX, event.localY, 7, 1);

// update touchpoint in map

touchMap[key].x = event.localX;
touchMap[key].y = event.localY;
touchMap[key].sizeX = event.sizeX;
touchMap[key].sizeY = event.sizeY;
}
}
]]>
</fx:Script>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>

<mx:UIComponent id=”ui” width=”100%” height=”100%” />

</s:WindowedApplication>

One of the presentations he gave was on using the new gesture events and the Modest Maps api to create a quick mapping application.

In this tutorial we take a closer look at some of that code.

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