关于编译部分，我用的是自己写的ANT脚本，如果你也要发布自己的软件，请在build.xml中修改密码，然后用keystore target生成自己的认证key。

GitHub下载

Related posts

• Workflow – Further Thought (2)
• Project – Mercedes-Benz Autoshow 2010 Web Special (0)
• Flash汉字嵌入助手 (6)
• 那些正在发生的事 (2)
• 挖挖Open Source Flash (2)

软件介绍

Flash汉字嵌入助手（HanFont）是一款制作Flash运行时共享字库的工具。特别针对Flash汉字的嵌入需求进行开发，简化了烦琐的生产过程，自动生成AS文件甚至是最终的SWF文件，让没有开发经验的人员也能够轻松使用。

软件的前身是我去年推出的Font Converter，运作原理可以看我去年写的Flash字体嵌入方法总结系列。随着Adobe AIR2.0的推出，新的NativeProcess API使得AIR调用外部程序的功能得到了大幅增强，终于可以实现我最想实现的功能：直接调用Flex SDK编译SWF文件。于是我重新改写了去年的程序，把原先基于Flash IDE开发的结构用Robotlegs框架重新开发。

软件特点

• 基于Adobe AIR 2.0全新开发 new!；
• 支持直接调用Flex SDK 3.x或4.x进行编译 new!；
• 支持拖拽的方式引用外部字体 new!；
• 内置各种汉字范围的预设；
• 支持拖拽的方式导入文本文件；
• 支持空白字符和非中文字符的过滤；
• 可以选择输出单个变量或者整个类。

安装环境

• Windows XP/Vista/7
• 请确保您的电脑安装了最新的Adobe AIR 2.x

下载

HanFont_v3.0.zip

使用说明

第一次运行的时候，软件会提示你填入Flex SDK的路径，并选择你所使用的版本。在软件使用过程中，你也可以通过右上角的设置键来重新打开这个设置窗口。

字体设置部分：

填入类名和字体名，设置粗体或者斜体。如果选择了系统字体方式嵌入，可以直接在预览框里看到字体效果，甚至还可以自己输入预览文字。

CFF方式嵌入是Flex SDK 4.x的特性，这种嵌入字体的文件量更小，但是仅能用于TLF，传统的Textfield不能使用这种方式嵌入的字体。

嵌入文字设置部分：

可以在左边的预设列表里面选择所需字体。如果在预设中保持默认的第一项，又没有填入自定义包含文字的话，则表示没有限定字体范围，将整个字体完全打包。

在自定义包含文本框中可以随意输入想要嵌入的字体。除了“导入”按钮可以导入外部文本以外，还支持拖放操作。你也可以设置过滤空白字符和过滤非中文字符的选项来对输入的文本进行筛选。

输出部分：

你可以在输出预览中看到软件自动生成的AS代码，还可以自由的切换输出代码的类型。最后，你还可以对输出代码进行复制、保存和编译操作。

ps. 由于调用本地进程需要更高的权限，所以不能用air格式来发布。苹果用户可以下载这个air文件自行打包，不过我没有验证过是否会有错误。此外，源代码整理后近期将放出。

Related posts

• Project – Mercedes-Benz Autoshow 2010 Web Special (0)
• Project – Piombo (2)
• Project – Mercedes-Benz E-Class L (1)
• Project – KC Command Package v3.0 (0)
• Two AR Projects (6)

Guru Team经历的这次人事变动，冰冻三尺非一日之寒，应该说最大的责任在我。过去的两年是一段迷茫的日子，公司的某些错误决策造成了很多动荡的不利因素。创意部的文化在一点点的流失，创意质量在一点点的降低，而我却没有起到应起的作用。两年前走上这个管理岗位的时候，我没有做好准备，还是沉迷在自己的世界中。作为一个Team Leader，在管理上的没有作为成为我最大的败笔。

我不是没有察觉到我的问题，而是没有那么深刻的被触动，直到昨天。

我的下属酒后吐真言：我最大的失败在于没有带出自己的团队。我完全承认。我的自私造成这个团队的激情和梦想一点点的被现实打压。我不是没有思考过如何激励团队、如何设置合理的项目流程、如何去做创新。但是最大的问题在于我仅仅限于思考，而没有给出具体的行动。我还把自己能做的努力定势的限制在部门内部。我的团队像是被遗弃的孤儿，士气一天一天的沉沦下去。迟到、旷工、消极怠工、接私单影响正常工作，问题接踵而至。

然而我的下属们都太腼腆，没有人和我分享他们真正的想法。直到昨天我才听到他们内心真实的想法。我于是重新审视了自己的能力和目标。一直以来，我是一个内向、不太自信的人。但是这些年我越来越清晰的听见自己心里的声音：我希望我自己成为一个对中国的互动行业有贡献，有影响力的人。不过我不敢公开做出承诺，害怕失败。

