Touch Events and Gestures on Mobile

Gone are the days of the simple mouse click when it comes to mobile devices.  In fact, there’s a lot of really cool touch events and gestures that can really extend the functionality of any app.

Touch Events vs. Gestures

So what’s the difference between touch events and gestures?  Well, touch events are the raw touch points that are available on the device.  Gestures are scripted “solutions” that take advantage of these touch events.  So instead of tracking two touch points to determine if they’re moving away or closer to one another in order to manipulate the size of a photo, you can just use GESTURE_ZOOM.

Let’s take a closer look at all the touch events (TOUCH_POINT) and gestures (GESTURE) available in ActionScript.

Mouse Click = Tap Event

A tap event acts the same way as a mouse click on the desktop:

Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
square.addEventListener(TouchEvent.TOUCH_TAP, tapHandler);
function tapHandler(event:TouchEvent):void
{
// Start your custom code
}

Click/Drag = Touch Begin/End

When you’re doing a click and drag on mobile consider using TOUCH_BEGIN and TOUCH_END:

Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
square.addEventListener(TouchEvent.TOUCH_BEGIN, touchBeginHandler);
var fl_DragBounds:Rectangle = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
function fl_TouchBeginHandler(event:TouchEvent):void
{
event.target.startTouchDrag(event.touchPointID, false, fl_DragBounds);
}
square.addEventListener(TouchEvent.TOUCH_END, touchEndHandler);
function fl_TouchEndHandler(event:TouchEvent):void
{
event.target.stopTouchDrag(event.touchPointID);
}

Long Tap

A long tap can be used to show a submenu on the image selected.  For instance, a long tap on an image might activate a submenu allowing the user to save the photo. The functionality uses a timer that counts down one second before showing the menu.

var pressTimer:Timer = new Timer(1000);
pressTimer.addEventListener(TimerEvent.TIMER, pressTimerHandler);
function fl_PressTimerHandler(event:TimerEvent):void
{
// Start your custom code
}
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
square.addEventListener(TouchEvent.TOUCH_BEGIN, pressBeginHandler);
function pressBeginHandler(event:TouchEvent):void
{
pressTimer.start();
}
square.addEventListener(TouchEvent.TOUCH_END, pressEndHandler);
square.addEventListener(TouchEvent.TOUCH_ROLL_OUT, pressEndHandler);
function pressEndHandler(event:TouchEvent):void
{
pressTimer.stop();
// End your custom code
}

Two-Finger Tap

A two-finger tap is another way to add additional functionality to an image. Two fingers can reveal a submenu.

Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(GestureEvent.GESTURE_TWO_FINGER_TAP, twoFingerTapHandler);
function twoFingerTapHandler(event:GestureEvent):void
{
// Start your custom code
}

Pinch to Zoom

Pinch to zoom in and out on such things as maps and photos.

Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, zoomHandler);
function zoomHandler(event:TransformGestureEvent):void
{
instance_name_here.scaleX *= event.scaleX;
instance_name_here.scaleY *= event.scaleY;
}

Pan Event

If an image or list is larger than the screen size then use the pan event to reveal the additional content.

Multitouch.inputMode = MultitouchInputMode.GESTURE;
instance_name_here.addEventListener(TransformGestureEvent.GESTURE_PAN, panHandler);
function panHandler(event:TransformGestureEvent):void
{
event.currentTarget.x += event.offsetX;
event.currentTarget.y += event.offsetY;
}

Rotate Event

Allows the user to use two fingers to rotate an item.  Great for a game or even for any photos.

Multitouch.inputMode = MultitouchInputMode.GESTURE;
instance_name_here.addEventListener(TransformGestureEvent.GESTURE_ROTATE, rotateHandler);
function rotateHandler(event:TransformGestureEvent):void
{
event.target.rotation += event.rotation;
}

Swipe Up/Down/Left/Right

Allows users to move through multiple screens or through long text fields.

Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener (TransformGestureEvent.GESTURE_SWIPE, swipeHandler);
function swipeHandler(event:TransformGestureEvent):void
{
switch(event.offsetX)
{
case 1:
{
// swiped right
break;
}
case -1:
{
// swiped left
break;
}
}
switch(event.offsetY)
{
case 1:
{
// swiped down
break;
}
case -1:
{
// swiped up
break;
}
}
}