使用FlexBuilder3建立一个可分享的应用
这是一篇来自Adobe开发者中心的文章，由RIAMeeting翻译小组成员徐英钟翻译，原文地址是：http://www.adobe.com/devnet/flashplatform/services/distribution/articles/flex_dist_service.html。
在这个教程中，我们将使用Flex Builder 3的一个Distribution service extension(推广服务扩展)来创建一个可分享的Flex应用程序(如图1)。记住，可分享的应用只不过是在你的应用程序或内容上添加了一个“Share”菜单。这意味着你可以分享你已做好的任何Flex应用程序并且通过推广服务来跟踪、管理、推广以及盈利。
图1.我们将要建立的应用的例子。
准备条件
为了能够充分利用本教程，你需要以下软件或文件：
Flex Builder 3
Distribution service extension for Flex Builder 3(Flex Builder 3的推广服务扩展插件)
Sample files(示例文件):
ds_flex_applications_student_files.zip (ZIP, 16 KB)
必备知识
本文的目标读者:
- 有兴趣学习如何使用Flex Builder 3创建可分享应用的有经验的Flex开发者。
- 拥有Distribution service(推广服务)的Partner ID的开发者。如果你还没有Partner ID，请浏览教程Tracking applications来了解如何获取一个Partner ID。
新建一个可分享应用程序项目
注意: 为了能够继续进行下去，你必须下载并且安装页面1中提到的Distribution service extension for Flex Builder 3。
在这一节里我们将新建一个Flex Shareable Application Project(可分享的应用程序项目)。Flex Shareable Application Project只有在成功安装了Distribution service extension(推广服务扩展插件)后才能够新建。
1.在Flex Builder 3中,选择 File > New > Other (见图2).
图2.创建一个可分享应用程序项目。
2.在Wizards(向导)对话框中,展开Flex Builder folder.
3.选择 Flex Builder > Flex Shareable Application (见图3).
图3.(向导)对话框。
4.点击Next.
5.在New Flex Shareable Application Project对话框中, 输入 Flex_Tutorial 作为Project name(项目名称) (见图4).
图4. 定义项目名称。
6.点击 Next.
New Flex Shareable Application Project向导的下一个窗口是用来设置应用程序的一些基本参数的。我们填入的参数将会被嵌入HTML以及应用程序的“Share”菜单组件中。我们稍后将会介绍这些嵌入代码。
New Flex Shareable Application Project对话框的应用程序identity(身份)栏(见图5)中包含了3个用来跟踪应用程序数据和识别应用程序的属性的输入框(Partner ID、Code ID、Config ID)。
- Partner ID: 应用程序唯一的识别号，用来跟踪你的应用程序。如果你需要获得应用程序的分析数据那么这一栏是必填的。
- Code ID: 用来识别应用程序。这一栏是必须的。
注意：开发者在建立应用程序过程中就需要定义Code ID。
- ConfigID: 用来区别同一个应用程序的不同实例。换一句话说，你可以使用Flash Vars(变量)来动态改变一个应用程序中的不同内容并且使用不同的ConfigID来分别跟踪这些实例。
注意:需要了解更多关于如何使用ConfigID来克隆应用程序的信息，请查看教程Using Dynamic Variables(使用动态变量)。
应用程序的details(详情)栏中包含了许多用来描述该应用的信息的输入栏，包括设定该应用的URL。
- Title:应用程序的标题，会在社交网络显示给用户。
- Copyright:应用程序的版权，用来显示在一些桌面环境下。
- Description:用来描述应用程序。当用户在社交网络上分享或发布该应用的时候，该描述用来告知用户应用程序的内容。
- SWF URL: SWF文件所在的URL。这个URL地址是你完成应用程序并发布时的最终地址。
- Preview image URL:设置你所放置的应用程序预览图片的URL，它将被用来在社交网络上显示为应用程序的预览图。
- Advanced tracking check box:勾选该项来让推广服务对应用在社交网络上的推广进行跟踪。
在上面提到的这个“New Flex Shareable Application Project”对话框中，Partner ID、Code ID、SWF URL和 Title是必填的。
7.输入你的Partner ID.
注意:如果你还没有Partner ID，请查看Tracking applications 教程来了解如何获取它。
8.本例中，输入Flex Tutorial 作为Code ID。
9.输入Flex Tutorial作为标题(Title)。输入http://www.trilemetry.com/projects/distribution_service/DS_Flex_Application.swf作为SWF URL (见图5).
该URL地址指向的是本教程应用程序例子的最终版本的SWF文件。有选择性的，你可以将你的应用程序放置在你自己的服务器上然后将它设置为你的URL。如果你所使用的SWF是在本地机器上的话，社交网络将无法看到该应用程序的 预览。
图5应用程序属性的设置
10.点击Next。
这个对话框允许你设置应用程序的Flash variables(变量)和URL参数。你可以通过在这个对话框中设置变量来为你推广的某个应用传入动态的内容(见图6)。
注意:在本教程中我们将不使用Flash variables(变量)和URL参数。如果你想要了解如何使用这些特性，请查看教程Using Dynamic Variables 。
图6.为应用程序的动态内容设置变量的对话框。
11.Click Next.点击Next。
12.设置应用程序的Template(模板)为Custom(自定义)。
注意:查阅Interactive Advertising Bureau来了解关于商业标准和广告尺寸的指南。
13.设置Width为373。
14.设置Height为217。
15.勾选“Create a default ShareMenu”(见图7)。勾选该选项来自动生成默认的Share menu(分享菜单)的代码。如果你不选择该选项，你就必须自己写代码来添加一个Share menu(分享菜单)。
图7.设置应用程序尺寸。
16.Click Finish.点击Finish。
你将可以在“Flex Navigator”中看见“Flex Tutorial”项目。(见图8)
图8.Flex Navigator中的The Flex Tutorial 项目。
确保你正处于代码模式并注意到Flex Builder已经自动生成了一个按钮以及Share menu(分享菜单)的代码。(见图9)
图9.自动生成的Share menu(分享菜单)的代码。
17.运行该项目。
18.点击Share(分享)按钮来查看图10中所示的Share menu(分享菜单)。
注意:加载Share menu(分享菜单)可能会花费一两秒时间
图10.当点击Share(分享)按钮时出现的默认情况下的Share menu(分享菜单)。
自定义SHARE MENU样式
在这一节中我们会使用Flex Properties(属性)来自定义Flex Tutorial 项目的Share menu(分享菜单)。
1.在代码模式中，将光标放在<widget:ShareMenu>标签的内部(见图11)。
图11.将光标放在标签中。
2.切换到设计模式。
3.找到Flex Properties面板(在右下角)。如图12中显示的一样，列出了Share menu(分享菜单)的属性。
图12.Share menu(分享菜单)的Flex properties。
在Share menu(分享菜单)被选中的情况下使用Flex Properties面板，我们可以修改Share menu(分享菜单)的各种属性。你同样可以导入在Flex Builder外部创建好的供Share menu(分享菜单)所使用的主题
4.找到Theme选项栏。
5.修改Theme为Emo。
6.下拉滚动条并找到Flex Properties中的Layout栏(见图13)。
图13.Share menu(分享菜单)的Flex Properties中的Layout菜单。
7.修改Width为330。
8.修改Height为440。
9.设置X为12。
10.设置Y为40。
11.保存并允许该项目。
12.点击“Share”按钮。
你可以看到Share menu(分享菜单)现在变成了Emo主题样式(见图14)。
图14.使用了Emo主题的自定义Share menu(分享菜单)。
嵌入应用程序内容
在这一节中我们将会添加一个SWF动画作为Flex应用程序的内容并将“Share”按钮放在它的上面。
1.返回Flex Builder。
2.切换到代码模式。
3.在<mx:Button>标签上面添加一个<mx:Image>标签并将它的source属性设置为 ：
http://www.trilemetry.com/projects/distribution_service/Tutorial_Application.swf:
4.<mx:Image source="http://www.trilemetry.com/projects/distribution_service/Tutorial_application.swf">
5.为该Image组件添加以下属性值：
- x="0"
- y="0"
- width="365"
- height="217"
6.保存并运行该程序。你将会看见图15所示的内容。
图15.嵌入的SWF动画。
注意到“Share”按钮的位置跑到了SWF的内容之外。同时也注意到，默认的背景颜色自动为应用程序创建了边框。
7.返回Flex Builder。
8.切换到Design Mode(设计模式)，在舞台中选中Share按钮并打开其Flex Properties面板。
9.找到Flex Properties中的Layout栏，修改Share按钮的X值为157。
10.修改Y的值为180。
11.返回代码模式，找到Application标签，为其添加属性backgroundGradientColors并设置其值为白色，见下一步。
12.设置backgroundGradientColors属性值为数组[#FFFFFF,#FFFFFF]。
13.<mx:Application xmlns:mx="/2006/mxml" layout="absolute" width="373" height="217" xmlns:widget="http://flex.adobe.com/widget" backgroundGradientColors="[#FFFFFF,#FFFFFF]">
16.保存文件并运行该项目。
你将看见Share按钮的位置现在设置恰当了并且背景变成了白色(见图16)。
图16.Share按钮现在与应用程序的内容协调了。
进行应用分享
Share menu(分享菜单)使用一个Tab面板和HTML来让Flash应用程序在互联网上进行分享。Share menu(分享菜单)上的每一个tab代表一种分享方式，包括Post(发布)，Bookmark(书签)，Email(邮件)以及Desktop(桌面)。
发布一个应用程序
每一个tab都包含了许多连接至不同网络的按钮。比如，Post tab包含了一些连接到不同社交网络的按键，你可以在这些社交网络的个人页面上发布这些应用。
1.点击链接到MySpace网络的按钮(见图17)。
图17.点击MySpace按钮
注意:由于平台的不同以及那些社交网络的变化，Share menu(分享菜单)可能看起来并不相同。
Share menu(分享菜单)接着会显示一些说明性的文字(见图18)。
图18.点击按钮之后你就可以看见指示了。
点击连接按钮之后，将会打开一个新的浏览器窗口指向你所选的目的地。对于MySpace，你将会看到如图19所示的页面。
图19.MySpace的发布页面。
我们同样可以用Embed code(嵌入代码)的方式来分享应用程序。嵌入代码就是使用HTML来生成应用程序的预览或者将应用直接嵌入在网页中。Embed code(嵌入代码)窗口显示了相应的代码并且允许用户直接点击Share menu(分享菜单)的Copy按钮来进行复制(见图20)。
图20.你可以很容易地复制和粘贴应用程序的嵌入代码。
当新的Flex Shareable Application被创建时相应的Flash应用的Embed code(嵌入代码)就生成了。
获取更多信息
在本教程中我们学习了如何使用Flex Builder 3 Distribution service extension(推广服务扩展)来创建一个可分享的Flash应用程序，大家还可以尝试这一系列中的其他教程：
- Using Dreamweaver to share existing Flash applications
- Creating a sharable application using Flash Professional
- Sharing Flash applications to the desktop
- Using dynamic variables with Flash applications
.gif)
.gif)
.gif)
good
good
发表新评论