事实上，回想我自己在过去这几年其实已经帮助和影响了一些人。这个博客一开始只是为我自己所用，但是随着更多的朋友关注这里，通过我的分享而受益，我开始感受到提供对他人更有帮助的信息的乐趣。还有些行业新鲜人在我的帮助和引荐下开始了他们自己的职业生涯。我也参加过朋友举办的高校设计师交流会，和大学同学们面对面分享自己的成长经历。而我却错误的低估了自己的影响力。 我以为只有在专业上不断进步，才能树立权威，才能有资格去指导他人。实际上团队内需要的不是高高在上的权威，而是一个对成员有帮助的导师，一个能够为他们指明方向的领导者。听着下属的话，我觉得即震撼又难过。这些有激情、有实力的即可爱又单纯的人，因为我的错误，蹉跎了职业上升期的宝贵时光。这是我对他们的辜负，也让我第一次感受到责任的重大。

我想我已经找到实现自己理想的第一步。我承诺对这个团队负责，用我的激情和影响力重塑ES Guru的文化，帮助团队成员实现自己的价值。如果我连这么一个小小的团队都带不好，我谈何去影响整个行业。事实证明当我想明白这点以后，脑中很多已经沉寂的想法又开始活跃起来，再次感觉充满创造力的乐趣。

最后祝福那些离开团队的同志们：不管经历怎样的挫折，也不要泯灭了心中那股对互动最原始的激情。

Related posts

• No related posts.

“从优秀到卓越”，梅赛德斯-奔驰全新长轴距E级轿车卓然登场。

Title : Mercedes-Benz E-Class L
Client : Mercedes-Benz Beijing
Agency : Energy Source
Date : 2010.6.18

Art & Design : Tina’s Team
Motion & Flash & Develop : ES Guru Team
Integrate : ES Tech Team
3D : Bitone

ps. 之前提到的鼠标跟随光效源代码同步放出，点击下载

Related posts

• Project – Piombo (2)
• Two AR Projects (6)
• Showreel 2007 (10)
• Roxik新作：Verbatim机器人大战 (3)
• Project – Mercedes-Benz Autoshow 2010 Web Special (0)

这个Rhythm of Lines是2007年的网站。流畅的线条给人留下了很深的印象。而其中的亮点：线条组成车的轮廓，是怎么做到的呢。答案是先在Maya中把线框的模型建出来，然后用程序导出数据到XML，最后用Papervision3D生成动画。

Audi – Virsprung durch Tech

而接下来的这个网站，更是把这种方法发扬光大。聪明的你应该已经猜到了，没错，组成车的那些点也是从三维软件里面导出来的。

除了数据交换的应用以外，随着技术的进步，很多在次世代游戏开发中用到的三维技术和技巧，也可以运用到Flash中来。比如在Flash 3D开发中，为了保证运行的效率，我们应该尽可能的减少多边形的数量，把细节放到贴图中去表现。对此我们应该要了解三维中可以烘培哪些贴图以供程序使用。

上图是Away3D的一个例子，你需要了解三维中各种各样的贴图分别是什么意思；法线贴图比凹凸贴图有什么优势；HDRI要如何应用等等。只有这样你才能更好的和3D制作人员沟通。

在Mercedes-Benz Autoshow 2010 Web Special项目中，有一个令人头疼的功能是在每一个镜头中的车都是可以被点击的。在传统思路中，这意味着大量的画遮罩的工作。100多个镜头都这么处理的话是个非常巨大的工作量，但是如果你知道在三维软件中可以很方便的输出Object Buffer通道的话，问题就可以迎刃而解。

Object Buffer通道的作用原理是通过颜色来制作不同的选区，从而可以隔离出独立的物体来进行进一步的调整。应用相同的原理，我设计了一个程序来取得鼠标位置下对应的颜色，再通过颜色值来得到对应的车型。

除了上面介绍的几个例子之外，还可以看看我在Papervision 3D + 3D/Post Software Workflow一文中介绍的使用3D软件辅助进行Flash 3D开发的一些思路和做法。

接下来我们再来看看后期领域的技术跨界又能给我们带来什么样的惊喜：

Make a thank you movie

Video Fan

这两个网站最大的亮点就是实时贴图的效果。看着自己上传的照片完美的融合在影片当中，很多人都感觉相当的惊奇。但如果是熟悉后期的人一看就知道这不过是简单的跟踪技术。AE就能很好的完成这个任务，或者也可以用更专业一点的跟踪软件Mocha。对跟踪技术不了解的同学可以看看AETuts上提供的一些教程，加强一下认识。你不需要会自己操作，我们要的只是软件导出来的数据。

接下来我们需要开发程序来处理跟踪软件导出的信息。比如上面两个网站，只是用到了最简单平面跟踪。导出的数据就是每帧四个顶点的位置信息，我们只要用4点变形的工具来处理就可以了。这里有一个开源的类：DistortImage 能实现这个功能。

