频道栏目
读书频道 > 移动开发 > 其他综合 > Flash+Flex+AIR移动开发入门经典——适用于Android、iOS和BlackBerry
4.2.3 在交互对象上注册手势事件
2012-09-13 14:57:16     我来说两句
收藏   我要投稿
本书介绍的内容适合于各种层次的开发人员。它将帮助你从一个基础水平开始创建基于Flash的移动应用程序。本书还包含大量程序代码示例,并进行了详细的解释,基本上涵盖了如何从零开始使用ActionScript 3.0创建适...  立即去当当网订购

到现在为止,MultitouchAndGestures.as示例将跟踪单个触摸点,并在单根手指移动时在屏幕上绘制形状。接下来我们将介绍如何使用平移手势来移动应用程序中绘制的每一个形状,并且在后面的步骤中综合使用计时器和手势事件。

(1) 首先导入5个新的类:Stage、GesturePhase、TransformGestureEvent、Timer和TimerEvent类,参见程序清单4-19。

程序清单4-19:导入Timer和TimerEvent类

package
{
      import flash.display.Sprite;
      import flash.display.Stage;
      import flash.events.GesturePhase;
      import flash.events.TimerEvent;
      import flash.events.TouchEvent;
      import flash.events.TransformGestureEvent;
      import flash.text.TextField;
      import flash.text.TextFieldAutoSize;
      import flash.ui.Multitouch;
      import flash.ui.MultitouchInputMode;
      import flash.utils.Timer;

(2) 接下来在私有变量声明中,定义一个名称为idleTimer的Timer对象,以及一个名称为currentTarget的String变量,参见程序清单4-20。

程序清单4-20:声明新的类变量

public class MultitouchAndGestures extends Sprite
{     
       private var coordinates:TextField;
      private var currentTarget:String;
       private var idleTimer:Timer;
       private var offsetX:Number;
       private var offsetY:Number;
private var multitouch:TextField;

计时器的目的是为了重置空闲的手势移动,因而将它命名为idleTimer。虽然用户的手指触摸当前作为一个触摸点处理,但是目标是当触摸到形状时使用平移手势,从而允许来回移动这个形状。这意味着输入模式需要从触摸更改为手势,然后在一段时间不活动之后再从手势更改回触摸模式,从而允许绘制更多的形状。其中定义了currentTarget以保存最后的触摸形状。

(3) 在MultitouchAndGestures()函数中初始化idleTimer。Timer的类构造函数将以毫秒为单位接受第一个参数,这里应该设置为1000,表示1秒钟的时间。还需要为这个对象添加一个事件监听程序,在计时器完成一个周期时触发一个名称为onTimer()的事件处理程序,参见程序清单4-21。

程序清单4-21:在MultitouchAndGestures.as文件中借助类构造函数注册计时器事件

public function MultitouchAndGestures()
{
      multitouch = new TextField();
      multitouch.autoSize = TextFieldAutoSize.LEFT;
   
      idleTimer = new Timer(1000);
      idleTimer.addEventListener(TimerEvent.TIMER, onTimer);
     
      switch(Multitouch.supportsTouchEvents)
      {

(4) 在类构造函数下面,创建4个新的存根:onTimer()、initializeGestures()、initializeTimer()和initializeTouch()。其中onTimer()事件处理程序将获取TimerEvent对象e;其他3个函数不需要定义参数,参见程序清单4-22。

程序清单4-22:在MultitouchAndGestures.as文件中添加onTimer()、initializeGestures()、initializeTimer()和initializeTouch()方法

private function onTimer(e:TimerEvent):void {}
  
private function initializeGestures():void {}
 
private function initializeTimer():void {}
 
private function initializeTouch():void {}

(5) 在onTimer()函数中,为了在计时器完成一个周期后防止再次调用计时器事件,对idleTimer对象调用stop()方法,参见程序清单4-23。

程序清单4-23:在MultitouchAndGestures.as文件中借助onTimer()方法停止计时器

private function onTimer(e:TimerEvent):void

      idleTimer.stop();
}

(6) 接下来在initializeTimer()函数中,将idleTimer对象的delay属性设置为1000。实质上它将计时器重置为开始时的状态。此外它还检查计时器是否仍然在倒计时;如果它没有运行,则使用start()方法重新启动它,参见程序清单4-24。

程序清单4-24:在MultitouchAndGestures.as文件中借助initializeTimer()方法启动计时器

private function initializeTimer():void
{
      idleTimer.delay = 1000;
 
      if(!idleTimer.running)
            idleTimer.start();
}

注意,一旦对idleTimer对象调用stop()方法之后,计时器将不再运行。

(7) 在initializeTouch()函数中,将输入模式设置为触摸点,参见程序清单4-25。

程序清单4-25:在MultitouchAndGestures.as文件中借助initializeTouch()方法将输入模式设置为触摸点

private function initializeTouch():void
{
      if(Multitouch.supportsTouchEvents)
             Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
}

(8) 返回到onTimer()函数,在计时器停止之后,调用initializeTouch()函数,参见程序清单4-26。

程序清单4-26:在MultitouchAndGestures.as文件中借助onTimer()方法初始化触摸点

private function onTimer(e:TimerEvent):void

      idleTimer.stop();
      initializeTouch();
}

(9) 在initializeGestures()函数中,将输入模式设置为手势,然后调用initializeTimer()函数,参见程序清单4-27。

程序清单4-27:在MultitouchAndGestures.as文件中借助initializeGestures()方法将输入模式设置为手势并初始化计时器

private function initializeGestures():void
{
      if(Multitouch.supportsGestureEvents)
      {
            Multitouch.inputMode = MultitouchInputMode.GESTURE;
            initializeTimer();
      }
}

(10) 返回到onTouch()函数,对于TOUCH_BEGIN事件使用e.target属性来确定舞台上是否分派了用户触摸事件。将目标e.target.name的引用保存为currentTarget,然后调用initializeGestures()将输入模式设置为手势,参见程序清单4-28。

程序清单4-28:在MultitouchAndGestures.as文件中借助onTouch()方法初始化手势

private function onTouch(e:TouchEvent):void
{
      var id:Number = e.touchPointID;                       
      var x:Number = e.stageX;
      var y:Number = e.stageY;
                                              
      switch(e.type)
      {
            case TouchEvent.TOUCH_BEGIN:
            {
                  if(e.target is Stage)
                  {
                        drawLines(id, x, y);
                        drawShape(id, x, y);
                                           
                  } else {

                        currentTarget = e.target.name;   
                        initializeGestures();
                  }                             
            }
            break;
            case TouchEvent.TOUCH_MOVE:
            {
                  moveLines(id, x, y);
                  drawShape(id, x, y);
            }
            break;
            case TouchEvent.TOUCH_END:
            {
                  removeLines(id);
            }                 
            break;
     }
}     

(11) 在drawShape()函数中, 在实例化shape子画面之后,使用Multitouch.supported Gestures检查是否支持平移手势。然后调用addEventListener()方法,并提供TransformGestureEvent. GESTURE_PAN事件类型g作为第一个参数,一个名称为onPan()的事件处理程序作为第二个参数。这个onPan()事件处理程序应该添加在drawShape()函数下面,参见程序清单4-29。

程序清单4-29:在MultitouchAndGestures.as文件中借助drawShape()方法为形状添加平移手势事件

private function drawShape(id:Number, x:Number, y:Number):void
{
      var shape:Sprite;
      var shapeId:String = id.toString();
     if(!"stage.getChildByName(shapeId))
    {
            shape = new Sprite();
            shape.name = shapeId;

            for each(var g:String in Multitouch.supportedGestures)
            {
                  switch(g)
                  {
                        case TransformGestureEvent.GESTURE_PAN:
                        {
                              shape.addEventListener(g, onPan);
                        }
                        break;
                  }
            }

            stage.addChild(shape);
                             
      } else {
                             
            shape = child as Sprite;
      }
     
      var width:Number = x-offsetX;
      var height:Number = y-offsetY;

      shape.graphics.clear();
      shape.graphics.lineStyle(2, 0x000000, 1.0);
      shape.graphics.beginFill(0x000000, 0.0);
      shape.graphics.drawRect(offsetX, offsetY, width, height);
      shape.graphics.endFill();
}
     
private function onPan(e:TransformGestureEvent):void {} 
 

您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:4.2.2 手势事件和事件处理
下一篇:4.2.4 处理手势事件
相关文章
图文推荐
排行
热门
最新书评
特别推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站