[AS3]移动设备上的触控事件和手势

原文: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

posted @ 2015-11-25 15:35  木易的博客  阅读(2987)  评论(0编辑  收藏  举报