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

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

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

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

package
{
import cx.teach.phone.*;
import cx.ui.components.Button;
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.MouseEvent;
import net.hires.debug.Logger;
/**
* Flash移动平台触摸和传感器的使用Demo
* @author 翼翔天外
*
*/
public class TeachFlashForPhone extends Sprite
{
/**
* 指向当前Demo
*/
private var _nowDemo:DisplayObject;
public function TeachFlashForPhone()
{
super();
init();
}
private function init():void
{
//首先要设置舞台为左上对齐和不拉伸
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
//Demo按钮列表
new Button(this,0,0,"多点触摸",onMultitouchClick);
new Button(this,0,70,"手势识别",onGestureClick);
new Button(this,0,140,"加速度感应",onAccelerometerClick);
new Button(this,0,210,"全球定位",onGeolocationClick);
//输出信息在界面上
var log:Logger = new Logger();
log.y = 280;
addChild(log);
}
/**
* 切换Demo
* @param demo
*
*/
private function changeDemo(demo:DisplayObject):void
{
if(_nowDemo)
{
removeChild(_nowDemo);
}
_nowDemo = demo;
addChild(_nowDemo);
}
private function onMultitouchClick(e:MouseEvent):void
{
Logger.clear();
Logger.info("多点触摸Demo");
changeDemo(new MultitouchDemo);
}
private function onGestureClick(e:MouseEvent):void
{
Logger.clear();
Logger.info("手势识别Demo");
changeDemo(new GestureDemo);
}
private function onAccelerometerClick(e:MouseEvent):void
{
Logger.clear();
Logger.info("加速度感应Demo");
changeDemo(new AccelerometerDemo);
}
private function onGeolocationClick(e:MouseEvent):void
{
Logger.clear();
Logger.info("全球定位Demo");
changeDemo(new GeolocationDemo);
}
}
}

复制代码

参看工程主类：TeachFlashForPhone

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

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

package cx.teach.phone
{
import cx.teach.phone.display.Ball;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.TouchEvent;
import flash.geom.Point;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.utils.Dictionary;
import net.hires.debug.Logger;
/**
* 多点触摸Demo
* @author 翼翔天外
*
*/
public class MultitouchDemo extends Sprite
{
private var _ball1:Ball;
private var _ball2:Ball;
/**
* 记录拖动的手指
*/
private var _touchDic:Dictionary = new Dictionary();
public function MultitouchDemo()
{
addEventListener(Event.ADDED_TO_STAGE,init);
addEventListener(Event.REMOVED_FROM_STAGE,destroy);
}
/**
* 初始化
*
*/
public function init(e:Event = null):void
{
//判断是否支持
if(!Multitouch.supportsTouchEvents)
{
Logger.error("不支持多点触摸！");
return;
}
//添加多点支持
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
//横向排列两个球
_ball1 = new Ball();
_ball1.x = 300;
_ball1.y = 100;
addChild(_ball1);
_ball2 = new Ball();
_ball2.x = 500;
_ball2.y = 100;
addChild(_ball2);
//添加触摸事件
_ball1.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
_ball2.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);
}
/**
* 销毁
*
*/
public function destroy(e:Event = null):void
{
if(_ball1)_ball1.removeEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
if(_ball2)_ball2.removeEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
stage.removeEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
stage.removeEventListener(TouchEvent.TOUCH_END, onTouchEnd);
}
/**
* 触摸开始
* @param e
*
*/
private function onTouchBegin(e:TouchEvent):void
{
//开始拖拽，并绑定到一个手指
Sprite(e.currentTarget).startTouchDrag(e.touchPointID);
//记录当前手指到字典
_touchDic[e.touchPointID] = new Point(e.stageX,e.stageY);
Logger.info("Begin TouchPointId:" + e.touchPointID);
}
/**
* 触摸移动中
* @param e
*
*/
private function onTouchMove(e:TouchEvent) :void
{
var oldPos:Point = _touchDic[e.touchPointID];
var newPos:Point = new Point(e.stageX,e.stageY);
//线条跟随
drawLine(oldPos,newPos,0);
//更新手指位置
_touchDic[e.touchPointID] = newPos;
}
/**
* 触摸结束
* @param e
*
*/
private function onTouchEnd(e:TouchEvent):void
{
Logger.info("End TouchPointId:" + e.touchPointID);
delete _touchDic[e.touchPointID];
//停止拖拽
Sprite(e.currentTarget).stopTouchDrag(e.touchPointID);
}
/**
* 绘制线段
* @param fromPos
* @param toPos
* @param color
*
*/
private function drawLine(fromPos:Point,toPos:Point,color:uint):void
{
this.graphics.lineStyle(1,color);
this.graphics.moveTo(fromPos.x,fromPos.y);
this.graphics.lineTo(toPos.x,toPos.y);
}
}
}

