使用Adobe Flash CS6 新功能——帧序列图生成器

 Adobe Flash CS6专业版，介绍了一个新工具，叫做帧序列图生成器。这个特色工具可以方便地将在舞台上或库中的任意元件或导入的图像生成一个序列图。这个序列图由CPU渲染，游戏中需要添加循环动画时使用这个工具生成的序列图，图形显示会变得非常有效率。

     本文会演示如何使用针序列图生成器将一个循环动画转换成序列图，进行高效率的渲染。

Flash是创建交互设计最好的工具之一，可以将动画和交互完美地结合在一起。去年，如果我们要公告一件事什么事，不可否认要通过web技术手段。关于HTML5的消息满天飞，关于Flash的消息却没有多少。我甚至听到有人说HTML5将取代Flash。作为一个动画师，使用Flash超过十年，对Flash非常满意，但是这些问题会让我产生疑问担心Flash的未来？完全不是。没有一个技术能永远火下去，但是Flash现在还存在，至少在比较长的一段时间内不会过时，很明显Adobe也在朝着这个目标努力着。

创建一个动画

在生成序列图之前，需要先创建一个用于生成序列图的动画。我选择的是之前为Starling 框架设计的一个角色，将它做成动画。

这只鸟是为Starling框架构思的角色，使用的工具是Adobe Photoshop，上传到了Adobe Creative Cloud，现在使用Adobe Flash CS6重画。使用Flash的钢笔工具，将每一部分拆分成独立的元件（见下图）。

下面制作翅膀的飞翔动画。双击翅膀元件并且使用逐帧的方式绘制动画，每一个关键帧都包含不同的动作。这是一只右翅膀。

在放置鸟身体的层下，创建新层，复制右翅膀动画元件粘贴到这个新层里。使用水平翻转并摆放对位置，这是鸟的左翅膀。为左翅膀做一个简单的透视效果，选择这个元件，为这个元件设置颜色效果（color effect），让左翅膀颜色稍暗一些，突出身体部分。

然后调节鸟飞翔的动画。要注意两个翅膀上下摆动的同步。

生成序列图

到这里，需要的动画已经完成了，可以使用Flash生成序列图了。首先将鸟飞翔的元件拖拽到场景中，右击出现快捷菜单，选择菜单中的”Generate Sprite Sheet…”项。

还有一个方法是，在库中右击鸟飞翔动画元件，快捷菜单中也有”Generate Sprite Sheet…”项。

选择”Generate Sprite Sheet…”项后会打开它的设置参数面板。

设置“image dimensions”图像尺寸，设置适合这个动画的尺寸。

生成序列图的设置

Image format：图像格式的下拉菜单有PNG 8 bit, PNG 24 bit, PNG 32 bit 和 JPEG 格式可供选择。如果你需要进行最大的优化，那么可以选择带透明通道的PNG 8 bit，这个格式对文件的大小压缩相当大。

Background color：背景颜色：这个选项可以自定义背景颜色。提供了很多示例颜色，可以直接拿来用，或者点击右上角的调色板图标，自己配制需要的颜色。

我将背景颜色设置为黑色，面板中的预览已经更新了设置的背景颜色。

Algorithm计算方法:这里提供了两个可供选项。

Basic：默认设置，最大程度还原动画。图像是按行统一安排计算渲染。

MaxRects:最大压缩。这个设置是将所有的帧最大化地压缩。

在游戏中动态地使用序列图

准备将序列图合并到游戏中，选择Data format数据格式。数据格式为针序列图的每一帧都记录了X值,y值，宽，高和其他信息，这些信息都是可调节的属性参数。开发者使用这些参数可以在使用的任意场合调节改变它们，会产生不同的动画。更强大的是，如果现有的这些参数不能满足你的需要，可以使用JSFL创建一个自己的数据格式，配备更多的你需要的参数。

点击动画预览窗口上方的Preview预览按钮，可以进行效果预览。