zoukankan      html  css  js  c++  java

  • Flash移动平台触摸和传感器的使用简单教程

    第一次在这里写教材，比较简单，如有不好的地方请大家多多包涵。

    技术点：
            1.多点触摸
            2.手势识别
            3.加速度感应
            4.全球定位

    教材的Demo在附件中
    TeachFlashForPhone.rar (70.96 KB, 下载次数: 1103)
    apk.rar (31.01 KB, 下载次数: 577)
    开发环境：FlashBuilder Burrito
    调试环境：android手机，用usb连接，启用调试模式。（注：模拟器无法支持:>_<:）
    Demo截图--> window.jpg
    首先建立一个基本的Demo模版
    界面： 左边竖排4个按钮分别对应4个Demo。
              按钮下输出调试信息。
              右边为Demo展示区域。
    代码如下：

    1. package
    2. {
    3.         import cx.teach.phone.*;
    4.         import cx.ui.components.Button;
    5.         
    6.         import flash.display.DisplayObject;
    7.         import flash.display.Sprite;
    8.         import flash.display.StageAlign;
    9.         import flash.display.StageScaleMode;
    10.         import flash.events.MouseEvent;
    11.         
    12.         import net.hires.debug.Logger;
    13.         
    14.         /**
    15.          * Flash移动平台触摸和传感器的使用Demo
    16.          * @author 翼翔天外
    17.          *
    18.          */
    19.         public class TeachFlashForPhone extends Sprite
    20.         {
    21.                 /**
    22.                  * 指向当前Demo
    23.                  */
    24.                 private var _nowDemo:DisplayObject;
    25.                
    26.                 public function TeachFlashForPhone()
    27.                 {
    28.                         super();
    29.                         init();
    30.                 }
    31.                
    32.                 private function init():void
    33.                 {
    34.                         //首先要设置舞台为左上对齐和不拉伸
    35.                         stage.align = StageAlign.TOP_LEFT;
    36.                         stage.scaleMode = StageScaleMode.NO_SCALE;
    37.                         
    38.                         //Demo按钮列表
    39.                         new Button(this,0,0,"多点触摸",onMultitouchClick);
    40.                         new Button(this,0,70,"手势识别",onGestureClick);
    41.                         new Button(this,0,140,"加速度感应",onAccelerometerClick);
    42.                         new Button(this,0,210,"全球定位",onGeolocationClick);
    43.                         
    44.                         //输出信息在界面上
    45.                         var log:Logger = new Logger();
    46.                         log.y = 280;
    47.                         addChild(log);
    48.                 }
    49.                
    50.                 /**
    51.                  * 切换Demo
    52.                  * @param demo
    53.                  *
    54.                  */
    55.                 private function changeDemo(demo:DisplayObject):void
    56.                 {
    57.                         if(_nowDemo)
    58.                         {
    59.                                 removeChild(_nowDemo);
    60.                         }
    61.                         _nowDemo = demo;
    62.                         addChild(_nowDemo);
    63.                 }
    64.                
    65.                 private function onMultitouchClick(e:MouseEvent):void
    66.                 {
    67.                         Logger.clear();
    68.                         Logger.info("多点触摸Demo");
    69.                         changeDemo(new MultitouchDemo);
    70.                 }
    71.                
    72.                 private function onGestureClick(e:MouseEvent):void
    73.                 {
    74.                         Logger.clear();
    75.                         Logger.info("手势识别Demo");
    76.                         changeDemo(new GestureDemo);
    77.                 }
    78.                
    79.                 private function onAccelerometerClick(e:MouseEvent):void
    80.                 {
    81.                         Logger.clear();
    82.                         Logger.info("加速度感应Demo");
    83.                         changeDemo(new AccelerometerDemo);                        
    84.                 }
    85.                
    86.                 private function onGeolocationClick(e:MouseEvent):void
    87.                 {
    88.                         Logger.clear();
    89.                         Logger.info("全球定位Demo");
    90.                         changeDemo(new GeolocationDemo);        
    91.                 }               
    92.         }
    93. }
    复制代码


    参看工程主类：TeachFlashForPhone

    Demo基本方法说明
    每个Demo 都有init和destroy方法，分别对应添加到舞台的初始化操作和移出舞台时的释放操作。

    1.        多点触摸        
    代码参看：cx.teach.phone. MultitouchDemo
    范例功能：建立两个小球，可以用两个手指同时拖动，并绘制拖动轨迹。
    代码如下：

    1. package cx.teach.phone
    2. {
    3. import cx.teach.phone.display.Ball;

    5. import flash.display.Sprite;
    6. import flash.events.Event;
    7. import flash.events.TouchEvent;
    8. import flash.geom.Point;
    9. import flash.ui.Multitouch;
    10. import flash.ui.MultitouchInputMode;
    11. import flash.utils.Dictionary;

    13. import net.hires.debug.Logger;

    15. /**
    16. * 多点触摸Demo
    17. * @author 翼翔天外
    18. *
    19. */
    20. public class MultitouchDemo extends Sprite
    21. {
    22. private var _ball1:Ball;
    23. private var _ball2:Ball;
    24. /**
    25. * 记录拖动的手指
    26. */
    27. private var _touchDic:Dictionary = new Dictionary();

    29. public function MultitouchDemo()
    30. {
    31. addEventListener(Event.ADDED_TO_STAGE,init);
    32. addEventListener(Event.REMOVED_FROM_STAGE,destroy);
    33. }

    35. /**
    36. * 初始化
    37. *
    38. */
    39. public function init(e:Event = null):void
    40. {
    41. //判断是否支持
    42. if(!Multitouch.supportsTouchEvents)
    43. {
    44. Logger.error("不支持多点触摸！");
    45. return;
    46. }
    47. //添加多点支持
    48. Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
    49. //横向排列两个球
    50. _ball1 = new Ball();
    51. _ball1.x = 300;
    52. _ball1.y = 100;
    53. addChild(_ball1);
    54. _ball2 = new Ball();
    55. _ball2.x = 500;
    56. _ball2.y = 100;
    57. addChild(_ball2);
    58. //添加触摸事件
    59. _ball1.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
    60. _ball2.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
    61. stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
    62. stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);
    63. }

    65. /**
    66. * 销毁
    67. *
    68. */
    69. public function destroy(e:Event = null):void
    70. {
    71. if(_ball1)_ball1.removeEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
    72. if(_ball2)_ball2.removeEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
    73. stage.removeEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
    74. stage.removeEventListener(TouchEvent.TOUCH_END, onTouchEnd);
    75. }

    77. /**
    78. * 触摸开始
    79. * @param e
    80. *
    81. */
    82. private function onTouchBegin(e:TouchEvent):void
    83. {
    84. //开始拖拽，并绑定到一个手指
    85. Sprite(e.currentTarget).startTouchDrag(e.touchPointID);
    86. //记录当前手指到字典
    87. _touchDic[e.touchPointID] = new Point(e.stageX,e.stageY);
    88. Logger.info("Begin TouchPointId:" + e.touchPointID);
    89. }

    91. /**
    92. * 触摸移动中
    93. * @param e
    94. *
    95. */
    96. private function onTouchMove(e:TouchEvent) :void
    97. {
    98. var oldPos:Point = _touchDic[e.touchPointID];
    99. var newPos:Point = new Point(e.stageX,e.stageY);
    100. //线条跟随
    101. drawLine(oldPos,newPos,0);
    102. //更新手指位置
    103. _touchDic[e.touchPointID] = newPos;
    104. }

    106. /**
    107. * 触摸结束
    108. * @param e
    109. *
    110. */
    111. private function onTouchEnd(e:TouchEvent):void
    112. {
    113. Logger.info("End TouchPointId:" + e.touchPointID);
    114. delete _touchDic[e.touchPointID];
    115. //停止拖拽
    116. Sprite(e.currentTarget).stopTouchDrag(e.touchPointID);

    118. }

    120. /**
    121. * 绘制线段
    122. * @param fromPos
    123. * @param toPos
    124. * @param color
    125. *
    126. */
    127. private function drawLine(fromPos:Point,toPos:Point,color:uint):void
    128. {
    129. this.graphics.lineStyle(1,color);
    130. this.graphics.moveTo(fromPos.x,fromPos.y);
    131. this.graphics.lineTo(toPos.x,toPos.y);
    132. }
    133. }
    134. }
    复制代码


    代码说明：
    首先是要做一个可行性检测
    if(!Multitouch.supportsTouchEvents)
    {
          Logger.error("不支持多点触摸！");
          return;
    }
    不支持就没戏了，可能要做些友好提示，或切换到其他操作模式。
    然后这一句就是告诉手机我要使用多点触摸了，要自己来用代码来判断触摸点。
    Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
    我们需要监听TouchEvent中的三个事件（TOUCH_BEGIN，TOUCH_MOVE，TOUCH_END）
    分别对应触摸的开始，移动和结束。相当于鼠标的MOUSE_DOWN,MOUSE_MOVE,MOUSE_UP。
    开始和停止拖动：
    startTouchDrag(e.touchPointID); stopTouchDrag(e.touchPointID);
    注意：在拖放中传入了一个参数e.touchPointID，它是flash为每个触摸点分配的唯一的值，就是对应你当前在屏幕上的那个手 指。在每个事件中都通过这个Id来判断。以前操作鼠标因为只有一个点，所以不用加判断。这里有多个点，那么我们就要用一个字典来管理他们，我建立了一个私 有变量_touchDic来管理和保存某个触摸点上次的位置坐标。这样可以根据每个手指做更加复杂的处理。
    然后在移动的时候我更新了字典中触摸点的位置，做了画线处理，当然还可以做更加有趣的操作，有待创意了。
    大致就是这样的一个流程，代码里面应该写得比较清晰了。

    2.        手势识别
    代码参看：cx.teach.phone. GestureDemo
    范例功能：建立一个方块，用手指在屏幕上做手势来旋转，缩放，移动。
    代码如下：

    1. package cx.teach.phone
    2. {
    3. import cx.teach.phone.display.Box;

    5. import flash.display.Sprite;
    6. import flash.events.Event;
    7. import flash.events.GesturePhase;
    8. import flash.events.TransformGestureEvent;
    9. import flash.ui.Multitouch;
    10. import flash.ui.MultitouchInputMode;

    12. import net.hires.debug.Logger;

    14. /**
    15. * 手势识别Demo
    16. * @author 翼翔天外
    17. *
    18. */
    19. public class GestureDemo extends Sprite
    20. {
    21. private var _box:Box;

    23. public function GestureDemo()
    24. {
    25. addEventListener(Event.ADDED_TO_STAGE,init);
    26. addEventListener(Event.REMOVED_FROM_STAGE,destroy);
    27. }

    29. /**
    30. * 初始化
    31. *
    32. */
    33. public function init(e:Event = null):void
    34. {
    35. //判断是否支持
    36. if(!Multitouch.supportsGestureEvents)
    37. {
    38. Logger.error("不支持手势识别！");
    39. return;
    40. }
    41. //添加手势支持
    42. Multitouch.inputMode = MultitouchInputMode.GESTURE;
    43. //建立方块
    44. _box = new Box();
    45. _box.x = 400;
    46. _box.y = 200;
    47. addChild(_box);
    48. //添加手势监听
    49. stage.addEventListener(TransformGestureEvent.GESTURE_ROTATE,onRotate);//旋转：用两根手指做旋转手势
    50. stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM,onZoom);//缩放：用两根手指靠近和远离
    51. stage.addEventListener(TransformGestureEvent.GESTURE_PAN,onPan);//平移:用两根手指在屏幕上滑动
    52. }

    54. /**
    55. * 销毁
    56. *
    57. */
    58. public function destroy(e:Event = null):void
    59. {
    60. stage.removeEventListener(TransformGestureEvent.GESTURE_ROTATE,onRotate);
    61. stage.removeEventListener(TransformGestureEvent.GESTURE_ZOOM,onZoom);
    62. stage.removeEventListener(TransformGestureEvent.GESTURE_PAN,onPan);
    63. }

    65. /**
    66. * 识别为旋转
    67. * @param e
    68. *
    69. */
    70. private function onRotate(e:TransformGestureEvent):void
    71. {
    72. _box.rotation += e.rotation;
    73. switch(e.phase)
    74. {
    75. case GesturePhase.BEGIN:
    76. Logger.info("旋转");
    77. }
    78. }

    80. /**
    81. * 识别为缩放
    82. * @param e
    83. *
    84. */
    85. private function onZoom(e:TransformGestureEvent):void
    86. {
    87. _box.scaleX *= e.scaleX;
    88. _box.scaleY *= e.scaleY;
    89. switch(e.phase)
    90. {
    91. case GesturePhase.BEGIN:
    92. Logger.info("缩放");
    93. }
    94. }

    96. /**
    97. * 识别为移动
    98. * @param e
    99. *
    100. */
    101. private function onPan(e:TransformGestureEvent):void
    102. {

    104. _box.x += e.offsetX;
    105. _box.y += e.offsetY;
    106. //手势事件的阶段
    107. switch(e.phase)
    108. {
    109. case GesturePhase.BEGIN:
    110. Logger.info("移动");
    111. _box.alpha = .5;
    112. break;
    113. case GesturePhase.UPDATE:

    115. break;
    116. case GesturePhase.END:
    117. _box.alpha = 1;
    118. break;
    119. }
    120. }

    122. }
    123. }
    复制代码


    代码说明：
    首先仍然是可行性检测
    if(!Multitouch.supportsGestureEvents)
    {
            Logger.error("不支持手势识别！");
            return;
    }
    告诉手机使用手势支持
    Multitouch.inputMode = MultitouchInputMode.GESTURE;
    Flash支持的手势还是比较多的，当然还要看设备是否支持。
    我简单使用了旋转，缩放和平移三个手势。大家可以看API文档获取更多手势。或者也可以自己通过上面例子中的手指移动分析出需要的手势。
    手势在TransformGestureEvent中定义，监听特定方法就OK了。
    值得说明的是，一般手势都有几个特定阶段
    switch(e.phase)
    {
           case GesturePhase.BEGIN:
                                            _box.alpha = .5;
                                            break;
           case GesturePhase.UPDATE:
                                           
                                            break;
           case GesturePhase.END:
                                            _box.alpha = 1;
                                            break;
    }
    分别对应手势的开始，移动中，和结束。可以在其中做一些处理。

    3.        加速度感应
    代码参看：cx.teach.phone. AccelerometerDemo
    范例功能：建立一个小球，平放手机，通过不同方向倾斜来移动它。
    代码如下：

    1. package cx.teach.phone
    2. {
    3. import cx.teach.phone.display.Ball;
    4. import cx.teach.phone.utils.AccelerometerMotor;

    6. import flash.display.Sprite;
    7. import flash.events.Event;
    8. import flash.sensors.Accelerometer;

    10. import net.hires.debug.Logger;

    12. /**
    13. * 加速度感应Demo
    14. * @author 翼翔天外
    15. *
    16. */
    17. public class AccelerometerDemo extends Sprite
    18. {
    19. /**
    20. * 传感器引擎
    21. */
    22. private var _acclMotor:AccelerometerMotor;

    24. private var _ball:Ball;

    26. public function AccelerometerDemo()
    27. {
    28. addEventListener(Event.ADDED_TO_STAGE,init);
    29. addEventListener(Event.REMOVED_FROM_STAGE,destroy);
    30. }

    32. /**
    33. * 初始化
    34. *
    35. */
    36. public function init(e:Event = null):void
    37. {
    38. //判断是否支持
    39. if (!Accelerometer.isSupported)
    40. {
    41. Logger.error("没有加速度传感器！");
    42. return;
    43. }
    44. //展示用球
    45. _ball = new Ball();
    46. _ball.x = 400;
    47. _ball.y = 200;
    48. addChild(_ball);

    50. _acclMotor = new AccelerometerMotor();
    51. _acclMotor.start();

    53. //添加监听
    54. _acclMotor.addEventListener(Event.CHANGE,onAcclChange);
    55. this.addEventListener(Event.ENTER_FRAME,update);
    56. }

    58. /**
    59. * 销毁
    60. *
    61. */
    62. public function destroy(e:Event = null):void
    63. {
    64. if(_acclMotor)
    65. {
    66. _acclMotor.removeEventListener(Event.CHANGE,onAcclChange);
    67. _acclMotor.destroy();
    68. }
    69. this.removeEventListener(Event.ENTER_FRAME,update);
    70. }

    72. /**
    73. * 当加速度改变
    74. * @param e
    75. *
    76. */
    77. private function onAcclChange(e:Event):void
    78. {
    79. //Logger.info("X:" + _acclMotor.accelerationX + " Y:" + _acclMotor.accelerationY + " Z:" + _acclMotor.accelerationZ + " ");
    80. }

    82. /**
    83. * 帧循环，更新位置
    84. * @param e
    85. *
    86. */
    87. private function update(e:Event):void
    88. {
    89. _ball.x += _acclMotor.accelerationX;
    90. _ball.y += _acclMotor.accelerationY;
    91. }
    92. }
    93. }
    复制代码


    代码说明：
    首先 还是是可行性检测，如果没有可不行
    if (!Accelerometer.isSupported)
    {
           Logger.error("没有加速度传感器！");
           return;
    }
    然后建立了一个加速度传感器引擎_acclMotor = new AccelerometerMotor();
    这是我封装的一个类cx.teach.phone.utils.AccelerometerMotor
    它里面通过使用flash自带的Accelerometer对象监听AccelerometerEvent.UPDATE方法来处理传感器数据，做了一些必要的计算减少误差。
    AccelerometerEvent里面的accelerationX，accelerationY，accelerationZ分别代表各个轴的加速度。
    在帧循环中直接根据引擎中的加速度值附加到小球位置即可实现小球的移动了。
    private function update(e:Event):void
    {
             _ball.x += _acclMotor.accelerationX;
             _ball.y += _acclMotor.accelerationY;
    }        

    4.        全球定位
    代码参看：cx.teach.phone. GeolocationDemo
    范例功能：用一个文本输出经纬度。（会要等待一定时间才有输出）
    代码如下：

    1. package cx.teach.phone
    2. {
    3. import flash.display.Sprite;
    4. import flash.events.Event;
    5. import flash.events.GeolocationEvent;
    6. import flash.sensors.Geolocation;
    7. import flash.text.TextField;
    8. import flash.text.TextFieldAutoSize;
    9. import flash.text.TextFormat;

    11. import net.hires.debug.Logger;

    13. /**
    14. * 全球定位Demo
    15. * @author 翼翔天外
    16. *
    17. */
    18. public class GeolocationDemo extends Sprite
    19. {
    20. private var _geo:Geolocation;

    22. private var _txtInfo:TextField;

    24. public function GeolocationDemo()
    25. {
    26. addEventListener(Event.ADDED_TO_STAGE,init);
    27. addEventListener(Event.REMOVED_FROM_STAGE,destroy);
    28. }

    30. /**
    31. * 初始化
    32. *
    33. */
    34. public function init(e:Event = null):void
    35. {
    36. //判断是否支持
    37. if(!Geolocation.isSupported)
    38. {
    39. Logger.error("没有位置传感器！");
    40. return;
    41. }
    42. _geo = new Geolocation();
    43. //判断是否可用
    44. if(_geo.muted)
    45. {
    46. //权限设置如：<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    47. Logger.error("传感器未开启或设置权限不够！");
    48. return;
    49. }
    50. //设置更新间隔
    51. _geo.setRequestedUpdateInterval(2000);
    52. //显示用文本
    53. _txtInfo = new TextField();
    54. _txtInfo.defaultTextFormat = new TextFormat(null,18,0x0000FF);
    55. _txtInfo.x = 200;
    56. _txtInfo.y = 100;
    57. _txtInfo.autoSize = TextFieldAutoSize.LEFT;
    58. addChild(_txtInfo);

    60. //添加监听
    61. _geo.addEventListener(GeolocationEvent.UPDATE,onGeoUpdate);
    62. }

    64. /**
    65. * 销毁
    66. *
    67. */
    68. public function destroy(e:Event = null):void
    69. {
    70. if(_geo)
    71. {
    72. _geo.removeEventListener(GeolocationEvent.UPDATE,onGeoUpdate);
    73. }
    74. }

    76. /**
    77. * 显示位置信息
    78. * @param e
    79. *
    80. */
    81. private function onGeoUpdate(e:GeolocationEvent):void
    82. {
    83. Logger.info("更新位置信息");
    84. _txtInfo.text = "经:" + e.longitude + " 纬:" + e.latitude;
    85. }
    86. }
    87. }
    复制代码


    代码说明：
    首先当然还是是可行性检测
    if(!Geolocation.isSupported)
    {
           Logger.error("没有位置传感器！");
           return;
    }
    _geo = new Geolocation();
    由于隐私或用户拒绝，这里要多检测一个是否可用
    if(_geo.muted)
    {
           Logger.error("传感器未开启或设置权限不够！");
           return;
    }
    记住一定要在配置文件中设置以下语句来允许使用位置信息
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    Ok,下面建立一个文本和添加GeolocationEvent.UPDATE的侦听函数
    当位置信息更新时就会调用，然后就可以输出经纬度了，当然你可以去谷歌地图定位或做其它什么操作。


    本教程到此结束，希望对大家的生活和工作有一定的帮助。
  • 相关阅读:
    移动前端webApp开发点滴积累20140524
    做业务系统与公众产品的区别
    浅谈浏览器兼容性问题-（4）工具及调试
    浅谈浏览器兼容性问题-（3）他山之石整理
    浅谈浏览器兼容性问题-（2）本人解决方案理解与积累
    使用Using的注意事项
    [转]VMPlayer的Briged网络配置
    [转]移动互联网应用技术架构简介-Restful服务
    理解WCF中的Contracts
    [翻译]在ASP.NET Web API中通过OData支持查询和分页
  • 原文地址：https://www.cnblogs.com/bluesea-flash/p/3356570.html
Copyright © 2011-2022 走看看