Touch Events and Gestures on Mobile

By Paul Trani on February 21, 2011 in Flash/ActionScript, Mobile
w8
k 0

When using touch events, consider the size of a finger/thumb.

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;
}
}
}

8 Comments

  1. Balint March 2, 2011 Reply

    Hello there, You have done a great job. I will certainly digg it and personally suggest to my friends. I am confident they’ll be benefited from this site.

  2. James September 6, 2011 Reply

    This is only the easy bit. Pinch-to-zoom and rotate should be relative to the point inbetween the fingers.

  3. VivD January 8, 2012 Reply

    Very nice simple examples.

    I am trying to implement the zoom option for images (full screen) in a list though and it doesn’t seem to work. Is there an additional property or something I should use for zoom to work in a list?

    • Author
      Paul Trani March 26, 2012 Reply

      Not that I’m aware of. The AS3 code should work and nothing I can think of in a list that would prohibit it from working.

  4. Jim Pivarski February 19, 2012 Reply

    I’d like to track multiple touches on the same sprite, but I only see one x,y point in event:TouchEvent (in local and stage coordinates), and I only see one event:TouchEvent in the event handler. With two fingers in the sprite, does the event handler get called twice with different touchPointIDs, like the example below?

    onTouchBegin is called with event.touchPointID = 12345 (first finger)
    onTouchMove is called with event.touchPointID = 12345 (it’s moving)
    onTouchBegin is called with event.touchPointID = 99999 (another finger)
    onTouchMove is called with event.touchPointID = 12345
    onTouchMove is called with event.touchPointID = 99999 (both are moving)
    onTouchMove is called with event.touchPointID = 12345
    onTouchEnd is called with event.touchPointID = 12345 (released first finger)
    onTouchEnd is called with event.touchPointID = 99999 (second finger released)

    If so, how do you calculate quantities that depend on both fingers, such as the distance or angle between them? Is there a “best practices” method for correlating this information in ActionScript, or a global event ID so that you know which different finger moves are simultaneous?

    (I’m planning to write physics demonstration applets that use a lot of new multifinger interactions, and I’m trying to decide on the best platform for that. iOS passes the set of all touches to the same function call. They don’t have unique IDs, but they do provide the previous location in addition to the current location, which you can use to match them up, with some difficulty. If ActionScript has a nice way to work with all of a sprite’s touches at once AND provides unique IDs, that would be the best of both worlds. Thanks for the informative post!)

    • Author
      Paul Trani February 23, 2012 Reply

      Here is a little background about touchpoint IDs:
      The Flash runtime assigns each point of touch a unique touchPointID value. Whenever an application responds to the phases or movement of touch input, check the touchPointID before handling the event. The touch input dragging methods of the Sprite class use the touchPointID property as a parameter so the correct input instance is handled. The touchPointID property ensures that an event handler is responding to the correct touch point. Otherwise, the event handler responds to any instances of the touch event type (such as all touchMove events) on the device, producing unpredictable behavior. The property is especially important when the user is dragging objects.

      More here if it helps, including sample code: http://help.adobe.com/en_US/as3/dev/WS1ca064e08d7aa93023c59dfc1257b16a3d6-7ffe.html

  5. Curtis J. Morley October 20, 2012 Reply

    As always great examples Paul. On your Click/Drag example the EventListeners are calling a different name than the expected functions. The eventListener is calling “touchBeginHandler” and the function is called “fl_TouchBeginHandler”. This will throw AS3 error 1120. If amy of your users need help with error 1120 they can find help here – http://curtismorley.com/2008/03/17/as3-error-1120/

    I have added your code to my help example. Thanks.

    Curtis J. Morley

Leave a reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>