用Flash和Flex创建迷人的在线多媒体广告-优快云博客

本文探讨了富媒体广告的潜力及其实现方式，介绍了如何利用Flash和Flex创建互动性强且创意丰富的广告，展示了具体案例。

Adobe Flash Builder 4 简体中文正式版下载: http://subject.youkuaiyun.com/adobedownload/index.html
Adobe平台技术峰会课程视频：http://adobev.youkuaiyun.com/

“闪创未来”-Adobe Flash 平台应用开发大赛：http://adobec.youkuaiyun.com/

在这篇文章中，你将通过标准的Flash广告了解到多媒体广告的强大功能，你能为富有创造性的多媒体广告做些什么，并且如何运用其你所学习到的Flash和Flex方面的知识进行创造出富有很强的互动性，创造性的东西。

无论你是Flash开发者还是Flex开发者，或者是两者都会的，如果你在一个创造性很强的机构上班或者是你正从事于类似的工作时，你迟早都会收到来自客户的需求：“你知道你正在为我们建立的网站（老外称之为微型网站）吗？好吧，我们需要你为广告部分创造一个Flash导航栏”。

>毕竟你是在精心设计一个最好的微型网站，以满足客户的市场需求或者是广告竞争，并且要达到让你的网站给消费者以惊奇的效果，你就要在三个标准的盒子中设计你的Flash导航栏了——728ｘ90,300ｘ250,16ｘ600，没有足够的空间去展现你的Flash导航栏特性了。

尽管如此，这并不意味者世界末日的到来。事实上，它比这要好的多的多了。让我给你介绍下解决方案：在线富集网络多媒体广告。

要求

为了充分利用本文，你需要以下软件和文件：

Flash CS4 Professional

Flash Builder 4

示例文件：

rm_example_cs3.zip (ZIP, 2.1 MB)

Note: These samples work in Flash CS3 Professional or later.

需要的知识

对网络广告，你所选择的开发工具-Flash or Flex有一个大概的了解。

本文基于Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License*协议发布。

看一下富集多媒体广告的潜力

富集多媒体广告的扩张很可能会短暂的取代Web页面，并且让你在不用离开页面的情况下进行网上浏览信息，给你更多的创作自由。因为你所做的东西就是要让人们沉浸于你的创意当中，不是吗？当你只有一个小盒子，容量只有30KB的时候，标准的Flash导航栏是是无法达到它那样的效果的。光是设计出标准的Flash导航栏没有给人们以启示来的有意义。

在PointRoll上，被问的最多的问题就是：“那么你们在富集多媒体广告上都能做些什么呢？”好吧，我就先问一些问题：你能用Flash或者是Flex创造出什么东西呢？因为问题的答案就是你能用富集多媒体做些什么（rich media）。

事实上，基本上你为客户端所做的任何东西都能被导入到富集多媒体广告中。这就好像是一个展示了许多还无法在微型网站上使用的特性的展示柜，在多媒体广告中你可以添加许多你认为很惊奇，互动，吸引人的东西。忘了提一下，实际使用的屏幕越大，在Rich Media ads 中允许使用空间就越大，比标准的Flash 广告要大的多，所以你可以使用更多的惊奇的东西，互动性更强的材料来吸引你的观众。富集多媒体是一个非常富有弹性的环境，基于时间的动漫，结合了XML和数据库，web 服务等等。

那么你能在一个富集多媒体广告中做些什么呢？下面是我的一些Rich Media能够做的东西的清单：

将你的视频以高清或者是标准的格式进行流播放
用网络摄像头录制你自己的视频，并且传到你朋友的email或者是智能手机中
进入twitter，follow一个品牌，并从广告上发表自己的评论
将你的照片和视频上传到Facebook上
收集客户的资料并发送给数据库
玩3D游戏

在一个房间多媒体广告中还有很多事情可以做。

了解富集多媒体广告是如何工作的

现在我知道这个开始听起来有点像是一个为富集多媒体所做的广告，但是有时候我觉得相比较于标准的Flash导航栏，在广告领域富集多媒体是一个秘密的组件，所以我需要把它说出来。我每天都在从事富集多媒体，所以我的观点有稍稍的倾向的，但是我可以告诉你：它是成功的。越来越多的客户觉得它很不错。作为设计师和开发人员的馈赠，富集多媒体广告做起来还是非常有意思的，从中获得了许多的乐趣。在PointRoll，我们每年都能轻而易举的处理100，000多个flash文件来建立多媒体广告。事实上全世界的Flash设计师和开发人员都在为多媒体广告创作出令人惊奇的，互动性强的，富有创造性的东西。想要证据吗？这里就有一个。

2010 Mustang Customizer 广告

