The TransformGestureEvent class in ActionScript 3.0 allows Flash Player 10.1 to handle multi-touch user input from touchscreen devices. These new capabilities allow us to develop interactions that respond to predefined gestures such as zoom, pan, rotate and swipe. Once Flash Player 10.1 and AIR for Android are released, we will be able to develop multi-touch applications for mobile devices and desktops using Flash. Let’s take a look at how we can use the TransformGestureEvent class to respond to multi-touch interaction.

Before we proceed, let’s discuss development environments for a moment. Multi-touch support varies by hardware and operating system. The track pad on recent Mac laptops (including the one I use for development) functions as a multi-touch input device and responds to all gestures included in the TransformGestureEvent class. One caveat to that support is that Macs do not support multi-touch in the browse so you’ll have to publish for AIR or view your SWFs in Flash Player (not the browser plugin) if you want multi-touch support. Windows 7 has broader support for multi-touch and many newer PC laptops have multi-touch track pads. If you’re one of those guys who has a multi-touch monitor, then this article is probably below you, so move along. In short, check for hardware and OS support for multi-touch before commencing development.

Now let’s get into the code. In your ActionScript editor of choice, create a new ActionScript file with and empty package:

package
{

}

Save this class as TransformGestureTest.as. (For the sake of simplicity, I’m going to walk you through this exercise assuming you use the Flash IDE. I recommend FDT for ActionScript editing, but a lot of people start out using the IDE before moving on to a more code-centric development environment like Flex or FDT.) Create a new FLA and save it in the same directory with your newly created class. Set TransformGestureTest as your document class in the Properties panel and open the Publish Settings and chose AIR 2.0. Save your FLA and return to TransformGestureTest.as.

Now let’s create the class wrapper and constructor. Since we have set this class as the Document class, we need to extend a class that inherits from DisplayObject. We’ll use the Sprite class:

package
{
     public class TransformGestureTest extends Sprite
     {
          public function TransformGestureTest():void
          {

          }
     }
}

At this point, we have a error when we publish because we haven’t imported the necessary dependent classes. Let’s go ahead and import all the external classes necessary for this example:

package
{
     public class TransformGestureTest extends Sprite
     {
          import flash.display.Sprite;
	  import flash.text.TextField;
	  import flash.ui.Multitouch;
 	  import flash.ui.MultitouchInputMode;
	  import flash.events.TransformGestureEvent;
	  import flash.events.GestureEvent;

          private var spr:Sprite = new Sprite();

          public function TransformGestureTest():void
          {

          }
     }
}

Our only class variable is a Sprite, spr. I’ve also added that in the previous section. Now were setup and ready to start writing some real code. Let’s first write some code to determine which (if any) gestures our system supports. To the constructor, add the following code:

Multitouch.inputMode = MultitouchInputMode.GESTURE;
var supportedGesturesVar:Vector.<String> = Multitouch.supportedGestures;
var deviceSupports:TextField = new TextField();
deviceSupports.text = "Supported Gestures:n";

addChild(deviceSupports);

if(Multitouch.supportsGestureEvents)
{
     for (var i:int=0; i<supportedGesturesVar.length; ++i)
     {
          deviceSupports.appendText(supportedGesturesVar[i] + "n");
     }

     addChildAt(spr, 0);
     spr.x = stage.stageWidth/2;
     spr.y = stage.stageHeight/2;

     fillSprite();

     spr.addEventListener(TransformGestureEvent.GESTURE_PAN, onGesturePan);
     spr.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onGestureZoom);
     spr.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onGestureRotate);
     spr.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onGestureSwipe);
}
else
{
     deviceSupports.appendText("None");
}

A lot happens here so lets discuss it in chunks. First we set the input mode to gesture in order to accept multi-touch input. Next we create a Vector to hold the Array of multi-touch gestures available to us. A Vector is simply an Array in which all elements are the same data type. From the base type of this Vector, we see that supportedGesturesVar will be an Vector of Strings. Now we create a text field to hold a list of the supported gestures. Next we check to see if we have support for gesture events. If so, we add all supported gestures to the text field, add our Sprite to the display list, call the fillSprite method and addEventListeners for each supported gesture. Otherwise, we do nothing.

Now we must create the fillSprite method as well as the event handlers for our gestures. This method draws a rectangle in the Sprite that appears on stage. We will manipulate this Sprite in the gesture event handlers in response to multi-touch input. If you are at all familiar with the drawing API in ActionScript 3.0, this code will look very familiar to you.

private function fillSprite():void
{
     spr.graphics.clear();
     spr.graphics.beginFill(Math.random()*0xFFFFFF);
     spr.graphics.drawRect(-stage.stageWidth/2,-stage.stageHeight/2, stage.stageWidth, stage.stageHeight);
     spr.graphics.endFill();
}

Now for the meat of our TransformGestureEvent example – the event handlers.

private function onGesturePan(e:TransformGestureEvent):void
{
     e.target.x += e.offsetX;
     e.target.y += e.offsetY;
}

private function onGestureZoom(e:TransformGestureEvent):void
{
     e.target.scaleX = e.target.scaleY *= e.scaleX;
}

private function onGestureRotate(e:TransformGestureEvent):void
{
     e.target.rotation += e.rotation;
}

private function onGestureSwipe(e:GestureEvent):void
{
     fillSprite();
}

We have responded to the four gesture events and created the basis for multi-touch interaction using Flash Player 10.1 and AIR 2.0. Download the complete class here.