原文：Touch Events and Gestures on Mobile
作者：Paul Trani
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.
當涉及到移動設備的時候，簡單鼠標點擊的日子已經一去不復返了。實際上，有很多很酷觸控事件和手勢真的可以擴展應用程序的功能。
觸控事件 vs. 手勢
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.
那么觸控事件和手勢有什么區別呢？嗯，觸控事件是設備提供的觸摸點原始數據。手勢是利用觸控事件實現的預設“方案”。比如想改變照片的大小時，你無需跟蹤兩個觸摸點檢測他們是靠近還是遠離，可以考慮用GESTURE_ZOOM事件實現。
Let’s take a closer look at all the touch events (TOUCH_POINT) and gestures (GESTURE) available in ActionScript.
現在讓我們更深入去看看ActionScript提供的觸控事件 (TOUCH_POINT) 和手勢(GESTURE)
鼠標點擊 = 輕敲事件
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
}
點擊/拖拽 = Touch Begin/End
When you’re doing a click and drag on mobile consider using TOUCH_BEGIN and TOUCH_END:
當你在移動設備上做點擊並且拖動可以使用 TOUCH_BEGIN和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);
}
長按
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.
長按(Long Tap)通常用於顯示所選圖片上的子菜單。例如，在一張圖片上長按可能會激活一個子菜單允許用戶保存圖片。實現這個功能可以利用一個計時器倒數1秒后顯示菜單。
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
}
兩指輕敲
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 in and out on such things as maps and photos.
在地圖或照片上面捏縮放(Pinch to Zoom)。
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;
}
搖移事件
If an image or list is larger than the screen size then use the pan event to reveal the additional content.
如果圖片或者列表的大小大於屏幕大小，那么可使用搖移事件(Pan Event)去顯示更多內容。
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;
}
旋轉事件
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;
}
上/下/左/右 快速划
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;
}
}
}
其他文章：
Multitouch and gesture support on the Flash Platform
Virtual Game Controllers
Touch Gesture Reference Guide
Multitouch joystick for Starling
A Guide To iOS Twin Stick Shooter Usability
第三方代碼庫：
Gestouch