经过以上处理，透视匹配的问题就解决了。为了达到更加真实的效果，还需要对贴图和视频素材进行颜色和景深的匹配。同样的我们在先后期软件里面做调整，把颜色调整（色相，饱和，明暗）的参数记录下来。然后在程序中用ColorMatrixFilter滤镜配合ColorMatrix来还原。用相同的方法还可以对景深做匹配，配合Blur滤镜就可以了。

最后把贴图的混合模式设置为Screen，这样一来有一些表面的高光或者反射就能透出来，效果更加真实。对每帧图像和数据进行相同的处理，动态贴图效果就完成了。

另一个后期应用的例子是Uniqlo Collection 2009。

这个网站的后期跟踪更加复杂些，把每个模特的轮廓都跟踪出来了。到程序里面，再用矢量绘图的方法把跟踪点连接起来成为最终的遮罩。从技术上讲又更进了一步。

最后再来看看一个3D跟踪的例子：http://www.2gh.de/

相较前面几个例子只是2D跟踪而言，这个网站显然更胜一筹。运用3D跟踪技术可以反求出相机的运动路径，然后把这个数据运用到Flash 3D引擎中实现实拍与Flash合成的效果。

通过以上几个实例的介绍，我希望大家都能够感受到技术的跨界与整合带来的新的无限可能性。通过对技术工具的熟练掌握，做出更加出色的创意作品来。

Related posts

• Two AR Projects (6)
• Suite 23 – Jumpman won a new FWA (0)
• soft.se (0)
• Showreel 2007 (10)
• Red Bull Flugtag Flight Lab (1)

十年间我的身份转变了数次。学生时代通过自学积累下来PS、HTML、Flash的基本功，还有点JS和ASP的实习经验。临毕业那会怀着对当时还是Macromedia公司提出的RIA概念的无限向往，和对AS2、.NET、设计模式的若干浅薄认知，花了一个多月时间，设计开发了一个叫做FStore的Flash商店作为我的毕业设计。找工作的时候经历了一次做设计还是做开发的短暂纠结，后于2004年7月背起背包独自闯荡上海，开始做互动的生涯。

我最庆幸的是在学生时期就找到了自己的兴趣方向，而且养成了主动学习的习惯。那时候的精力是最旺盛的，而且数字设计的领域也不像今天那么宽泛，总以为通过自己的努力，能够掌握最全面的能力。于是我不停的买书，把看技术书弄的像看小说那么沉迷；逛各大设计论坛寻找各种资料，像海绵一样疯狂的吸收着知识。除此之外，参加相关社团，尽量寻找一些实践的机会对提高自身的能力也很有帮助。

正式入行后从设计助理做起：Banner、Key Visual、Flash Intro、Minisite整站一步一步做上来。那时公司正经历了一次大失血，我一到公司就得作为主力顶上一线。这可以算是一种不幸，也可以算是一种运气。不幸的是没有前辈可以学习借鉴，一切只能靠自己。运气是可以有机会快速上位，只要能够表现出足够的实力。在拥有成熟的人员架构的公司里，这是可遇不可求的好机会。于是在这段时间里，我很努力的加班，很苦，但是成长很快。两年下来我的Flash技能就磨练的相当纯熟了。不管是汽车类需要的大气蓬勃、运动类的活力动感、还是化妆品类的婉约唯美，抑或是消费电子的高科技感觉。我都在不断的实践中把握到了制作商业动画的精髓——只能意会的Motion感觉。这点对我后来的转型很有帮助。

每个互动新鲜人都是从低端做起的，好的机遇固然很重要。但是要知道：机会只留给有准备的人。学生时代的积累为我的快速成长奠定好了基石，但真正强大的推力在于自身不断进取的态度。就拿很小的banner来说，如果只懂得去抱怨诸多的限制和重复劳动的无趣，那就无法得到成长。我就把这种工作当作提高工作技巧的磨刀石，并要求自己每次制作都去挖掘以前没有尝试过的做法：比如改善切图流程，开发批处理命令等等。

2006年，代表业界顶尖水平的2advanced v4版本（上图）上线后吸引了众多的目光，一时间论坛里到处都是人在问那个水面是咋做的——都被视频给震撼了。在接下来的一段时间，Flash动画慢慢的就不那么流行了：视频的表现力实在太抢眼了，以至于Flash的那些效果显得非常单薄。2advaced流也渐渐失去了优势，各家新生的工作室表现出了百家争鸣的强劲势头。

于是我又顺应潮流的开始研究后期、学剪辑、玩插件、玩特效。还记得那次我钻研数日，终于也能做出那一片波光粼粼的水面效果时的那种幸福感。然而视频特效比起Flash毕竟更有难度，我也摸索了很长的一段时间。没有人能交流，只能靠自己！通过收集大量的短片来学习老外的制作手法，一边实践一边总结。