复制代码

代码说明：
首先是要做一个可行性检测
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
范例功能：建立一个方块，用手指在屏幕上做手势来旋转，缩放，移动。
代码如下：

package cx.teach.phone
{
import cx.teach.phone.display.Box;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.GesturePhase;
import flash.events.TransformGestureEvent;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import net.hires.debug.Logger;
/**
* 手势识别Demo
* @author 翼翔天外
*
*/
public class GestureDemo extends Sprite
{
private var _box:Box;
public function GestureDemo()
{
addEventListener(Event.ADDED_TO_STAGE,init);
addEventListener(Event.REMOVED_FROM_STAGE,destroy);
}
/**
* 初始化
*
*/
public function init(e:Event = null):void
{
//判断是否支持
if(!Multitouch.supportsGestureEvents)
{
Logger.error("不支持手势识别！");
return;
}
//添加手势支持
Multitouch.inputMode = MultitouchInputMode.GESTURE;
//建立方块
_box = new Box();
_box.x = 400;
_box.y = 200;
addChild(_box);
//添加手势监听
stage.addEventListener(TransformGestureEvent.GESTURE_ROTATE,onRotate);//旋转：用两根手指做旋转手势
stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM,onZoom);//缩放：用两根手指靠近和远离
stage.addEventListener(TransformGestureEvent.GESTURE_PAN,onPan);//平移:用两根手指在屏幕上滑动
}
/**
* 销毁
*
*/
public function destroy(e:Event = null):void
{
stage.removeEventListener(TransformGestureEvent.GESTURE_ROTATE,onRotate);
stage.removeEventListener(TransformGestureEvent.GESTURE_ZOOM,onZoom);
stage.removeEventListener(TransformGestureEvent.GESTURE_PAN,onPan);
}
/**
* 识别为旋转
* @param e
*
*/
private function onRotate(e:TransformGestureEvent):void
{
_box.rotation += e.rotation;
switch(e.phase)
{
case GesturePhase.BEGIN:
Logger.info("旋转");
}
}
/**
* 识别为缩放
* @param e
*
*/
private function onZoom(e:TransformGestureEvent):void
{
_box.scaleX *= e.scaleX;
_box.scaleY *= e.scaleY;
switch(e.phase)
{
case GesturePhase.BEGIN:
Logger.info("缩放");
}
}
/**
* 识别为移动
* @param e
*
*/
private function onPan(e:TransformGestureEvent):void
{
_box.x += e.offsetX;
_box.y += e.offsetY;
//手势事件的阶段
switch(e.phase)
{
case GesturePhase.BEGIN:
Logger.info("移动");
_box.alpha = .5;
break;
case GesturePhase.UPDATE:
break;
case GesturePhase.END:
_box.alpha = 1;
break;
}
}
}
}

复制代码

代码说明：
首先仍然是可行性检测
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
范例功能：建立一个小球，平放手机，通过不同方向倾斜来移动它。
代码如下：

