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