但是虽然国外的趋势如此，国内还是照样处于滞后状态的。所以那期间的工作是没什么机会做很完整的片子。为了磨练视频技能，我在我经手的项目上尽量都做了一些视频特效。主要是做一些光线、粒子等效果，用于配合Intro动画，又或者是用来丰富网站的细节等等。只有通过实战，才能最快速的掌握技能。两年期间，我又把AE、PR啃下来了。2007年的那条Showreel就是对这段时期工作的一个总结。

流行趋势永不会停止，2006年以后新锐网站上出现的已经不是一些简单的视觉特效了。取而代之的是更加复杂的三维动画，甚至已经出现实拍结合特效的大作。比如2007的FWA年度网站Get the Milk。

线上网站的制作整合CG/传统广告的制作已经渐渐成为欧美优秀作品的主旋律。国外的互动工作室或吸纳视频领域的优秀人才，或与原先这一领域的其他公司进行合作。甚至有些国外的具有前瞻性的传统制作公司反过来成立互动部门来应对日益增长的制作需求。

我越来越有鞭长莫及之叹：一个人是没办法掌握所有知识的，传统拍摄、仿真三维、电影级别的VFX等等领域已经远远超出了我的知识范围。是时候转变为与更多的外部团队进行项目合作了。随着业务的转变，公司越来越多的项目需要CG，于是便指派我转做Motion导演。项目执行的部分大都外发给动画公司，我主要来负责沟通与督导的工作。

于是在这段时期里，我就疯狂恶补一些三维软件（主要是Maya）的知识。此外还慢慢建立起了另外一套知识体系：CG、摄影、Motion Graphics、VFX……，这些东西对理科生的我而言都是陌生的事物。为了提升自己的眼界，我收集了各大特效公司、图形工作室的作品来充实我的视频库。这个习惯一直保留到了今天。目前在我的库里收集的视频已经超过7000多条，并且都有很好的分类和整理。一点也不比一般的视频制作公司的资料库来得差。在公司里要找参考片来找我总是最快的选择:)

做Flash时期积累的动画经验很快发挥了作用，在学习完一些三维领域的基本知识以后，我没有花很大力气就掌握了把控CG动画节奏的能力。在CG制作流程的学习上，由于没有环境，我主要靠的是国外专业动画公司的一些幕后制作（Making-of）的资料（下图）

这点可以说是快速提高技术与流程的运用能力的方法，当然靠自己的融会贯通也很重要。要做到一点即明的境界，需要有很深的积累。这是作为CG导演的基本能力之一。另一方面，要是遇到难以沟通的效果或者镜头，也需要靠自己动手制作。也就是说：优秀的CG导演，除了要有很好的专业视界和知识以外，也要有很强的专业能力。国外很多CG/Motion导演，本身就是制作的高手。只有更全面的掌握这个行业里所需的技能，才能很好的与合作伙伴们对接，帮助大家在执行项目的过程中沟通更加顺畅。再通过与供应商的几次合作实践下来，我也终于能够对整套CG制作的流程驾轻就熟。

虽然这段时期我淡出了互动项目的制作，但我心里明白：在CG这个专业领域，国外起步比我们早得多，有太多太多软的硬的积累和沉淀。技术上的落后在短时期内还难以逾越。而我本身最喜欢的还是能够不断创新的表现形式。视频特效也好，CG也好，对我而言只不过是数字设计领域里的浓妆艳抹的一笔修饰。不管刚刚出现在网络上的时候多么的新鲜亮丽，随着时代进步，也要渐渐沦为普通的一部分。

2007年后，互动网站设计趋势一方面朝着CG大制作的方向发展；另一方面，Flash 3D技术也在迅速的崛起。2008年的动物园网站则彻底引爆了行业内对Flash 3D的激情。人们开始诟病大量的所谓CG视频大作网站只是徒有一身华丽的外衣，却违背了互动网站的精髓。国外的优秀工作室纷纷开始挖掘Flash 3D的潜力，大量的3D网站开始井喷。

久违了的互动感觉在向我召唤，我为此感到血液沸腾。在主要工作重心仍在CG领域的同时，我也对这一技术投入了相当大的精力。

就像当初刚刚开始流行视频效果一样，我们还是没有太多机会来做大型的应用。一开始只能先尝试做一些Key Visual或者小的效果来丰富网站细节：

另一方面，我也自发做一些实验性的项目来磨练技能：

2009年以后，国内的网站才开始陆续流行做3D效果。我也在那时和朋友合作了第一个全Flash 3D的网站：Ford购车魔方（已下线）。同时在我的带动下，几个ES的项目也都用上了PV3D开发的效果：B-Class，E-Class……。从此我的工作重心开始慢慢回到互动设计/开发。

Flash 3D的这股热潮已经一直延续到了今天，只是在技术上已经有了很大的提升，而且越来越多的与CG领域的技术相整合，呈现出了更丰富的表现形式。很庆幸自己有过几年做CG的经验，在这一波的技术革新中还没有什么能难倒我的。关于这方面的一些心得放到下一篇文章中再分享。

