• Choose a category
• All
• Classic-Fiction

Figure 7-4. The swipe gesture

The following code simulates the act of reading a book. Swiping from left to right brings you further in the book. Swiping in the other direction returns you to the beginning of the book:

import flash.events.TransformGestureEvent;

import flash.text.TextField;

import flash.text.TextFormat;

var pageText:TextField;

var counter:int = 1;

function createArt():void {

var textFormat:TextFormat = new TextFormat();

textFormat.size = 90;

textFormat.color = 0xFF6600;

// create a text field to display the page number

pageText = new TextField();

pageText.x = 100;

pageText.y = 200;

pageText.autoSize = TextFieldAutoSize.LEFT;

pageText.defaultTextFormat = textFormat;

pageText.text = "Page " + counter;

addChild(pageText);

// create a listener for a swipe gesture

stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);

}

function onSwipe(event:TransformGestureEvent):void {

counter -= event.offsetX;

if (counter < 1) counter = 1;

pageText.text = "Page " + counter;

}

The offsetX value is used to decrement or increment the page number of the book.

The Press and Tap Gesture

The press and tap gesture, PressAndTapGestureEvent, only has one type: GESTURE_PRESS_AND_TAP. This gesture is more complicated than the others, and users may not figure it out without instructions. Unlike the previous gestures, this gesture happens in two steps: first one finger is pressed and then another finger taps (see Figure 7-5). It is really two events synthesized as one.

Figure 7-5. The press and tap gesture

The following code creates an elegant UI for selecting a menu and then tapping to access its submenu, as a context menu:

import flash.events.PressAndTapGestureEvent;

stage.addEventListener(PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP,

onPressAndTap);

function onPressAndTap(event:PressAndTapGestureEvent):void {

trace(event.tapLocalX);

trace(event.tapLocalY);

trace(event.tapStageX);

trace(event.tapStageY);

}

WARNING

The press and tap gesture is not supported by most devices at the time of this writing. I have provided this information in case the repertoire of gestures broadens in the future.

The Two-Finger Tap Gesture

GestureEvent only has one type, GESTURE_TWO_FINGER_TAP, and it is not supported by Android at the time of this writing. A tap is similar to a mouse click, but it requires making contact on a limited spatial area, with the two fingers close together, in a short time period. Figure 7-6 shows an example of a two-finger tap.

Figure 7-6. The two-finger tap gesture

The two-finger tap is a good gesture for a strong statement, as when you want the user to make a decision. You could use it, for instance, to pause and play a video:

import flash.events.PressAndTapGestureEvent;

sprite.addEventListener(GestureEvent.GESTURE_TWO_FINGER_TAP, onTwoFinger);

function onTwoFinger(event:GestureEvent):void {

// play or pause video

}

The TouchEvent Class

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