Detecting and responding to a multitouch gesture

How to

Detect and respond to a multitouch gesture.

BlackBerry device showing a directional arrow moving left to right. Shows a multitouch gesture.

Solution

Create variables in the root of your class for tracking touches

There are many ways of tracking and handling touch points. The following code shows just one example.
// Array of color hex values for lines to display in
private var lineColors:Array = [0xFF0000, 0x00FF00, 0x0000FF, 0xFF00FF];
// Storage for active touches
private var lines:Dictionary = new Dictionary();
// Counter for number of active touch points
private var touchPointCount:int = 0;

Set your input mode and add event listeners

// Enable dispatch of gesture events
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

// Define gestures to listen for and name of functions to dispatch when they occur
stage.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);

Create the functions that are called to react to your events

public function onTouchBegin(event:TouchEvent):void
{
    // Create a sprite
    var tPoint:Sprite = new Sprite();
    // Add the sprite to the stage 
    addChild(tPoint);
    
    // Set line styling
    tPoint.graphics.lineStyle(5, lineColors[touchPointCount]);
    // Position line sprite at starting touch point
    tPoint.graphics.moveTo(event.localX, event.localY);
    // Increment number of active touches    
    touchPointCount++;
    // Add line sprite to storage 
    lines[event.touchPointID] = tPoint;
}
        
public function onTouchMove(event:TouchEvent):void
{
    // Get existing line sprite with matching touch index
    var tPoint:Sprite = lines[event.touchPointID] as Sprite;
    // Create line between existing sprite and new touch location
    tPoint.graphics.lineTo(event.localX, event.localY);			
}
      
public function onTouchEnd(event:TouchEvent):void
{
    // Get existing line sprite with matching touch index
    var tPoint:Sprite = lines[event.touchPointID] as Sprite;
    // Remove line sprite from stage
    this.removeChild(tPoint);
    // Decrease number of active touches
    touchPointCount--;
    // Delete line sprite
    delete lines[event.touchPointID];
}

Build requirements

You must include the following classes in the class:

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

// The following class is specific to the example code implementation
import flash.utils.Dictionary

Discussion

To react to a multitouch gesture, you should set the MultiTouchInputMode to TOUCH_POINT, to dispatch multiple touch events. After you set the input mode, add an event listener to handle TOUCH_BEGIN, TOUCH_MOVE, and TOUCH_END events. To add functionality, you can evaluate the event.touchPointID, event.localX, and event.localY values in the function called by that listener, to detect the touch instance and the current location of each touch, and act accordingly.