随着Flash播放器性能的升级，很多原本在传统编程领域的优秀类库都被移植过来。2008的年底出现的Flash Augmented Reality（AR）在Flash 3D领域之外又开启了新一轮的技术创新高潮。

AR的表现力是那么的独特新颖，以至于敢于尝鲜乐于尝鲜的数字广告行业第一时间把它运用到了商业领域：GE-Smart Grid。

我同样也开始进行这一方面的研究，并在2009年5月份把它用在我自己的终身大事项目上。这也算是集我所有能力于一身的大成之作。一段时间内，同事向别人介绍AR概念的时候都拿我的求婚举例。

随后Pixel Bender、Alchemy等技术逐渐成熟，更进一步提升了Flash的能力。既CG领域之后，传统编程领域的知识也开始整合进数字设计的范畴，从而向我们敞开了无数新的可能性。

2010年以后，移动互联网平台的飞速发展吸引了众人的眼球。Flash技术的领地正不断被HTML5为代表的新技术所侵蚀。我在那些正在发生的事一文中谈到了这种变革。我们的数字设计、互动概念都在经历着不可逆转的蜕变。但是这就是这个行业的魅力，永恒不变的只有改变。要站在行业的尖端，只有保持不断的自我更新。

回到职业规划上来说，以上我回顾了designer、director、developer三个阶段的工作经历。而现在，我的职业方向则比较符合Creative Technologist的定义：用技术做创意的人。在数字时代，有些东西文案和美指永远无法理解，这部分的缺失需要有人来补足。所以数字广告公司不仅需要技术人才，而且要用好技术人才，让他们也能够自由的发挥创意。比如AKQA获Cannes全场大奖的Fiat Eco Drive就是由技术人员从数据中得到的灵感。这足以说明技术人员也可以做出令人赞叹的优秀创意。在职业的金字塔上，这三种人才都有均等的机会能够晋升创意总监的职位。这应该成为数字广告的发展方向。

而反过来说，技术背景的人才也需要认识到：做创意，是对广告行业从业者的基本要求。技术之于我们，等同于文案的笔杆子，美术的画笔，不过只是工具而已。不要痴迷于工具，而是要用工具来创造价值。

很多从技术领域转过来的人不理解创意，甚至害怕做创意。我也是如此。出于对传统广告行业的陌生和自己理工科的背景，我曾经一直对创意怀有比较敬畏的态度。直到慢慢的发现生活就是创意的道理。特别是数字时代的创意界限更加模糊，仿佛随时隐藏在我们的数字生活之中，等待灵感的捕捉一样。比如我在做《Smart怎么玩抢车位》这个创意的时候，就没有觉得难产，而是感觉手到擒来一般的轻松自然。

希望本文对有志于互动广告/设计行业的新人/旧人有一定的帮助。特别是想成为Creative Technologist的朋友，要记得：全面的专业知识；专注的学习能力；还要有分享的精神和推翻一切重来的勇气。因为我们天生就是革命者。

Related posts

• Two AR Projects (6)
• Project – Piombo (2)
• Project – Mercedes-Benz SUV Family Web Special (0)
• Project – Mercedes-Benz StarElite Experience Website (1)
• Project – Mercedes-Benz E-Class Web Special 2009 (3)

前段时间帮优库做的两个AR项目：

 
Fabia晶锐——爱的新年，爱的祝福

车的模型请朋友做的，我用Cinema 4D搭建了场景。由于客户要求草坪上的字要用三维来表现，所以整体面数有点多了，慢的电脑可能跑不动。

 
露得清Wave动感体验

主要创意是表现在三维人脸上使用产品的前后对比效果。制作上则是制作两张人脸贴图。通过鼠标映射到贴图的UV位置来画遮罩。此外还加上了喷雾的位图效果。

Related posts

• Making of AR Proposal (26)
• Best of Kevin Cao 2009 (5)
• AR Proposal (10)
• Project – Piombo (2)
• Project – Mercedes-Benz E-Class L (1)

完成以上设置以后，你也能感受到FDT优秀的代码编写环境的魅力了。接下来你还可以学习使用代码模板、整合SVN或GIT、设置你自己的配色方案等等，进一步打造属于你自己的开发环境。Enjoy Coding!

关于乱码问题：

将as保存为utf-8编码是一个好的做法。使用教程里提供的方法能够解决大部分的乱码问题。但不是最完美的，唯一会出现乱码的情况是编译时的报错（注意，运行时的输出是正常的）。好在FDT的代码检查能够帮我们预防大部分能造成编译错误的问题。

如果你需要编译时不产生乱码，那么删除教程中提到到用于设定编码的两行设置。这样你的FDT默认的编码就是你的系统编码（中文一般为GBK）。问题是这么做在运行时的输出会有乱码。怎么取舍就要你自己来决定吧，如果你有完美的方法，请留言告诉我吧:)

Related posts

