air移动应用开发学习

Flex自身特性

 Spark

 动态布局

 states和state groups

 Mobile组件和皮肤

 根据OS平台设定CSS规则

 DPI管理

 自动基于DPI缩放

 DPI自适应皮肤

 DPI自适应bitmap

 根据DPI设定CSS规则

 

 

 

Multitouch

充分运用手势

缩放手势来放大缩小

滑动来对内容切换

点击、长按来出现不同内容

多点触摸控制

import flash.ui.Multitouch;

if (Multitouch.supportsGestureEvents == true) {

trace(Multitouch.supportedGestures);

trace(Multitouch.maxTouchPoints);

}

 

Mouse Click = Tap Event

Tab事件与传统鼠标点击事件一致

Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

square.addEventListener(TouchEvent.TOUCH_TAP, tapHandler);

function tapHandler(event:TouchEvent):void

{

// Start your custom code

}

 

Click/Drag = Touch Begin/End

点击与拖动对象时可采用Touch Begin/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);

}

 

 

Long Tab

长按对象可用来激活子菜单，游戏对象属性面板等

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

}

 

 

 

Tow-Finger Tab

双指点击同样可以在游戏中替代传统的右键激活子功能

Multitouch.inputMode = MultitouchInputMode.GESTURE;

stage.addEventListener(GestureEvent.GESTURE_TWO_FINGER_TAP,

twoFingerTapHandler);

function twoFingerTapHandler(event:GestureEvent):void

{

// Start your custom code

}

 

 

 

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;

}

 

 

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;

}

 

 

 

Rotate Event

让用户通过双指来旋转操作对象

Multitouch.inputMode = MultitouchInputMode.GESTURE;

instance_name_here.addEventListener(TransformGestureEvent.GESTURE_ROTATE,

rotateHandler);

function rotateHandler(event:TransformGestureEvent):void

{

event.target.rotation += event.rotation;

}

 

 

 

Swipe Up/Down/Left/Right

让用户通过手指的上下左右滑动来操作游戏

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; }

}

}

 

 

 

 

 

DPI问题

根据DPI自动缩放

<Application applicationDPI=“160”>

<Button width=“160” height=“40”/>

</Application>

240 dpi Scaled 1.5x

320 dpi Scaled 2x

不同DPI设定对应的bitmaps

<Button click="dealSummaryList.refresh()">

<icon>

<MultiDPIBitmapSource

source160dpi="@Embed('assets/refresh160.png')"

source240dpi="@Embed('assets/refresh240.png')"

source320dpi="@Embed('assets/refresh320.png')"/>

</icon>

</Button>

 

解决方案

1设定applicationDPI=“160”

2依据160 DPI进行布局

3使用MultiDPIBitmapSource 处理bitmaps

 

 

 

 

 

不同设备的UI模式

依据操作系统的CSS样式设定

@media (os-platform: "ios") {

ActionBar {

defaultButtonAppearance: "beveled”;

titleAlign: "center”;

}

}