A touch event is similar to a mouse event, except that you can have multiple inputs at once. Because this event uses more power, you should only use it if you need to capture more than one point. If you only need to track one point, the mouse event will work well even though your mouse is now a finger.
Touches are also called raw touch data because you receive them as is. If you want to interpret them as gestures, you need to write the logic yourself or use a third-party library.
First, set the input mode to TOUCH_POINT:
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.events.TouchEvent;
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
TOUCH_TAP is similar to a mouse up event. The following code creates a simple application where every touch creates a new circle:
import flash.events.TouchEvent;
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
stage.addEventListener(TouchEvent.TOUCH_TAP, onTouchTap);
function onTouchTap(event:TouchEvent):void {
var sprite:Sprite = new Sprite();
sprite.graphics.lineStyle(25, Math.random()*0xFFFFFF);
sprite.graphics.drawCircle(0, 0, 80);
sprite.x = event.stageX;
sprite.y = event.stageY;
addChild(sprite);
}
The touchPointID is a new and important event property. Each new touch has a unique ID associated with it, from TOUCH_BEGIN to TOUCH_END. touchPointID gives you a way to identify and store every point and associate data with it if needed.
In this example, we use an Object to store the ID as a property and associate it with a sprite. To drag and drop the sprites, we use the startTouchDrag and stopTouchDrag methods:
var touches:Object = {};
stage.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);
function onTouchBegin(event:TouchEvent):void {
var sprite:Sprite = createCircle(event.stageX, event.stageY);
addChild(sprite);
// store the touchPointID and the sprite
touches[event.touchPointID] = sprite;
// drag the sprite
sprite.startTouchDrag(event.touchPointID, true);
}
function onTouchEnd(event:TouchEvent):void {
// retrieve the sprite using the touchPointID
var sprite:Sprite = touches[event.touchPointID];
// stop drag and destroy
stopTouchDrag(event.touchPointID);
sprite.graphics.clear();
removeChild(sprite);
touches[event.touchPointID] = null;
}
function createCircle(x:int, y:int):Sprite {
var sprite:Sprite = new Sprite();
sprite.graphics.lineStyle(25, Math.random()*0xFFFFFF);
sprite.graphics.drawCircle(0, 0, 100);
sprite.x = x;
sprite.y = y;
return sprite;
}
As we discussed earlier, Multitouch.maxTouchPoints determines how many touches a device can support. Many Android devices only support the detection of two simultaneous touch points.
There is no built-in mechanism to prevent a new touch if the maximum has been reached. In fact, expect unpredictable behavior such as the oldest touch no longer functioning. To prevent this, keep a count of how many points are present and stop the code from executing if you have reached the limit:
var pointCount:int = 0;
function onTouchBegin(event:TouchEvent):void {
if (pointCount == Multitouch.maxTouchPoints) {
return;
}
pointCount++;
// create new sprite
}
function onTouchEnd(event:TouchEvent):void {
pointCount–;
// remove old sprite
}
Let’s create an application using touch events and the drawing API. On TouchBegin, a new sprite is created and associated with a touch ID. It draws on TouchMove and is removed on TouchEnd. Draw using two fingers or two separate users:
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
var touches:Object = {};
stage.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);
function onTouchBegin(event:TouchEvent):void {
var sprite:Sprite = new Sprite();
addChild(sprite);
sprite.graphics.lineStyle(3, Math.random()*0xFFFFFF);
sprite.graphics.moveTo(event.stageX, event.stageY);
touches[event.touchPointID] = sprite;
}
function onTouchMove(event:TouchEvent):void {
var sprite:Sprite = touches[event.touchPointID];
sprite.graphics.lineTo(event.stageX, event.stageY);
}
function onTouchEnd(event:TouchEvent):void {
var sprite:Sprite = touches[event.touchPointID];
sprite.graphics.clear();
removeChild(sprite);
touches[event.touchPointID] = null;
}
Other available events are TOUCH_OUT, TOUCH_OVER, TOUCH_ROLL_OUT, and TOUCH_ROLL_OVER.