• Use .bat to Switch Flash Player (0)
• PV3D Culling & Clipping (7)
• Papervision 3D + 3D/Post Software Workflow (2)
• Interacting with Papervision 3D (0)
• Better Debugging Flash Website (10)

1.开发Flash网站就应该用网页（而不是swf文件）来进行测试。只需要在FDT的Run Configrations里面按照下图进行设置，就能在项目编译好之后自动打开浏览器来测试（请设置为Firefox，flash插件为debug版本，后面你就知道为什么了）。

2.如果是用debug模式运行，FDT的控制台应该就能接收到Flash传递出来的各种信息了。这里有使用FDT来debug的详细教程，我就不复述了。但即使不用debug模式，我们也可以得到trace信息的，只要我们祭出这两件两件法宝：Firebug和Flashbug。Firebug是网页开发者必备的插件，功能非常强大。而Flashbug是Firebug的扩展，专门负责输出Flash文件的trace信息。我们来看看这两个插件工作中的截图：

3.除了简单的输出信息以外，我们还有更专业的调试工具De MonsterDebugger。如果你和我们一样使用Gaia Framework来构建网站的话，其实你已经用上这个方便的工具了。只要把代码中的trace()换成GaiaDebug.log()，你就能在De MonsterDebugger的窗口中看到更为详尽的信息。

除此之外，De MonsterDebugger还有个非常棒的资源监视器：帧频、内存占用情况一目了然，你还能看到用户操作对整个程序执行时间造成的影响。我们在开发Mercedes-Benz Autoshow 2010 Web Special的过程中就是通过它来排查内存泄漏的问题。

4.接下来让我们更进一步：是否怀念Flash IDE中提供的模拟下载功能？以前我们测试loading都靠要它。现在用FDT作为主要开发工具，我们有了更好的替代方法。首先需要搭建一个本地的服务器环境。我用的是xampp，很简单易用的一个组合程序包。装好之后你的电脑就有Apache、MySql等服务器环境（如下图）。开启Apache服务后，就可以访问http://localhost或者http://127.0.0.1。

如果一切正常，那么接下来你就可以复制项目文件去xampp安装目录下的htdocs准备测试了。

5.虽然现在你有了一个服务器环境，但是访问本地网站的速度实在太快，所以在正式开始前，你还需要安装一个Firefox插件：Firefox Throttle。这是一个限速插件，通过它你可以任意选择想要模拟的带宽速度：

还要在第二个选项页勾选限制本地连接的速度：

6.到此我们的Flash Website Debug环境就要大功告成了。最后还要记得每次测试以后都要清空缓存。推荐装一个Cache Status扩展，能够进一步简化这个操作。

总结：在真实的网络测试环境下，我们可以去分析Firebug中输出的各项信息，这对批量加载、队列加载等复杂loading逻辑的debug非常有用。此外我们还可以很方便地测试浏览器的前进后退等deeplinking相关功能。当然，测试与js之间的交互传值控制也完全没有问题。

如果你也有调试方面的好方法，欢迎留言探讨。下载文中提到的软件/插件：

• Firebug
• Flashbug
• Firefox Throttle
• Cache Status
• De MonsterDebugger
• xampp

Related posts

• Workflow – RobotGaiaAnt！ (19)
• Workflow – Patterns (0)
• Use .bat to Switch Flash Player (0)
• PV3D Culling & Clipping (7)
• Project – Mercedes-Benz Autoshow 2010 Web Special (0)

在Mac下，有wspluginswitcher可以实现这个功能。在Windows下，可以安装sephiroth开发的Firefox插件Flash Switcher。我这里介绍另一种办法：使用批处理来切换。

首先去这里下载好release和debug两个版本的安装文件（plug-in版本，使用IE的请用active-x）。关闭所有浏览器，安装release版。装好以后进入以下目录：

32bit：C:\Windows\System32\Macromed\Flash\

64bit：C:\Windows\SysWOW64\Macromed\Flash\

该目录下的NPSWF32.dll就是我们要找的Flash插件。把这个文件复制到别的地方（比如C:\players）。现在再安装一次Debug版，可以看到NPSWF32.dll的文件大小发生了改变，这个就是Debug版的插件了。

现在我们有了两个版本的插件，接下来就是写批处理bat文件的工作。这也非常简单，一句copy指令就可以了（请根据自己保存的目录来调整）：

切换为Debug

copy C:\players\debug\NPSWF32.dll C:\Windows\SysWOW64\Macromed\Flash\

切换为Release

copy C:\players\release\NPSWF32.dll C:\Windows\SysWOW64\Macromed\Flash\

保存两个bat文件到你们随手的地方。下次要切换版本的时候只要记得关闭浏览器，再双击，搞定。

以上方法还可以扩展到切换不同的播放器版本上，自己试试看吧:)

Related posts

