要求拥有使用Flash Builder开发项目的经验。建议具备构建移动应用程序的知识。
其他需要的产品
所有
Flash开发人员在开发AIR移动应用程序时面临的一个最大的挑战是,确定如何为每种平台组织和创建构建版本。如果您针对Web、桌面、电话、平板电脑和TV进行开发,这可能是一项棘手的任务。幸运的是,Adobe花了大量时间和精力设计了最佳的解决方案来尽可能简化多平台部署。Flash Builder 4.5支持您利用新的移动功能来流线化针对多种平台的输出。
当开始在Flash Builder 4.5中设置新的移动或Flex Hero项目时,您将会看到一组新的移动模板。在本文中,我将介绍如何使用这些新项目配置窗口,概述如何为iOS、Android和PlayBook配置您的新项目(参见图1)。
图1. 一个在PlayBook(左)、iPad、Xoom和Galaxy Tab上运行的移动游戏。
我最近创建了一个名为MatchHack的简单游戏,可使用它测试Flash Builder 4.5中的新功能。它不属于这篇提供MatchHack游戏构建说明的文章的范围内。但是,您可以使用它探索将最终项目部署到多个移动设备的流程。我将提供一些说明和源代码,以供您练习。首先,我将介绍一下MatchHack游戏。
MatchHack是一个简单的匹配游戏,包含借鉴自RPG的一些元素。它的目标是创建一个友好的RPG,隐藏所有复杂性。我花了大约15个小时来构建此游戏。我从过去开发的一个现有游戏借鉴了一些资产和代码库。我相信,这个游戏是多平台Flash游戏的一个不错例子,一定比单调的“Hello, World”应用程序更有趣。所有源代码都已上传到 GitHub。如果想要查看源代码,请单击GitHub项目页面上的下载按钮,直接从存储库获取源代码的副本。
在本节中,您将看到如何在Flash Builder 4.5中设置一个新项目。如果希望将MatchHack用于您的项目,只需下载源代码并将其复制到Flash Builder 4.5工作区文件夹即可。当开始在Flash Builder 4.5中设置新项目时,您将注意到有多个新项目模板可用,显著简化了移动开发和部署。两个主要的模板名为Flex Mobile Project和ActionScript Mobile Project(参见图2)。
图2. New菜单包含Flex Mobile Project和ActionScript Mobile Project模板。
当使用Flex Mobile创建新项目时,它使用了Hero,这使Flex的一个移动友好的版本。当您选择ActionScript Mobile Project时,它不包含任何组件,您必须从头构建所有内容。MatchHack游戏是一个ActionScript Mobile Project。
新建项目向导在Flash Builder 4.5中已更新。我按照本节中列出的步骤来设置MatchHack。首先,我输入项目名称并选择了它的位置(参见图3):
图3. 在Project Name字段中输入项目的名称。
创建新ActionScript Mobile Project之后,我单击Browse按钮并导航到我的MatchHack清单,它位于我计算机上的Flash Builder工作区文件夹中。
我单击Next以访问Mobile Settings。Mobile Settings菜单允许您为您的移动应用程序配置一些全局设置,以及访问更详细的设置(取决于具体的平台)。这在开始创建一个新项目时非常有帮助,因为其中一些选项埋藏在项目菜单中。此外,您在Mobile Settings菜单中设置的选项会影响Air app.xml的生成方式(参见图4)。
图4. 在Mobile Settings中选择目标平台复选框选项。
图5. 如果您为iPhone或iPad开发移动应用程序,则选择Apple iOS。
注意:默认情况下,Apple iOS和Google Android支持内置于Flash Builder 4.5中。如果您希望为PlayBook进行开发,您将需要安装它们的SDK和工具,它可在BlackBerry Developer网站上获得。安装SDK后,BlackBerry Tablet OS将在菜单中与其他支持的平台一起列出。
设置MatchHack的最后一步是将项目的Libs文件夹添加到您的Libraries路径。您将在Build文件夹中找到该库。单击Add Folder文件夹,然后找到并选择它(参见图6)。
图6. 单击Browse按钮并选择libs文件夹,以将该路径添加到库中。
我总是将我的SWC文件和我项目的其他库存储在build文件夹中。MatchHack构建版本与我的另一个开源项目(名为FActivity)之上。这个库提供了一个简单的屏幕管理系统、游戏循环和绿色多线程解决方案移动应用程序。要了解它的更多信息,请访问FActivity wiki。简单起见,我将SWC文件与MatchHack的源代码一起分发。
在编译移动应用程序时,您将需要设置针对每种平台的独立运行。移动应用程序运行类似于正常的Flash或Flex运行,但它包含针对目标平台的具体设置和菜单选项。此战略也有助于保持各部分独立且更有条理,使您可以针对目标平台自定义每个构建版本。
设置项目之后,您可以有机胺单击SRC文件夹中的主要类MatchHack.as,选择Run As > Mobile Application(参见图7)。
图7. 从Run As菜单,选择Mobile Application。
您可以从Target Platform字段挑选一个选项来选择一个平台。您将注意到,每个平台具有一种不同的设置和Launch Method设置(参见图8)。
图8. 使用Target Platform菜单选择一个平台。
在本节中,我将介绍每种平台的配置设置,描述如何让应用程序可在每种平台上正常运行。
注意:对于每种平台,您可以选择在桌面上运行还是在实际设备上运行。桌面测试时验证快速更改的一个不错选项,但对于性能调节和最终测试,应该始终部署到实际设备上。
我将首先介绍Android平台,因为它最容易设置和开始运行。此外,它也是目前可用的最强大的移动AIR平台之一。从Target Platform下拉菜单选择Google Android,访问运行中的Android配置(参见图9)。
图9. 从Target platform菜单选择Google Android。
当在实际设备上测试时,您必须设置您的电话以激活USB调试。参见Adobe Flex 4.5帮助文档中的连接Google Android设备,获取逐步说明。以下是该流程的简单总结:
Flash Builder 4.5安装了最新的AIR构建版本,目前为2.6。在2.6版中,iOS Packager转移到了AIR工具中,还有一些重大的性能提升。Flash Builder简化了构建和部署iOS应用程序的流程。该流程最棘手的部分是理解Apple公司的配置。以下是这些步骤的快速概述:
完成了最终的P12证书和配置文件后,您可以使用Flash Builder编译您的Flash应用程序。从Target Platform选择Apple iOS后,单击Run菜单中的Configure Package设置。
可以看到,我只是将证书路径指向了我的P12文件,将配置文件指向了我从Apple公司的开发人员门户下载的文件(参见图10)。
图10. 选择Certificate(P12文件)和您从Apple公司的开发人员门户下载的配置文件。
设置了这些内容之后,单击Run。Flash Builder将编译一个.ipa文件,卡将它拖到iTunes并手动安装。
注意:编译iOS应用程序需要较大量的时间。您可能希望在这个设备上本地执行所有测试,然后在主要开发之间执行一些验证部署。在我的iMac 3.1.4核心i7和12 GB RAM的配置中,编译MatchHack花费了大约3分钟。
为PlayBook开发相对较新,所有开发工具都是由RIM/QNX创建的。前面已经提到,您必须首先安装PlayBook SDK,才能使用Flash Builder 4.5为它开发应用程序。构建、部署和签名PlayBook应用程序的流程是3个AIR平台中最复杂的。我将介绍相关基本知识,但请注意RIM在其每个新版本中继续更新其工具,所以随着时间的推移,PlayBook应用程序有望变得像其他平台一样易于开发。让我们看一下:
要获得构建您应用程序的证书,需要提交BlackBerry Code Signing Keys Order Form。您需要此证书文件来签名应用程序以及获得调试证书,这样才能将应用程序部署到物理设备以用于测试用途。此流程可能需要一天或更长时间。请检查您的收件箱,在附件中查找证书文件。收到它之后,您可以将它用于您的所有应用程序。要了解更多信息,请参阅BlackBerry Tablet Development Guide网站上名为签名您的应用程序的文件。
除了证书文件流程,设置BlackBerry PlayBook运行的步骤类似于用于Android和iOS的流程。您可以在ActionScript Compiler中选择想要的选项(参见图11)。
图11. 在ActionScript Compiler中配置设置。
现在,您已知道如何设置3个主要的移动平台和将您的Flash游戏部署到大部分设备。在下一节中,您将学习如何优化游戏应用程序,改进其在各种类型的硬件上的性能。
当为任何平台构建AIR应用程序时,请特别注意目标应用程序的分辨率。在Web上,基准通常为1024 x 768像素。大部分网站实际上会放大到更高的分辨率。但是在移动设备上,您必须特别小心,因为大部分Android电话在800 x 480像素下运行,平板电脑在1024 x 768像素下运行。考虑您将为具有比桌面计算机低得多的处理能力,使用与桌面相同的分辨率的设备设计应用程序。一种改进移动应用程序性能的战略是放大它。
放大是一种涉及到针对原生分辨率的一半进行设计并以系数2更改显示比例的做法。显然,尺寸越小,性能将越高。我构建的所有Flash移动游戏都使用了此技术,性能上的差异令人难以置信。在移动领域,甚至一些额外的FPS也可能带来实用和响应迟缓的应用程序之间的差别。如果您希望实现流行的8位和16位外观的图形,放大也是一种不错的技术。避免使用矢量,因为放大矢量图形不会减小文件大小,实际上会降低性能。下面的代码演示了如何基于屏幕高度计算纵向应用程序的缩放比例。
// 400 is the ideal height of your app before the scale var scale:int = stage.stageHeight / 400; // Set the scaleX and Y for the main app’s DisplayObject this.scaleX = this.scaleY = scale;
构建需要在多种分辨率下运行的游戏或应用程序具有很大挑战。当我设计MatchHack时,我创建了每种分辨率的清单,计算了将在每个屏幕之间缩放时正确呈现的设计尺寸。计算之后,我为目标平台创建了一下支持的分辨率列表:
Resolution |
Devices |
480 x 320 |
iPhone 3GS, Android |
800 x 480 |
Android |
854 x 480 |
Android |
960 x 640 |
iPhone 4 |
1024 x 600 |
Android Tablet |
1024 x 786 |
iPad, Web |
1280 x 720 |
TV, Web |
1280 x 800 |
Android Tablet |
可以看到,该游戏支持许多不同的分辨率和长宽比。Xoom平板电脑(1280 x 800)是列表中分辨率最高的。它是一种需要支持的很高的分辨率,尤其是在与针对在480 x 320下运行的3GS iPhone和更低端Android设备的低得多的屏幕分辨率相比而言。幸运的是,Xoom平板电脑能够在更改分辨率下运行Flash,但它仍然需要我设计一个UI来适合所有这些不同的设备。
大部分移动设备目前都遵循尽可能简化UI的趋势,尤其是在更小屏幕应用程序上。此技术也适用于桌面应用程序。针对MatchHack的简化的UI如图12中所示。
图12. 请注意退出按钮,它会在具有后退按钮的设备上自动隐藏。
图13. New Game屏幕支持用于选择游戏的难度。
图14. Winning屏幕显示用户的分数和所获得的奖励。
在为平板电脑和其他移动硬件开发应用程序时,始终尽早和经常测试。我设计了一个真正不错的工作流来在我的Xoom和其他Android设备上测试我的应用程序。我使用一个Ant Build自动化我的所有构建版本。目前,它输出了一个Web构建版本、AIR构建版本、Chrome Market构建版本、Android APK、iOS IPA和PlayBook BAR(参见图15)。
图15. 您可以使用Ant Build等实用工具自动化输出流程。
配置了我的Ant Build之后,我将我的部署文件夹设置为Dropbox文件夹。当您在五六个不同设备上测试应用程序时,很难同时将它们都连接到您的计算机。关于Android一个不错的地方是,如果您安装Dropbox并启用第三方应用程序安装,您可以实际地直接从Dropbox将游戏加载到设备。这可以节省大量时间。此外,我可以与所有测试人员共享我的Dropbox文件夹,使他们始终获得最新的构建版本,我也从不需要通过命令行向他们演示APK的安装。
对于iOS和PlayBook VM,您将需要采取更加手动的方法。幸运的是,对于PlayBook,您可以让Ant包装一个预先构建的SWF文件。我倾向于对我的iOS构建版本进行更多动手练习,因为它们需要花更多时间来编译,您必须通过iTunes手动安装它们。我运行游戏的夜间构建版本,确保始终为希望测试它的其他人构建iOS IPA和PlayBook BAR文件。
目前,对于Flash开发人员,iOS正成为构建AIR平板电脑应用程序的理想平台。Adobe花了大量时间针对该平台优化了运行时,这些优化也显露无遗。我在我的iPad 2上体验到了非常棒的性能,对于所有即将面世的双核Android平板电脑也具有不错的性能。不幸的是,仍然需要执行一些工作来在Android与iOS之间匹配性能。让OS启用或禁用您应用程序的一些功能的战略可在这方面带来很大方便。此技术并不局限于iOS。例如,您可以选择在桌面上显示更高分辨率的图形,在移动应用程序上缩小所有内容。这是一种在几乎市面上每个3D游戏中都使用的通用技术。
首先,使用以下代码访问当前设备的OS:
var os:String = Capabilities.version.substr(0,3); // returns AND or IOS on mobile devices.
通过使用 Capabilities类,您可以设置一些条件语句来定义每个平台应该执行的操作。例如,您可以检测移动OS并生成更低分辨率的图形,或者更改您应用程序的放大分辨率以实现更出色的性能。
现在您已学习了一些优化技巧,下面将探讨构建多平台应用程序的最后一部分,学习如何提交您完成的项目。
或许一个最无据可查的将应用程序部署到多个平台的流程就是,每个应用程序市场所涉及的提交流程。提交流程可能很复杂,并且它需要准备大量资产来完成上传表单。在本节中,我将着重介绍每个主要的移动市场所需的元素:iOS、Android、Chrome和PlayBook。
在大部分情况下,将应用程序提交到Apple公司的App Store是一个简单的过程。提交表可分解为几个屏幕(参见图16)。
图16. 首先输入基本的应用程序信息。
输入应用程序的名称、SKU编号和Bundle ID之后,您就会得到一个表单,您可以使用它提交所有元数据和屏幕截图。您将需要提供如图17所示的以下数据:
图17. 输入应用程序的描述、类别、关键词、版权、电子邮件地址和URL。
您添加的应用程序的描述,详细描述应用程序的特性和功能。描述不得长于4000字节。
一个或多个描述您添加的应用程序的关键词。当用户搜索App Store时,他们输入的词汇会与关键词进行匹配,以返回更加准确的结果。将多个关键词用逗号分开。一旦您的二进制文件进入评审阶段,关键词将无法编辑,关键词列表不得超过100字节。
在所有应用程序市场中,Apple拥有最详细的评分选择系统。只需选择对您提交的游戏有意义的选项。做出您的选择后,您将自动收到一个未完成的评分(参见图18)。
图18. 选择您提交的内容的评分信息。
有关您的应用程序和您的应用程序内购买功能的,可能有助于应用程序评审的其他信息,比如任何用于测试它们的测试帐户的详细信息(包括用户名称、密码、访问代码等)。评审说明不得超过4000字节。
以下屏幕截图演示了您在提交应用程序时提供的资产文件的类型。首先,提交大型图标文件(参见图19)。
图19. 大图标为512 x 512像素,它必须是平面作品,没有圆角。
图 20. 使用表单提交游戏图标的较小版本。
要提交针对iPhone和iPod Touch的应用程序,使用以下尺寸提交屏幕截图(参见图21):
960x640、960x600、640x960、640x920、480x320、480x300、320x480或320x460像素
图21. 为iPhone和iPad上传的960 x 960像素的屏幕截图示例。
1024x768、1024x748、768x1024或768x1004像素
添加描述并上传屏幕截图图像之后,您可以保存您的游戏提交表单并上传您最终的二进制文件。iOS提交流程的一个独特功能是,您可以您希望部署应用程序的发布日期,前提是您通过提交流程发布它。
提交到Android市场是一个非常容易的过程。只要您提交了您的应用程序,它会存在大约5分钟。这个上传流程提供了非常高的灵活性,支持您迅速迭代应用程序的更新,以添加新功能以及(最重要地)推出bug修复程序(参见图22)。
图22. 游戏在Android市场页面上列出。
使用下面的列表确定您将应用程序提交到Android市场所需的内容。
Android市场需要几种不同类型的资产,以及您的APK文件。
高分辨率应用程序图标为512 x 512像素。
您还需要上传一个广告图(180 x 120像素)。如果愿意,也可以上传一个可选的特性图(1024 x 500像素)。
Android支持丰富的图标,这得益于Android设备支持许多不同的设备分辨率和dpi。我在封装我的APK文件时使用以下尺寸:
128 x 128像素
72 x 72像素
48 x 48像素
36 x 36像素
16 x 16像素
屏幕截图具有多种尺寸,以涵盖Android平台上的分辨率范围。
屏幕截图:
320 x 480、480 x 800、480 x 854、1280 x 800,24位PNG或JPEG(没有alpha)
您可以上传横向或纵向的屏幕截图。对于MatchHack提交,我使用了480 x 800像素的尺寸(参见图23)。
图23. 游戏的480 x 480像素屏幕截图示例
您将需要为Android提交表单创建4种类型的描述:
标题(9字符)
描述(4000字符)
最新更改(500字符)
广告文本(80字符)
Android提交流程的一个有趣功能是,它能够限制您的应用程序支持的设备。例如,您可以选择阻止可能性能不足以运行您的应用程序或游戏的电话或设备(参见图24)。
图24. 使用Device Availablity屏幕排除您的游戏不支持的设备。
添加所有需要的图像和文本之后,单击Submit,您的应用程序将在几分钟内上传到市场中。确保使用了“最新更改”文本字段描述应用程序的更新,开发人员在Android上比在iOS更频繁地更新应用程序,因为提交不需要经过审批。最新更改信息有助于设置您的用于预期,尤其是如果您在每次更新时添加新功能。Android市场提交流程的另一项独特的功能是,您现在可以添加多个针对具体设备的APK。这在针对低性能设备进行开发时很有帮助,因为您可以通过编译器参数删除动画或特效,以使用您的单击部署工作流生成构建版本。
将应用程序提交到Chrome市场的流程非常简单。现在,您已熟悉了所描述的其他两个平台的提交流程,那么在这一节中,我仅将着重介绍一些有趣的主要概念。提交您的应用程序后,应用程序会在Chrome市场中列出(参见图25)。
图25. 提交的游戏会在Chrome市场中列出。
Chrome应用程序是一个包含您的应用程序的简单的ZIP文件。如果愿意,应用程序也可以是一个托管在外部域上的URL,但我发现人们更愿意将应用程序安装在本地。将一个HTML页面添加到将压缩的文件夹的根目录下,以您想要的方式设置所有支持文件以组织它们。您需要包含的主要内容是一个描述文件。这类似于Adobe AIR中的XML App Descriptor文件,但针对Chrome市场的版本的格式为JSON。下面提供了一个描述文件示例:
{ "name": "MatchHack", "description": "Welcome to MatchHack, an open source, pick up and play, RPG matching game.", "version": "4.3", "icons": { "16": "images/icons/icon-16x16.png", "48": "images/icons/icon-48x48.png", "128": "images/icons/icon-128x128.png" }, "app": {"launch": { "local_path": "index.html" }}, "homepage_url": "http://matchhack.com" }
上传在Chrome市场中用于描述您的应用程序的图像。您将需要创建和上传两种不同大小的图像:
大型横幅:585 x 220像素
小型横幅:210 x 140像素
当您准备上传到Chrome市场的屏幕截图时,图像文件将与应用程序的准确大小不匹配。通常,它们要小得多。对于MatchHack,我创建了一个自定义屏幕截图并将游戏的标题放在图像的左侧和右侧,以填满空白空间(参见图26)。
图26. 编辑的屏幕截图为400 x 275像素,或者按比例放大(可以为GIF、JPEG或PNG文件格式)。
针对Chrome市场的提交流程需要类似于其他移动平台的应用程序图标。Chrome市场支持3种图标大小:
128 x 128像素
48 x 48像素
16 x 16像素
提交不超过1600字符的应用程序描述。
执行上述步骤之后,Chrome市场提交表单的剩余部分包含一些文本框或简单的复选框,用于指定语言、产品的URL和其他相关的信息。此外,您还可以提供最后一个页面,用作应用程序在市场中显示时的背景。此背景图像为570 x 275像素。如果您选择不提供它,您的应用程序的着陆页面将看起来类似于图27中所示具有蓝色渐变的屏幕截图。
图27. 应用程序的着陆页面上显示了默认的蓝色渐变背景图像。
当您将PlayBook应用程序提交到BlackBerry App World时,您填充几个包含信息的屏幕,类似于所有其他移动平台。提交您的PlayBook应用程序之后,它会在市场中列出(参见图28)。
图28. 游戏在市场中列出。
BlackBerry App World使用一个广告图标来在应用程序浏览器中显示。您将需要准备和上传一个480 x 480像素产品图标。
BlackBerry App World要求屏幕截图不大于640 x 640像素。这个市场类似于Chrome市场,因为屏幕截图尺寸与应用程序的原生分辨率不匹配。
这是一个可选的图像文件(1920 x 1186像素),供市场用于展示您应用程序的功能。
编写和提交两种描述。短描述为50字符,长描述为4,000字符。
现在您已学习了将您的应用程序提交到每个市场所需的广告作品和文本,您可以开始准备图像文件和起草描述以开始分发流程了。请首先努力完成准备工作,因为如果资产已创建,提交表单更容易填充。请注意,一些提交表单很复杂,不允许您保存中途的进度。此外,大部分提交表单不允许您跳到下一个屏幕,除非您上传了每一节所需的所有内容。
如果您不熟悉开发多平台Flash Builder项目,您可能希望试验设计出最佳的移动开发工作流。下面我着重列出了我在使用Flash Builder 4.5创建和分发游戏时学习到的一些知识:
希望本文已帮助您熟悉了在开发您自己的多平台Flash应用程序时的考虑因素和最佳实践。如果您好奇心较强,可下载并分析MatchHack的源代码,以学习我用于在每个平台上使用的一些技术。我在代码中添加了大量注释,使其更容易理解。请探索真实应用程序,以研究您可用于使用Flash Builder构建您自己的移动Flash应用程序的战略。
如果您参加了今年的MAX,请确保参加了我的会议。您可以在我的文章Adobe MAX sneak peek: Blitting for Flash gaming across screens中学习它的更多信息。
查阅一下在线资源以更深入地研究: