[开发基于FlashPlayer10.1的Mobile应用经验分享.docVIP

开发基于Flash Player 10.1的Mobile应用经验分享 原文地址：/node/664??? 作者：郭少瑞 前几天Adobe公布了针对移动平台的Flash Player 10.1，这个消息想必大家都知道了（如果你还不了解Flash Player 10.1，请参阅这篇文章：Flash Player 10.1为移动设备带来了什么）。这样无论是对传统的桌面Flash应用开发人员，还是移动开发人员，都无疑多了一个选择，即：基于AS3和现有Flash资源积累（素材，第三方类库，开发经验等等），快速开发或移植具备丰富表现力的手机应用。 那么，一个传统的桌面Flash应用开发人员如果进入移动开发领域，应该注意什么事项？或者说，虽然都是基于Flash Player 10.1的开发，但运行于桌面和运行于移动设备的区别在哪里？下面笔者将根据自己的经验和心得写出几点总结，藉以抛砖引玉，欢迎大家讨论。 总体而言，我们在开发针对Flash Player 10.1的移动应用过程中，以往的代码经验和架构还可以继续沿用，没有什么不同，只是要针对移动平台的特殊性，从UI设计，交互方式，和性能优化方面需要做出相关的调整。 1.UI设计与交互方式的差异 这是非常重要的一个方面，移动设备因为平台特殊性，在交互设计方面与普通桌面系统差异很大。如果你的应用没有考虑到这一点，那么后期的修改足以让你疲于奔命。 1.1 屏幕分辨率与UI设计 移动设备的屏幕尺寸一般远小于PC设备，比如Google Nexus One的分辨率是480*800，Motorola Dorid的分辨率是480*854，而且因为都是高分屏（DPI高），所以实际屏幕看起来更小，一般的手机屏幕则大都只有320*480的大小。在如此狭小的区域内，要求你的设计元素必须合理运用，传统的设计思路在这里将不适用。 尽量减少在屏幕上堆叠内容：将最重要的内容展示出来，不要罗列太多，如果确实需要可以设计为分屏模式。要极尽精简，突出主次，不要多余的装饰。这是移动设备UI设计非常重要的一个特点。 突出显示可交互内容：包括按钮，链接等等需要交互的元素，必须设计的足够大，才会让用户感觉可以“轻松点击”，因为有过移动设备使用经验的朋友就会知道，用手指在屏幕上是很难精确定位的，所以要求交互元素必须具备很大的响应区域。 设计图要具备可扩展性：跟网页设计类似，移动设备的UI设计也要考虑分辨率的差异性，在设计中保留可扩展性，比如：可延展的背景，对齐方式等等。 举个例子，下面这张图反映了一个Flash Minisite的设计变更，从开始的复杂设计到最后的简化，明显后面的设计更合理。左边的图很多按钮设计的过小，难以点击。 图1：设计的变更 1.2 Landscape模式 很多移动设备都提供了Landscape模式，即横版模式（将设备翻转90度），这种模式下相当于屏幕的宽度和高度相互调换，那么你的设计是否考虑到了这种变化呢？一旦进入这种模式，或许你需要调整一些UI元素的显示以匹配当前分辨率。 图2 Landscape模式 1.3 移动设备特色的交互 如前所述，移动设备的交互方式和普通PC差异很大，举例来说，对于滚动条（ScrollBar）的使用方式就完全不一样，在普通PC的交互中，比如浏览器，如果网页的实际尺寸超出了显示区域的大小，则浏览器出现一个可交互的滚动条，用户可以通过拖动滚动条导航到需要的位置。但是在移动设备中，因为先天的限制（屏幕尺寸偏小，没有鼠标，难以精确定位），对于超尺寸的显示内容，如果沿袭PC的滚动条处理方式，是难以使用的。所以在移动设备中，一般采用手势（gestrue）来处理这种交互，如下图所示： 图3 对滚动的处理 另外在视图的导航上，移动应用一般也会加入手势的判断，来完成视图的切换（这样一方面符合移动设备用户的操作习惯，减轻操作复杂度，另一方面也节省了放置功能按钮造成的空间拥挤）。在上图所示的应用中，设计为：用户向上或向下拖动视为对超出显示区域的内容的处理（滚动条处理），而用户向左或向右拖动，则视为切换视图，如下图所示（可以想像为在当前显示视图之外排列好了一组视图，可以通过拖动来切换）： 图4 视图的切换 你可以进入体验这种移动设备特色的交互方式。 2.项目编程方面的注意事项 上面我们也提到，既然都是基于Flash Player 10.1和AS3，那么编程方面的差异并不大，我们需要注意的是下面的若干事项： 2.1 自适应分辨率 我们需要考虑使用一种架构，使得界面可以适应各种分辨率，因为我们的项目大多数情况下不能仅限于某一种设备，所以分辨率的差异是无法忽视的。这个时候我们可以借鉴HTML的思路，HTML在这方面做的很好且经验丰富。比如HTML的DIV容器，我们除了可以给它的宽度设置固定的像素值