• Better Debugging Flash Website (10)
• PV3D Culling & Clipping (7)
• Papervision 3D + 3D/Post Software Workflow (2)
• Interacting with Papervision 3D (0)
• Flash视频教学网站 (1)

2010奔驰车展现场直击，超过一百多种不同的视角，带你领略奔驰的独特魅力。

Title : Mercedes-Benz Autoshow 2010 Web Special
Client : Mercedes-Benz China
Agency : Energy Source
Date : 2010.4.23

Art & Design : Tina’s Team
Motion & Flash & Develop : ES Guru Team
Integrate : ES Tech Team
3D : Bitone

Related posts

• Project – Mercedes-Benz SUV Family Web Special (0)
• Project – Mercedes-Benz StarElite Experience Website (1)
• Project – Mercedes-Benz E-Class Web Special (0)
• Workflow – Further Thought (2)
• Project – 奔驰S级轿车体验网站 (6)

源代码等项目完成后放出下载，请保持关注吧:P

Related posts

• Experiment #05: Rubik’s Cube (29)
• Experiment #03: Four Cameras Viewer (0)
• Twisted Arrow (2)
• Showreel 2007 (10)
• RubiksCube’s Interactive Material Issue (0)

但是如果你需要更加不规则的效果，则要手动的去把多边形进行切分。以下的4个插件能帮助你简化这个过程。

Xplode (需翻墙)is a new, low-cost plugin that breaks geometry into pieces. (price: 12 euro)

Xbreaker is a free plugin that works with primitives, NURBS objects, splines and polygons.

GeoTools is a solution by professional developer Remotion to fracture and break geometry. (price: 39 euro)

Destruction - Two Greyscale Gorilla tutorials about how to shatter objects with the new free plugin from Adam Swaab.

via Maxon April Newsletter

Related posts

• Twisted Arrow (2)
• Q&A: Why Cinema 4D？ (2)
• Papervision 3D + 3D/Post Software Workflow (2)
• MG 6 Price Announcement Video (2)
• Making of AR Proposal (26)

这个开发框架的建立来源于Jesse Warden的这篇文章。通过它让我看到了Gaia与Robotlegs相结合的可能性。一般的Agency/Studio网站用Gaia框架已经足够了。但是引入MVC模式能够让开发架构更为清晰，方便进行更复杂的大型团队开发。随后再引入AS3 Signals基本是必然的，因为这个信号机制比Flash自带的Event好得多，就算不用这套框架你也应该尝试一下。

问题主要集中在于Gaia Page的职责划分问题：Page应该是MVC中的那个角色？或者Page甚至应该是一个完整的MVC模块？

如果说按模块化开发的结构来考虑，每一个Page可以看作一个独立的模块。也就是说每一个Page都应该有一个独立的Module Context。但是很多情况下我们所做的网站开发没有那么大的复杂度。如果遵照这种划分思想，只会造成无谓的类增加，凭空增加了维护的难度。所以权衡之下，我不推荐这种做法。有兴趣的朋友可以看一下Robotlegs模块化开发的扩展。

于是我们回到只有一个Main Context的情况下来考虑。在这里，Page可以是一个View（视图），也可以是一个Mediator（中介）。

Jesse Warden的文章中使用了前者，通过IPage接口的映射规则来启动Robotlegs自动中介的功能。

//当pages.AboutPage的实例被添加到场景上的时候建立一个AboutMediator作为其中介
mediatorMap.mapView("pages.AboutPage", AboutMediator, IAboutPage);

问题是使用这种中介机制，Page作为视图本身不应该处理事件。所以Gaia模板中的onTransitionIn, onTransitionOut和onDeeplink都成了摆设，这些事件应当被转发到对应的中介中去做处理。基于这种方式必须：

• 修改简化Gaia默认的Page模板。
• 建立一个扩展的PageMediator作为Page中介的基类，监听Page的几个默认事件。

后来我又尝试了第二种方向：把Page这一层直接作为中介，把真正的视图类归到views包下面。这种做法抛弃了Robotlegs的自动中介机制（不去继承Mediator），因为Gaia框架会负责加载和实例化Page。

通过Context的viewMap来设定注入规则，使得Page在被加载后能获取到对应的依赖关系（单独编译Page时要保留metadata的原因）。

//当属于pages包内的类的实例被添加到场景上的时候进行依赖注入
viewMap.mapPackage("pages");

同时，Page还要负责实例化真正的视图类（View）。

view = new AboutView();
view.init();
addChild(view);

这种做法让Robotlegs的自动中介功能成了摆设，而且中介是一个可视对象的子类也有点不符合逻辑。

综合比较下来，我还是选择了把Page当作中介的方式，手动去实例化视图。这种做法在不太复杂的开发中能够减少类的数量，相对而言比较符合我原先的开发习惯的。

我们再来看看Robotlegs的注入功能是如何实现？答案是通过监听ContextView的Event.ADDED_TO_STAGE事件，Robotlegs会判断是否为加到主场景上的每个实例进行依赖注入或者做中介映射。这点也是依赖注入框架被批判最多的地方，大量无意义的监听会消耗程序性能。特别在游戏开发等对性能需求严苛的环境下，这种浪费是致命的。