我们最近为福特汽车公司做了一个广告，用Flex Builder 3 和超过1000个额外的AS文件。这是个非常棒的项目，效果很不错，原本是要建成一个微型网站：the2010Mustang.com*。我们后来就和Ford 广告公司Team Detroit*一起将这个2010Mustang Customizer移到了最初的导航栏中，并且拓展了一个728x270的滚动栏。

Ford Mustang Customizer microsite

Figure 1. Ford Mustang Customizer microsite (2010Mustang.com)

Initial banner

Figure 2. Initial banner

Expanded panel

Figure 3. Expanded panel

用户可以开始在广告中给他们的2010 野马选择颜色，改变轮胎，添加花纹，格栅样式了。作为一幅帮助客户使用网站的画面，其中隐藏了许多特性，允许客户在广告中继续设计他们的汽车。这就对了，当你开始配置你的汽车，所有你选择的配置都将从富集多媒体中调入，这样你就可以在网站上寻找乐趣了。

这次的活动对Ford来说非常成功。客户非常喜欢这样的形式，开发团队也非常开心，他们创造出了一些非常酷的，非常重要的东西，用户们也十分乐意这样子，比呆呆的看着一幅广告图画要好多了。

那么这个是怎么完成的呢？好问题。所有的材料都会通过保存在XML文件中详细路径调用所需的文件。用户的选择被保存在一个Object中最后以一个字符串的形式被传入到微型网站中，于此同时会通过在微型网站中的swfobject将每一个选项一flashvar的形式传入网站中。每一个动画过度都是基于类的，以便重用。

探讨下这个例子

这个示例文件 RM_Ad_Example.fla 是正真简化过的。这个示例文件应该让你知道发生了什么，即便这只是个基本外观。在例4中展示了一个SWF，就算是一个广告。

Figure 4. Interactive sample ad (make your selections and click the Click Thru button)

在框中进行选择，让后点击 Click Thru 按钮。跳转后的页面作为微型网站。示例中的微型网站的URL已经定义在了config.xml文件中了，并且分配给了RM_Ad_Example.fla文件中 _link了。

Here's a look at the code:

 import flash.net.URLRequest;
import flash.net.URLLoader;
import fl.data.DataProvider;
 
var request:URLRequest = new URLRequest("config.xml");//path to xml file
var xmlURLLoader:URLLoader = new URLLoader();//loads in xml
var xmlPaths:XML = new XML();//xml for paths to assets and urls
var _currentparts:URLVariables = new URLVariables();//stores all user selections as URL variables
var _link:String;//stores path to microsite
 
xmlURLLoader.addEventListener(Event.COMPLETE,
xmlLoaded, false, 0, true);//listen for the config.xml file to complete it's
load clickThru_btn.addEventListener(MouseEvent.CLICK,
gotoMicrosite, false, 0, true);//click thru button
 
//listen for when the user changes their selction in the combo box
cbCarColor.addEventListener(Event.CHANGE, cbChanged, false, 0, true);
cbCarWheels.addEventListener(Event.CHANGE, cbChanged, false, 0, true);
cbCarDecal.addEventListener(Event.CHANGE, cbChanged, false, 0, true);
 
//set default values for _currentparts based on initial combo box labels 
_currentparts["cl"] = cbCarColor.getItemAt(0).label;
_currentparts["wl"] = cbCarWheels.getItemAt(0).label;
_currentparts["dl"] = cbCarDecal.getItemAt(0).label;
 
xmlURLLoader.load(request);// load config.xml
 
function cbChanged(e:Event):void {
    //set _currentparts values based on current values in combo boxes
    _currentparts["cl"] = cbCarColor.value;
    _currentparts["wl"] = cbCarWheels.value;
    _currentparts["dl"] = cbCarDecal.value;
}
 
function xmlLoaded(e:Event):void {
    xmlPaths = XML(e.target.data);//assign data to xmlPaths
    _link = xmlPaths.paths.path.(@name == "deeplinkBase");//assign url of microsite to _link
     
//--------code to load in rest of assets not shown--------//
}
 
//on user click thru, pass in the full url with query string
function gotoMicrosite(e:MouseEvent):void {
    var _fullLinkRequest:URLRequest = new URLRequest(_link);//make a new URLRequest with the path from the XML file
 
    _fullLinkRequest.data = _currentparts;//assign usl variables object for query string
 
    navigateToURL(_fullLinkRequest);//go to the microsite with all user selections "attached"
}

这里是代码的细目表：

创建变量，用于载入XML文件，存储XML，微型网站连接，还有用户做出的选择。
为xmlURLLoader设立一个事件监听器Event.COMPLETE，监听文件是否完成载入
给clickThru_btn添加MouseEvent.CLICK事件监听器
为舞台上的三个选项盒子组件添加Event.CHANGE
为_correntparts(URLVariables对象)每个属性设定默认值
载入一个外部XML文件，从这个文件中获取微型网站的连接地址
将微型网站的路径保存在变量_link 中
用户每一做出新的选择是都要调用Event.CHANGE 事件，更新_currentpares的值
当用户点击了Click Thru 按钮的时候，生成一个行的URLRequest对象，叫做_fullLinkReauest，将_link以字符串的形式传入。设定_currentparts设定成_fullLinkReques的data属性。最后，使用navigateToURL(_fullLinkRequest)方法，跳转到这个微型网站页面。

