Flash Multitouch Gesture Example

Here is a quick example of using the build in TransformGestureEvent generated from Flash 10.1 for use on a multitouch supported device. I am going to keep this post short and explain the good and the bad, but a follow up post will use TouchEvents to generate custom gestures that will allow a flow from one gesture to another and also support for multiple gestures at once. You have two options when implementing multitouch in Flash, either through the TouchEvent itself, or through TransformGestureEvents that Flash generates from TouchEvents. The bad is you can have both. At this time, Flash only support one or the other due to the capture used to generate the gesture events internally in Flash. A monster downside to this approach is only one TransformGestureEvent is supported at a time. You will see that if you implement this component, you must release a gesture event, such as a touch to then go into a rotate. As stated above the next post will create custom gesture events in hopes of cloning the Microsoft Surface Collage in Flex. This is to give an basic intro into what it takes to make a simple Gesture based component - if you really want to have fun, download Google maps for flash and add a zoom in / zoom out on the Gesture Zoom Event.  Its great that Flash supports gesture events out of the box and the hope is that it will develop as the community develops towards a more multitouch aware development pattern.

SOURCE

package com.justinimhoff.multitouch
{
	import flash.events.MouseEvent;
	import flash.events.TransformGestureEvent;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.ui.Multitouch;

	import mx.controls.Image;

	public class GestureImage extends Image
	{
		private var offsetX:Number;
		private var offsetY:Number;

		public function GestureImage()
		{
			if(Multitouch.supportsGestureEvents){
			this.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
			this.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
			this.addEventListener(TransformGestureEvent.GESTURE_ROTATE,
                         onGestureRotate);
			this.addEventListener(TransformGestureEvent.GESTURE_ZOOM,
                         onGesturePinch);
			}
		}

		private function startDragging(event:MouseEvent):void
		{
			setAsCurrentChild();
			offsetX = event.stageX - this.x;
			offsetY = event.stageY - this.y;
			stage.addEventListener(MouseEvent.MOUSE_MOVE, moveImage);
		}

		private function stopDragging(event:MouseEvent):void
		{
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveImage);
		}

		private function moveImage(event:MouseEvent):void
		{
			this.x = event.stageX - offsetX;
			this.y = event.stageY - offsetY;
			event.updateAfterEvent();
		}

		private function onGesturePinch(pinchEvent:TransformGestureEvent):void{
			setAsCurrentChild();
			var pinchMatrix:Matrix = this.transform.matrix;
			var pinchPoint:Point =
                         pinchMatrix.transformPoint(
                          new Point((this.width/2), (this.height/2)));
			pinchMatrix.translate(-pinchPoint.x, -pinchPoint.y);
			pinchMatrix.scale(pinchEvent.scaleX, pinchEvent.scaleY);
			pinchMatrix.translate(pinchPoint.x, pinchPoint.y);
			this.transform.matrix = pinchMatrix;
		}

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

		}

		private function setAsCurrentChild():void{
			this.parent.setChildIndex( this, this.parent.numChildren-1 );
		}

	}
}

This entry was posted on Wednesday, January 20th, 2010 at 3:24 am and is filed under Adobe Flex. 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.

5 Responses to “Flash Multitouch Gesture Example”

  1. Jim Spadaccini

    1:37 am
    January 21st, 2010

    You might be interested in our multitouch framework for Flash. We’ve posted a comparison between built in support and our gestureworks framework.

    http://www.ideum.com/2010/01/true-multitouch-with-adobe-flash/

    Our framework gets around all of the limitations in the current implementation of multitouch in Flash.

  2. Justin

    2:32 am
    January 21st, 2010

    I have tried the demo of your product and I must say that I am very impressed, but one of my concerns is the integration with Flex, which I have heard that you are working on, and the install being OS based from my understanding. It is easy to use and the gesture support is great, plus you do not have the limitations that the current iteration of flash 10.1 has with gestures. But third party use of creating your own gestures is where it is at - in all sense I am able to do a rotate and zoom gesture at once through a home-brew implementation, plus the use and creation of custom gestures.

  3. Jim Spadaccini

    11:24 pm
    January 21st, 2010

    Thanks for the kind words about Gestureworks. Development of the Flex version is underway. We should be announcing it in February. Also, our Open Gesture Library will be available and open source in next week or two.
    http://gestureworks.com/support-tutorials/supported-gestures/

  4. [...] 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 [...]

  5. jason jensen

    2:58 am
    July 21st, 2010

    Hi Justin.

    This code probably just saved me hours of agonizing. Took 15 seconds to implement.

    Thanks!

 

Leave a Reply

You must be logged in to post a comment.