Mikel
这是一篇来自Adobe开发者中心的文章，原文链接：http://www.adobe.com/devnet/flashcatalyst/articles/flash_catalyst_best_practices.html
Adobe Flash Catalyst 是个新的专业交互设计工具，使用它，您可以不用写代码，快速的创建应用程序接口，和交互内容。
通常，我们使用Flash Catalyst时，你会觉得工作在整个开发团队的边缘，并且很难将你的Flash Catalyst项目文件与团队的其他成员分享，以便于他们可以继续开发这个项目，或者使用其中你定义的的组件皮肤。
越接近你使用Illustrator设计和构建的艺术原创稿，你的FC项目就越具备冲击力，随之而来的，这种冲击力将会延续到资源和皮肤的质量和有效性上，使得开发者使用这些资源变为可能。
在这篇文章中，我将会提供一些示意和提示以便于你可以更容易地结构化地将设计的资源从Illustrator里移动到 Flash Catalyst里。 我同样会强调一些Flash Catalyst的最佳实践，这将会确保你可以用最少的重构时间来让你的资源可以继续在Flash Builder里开发。
使用Illustrator
注意：这篇文章主要集中在使用Adobe Illustrator做艺术设计之后为Flash Catalyst使用上。 你也可以使用Adobe Photoshop或者Adobe Fireworks来做设计和创作；下面很多提示和说明在这些工具中同样是适用的，虽然我不准备在这里介绍他们的使用方法。
设计好你的Illustrator文件结构
你可以整理好你的Illustrator文件结构，这样可以使应用程序中不同的功能模块区域和用户界面被定义在分开的层和子层中（见图1）。
图1 Illustrator 中的层面板（左）和Flash Catalyst中的层面板（右）。
你可以通过在你在Illustrator中指定逻辑结构和有意义的名字，使在Illustrator 中定义的层，子层，和组在Flash Catalyst中同样有效；在使用Flash Catalyst工作的时候你将会明白这个文件结构的用途。 这很重要，你需要在转换设计稿到组件时选定层和组，以及程序中不同功能区间之间的转换动画。
在单个画板上进行设计
Flash Catalyst不支持多画板设计，所以，比起在不同的画板上表现不同的功能区间和用户界面，使用一个单独的画板，但将不同的区间分布到不同的层里面，会比较好（见图2）。
图2 在Illustrator项目中的层面板定义了一个程序中的五个功能区间，例如背景层和前景层。
在图2中，背景图和前景在程序中保持一致（并且总是显示），每一个其他的顶级层表现了用户可以看到的不同的程序功能区间。
为每个部分都命名
就像给层和组命名一样，为Illustrator 文件中的每个独立图形和元素命名也是很重要的。 你也许会考虑在整个文件中使用共用命名策略，比如用“Button_name”来指定这些图形元件将会在随后转换成元件时，被转换成按 钮，“Text_name”“TextInput_name”“Custom_name”,以此类推。
元素的命名并非一个正式的规范，但是使用命名策略会得到整个互动开发项目中的设计师和工程师的认可，这样会让所有人都知道如何在程序中使用这些组件，从而避免之后可能发生的混乱和返工。
不要链接外部的图片文件
在团队环境中，你很可能需要将你的Illustrator文件交付给一个使用Flash Catalyst工作的互动设计师；不要在Illustrator中链接外部文件，取而代之的是将它们置于Illustrator文件内部，这样你可以通 过单个的文件做转换，并确保随后的设计师能在项目的随后工作中使用全部的资源。 Illustrator 中的图片和其他资源将会显示在Flash Catalyst中的Library面板中。
在你将图片导入进Illustrator之后，你要确定你执行了Object > Rasterize 选项来改善图片的显示效果。 在这个对话框中，为界面浏览选择72 DPI 、typically，你需要将背景设置为透明。
标记副本组件和资源的
在Illustrator中通常需要提取出多态的，重复的按钮，输入文本框，和其他的可视元素，以便于描绘整个程序界面的全景图形设计。 在Flash Catalyst中，你需要为每个美术设计定义一个单独的组件，但是，当是同样的设计的时候，就要避免定义多个组件。
比起来依赖于不重复的元件来做判断，不如考虑在Illustrator文件里为元件标记一个副本，这样你就可以很清楚的知道他们是不需要被重新定义的。
你可以考虑使用一个命名策略，例如用主设计上用“TextInput_Blue”标记这个组件，用“_textInput_Blue”来表示一个副 本。 或者你也可以选择将所有副本组件的alpha值设置为40%（见图3）；这从视觉上表示这个组件不需要被重定义，你可以在Flash Catalyst里用一个库中的实例来置换它。
图3 上方的输入文本框定义了一个在Flash Catalyst中的组件。
使用“create outlines”来为文本添加滤镜和效果
虽然，Flash Catalyst在支持Illustrator文件格式方面做的很出色，但是你会发现，文本的滤镜和效果并没有像你预期的那样被渲染出来。如图4所示。
图4. 原始设计（左）和在导入到Flash Catalyst之后的效果（右）。
在这个例子里，你可以在Illustrator 使用“create outlines”选项解决这个问题，并为文本创建一个矢量的表现。 不过，这意味着，这个文本将变成不可编辑的了。
你可以将这种方法使用在那些你不准备绑定到你程序中的，较小数量的静态文本上，例如，标题，商标等等。
不要在Illustrator中定义所有组件区域
虽然你可以在Illustrator中定义所有的组件，但这没有什么意义，因为Flash Catalyst中同样提供了比较的全面的选项用于编辑文本和图形元件的属性，包括填充，渐变，和描边（见图5）.
图5 即将面世版本的Flash Catalyst中的属性面板。
你会因此发现在Illustrator 设计原稿和随后都可以很方便的做调整，一旦你将一个组件导入到Flash Catalyst中，就可以使用states面板来设置调整每一个区域的可见属性。
为数据列表组件定义一个单独的元素
当将原稿转换为Flash Catalyst中的数据列表组件时，你只需要指定一个单独的重复使用的列表选项。 如果你需要在Illustrator的用户界面中绘制出数据列表的全貌，你可以选择定义两种截然不同的区域：使用在Flash Catalyst中的独立版本，和一个包含了其余项的分散的组。(见图6)
图6. 为数据列表设计的填充项，下面的组表现出这个列表在Illustrator中看起来的样子。
这种方法可以利用组来排列和分隔这些选项在数据列表中的样子，但是最后在随后的开发中将他们移除。
Flash Catalyst
下面的一些点，是讲如何使用Flash Catalyst和你的团队一起工作了。
在基本规范上使用“Save as copy”
当你在Flash Catalyst中使用不同的方式进行过实验，并学习如何更好的使用这个新工具，你会发现使用“Save as copy”选项对频繁的使用是很有价值的。 在着手构建你的主项目结构时，这显得尤为重要，例如对组和层次做重大调整时，或者添加新的功能区间和定义过渡方式时。
如果有什么东西是不能在计划中完全确定的，你可以很快捷的恢复到之前这个文档保存的版本，然后尝试其他方式。
按照正确的顺序进行工作
当你把一个静态的设计原稿从Illustrator文件中导入进一个Flash Catalyst中的动态的富媒体网络应用时，按照正确的逻辑顺序开始工作就变得非常重要了。 你会喜欢这种方式，并在你以往的工作经验基础上适应它的。
- 将所有设计原稿中的东西转换为组件。（使用层面板中的 显示/隐藏 功能，显示程序在某个特定时间程序界面应该显示的东西。）
- 创建一个自定义的，或者通用的组件，来定义一个程序的功能小模块（例如，为程序界面的表单创建一个自定义的组件，或者一个独立的窗口）
- 这个组在功能区域里面下的可见元件被引入到逻辑集合中;这在定义场景过渡时会显得特别有用，你可以成组的设置元素的属性，而不必一个个的去单独设置。（见图8）
- 使用自定义的组件和定义在组件上交互效果来创建过渡动画，将会带来组件区间的变化。
- 在某个时间点创建一个状态，对于每一个状态要注意以下几点:
- 定义组件的位置，可见性，和出现效果。
- 使用时间线来指定新的状态和之前的状态之间的过渡。
- 在一个状态下定义元件的交互行为，这些行为将会触发程序状态的切换
图7 这个表单在 Flash Catalyst中将被转化成一个自定义，或者通用的组件。
图8. 成组的元素，使得通过时间线来操作他们变得更加容易。
使用优化过的图形
从Illustrator中导入过于复杂的矢量图形是一种不必要的开销，而且在Flash Player里渲染这些图形也会造成程序的性能问题。 如果在你的程序界面中，有这样的图形，并不需要运行时在其上做任何相应的改变，那么你可以在Flash Catalyst中使用转换为优化图形选项（见图9）。
图9 在复杂的矢量图形上使用转换为优化图形选项。
如果你想要矢量图形在被导入进Flash Catalyst中时自动被优化转换，你应该在Illustrator的原稿中将其定义为符号。
考虑组件的重用性
当在Flash Catalyst中做组件转换时，通常要为在Illustrator中定义的文本指定尺寸，例如按钮，单选框，和复选框。 如果你计划在别处重复使用这些组件，请确保在组件中延长文本框的尺寸以适应其他标签。（见图10）
图10 调整单选按钮中的文本以适应组件。
定义有意义的状态名称
你在 Flash Catalyst中定义的状态名称，同样被使用在输出的程序代码中，这对于前端的开发团队是相当有价值的，因为这个名字说明了它应该被定义成怎样的组件。（图11）
图11 在Flash Catalyst中使用 Pages/States 面板做状态命名。
在任何情况下，状态名称都应该清楚的诠释用户在程序中那一个功能点上需要处理的事情，正在浏览的页面，或者其他有意义的叙述。
在库中重命名组件
跟状态命名一样，在库中为组件命名是广泛应用在整个程序代码编写和项目构建过程中的。 考虑到与前端开发团队沟通的关系，指定统一的命名规范对从互动设计到开发的过渡很有帮助。（见图12）
图12 TextInputSm和TextInputMd显而易见的表示小码和中码的输入文本组件；而RepeatedItem1和RepeatedItem2表达的就不是那么的清楚了。
使用代码视图来做优化
不，你并不需要是一个资深的程序员，你只需要注意几件事情就可以了。
首先，你要鉴别所有文本框使用的字体都是标准的系统字体（例如Arial），或者是你已经绑定在程序中的字体。（这将会增加程序的体积） 如果你在一些地方使用了非标准的字体，例如，一个标志或一个标题，也许最好返回到Illustrator中把他们转换为图形。
其次，从Illustrator 中导入的资源，其冗长的代码段中包含精确的路径，渐变，描边，这些会使得资源更加生动，在Flash Catalyst里，这些也是可以被优化的。 检查包含代码的组的名称，然后在设计视图中，找到art board上的这个组，选择转化为优化图形。
记住，这个转变仅仅作用在单个状态下
当你在程序中和组件里做完了这个设计转化之后，如果你要你做的改动作用于所有状态，你需要通知Flash Catalyst，如果你不通知，那么这个改变将只会作用于当前的状态。 右键单击要改动的元素，选择“Make Same in All Other States”，在做完改变之后所有状态下的组件就都随之更改了(见图13)；
图13 Make Same in All Other States选项确保任何修改都会被应用到所有的状态中。
在真实的浏览器环境中预览状态切换
虽然，你可以在Flash Catalyst中的时间轴上预览你定义的过渡动画，但将输出结果显示在参数真实的浏览器里无疑是最好的选择。（使用 File > Run Project 来做浏览）
从这里出发，我们还可以做什么
讨论Flash Catalyst和为Flash Catalyst的发展提出好的点子，请访问 Adobe Forums for Flash Catalyst 学习更多 Flash Catalyst知识，到Adobe Labs下载课件和教程。
获得公用许可。
这个工作是受到类似于3.0 Unported许可一样的非商用知识共享许可所认可的。
关于作者
Andrew Shorten是一个Adobe的平台技术传道士，并热衷于改良优化，丰富的基于电脑的用户体验。 Andrew在富士通，为政府，企业客户做过网站，报刊，以及移动设备的用户界面开发。 此后，他在Macromedia，Microsoft和Adobe工作，期间，他作为设计师，开发工程师，网站代理和组织帮助他们实现丰富的，动人和成功 的网站以及左面应用程序。
翻译：RIAMeeting翻译小组 王贺