As I said, this is a really stripped-down code example that just scratches the surface of what's possible. But it shows one way you can incorporate external elements into your rich media creative and pass information along to continue the interactive experience where the user left off in the ad. Try doing that with a standard Flash ad

在rich media ads中推销客户

作为一个专业的Flash或者Flex开发人员，你有能力做出任何你想做的东西，更重要的是客户想要的东西。我知道，大部分时间你都在向你的客户解说：“看，通过富集多媒体还有一种更炫的方式来展示你的品牌，吸引你的用户...。”但是客户往往会出于成本，缺少关于主题方面的内涵考虑，而拒绝你的富集多媒体方案。我正在尝试做的是，在你获得了通行证后，告诉你富集多媒体能够完成的东西，以此激励你。如果你正设想着在以后的某个活动中使用富集多媒体的话，那就更好啦。

当客户问到关于他们通过rich media ads能获得什么好处是，你就需要和你的客户进行交流了。为了得到好的结果，他们需要定向广告，并与他们的需求进行衡量比较。在超过150个衡量元素和可能性当中，这里列出了最令人瞩目几个：

交互率： 有多少客户看了广告的预告片，或者是了解了关于该产品的更多的资料？交互率是用户使用导航栏去浏览拓展栏中的附加内容的百分比。
具体的客户行为： 想看一下哪款产品最受客户欢迎吗？没问题。
视频演示： 用户看了多少关于该品牌的视频？看一下视频的点击率，任何用户对于该视频的行为，比方说暂停，重播。
品牌交互时间： 用户看这个广告视频用了多长时间？在富集多媒体中就可以告诉你答案。这个度量标准比单但点进率要有价值的多。
点进率（CTR）：点进是一种带领用户到指定登陆界面中的行为，这个界面可能不是广告界面。点进率就是用户点进的百分比。
优化创新： 如果有一条信息或者是图片比你广告中的更好该怎么办？出于如何吸引用户方面的考虑，你可以经常展示一些显示效果更好的图片或者是消息。如果这个没有用的话，再换一个有用的，这个还是比较自由的。
动态创新： 一个媒体购物可以在正确的时间，将正确的广告展示给顾客。我们的研究显示了一个广告与客户的相关性越大，它的效果就越好。

这些只是为了客户，不是吗？没有必要。作为一个设计师或者是开发人员，去重新审视下这一次战役中的得失会是一个不错的想法。然后你就会在下一次的战役中注意一下了。

正确创建多富集多媒体广告

以下是一些小建议：

建立一个详细的材料表，比如说合适的视频尺寸，优化影像。
使用外部导入文件比如，SWFs,JPEGs,PNGs以减少你初始载入文件的大小。发行网站经常需要比较小的初始载入文件，以加快页面的导入速度。
如果这个行得通的话，尝试着让你的构造与OOP相匹配，以为你的文件大小做出解释。为你广告创建动态定位，定义尺寸，这样会加快生产速度的。注意不要因为一个简单的可执行程序而忽视了那条底线。
一些很好但已经过时的动画也是很不错的， K.I.S.S.（Keep It Simple, Stupid）的原则并没有问题。
在你开发大型应用程序时，你需要确保所有相关联的部分能够正确与额外的组件（数据库，在广告服务商之外的服务器）相连接。
仅仅因为你会使用厨具就意味着你应该要使用它。你是一个聪明的设计师，所以用的判断力，告诉你的客户那部分是多余额。你也要咨询下你的富集多媒体广告服务商。

让你的多媒体广告物有所值

设计师和开发人员有一次机会让你的用户去正真的看你的广告而不是读文章或者是看视屏。正如我在PointRoll，你最后一次上网看广告的是什么时候？存在挑战是怎样让用户一眼就喜欢上你的广告。但是你能在正确的时机让有所需的用户看到想看的网站，这也是非常有趣的。

富集多媒体在网络广告中是一个非常有用的工具，客户用不着害怕使用它们。它给你提供了一个为你的客户创造搞笑的，吸引人的，可衡量的广告的机会，而且这个也挺好玩的，你会从中获得很大的热趣。我说：“将你的思想放到导航栏之外去（这样翻译可能有点牵强原句：Think outside the banner）。”

如果你曾想需要帮助做一个富集多媒体项目的话，可以找我。

接下来去哪里

你可以去PointRoll Creative Showcase*查看更多的广告

本文来自：http://www.adobe.com/cn/devnet/flash/articles/rich_media_ads.html