DarkStone - 跨平台移动应用开发之 Flex 的崛起
个人好友Ds 发布一个flex的消息.我帮忙转发
DarkStone - 跨平台移动应用开发之 Flex 的崛起
(2013-08-20 22:28:32)| |
此文章由 周戈 (DarkStone) 原创, 发表日期 2013-08-19, 转载请注明来源:html
微博: http://weibo.com/dstech算法
博客: http://blog.sina.com.cn/dstechapache
QQ群: 23477140编程
欢迎各位 ActionScript 同仁的大驾光临, 我今天发布的消息很是振奋人心, 为此我这几天很是亢奋, 热血沸腾.数组
开始前我先问你们两个问题:浏览器
一个好的游戏能被玩多久? 几个月或者一年已经打破天了.缓存
一个好的应用能被用多久? 几年或者十几年也很常见.安全
不适合阅读本文的读者: 打算用 AS3 开发 2D/3D 游戏的相关人员.架构
AS3 开发移动平台游戏目前我仍是推荐用:app
Starling + Feathers UI + Firefly + Away3D
所以若是你是这个范围的人, 就不用浪费时间继续阅读下去了.
适合阅读本文的读者对象: 打算用 AS3 开发除游戏之外跨平台跨设备应用的相关人员.
对于那些懒得看彻底文的人, 这是个人一句话中心思想:
Flex 技术从如今开始从新崛起, 成为跨平台跨设备最高开发效率, 最易后期维护, 最佳的应用开发解决方案, Flex 开发者身价将从新暴增.
我本次演讲主要分3部分:
1. 重大发现: Flex 4.10 + AIR 3.8 在 iOS 和 Mac 平台的执行效率已接近 PC!
2. 为何 Flex 是跨平台跨设备的最佳应用开发解决方案?
3. 新手如何使用Flex, 以及开发移动应用要注意的问题.
1. 重大发现: Flex 4.10 + AIR 3.8 在 iOS 和 Mac 平台的执行效率已接近 PC!
通过我在 iPhone 4, iPhone 5, iPad 3 和 Retina MacBook Pro 的亲自实测, 我很高兴的向你们宣布:
Flex 4.10 + AIR 3.8 在 iOS 和 Mac 平台的执行效率已经接近 PC, 达到了一个里程碑的层次!
在 iPhone 4, iPad 之前(也就是 2010 年之前), PC 仍是主流的时候, Flex 是 PC 平台最高效率的应用开发组件框架.
但在 iPhone 4, iPad 出现以后, Flex 虽然能够在上面运行, 但执行效率很低, 跑起来很是卡, 后来 Adobe 把 Flex 捐献给开源社区 Apache 来维护, 因而 Flex 技术从它的巅峰时代直接滑落至谷底.
然而就在 Flex 开发者面临窘境, 进退两难的时候, 惊喜终于出现了! 最新的 Flex 4.10 + AIR 3.8 通过我这2天的实测, 性能从根本上获得了提高, 即使是在 iPhone 4 这样低配单核的机器上也能较流畅地运行, 在 iPhone 4S, iPhone 5 和 iPad 3 上运行则很是流畅.
我将咱们自行开发的产品作成 demo, 就在今天上午, 我当着全部同事的面, 演示了咱们的产品在 Windows, Mac, iPhone 4, iPhone 5, iPad 3 上的运行效果, 你们一致认为很理想, 彻底适用于产品级开发!
2. 为何 Flex 是跨平台跨设备的最佳应用开发解决方案?
首先, 选择跨平台的技术, 能够极大提升产品开发效率, 下降维护成本, 这块的好处你们都知道, 那么目前主流的跨平台技术, 我为你们分析下利弊.
先来看HTML5 + JS +CSS3 + SVG (如下简称H5):
将来的 Web (浏览器领域)属于H5, 而Flash Player 这样的浏览器插件正在走向灭亡, 好比在移动设备的浏览器上 Flash Player 就已经死了.
虽然 H5 会统治整个 Web, 但咱们如今回头看看整个IT市场:
◇ 现在PC已经不是主流设备.
◇ 现在的主流设备是移动设备, 好比智能手机, 平板电脑, 还有智能腕表 和 智能眼镜等.
那么, 在 PC 时代已经衰落接近底谷的今天, 咱们做为开发者, 重点应该放在长远, 更有活力, 更有前景的移动平台.
咱们就谈谈如今主流的移动平台:
◇ 在移动设备上 B/S 架构的 Web 浏览器应用不是主流, 也成不了主流.
◇ 在移动设备上 C/S 架构的本地应用才是主流, 你们可在移动平台的应用商店下载和购买不少本地应用和游戏, 但没有人会去浏览器里购买网页的应用.
所以核心点在于咱们须要一门跨平台跨设备而且适合开发本地应用的技术, 显然 H5 彻底不适合担当这个角色, 缘由:
◇ 第一, HTML5 + JS 这些语言没有考虑本地应用的需求, 它们原生的 API 没法直接调用各个平台私有的功能, 好比 iOS 的 GameCenter, iCloud, Push Notification, Passbook 等等, 这会致使你想作的不少需求没法轻易作出来. 而这个问题从长远来说也不大可能获得解决, 由于若是 H5 能够随意调用系统的私有 API, 那么整个互联网将更不安全, 如今的网页病毒已经够多了, 试想若是用户进一个网页, 网页有权限把用户的文件资料所有删除, 那是什么概念).
◇ 第二, JS 1.x 不是面向对象的脚本语言, 用于团队开发大型项目就是个噩梦, JS 2.0 虽然会彻底面向对象, 但也迟迟没有要发布的消息.
◇ 第三, H5 的开发调试得在N个不一样厂商的浏览器上分别测试, 浏览器厂商对 H5 标准的实现各自有所不一样, 这个一直是 Web 开发人员至关头疼的问题.
那么到底哪门技术才是跨平台跨设备的最佳应用开发解决方案呢?
之前的答案是: 尚未(由于之前 Flex 在移动平台执行效率很低).
如今的答案是: Flex! Flex! Flex!
之前在移动平台上 AIR 虚拟机对 ARM 芯片和 iOS 系统的优化程度作得不好, 致使其 CPU 执行效率很低, 因而诞生了 Starling, Feathers UI, Firefly 等这类第三方基于 GPU 执行的框架来解决 AIR 在移动设备上的性能问题.
但从 AIR 3.8 起, AIR 虚拟机对移动平台 CPU 的执行效率, 相比之前我看到了天与地的区别. 若是你还在为本身是一个 AS3 开发者感到迷茫, 甚至有些人以为要转行, 以为没搞头, 那么在 AIR 3.8 之前确实如此, 但如今这个格局已经完全改变了.
如今仔细谈谈 Flex 的组成: AS3 + MXML + CSS + FXG
◇ AS3 用于编写逻辑层 (开发人员负责) 优点: 强类型面向对象语言, 利于团队开发.
◇ MXML 用于设计皮肤层 (设计人员负责) 优点: 快速布局应用皮肤, 强大的数据双向绑定, 面向体验的语法设计, 高级皮肤状态绑定, 高度的可扩展性, 众多的内置组件可用, 可迅速搭建应用程序原型.
◇ CSS 用于编写样式表 (设计人员负责) 优点: 在统一的地方管理全部界面的样式属性, 利于高效率的维护界面样式, 高效率的切换整套界面皮肤.
◇ FXG 用于可复用的矢量素材 (设计人员负责) 优点: 用 XML 语言来描述矢量图形, 具备高度的可读性, FXG 可直接放在 MXML 里当作标签使用, 具备极其强大的可复用性和可扩展性.
Flex 的 MXML 相似 xHTML. Flex 的 CSS 相似 Web 网页的 CSS. Flex 的 FXG 相似 Web 网页的 SVG. 所以除了 AS3 自己比较专业之外, 其它环节相对容易, 彻底能够培训设计人员来分工.
除此之外, Flex 的重要特性还有:
◇ 内置大量桌面和移动平台的经常使用组件, 好比 Button, CheckBox, Panel, ViewNavigator, SpinnerList 等等.
◇ 组件的 逻辑层 和 皮肤层彻底分离, 这样开发人员可来写逻辑, 同时设计人员去作皮肤, 工做效率不言而喻.
◇ 一个 Flex 应用可同时部署到 Windows, Mac, Linux, iOS, Android 全平台上, 还能部署到桌面系统的浏览器里. 若是须要调用系统私有 API 则可以使用 ANE 作本地扩展(很是强大)!
◇ 用 Flex 部署的应用, 可根据目标设备屏幕的 dpi 自动缩放自身界面的元素大小以达到最佳效果, 只须要将矢量素材作成 FXG, 在一个屏幕下完成正确的布局, 就可实如今其它 dpi 屏幕下的界面自动缩放, 而不用为了避免同 dpi 的屏幕来制做不一样尺寸的相同素材.
好, 给点时间你们先提问, 还有一个代码环节我将放在后面.
Q&A:
Q: MXML 写组件皮肤? MXML有计划瘦身吗?
A: MXML 的优化关键在于编译器, 全部的 MXML 都是由编译器转换为 AS3 的类文件, 编译器转换过程当中的算法很重要, 它将决定 MXML 到 AS3 的代码量和性能, 这一块目前已经作得比较好了, 从编译速度来看, 较之前有必定的提高, 间接能够感受到编译器的改进.
Q: 如今有几个设计人员管你这些... 我遇到的设计基本上就是给你作个 UI 图而后就交给你了.
A: 那是大家公司分工和培训有问题. 我先后带过3个团队, 都是培训美工写 MXML 和 CSS 还有 FXG 的, 培训成本并不大, 边作边学2周左右就会了.
Q: 素材在 Flex 里是如何管理的, 须要为不一样 dpi导出不一样尺寸的相同素材文件吗?
A: 我来谈谈关于素材这一块的问题:
一旦你开始作移动应用, 你面临的将是不一样目标设备, 不一样屏幕的 DPI 像素密度, 若是你的目标屏幕有 160 dpi, 264 dpi, 326 dpi, 480 dpi 等, 那么你要是用 Photoshop 作的话, 一样的一个小图标, 你就得为这些 dpi 导出不一样尺寸的版本.
那么, 通常的项目都会有上百个素材, 假设有100个图标, 你就要导400个文件出来, 这样的开发成本过高了, 效率过低了.
而若是你们把能用 Flash / AI 作的素材, 转成并优化成 FXG 格式, 再放到 Flash Builder 里面, 就能够在 MXML 里当作一个标签来使用, 复用性极强, 每一个 FXG 其实就是一个 Class 类, 类的复用性强你们都知道吧.
而后, 在 Flex 里, 有 applicationDPI 能够设置(不过目前 RuntimeDPIProvider 有个小 bug), 用它就能够为不一样的 dpi 自动缩放整个界面的元素:
换句话说, 假设你作了100个图标素材, 你只须要把这100个图标素材作成 FXG 格式, 而后布局到你的 MXML 里, 接下来正确设置你的 applicationDPI 和 runtimeDPIProvider, 你就能够不用再改代码, 不用再改素材尺寸的状况下, 支持全部不一样分辨率, 不一样 DPI 的设备, 仅这一点, 工做效率已是最高的了!
我今天上午给公司内部看的 demo 就是典型的例子:
咱们在 PC 上设计整个应用的界面, 用 FXG MXML 布局, 这些界面和素材都是在 160 dpi 的屏幕上作好的, 而我轻易就把这个应用移植到了 264 dpi 的 iPad 3 上, 和 326 dpi 的 iPhone 4 / iPhone 5 上, 还移植到了 220 dpi 的 Retina MacBook Pro 上, 而且效果都很完美, 彻底没有失真.
Q: 界面被放大后会不会模糊?
A: 注意, 这样放大后, 彻底不会模糊, 由于:
只要全部素材都是用 Flash / Ai 作出来的矢量图, 矢量图放大缩小是不会失真的, 将其转成 FXG 以后, FXG也是矢量的, 更易于复用和维护. 其实放大后的 UI 在视网膜屏幕上反而更加清晰透彻, 看着很舒服.
Q: 问题来了, 矢量图是已知的 CPU 杀手, 若是应用中不使用位图, 请问为何不少项目都须要导出位图来改善渲染性能? 用 PS 导出位图的目的就是为了避免使用矢量图.
A: 这也是我代码要讲的, 矢量图能够动态缓存成位图来解决性能问题的, 等下我会仔细讲的.
若是你用 PS 导出位图, 那么你就要为不一样 dpi 导出不一样尺寸的位图.
若是你用 FXG, 它自己是矢量的, 高可读性的, 1个素材只用导出1个FXG, 而后 Flex 根据设备屏幕的 dpi 动态放大全部矢量 FXG, 以保证清晰, 不失真, 同时, 你可利用 DisplayObject.cacheAsBitmap = true 将须要频繁位移的显示对象进行动态缓存, 将矢量图缓存成标量图, 从而必定程度上提升性能, 注意这个方法不能滥用, 滥用反而会致使性能降低.
Q: 请问cacheAsBitmap能提高多少性能? 我在byteArray.org上看到性能很低, cacheAsBitmap在Adobe官方工程师的测试, 会卡到 8 FPS.
A: cacheAsBitmap这玩艺不能瞎用, 要善用, 后面我会仔细讲的. 何况 byteArray.org 上的测试是在 2008 年作的, 用的 playerglobal.swc 也是很旧的版原本编译的, 还有测试环境是 Flash Player 而不是 AIR 3.8.
Q: 我想知道您是怎么测试的, 能把测试代码公布下吗?
A: 我如今手上有的 demo, 是本身公司正在开发的产品, 不方便泄露, 但我有空能够开发一个能证实我今天所说的一切的 demo, 到时候会提供安装版的下载.
3. 新手如何使用Flex, 以及开发移动应用要注意的问题.
好, 接下来先手把手教你们怎么搭建 Flex 4.10 + AIR 3.8 + Flash Builder 4.7 的开发环境.
先请你们收藏 Apache Flex 官方网站 http://flex.apache.org/.
去这个页面把 Flex 4.10 的安装器下载下来, 安装到你的机器上http://flex.apache.org/installer.html
安装好后运行 Apache Flex SDK Installer, 看到这个画面, 不用修改, 直接 NEXT.
这时在你的 Flash Builder 安装目录的 sdks 目录里新建一个叫 4.10.0 的文件夹.
在 Flex SDK Installer 里点 BROWSE 选中刚才建立的 4.10.0 目录, 以下图所示, 点 NEXT.- 跨平台移动应用开发之 Flex 的崛起" name="image_operate_68371377011868041" alt="DarkStone - 跨平台移动应用开发之 Flex 的崛起" src="http://s1.sinaimg.cn/mw690/6f56a2bfgx6C0FkzUic50&690" width="690" height="624" action-type="show-slide" action-data="http%3A%2F%2Fs1.sinaimg.cn%2Fmw690%2F6f56a2bfgx6C0FkzUic50%26690" real_src="http://s1.sinaimg.cn/mw690/6f56a2bfgx6C0FkzUic50&690">
接着选中全部的选项, 每项都有用的, 而后点 INSTALL. - 跨平台移动应用开发之 Flex 的崛起" name="image_operate_42511377011945226" alt="DarkStone - 跨平台移动应用开发之 Flex 的崛起" src="http://s13.sinaimg.cn/mw690/6f56a2bfgx6C0Fnsfak2c&690" width="690" height="624" real_src="http://s13.sinaimg.cn/mw690/6f56a2bfgx6C0Fnsfak2c&690">
等这个进度条所有走完之后, 会跳到下一个界面告诉你已完成, 届时可关闭 Flex SDK Installer.
- 跨平台移动应用开发之 Flex 的崛起" name="image_operate_90611377011965638" alt="DarkStone - 跨平台移动应用开发之 Flex 的崛起" src="http://s4.sinaimg.cn/mw690/6f56a2bfgx6C0FplxwD33&690" width="690" height="624" action-type="show-slide" action-data="http%3A%2F%2Fs4.sinaimg.cn%2Fmw690%2F6f56a2bfgx6C0FplxwD33%26690" real_src="http://s4.sinaimg.cn/mw690/6f56a2bfgx6C0FplxwD33&690">
去这里下载并安装 Flash Player 最新的 Debugger 调试版 http://www.adobe.com/support/flashplayer/downloads.html
去这里下载并安装最新的 AIR 虚拟机 http://get.adobe.com/air/
关闭全部浏览器, 安装好 Flash Player Debugger 和 AIR.
而后打开 Flash Builder 4.7, 进入菜单的 Windows -> Preferences -> Flash Builder -> Installed Flex SDKs, 点 Add... 将刚才下好的 4.10.0 的目录添加进去, SDK 的名字改成 Flex 4.10.0, 而后打上钩, 便可设为默认SDK, 如图所示:- 跨平台移动应用开发之 Flex 的崛起" name="image_operate_86211377011932710" alt="DarkStone - 跨平台移动应用开发之 Flex 的崛起" src="http://s16.sinaimg.cn/mw690/6f56a2bfgx6C0FuR8nldf&690" width="690" height="363" action-type="show-slide" action-data="http%3A%2F%2Fs16.sinaimg.cn%2Fmw690%2F6f56a2bfgx6C0FuR8nldf%26690" real_src="http://s16.sinaimg.cn/mw690/6f56a2bfgx6C0FuR8nldf&690"> 而后点 Apply 和 OK.
接下来, 对于那些 Flash Builder 里已有的 Flex 4 的项目, 对其点右键选 Properties, 检查 Flex Compiler, 看是否是用的默认的 SDK, 显示为 Flex 4.10.0, 如图所示.
若是你是 AIR 的项目, 进入到你的 -app.xml 配置文件.
将根标签的命名空间改成 3.8
接下来, 找到 <renderMode> 标签, 反注释它, 而后设置为 <renderMode>direct</renderMode>
注意, 这是最重要的地方, AIR 3.8 在 direct 渲染模式下, 大大优化了在 Mac 系统和 iOS 系统的性能, 大大提升了针对 CPU 的执行效率!
可是, AIR 3.7 和 3.6 还有之前的版本, 即使设置为 direct 也没有显著性能的提高, 只能提高 GPU 的性能, 彻底没有提高 CPU 的性能.
换句话说, 到了 AIR 3.8, <renderMode>direct</renderMode> 才真正作到了对 CPU 执行效率的巨大优化.
Q&A:
Q: 在 Windows 上面没有优化?
A: 在 Windows 上, AIR 开不开 direct 渲染模式, CPＵ 的执行效率都很快, 没有太大的区别.
反注释 <requestedDisplayResolution> 标签, 并将其设置为 <requestedDisplayResolution>high</requestedDisplayResolution>
目前它仅对 Mac 系统的 Retina 显示屏机器(例如: Retina MacBook Pro)有效, 当你开发 Mac 系统的本地应用, 你只须要把 requestedDisplayResolution 标签设置为 high, 应用运行时 AIR 会自动将 UI 界面用 4 个物理像素显示１个逻辑像素, 意思是你的物理分辨率可能已是 2880x1800 了, 但你的 AIR 程序的 API 告诉你, 你逻辑宽高仍是 1440x900. 获得的结果就是, 在无需更改你界面任何代码和矢量素材的状况下, 完美支持视网膜屏幕!
这里我再解释下 <requestedDisplayResolution> 这个标签, 即使你的目标机器不是视网膜屏幕(也就是 dpi <= 160), 那么你将 requestedDisplayResolution 设置为 high 也不会有任何影响, 它不会在标清屏幕上放大你的 UI 界面的.
requestedDisplayResolution 对 iOS, Android 程序无效, iOS, Android 上只能经过设置 Flex Application 标签的 applicationDPI 和 runtimeDPIProvider 来缩放 UI.
那么, 新项目该怎样作呢, 新项目要作的操做跟上面的彻底同样, 只不过 Flash Builder 4.7 有个 bug 会致使新建 Flex 4.10.0 项目的时候, 编译会出现问题, 我讲下:
新建的 Flex 4.10 项目, 进入主 Application 的 MXML 以后, 要将根标签的 layout="absolute" 属性删除掉, 不然不能经过编译, 这是 Flash Builder 4.7 的已知 bug 你们新建项目时必定要记住这点.
Q: 物理像素和逻辑像素的区别, AIR 程序用 4 个物理像素显示１个逻辑像素是什么意思?
A: 物理像素就是显示器实际的显像管色点, 好比 15 寸 Retina MacBook Pro 的物理分辨率是 2880x1800, 即物理水平像素数量是 2880 个, 物理垂直像素数量是 1800 个.
逻辑像素就是应用程序内部"自认为"的虚拟像素, 它的尺寸不必定等于物理像素的尺寸.
用４个物理像素呈现１个逻辑像素, 至关于 1440x900 的逻辑像素, 水平和垂直像素各自扩大2倍, 获得 2880x1800 的物理像素.
如今谈谈代码优化这一块, 如何善用 DisplayObject.cacheAsBitmap = true;
什么地方该用它, 我建议你们要注意如下几点:
1. 不要在大尺寸的显示对象上用, 何为大尺寸, 在标清屏幕上, 超过 500x500 的显示对象最好不要用, 用了可能会更卡, 由于太吃内存.
2. 不要在内部有子显示对象, 且子对象会频繁变化坐标和尺寸的显示对象上用, 用了容易崩溃, 由于虚拟机要不停为父显示对象生成不一样的缓存图像, 多了容易内存溢出.
3. 全部上了滤镜 filters 的显示对象, 已经默认强行开启了缓存, 而且没法关闭这个缓存, 设不设置 DisplayObject.cacheAsBitmap = true 都无所谓.
4. 在仔细审视过前３个要点以后, 若是能够知足如下两个条件, 就推荐用:
◇ 显示对象尺寸较小, 而且可能会常常变化它自己(而不是内部子对象)的坐标.
◇ 该显示对象里有复杂的内容, 好比文字, 图片, 按钮, FXG等等.
总之, 记住以上要点, 千万不要处处写 cacheAsBitmap = true 这样的代码, 那样反而会很卡甚至崩溃.
Q: DisplayObject.cacheAsBitmap = true 是让虚拟机来生成位图缓存吧, 能否本身写程序来生成？
A: 能够, 但不推荐在 Flex 里这样作. 有人可能会以为, 用 BitmapData.draw() 来手动生成矢量图的缓存会更好一些, 确实从性能上这个比 cacheAsBitmap 要好, 但这样作之后你的显示对象就变成了一个位图, 没有了交互性.
好比你把一个含有按钮的面板用 BitmapData.draw() 给缓存成位图了, 用户再点这个面板里的按钮就会没有反应, 由于这个面板已经栅格化为位图了; 而对于 Flex 这种须要用户随时交互的应用来讲, 显然是不合适的, 因此 Flex 用 cacheAsBitmap 就够了, 它会全自动在后台为你作矢量图到位图的缓存, 而且保留矢量显示对象的可交互性.
好了, 还有最后一个要讲: applicationDPI 和 runtimeDPIProvider, 这个也是重中之重:
首先, 若是你是 Flex Desktop (桌面) 的 AIR 项目, 不要设置 applicationDPI 和 runtimeDPIProvider 这2个属性!
只须要设置 -app.xml 里的 <renderMode>direct</renderMode> <requestedDisplayResolution>high</requestedDisplayResolution> 就能够了
<renderMode>direct</renderMode>这个无论你是什么项目, 都设置为 direct 就对了, 不管是 Windows, Mac, Linux, iOS 仍是 Android.
而后你的开发所有在标清显示器上作, 只要你的界面布局在标清显示器上是完美的, 那么最终部署到视网膜屏幕上也会是完美的, 是由于
<requestedDisplayResolution>high</requestedDisplayResolution>
在起做用, 4个物理像素呈现1个逻辑像素还记得吧.
如今说移动项目, 若是你是 Flex Mobile (移动) 的 AIR 项目, 那么 <requestedDisplayResolution>high</requestedDisplayResolution> 是无效的, 设置它不会帮你放大界面 UI 的尺寸.
对于 Flex Mobile 项目, 咱们要设置的是 Flex Application MXML 里的 applicationDPI 和 runtimeDPIProvider 这2个属性.
首先我讲讲 Application 类 applicationDPI 和 runtimeDPI 这2个属性的关系
applicationDPI 指的是该应用程序原生是在什么 dpi 下开发和测试的.
runtimeDPI 指的是运行环境的 dpi, 注意这个值不许, 它是由 runtimeDPIProvider 折算出来的.
Flex UI 的缩放因数 = Application.runtimeDPI / Application.applicationDPI
好比说, iPhone 4 实际是 326 dpi, 通过 runtimeDPIProvider 的默认实现类折算后 Application.runtimeDPI 是 320 dpi.
那么, Application.applicationDPI 设置为 160 的话, 在 iPhone ４ 上实际的 UI 缩放比例就是 320/160 = 2 也就是２倍, 这是对的.
但 iPad 3 的实际 dpi 是 264, 通过 runtimeDPIProvider 的默认实现类折算后 Application.runtimeDPI 是 240, 这就错了!
runtimeDPI = 240 的话, applicationDPI = 160 这样的话 UI 缩放就成了 1.5 倍而不是2倍, 界面布局就会错乱!
解决办法很简单, 咱们写一个类, 假设其完整的包名类名是 com.test.CorrectRuntimeDPIProvider, 让它继承 mx.core.RuntimeDPIProvider 类, 并覆盖 public function get runtimeDPI():Number 方法
咱们根据须要本身写折算的算法, 主要从 flash.system.Capabilities 这个类提供的各项属性里获取当前设备的真实信息, 好比可获取当前设备是什么操做系统, 什么厂商, 设备名称, 真实的屏幕物理 dpi 等等, 而后本身根据须要正确实现折算的算法, 通常只要保证最终返回的 runtimeDPI 除以 applicationDPI 后等于2就对了.
官方的折算算法是很弱智的, 在 iPad 3 这种 264 物理 dpi 的设备上会返回 240 的 runtimeDPI, 正确应该返回 320 以保证 320/160 = 2.
咱们应该弃用官方 classifyDPI() 方法的实现和对它的调用, 本身正确实现 public function get runtimeDPI():Number 这个方法
实现完成后, 在主 <s:Application> 标签上面加上这样的代码就好了: applicationDPI="160" runtimeDPIProvider="com.test.CorrectRuntimeDPIProvider" frameRate="30"
作 Flex Mobile 的 AIR 项目, 必定要注意这些点:
◇ 全部的开发和设计工做, 最好所有放在标清显示器上作! 也就是代码的编写和素材的设计, 所有在标清屏幕上作.
◇ 全部的设计, 尽可能作矢量素材, 导出 FXG 并优化(FXG 的优化方法在这里就不说了, 之后有空专门写个博文教你们怎样优化, 注意 FXG 代码若是不优化的话, 直接使用会很不正常), 再放入 Flash Builder 里, 在 MXML 里引用 FXG 当作标签使用.
◇ 全部的界面布局, 以在标清显示器下达到你想要的效果为准.
◇ <s:Application> 标签的 applicationDPI 永远设置为 160, 意思是当前应用是在标清屏幕上开发的.
◇ <s:Application> 标签的 runtimeDPIProvider 应该设置为一个你本身写的类, 由于官方自带的实现类太弱智, 不少状况没有考虑到位(官方之后可能会改进).
最后附上我整理的 AS3 和 Flex 官方教程和开发工具的连接:
学习使用 ActionScript 3.0 网页版: http://help.adobe.com/zh_CN/as3/learn/ PDF版: http://help.adobe.com/zh_CN/as3/learn/as3_learning.pdf (这是 AS3 语言的基本语法教程, 内容很少, 建议一口气读完)
ActionScript 3.0 开发人员指南 网页版: http://help.adobe.com/zh_CN/as3/dev/ PDF版: http://help.adobe.com/zh_CN/as3/dev/as3_devguide.pdf (这是教你 AS3 中各种 API 的使用, 内容不少, 注意不要全看! 目前只看 使用字符串 | 使用数组 | 使用 XML | 处理事件 | 显示编程 这些最经常使用的内容, 其它的暂时不用看)
Flex 官方视频教程 http://www.adobe.com/cn/devnet/flex/videotraining.html (视频内容是全英文的, 但很容易听懂, 不过它里面讲的不少东西, 都不是解决问题的最佳方式, 所以, 不要被这个视频里的内容先入为主了, 只拣本身感兴趣的视频看下就能够了)
Flex 开发 PC 应用教程 网页版: http://help.adobe.com/en_US/flex/using/ PDF版: http://help.adobe.com/en_US/flex/using/flex_4.6_help.pdf (这个教程只有英文版的, 而且内容很是多, 随便看看就好了)
Flex 开发移动应用教程 网页版: http://help.adobe.com/zh_CN/flex/mobileapps/ PDF版: http://help.adobe.com/zh_CN/flex/mobileapps/developing_mobile_apps_flex_4.6.pdf (这个教程目前也是随便看看便可)
AIR 开发本机扩展 网页版: http://help.adobe.com/zh_CN/air/extensions/ PDF版: http://help.adobe.com/zh_CN/air/extensions/air_extensions.pdf (利用 本机扩展, 就可以让 Flex/Flash 的 AIR 应用程序调用各个平台的独立 API, 如调用 iOS 的 iCloud, GameCenter 等, 此教程有兴趣就看)
ActionScript 3.0 语言参考 http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/ (这是 AS3 全部 API 的语言参考, 这个内容很是庞大, 更不用全看了, 你只用在学上面的教程时, 在这个地址查询你感兴趣的 接口 和 类的语言参考便可)
Apache Flex 语言参考 http://flex.apache.org/asdoc/ (这是 Apache Flex 最新的全部 API 语言参考, 只包含跟 Flex 有关的 API, 很是有用)
Flash Builder 开发工具下载 https://creative.adobe.com/products/flash-builder
Flash Player Debugger & PlayerGlobal 下载 http://www.adobe.com/support/flashplayer/downloads.html
AIR 虚拟机下载 http://get.adobe.com/air/
Apache Flex SDK Installer 下载 http://flex.apache.org/installer.html
如何成为 Apache Flex 开源社区的一员, 参与到 Flex 将来版本的发展中 http://flex.apache.org/community-getinvolved.html
从如今起 Flex 将从新崛起, 由于它已是最佳的全平台应用开发解决方案!
此文章由 周戈 (DarkStone) 原创, 发表日期 2013-08-19, 转载请注明来源:
博客: http://blog.sina.com.cn/dstech
QQ群: 23477140
- 1. 跨平台移动应用开发之 Flex 的崛起
- 2. 跨平台移动开发
- 3. React03 移动端跨平台开发
- 4. 《React Native跨平台移动应用开发》读后鬼扯
- 5. 跨平台的移动Web应用开发平台 PhoneGap 1.6 发布
- 6. 跨平台开发应用
- 7. 跨平台移动应用开发利器：PhoneGap 2.0 发布！
- 8. CrossApp alpha 0.1.10 发布，跨平台移动应用开发引擎
- 9. CrossApp 0.1.8 发布，跨平台移动应用开发引擎
- 10. 使用Xamarin实现跨平台移动应用开发
- 更多相关文章...
- • ionic 平台 - ionic 教程
- • Web Services 平台元素 - Web Services 教程
- • PHP开发工具
- • TiDB 在摩拜单车在线数据业务的应用和实践
-
每一个你不满意的现在，都有一个你没有努力的曾经。