这点也是我没有采用Robotlegs自动映射中介功能的原因之一。由于我的Page中介不依赖于Robotlegs，所以可以很方便的关掉这种监听带来的性能损耗。具体做法是：只需当Page被加载的时候，打开监听，由Robotlegs完成注入；当Page加载完毕，关闭监听。

// MainMediator.as
override public function onRegister() : void
{
	Gaia.api.beforePreload(enableViewMap);
	Gaia.api.afterPreload(disableViewMap);
}
 
private function enableViewMap(event : GaiaEvent) : void
{
	viewMap.enabled = true;
}
 
private function disableViewMap(event : GaiaEvent) : void
{
	viewMap.enabled = false;
}

当然更适用于普遍情况的解决方案应该是：只有当需要被注入的对象实例化时，由一定的机制来通知系统进行注入的操作。关于这种机制的实现，有兴趣的朋友可以看看eidiot的LazyMediator。

我们再来看看信号机制带来的改进。

首先要在Robotlegs中使用Signals，需要CommandSignal或者SignalExecutorMap。

Joel Hooks的这篇文章提供了一个示例。通过以下代码把信号映射为对应的命令：

signalCommandMap.mapSignalClass(AddFoodItemToOrder, AddFoodItemToOrderCommand);

在中介类中注入信号，就可以使用它去触发对应的命令了：

[Inject]
public var addItem : AddFoodItemToOrder; // 注入
...
addItem.dipatch(itemType) // 触发

这种方式非常直观地表现了中介具体关心哪一种信号类型，但是相应地需要对每一个信号都去建立一个类。另一种做法是使用统一的SignalBus静态类来管理信号，比如：

package
{
public class SignalBus
	{
		// 定义一个Signal常量
		public const addFoodItemToOrder : Signal = new Signal(FoodType);
	}
}

映射命令：

// signalBus是SignalBus类的实例
signalCommandMap.mapSignalClass(signalBus.addFoodItemToOrder, AddFoodItemToOrderCommand);

在中介类中：

[Inject]
public var signalBus : SignalBus; // 注入SignalBus实例
...
signalBus.addFoodItemToOrder.dipatch(itemType) // 触发

这样做的好处是可以少建立一些信号类，在我的开发模板中采用的是这种做法。你也可以查看使用这种方式的一个例子。

在开发框架之外，用Ant来进行一些批处理的工作也是这套工作流的亮点之一。如果你对Ant还不是很了解，建议你抽出点时间学习一下，对提高工作效率很有帮助：

• MY WORKFLOW WITH ANT AND FDT
• FDT and ANT | A User’s Guide
• FDT 3: You’re Gonna Need Some Ant With That Sauce

写在最后：整理完这套框架以后，我的开发思路清晰了很多。通过不同模块的划分定义，在开发团队中，可以有人专门去研究表现层交互效果，有人专门来处理数据的处理。有了框架以后，再忘掉框架，深入到不同层面的细节，去用技术实现自己的创意吧！

Related posts

• Workflow – Patterns (0)
• Project – Mercedes-Benz Autoshow 2010 Web Special (0)
• Design Pattern #2 – Singleton, Registry & Dependency Injection (2)
• Workflow – RobotGaiaAnt！ (19)
• Flash汉字嵌入助手 (6)

• Flash Design + Develop Workflow
• Workflow – RobotGaiaAnt！

Design Patterns（设计模式），对从事Flash开发的人员相对而言是比较难的知识点。从早期的ActionScript脚本一路走过来的Flash工作者很少有系统地学过成熟的OOP开发思想。包括我自己在内也一直都是半知半解，所以太专业的理论我也说不上，就尽可能的挑些容易理解的来说明一下，希望能够对进阶的开发者有所帮助。

通过RobotGaiaAnt快速构建出的网站结构已经包含了基本的网站开发模板（src目录下），在进行开发之前你需要了解以下几点：

1. 这个结构是基于Gaia+Robotlegs+AS3 Signals（lib目录下）建立的，你需要熟悉这些API。
2. 代码按照MVCS模式来进行组织。如果你还不是很理解这种设计模式，可以翻看我之前写的这篇和这篇。对Robotlegs的机制还不是很了解的，推荐看看eidiot的这个文档，还有他翻译的中文最佳实践。
3. 然后你需要了解的是每个部分的职责分别是什么，不同的代码应该写在什么模块中。具体的指导做法就下载我这份文档学习一下吧。

Related posts

• Workflow – Further Thought (2)
• Workflow – RobotGaiaAnt！ (19)
• Project – Mercedes-Benz Autoshow 2010 Web Special (0)
• Flash Design + Develop Workflow (0)
• Design Pattern #2 – Singleton, Registry & Dependency Injection (2)