[新闻资讯] [业界动态] Flash Catalyst 最佳实践技巧 Flash Catalyst, Best Practice

Flameshark

Adobe Flash Catalyst是一个新的专业交互设计工具，可便捷地创建用户界面和交互功能而无需编写代码。

通常作为团队的一员你会和开发者一起工作，你需要和开发者共享Flash Catalyst工程文件，以便他们在你设计好的界面上实现程序功能。

如何将你在Illustrator里面的设计移植到Flash Catalyst里直接影响Flash Catalyst工作的结构，反过来对产品的质量和友好度也有影响。

在这篇文章时，我会提供一些提示和参考来帮助你更好地把Illustrator的作品移植到Flash Catalyst中，我还会特别提醒你使用一些最佳技巧来达到最少的重复工作，并且减少将工作迁到Flash Builder以后的重构工作。

设计Illustrator文件结构
你要合理地设计Illustrator文件结构，使得不同状态、功能的部分布在不同的层和子层里面。
图1.图层面板，Illustrator(左),Flash Catalyst(右)



Illustrator里面的层、子层和组会被移植到Flash Catalyst中，设计好逻辑结构并给层命好有意义的名称会对后面在Flash Catalyst里面的工作有很大帮助。这很重要，因为你将设计转换成组件时需要根据不同的状态来指定层和组。


在一个面板上设计
Flash Catalyst不支持多面板，所以你最好在一个面板上用不同的层来区分不同状态。



从图片2可以看到，背景和前景分布在不同的图层，其它的层分别代表不同的状态。

给所有的东西命名
就像给层和组命名一样，给Illustrator文件里的每个图像命名也是很重要的。可以考虑将以后会被转换成Button组件的对象取名为Button_name,类似还有Text_name,TextInput_name,Custom_name。其它的组件也是一样的。

并没有正式的推荐命名方案，不过你可以工程交互设计师和开发者一起做好协定，以此避免重复工作。

不要链接到外部图像
在团队里工作，你需要将Illustrator文件交给交互设计师在Flash Catalyst继续工作。将文件放到Illustrator内部而不是外部，你只需要传一个Illustrator文件给他们可以保证他们有所有的素材而继续工作，图像和元件会在Flash Catalyst的库面板里面找到。

将图片导入Illustrator后，记得使用Object->Rasterize选项根据屏幕分辨率来优化图像。在这个对话框里，选择72 DPI的屏幕效果,通常将背景设为透明。

标记复制组件
在Illustrator里面经常用到重复的按钮、输入框以及其它元素来展现设计效果。在Flash Catalyst里面你要将这些重复的元素定义为一个单独的组件,相同的部分共用一个组件。

与用肉眼来区分哪些元素是重复使用的相比，最好还是在Illustrator里面标记好哪些元素是重复使用的，避免开发人员重复定义。

你可以选择通过命名来区分，例如用"TextInput_Blue"来指明组件的设计而用"_textInput_Blue"来指出它是复制的。或者，你可以像图3那样把复制的元件的透明度调整到40%来告诉开发者这是复制的元件，这样可以告诉开发者，在Flash Catastly里只需定义一个组件即可。




对有滤镜和特效的文字使用“creat outline”

虽然Flash Catalyst对Illustrator文件支持得很好，但你可能发现有滤镜和特效的文字在Flash Catalyst里面的效果和原来的不一样，如图4



这种情况下，你可以使用"creat outline"选项来解决这一问题，不过，一旦这样，文字就不能再编辑了。

你也可以用这个方法来解决小规模的静态文本，这样你就不需要嵌入字体了，标题、Logo也是一样。

不要在Illustrator里面定义组件的所有状态
虽然你可以在Illustrator里面定义组件的所有状态，但是这对Flash Catalyst没有什么用，Flash Catalyst提供了许多编辑文本和图片的选项，如填充、渐变、描边。



你会发现在Illustrator里面设计好作品，转化成Flash Catalyst工程后用状态面板来设置不同状态的属性会更简单。

为数据表单组件定义一个单独的元素
当把一个设计作品转换成数据表单的时候只需指明一个重复元素即可。如果你想把整个数据数据表单放到你的设计里面，你可以定义两个不同部分：单独的元素和包含重复元素的表单。



这样的话，你可以通过包含重复元素的表彰来确定元素之间的对齐方式和间隔，然后再把它们移出工程。



Flash Catalyst

经常使用“保存为副本”
当你逐渐熟悉Flash Catalyst之后，你会发现经常使用"保存为副本"这个功能非常有用。尤其是在你要对工作的主要框架结构动手的时候，比如对图层和组的较大改动、添加新的程序状态、定义过度状态等等。

一旦事情没按你想像的结果发展，你可以快速地恢复到原来的版本，然后尝试其它的方法。

按正确的顺序工作
在将Illustrator转换成Flash Catalyst工程的时候，合理的工作顺序非常重要，你可以按下面的顺序来做，然后根据自己的实际经验进行调整。

1.将所有的设计元素转换成组件。
2.创建能用组件来定义程序的子功能。

3.将一个状态的可见元素命名为一个组。这在为状态间设计过度效果时非常有用，因为你可以对组应用效果而不是单个的元素。



4.创建所有通用组件间的过度并定义组件里涉及到状态变化元素的交互。
5.一次性创建程序状态，对每个状态
   1.定义组件的位置，可见性和外观.
   2.用时间轴指出现有状态和新状态间的过度。
   3.定义涉及到状态改变的元素的交互。

优化图像
导入Illustrator的复杂矢量图像在Flash Player渲染时可能产生性能问题。如果你的工程里有这样的图像，并且在运行时对图像的要求不高，那么你应该用Flash Catalyst里面的"Convert to Optimized Graphic"选项来优化图像。



如果想让Flash Catalyst在导入图像时自动优化图像，你要把你的图像在Illustrator里面定义成元件。

考虑组件重用
在将设计转换成Flash Catalyst工程的时候，经常遇到将Illustrator里面的文本转换成按钮、复选框、单选框的情况。如果你打算在其它地方使用这些组件，记得增加文本域的宽度。



为不同状态取有意义的名字
你最好和你的开发团队协商好不同状态的命名规则，再按规则命名。



无论如何，一个状态的名字应指出用户当前所做的操作、所看的界面，或者其它有意义的东西。

在库里面重命名组件

和状态命名一样，库里面的组件名会在整个工作代码里面经常用到，好的命名对后面的交互设计和程序开发都有相当大的帮助。




用查看代码方式来优化
你不必是一个代码专家，但有些事情你需要注意一下。
首先，你要确保使用的字体是系统自带(如Arial)的或者嵌入到了工程中，如果你在标题或者logo里面使用了非标准字体，你最好回到Illustrator，将这些东西打散。
其次，Illustratro里面导入的包含路径、渐变、描边的长长的代码的图像往往意味着可以在Flash Catalyst里面被优化，在代码里找到组名，然后在设计模式下找到对应组
选择“Convert to optimized graphic”进行优化。

牢记修改只对单独的元素有效
在你对程序或者组件的一个元素进行修改后，你要告诉Flash Catalyst是不是对所有的状态进行相同的更改。如果选择否的话，修改只对当前状态有效。右键选择修改后的元件选择“Make Same in All Other State”可以全部应用修改。




经常在浏览器中预览效果
虽然你可以在Flash Catalyst里面预览效果，但是运行程序在浏览器里面看真实的效果会更好。(File-->Run Project)

yangzhks

还没用过这个呢，去试试

hua397245854

找好的示例呀！