package cx.teach.phone
{
import cx.teach.phone.display.Ball;
import cx.teach.phone.utils.AccelerometerMotor;
import flash.display.Sprite;
import flash.events.Event;
import flash.sensors.Accelerometer;
import net.hires.debug.Logger;
/**
* 加速度感应Demo
* @author 翼翔天外
*
*/
public class AccelerometerDemo extends Sprite
{
/**
* 传感器引擎
*/
private var _acclMotor:AccelerometerMotor;
private var _ball:Ball;
public function AccelerometerDemo()
{
addEventListener(Event.ADDED_TO_STAGE,init);
addEventListener(Event.REMOVED_FROM_STAGE,destroy);
}
/**
* 初始化
*
*/
public function init(e:Event = null):void
{
//判断是否支持
if (!Accelerometer.isSupported)
{
Logger.error("没有加速度传感器！");
return;
}
//展示用球
_ball = new Ball();
_ball.x = 400;
_ball.y = 200;
addChild(_ball);
_acclMotor = new AccelerometerMotor();
_acclMotor.start();
//添加监听
_acclMotor.addEventListener(Event.CHANGE,onAcclChange);
this.addEventListener(Event.ENTER_FRAME,update);
}
/**
* 销毁
*
*/
public function destroy(e:Event = null):void
{
if(_acclMotor)
{
_acclMotor.removeEventListener(Event.CHANGE,onAcclChange);
_acclMotor.destroy();
}
this.removeEventListener(Event.ENTER_FRAME,update);
}
/**
* 当加速度改变
* @param e
*
*/
private function onAcclChange(e:Event):void
{
//Logger.info("X:" + _acclMotor.accelerationX + " Y:" + _acclMotor.accelerationY + " Z:" + _acclMotor.accelerationZ + "\n");
}
/**
* 帧循环，更新位置
* @param e
*
*/
private function update(e:Event):void
{
_ball.x += _acclMotor.accelerationX;
_ball.y += _acclMotor.accelerationY;
}
}
}

复制代码

代码说明：
首先还是是可行性检测，如果没有可不行
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
范例功能：用一个文本输出经纬度。（会要等待一定时间才有输出）
代码如下：

package cx.teach.phone
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.GeolocationEvent;
import flash.sensors.Geolocation;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import net.hires.debug.Logger;
/**
* 全球定位Demo
* @author 翼翔天外
*
*/
public class GeolocationDemo extends Sprite
{
private var _geo:Geolocation;
private var _txtInfo:TextField;
public function GeolocationDemo()
{
addEventListener(Event.ADDED_TO_STAGE,init);
addEventListener(Event.REMOVED_FROM_STAGE,destroy);
}
/**
* 初始化
*
*/
public function init(e:Event = null):void
{
//判断是否支持
if(!Geolocation.isSupported)
{
Logger.error("没有位置传感器！");
return;
}
_geo = new Geolocation();
//判断是否可用
if(_geo.muted)
{
//权限设置如：<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
Logger.error("传感器未开启或设置权限不够！");
return;
}
//设置更新间隔
_geo.setRequestedUpdateInterval(2000);
//显示用文本
_txtInfo = new TextField();
_txtInfo.defaultTextFormat = new TextFormat(null,18,0x0000FF);
_txtInfo.x = 200;
_txtInfo.y = 100;
_txtInfo.autoSize = TextFieldAutoSize.LEFT;
addChild(_txtInfo);
//添加监听
_geo.addEventListener(GeolocationEvent.UPDATE,onGeoUpdate);
}
/**
* 销毁
*
*/
public function destroy(e:Event = null):void
{
if(_geo)
{
_geo.removeEventListener(GeolocationEvent.UPDATE,onGeoUpdate);
}
}
/**
* 显示位置信息
* @param e
*
*/
private function onGeoUpdate(e:GeolocationEvent):void
{
Logger.info("更新位置信息");
_txtInfo.text = "经:" + e.longitude + " 纬:" + e.latitude;
}
}
}

复制代码

代码说明：
首先当然还是是可行性检测
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的侦听函数
当位置信息更新时就会调用，然后就可以输出经纬度了，当然你可以去谷歌地图定位或做其它什么操作。

本教程到此结束，希望对大家的生活和工作有一定的帮助。

posted on 2013-10-08 09:30 风中雨2013 阅读(538) 评论(0) 收藏举报

刷新页面返回顶部

风中雨

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

公告

导航