我们先来看几个Flash动画效果

　　熔炼

　　英雄传奇-辅印强化

　　英雄传奇-宝具镶嵌

　　英雄传奇-组队结算界面

　　Flash现在在互联网行业中的应用极为广泛，音乐、传媒、广告、游戏，前三项多言，我们今天的重点是解密Flash动画在游戏中的应用。

　　上面我们看到的是《英雄传奇》游戏中的界面动画。看上去会觉得效果很多，很复杂，但是万变不离其宗，华丽的外表下隐藏的其实还是简简单单的东西，我们来先从Flash动画的基本实现方式来分析下。

　　Flash动画可分解为遮罩动画、补间动画、逐帧动画三个大类，其中补间动画又分为形状补间、传统补间以及flash CS4以后加入的补间动画三种，后面再实例解密过程中逐步为您说明这三种补间的区别。网页上与游戏中的各种flash动画效果就是这三个大类组合出来的千变万化的效果。

　　如何把这三大类在实际工作中应用起来，结合起来，做出很酷很炫的效果?我们进一步通过这个组队结算界面的动画制作流程来为您解密。

　　使UI同学设计的资源生动起来，鲜活起来，就是我们要做的工作了，做好这个工作还得分几步走。Let’s Go!

　　1、沟通阶段：

　　拿到UI同学出的UI设计稿，与UI同学交流他在设计时脑海中期待的动画效果，我也会给出我的动画建议，达成共识后，请UI同学把需要独立出来的部分进行切图。再咨询交互同学的意见，每个单元出现的先后顺序应该是怎样，如有不妥进行调整。

　　2、制作阶段：

(1)

　　确认单元出现的先后顺序

(2)

　　Title图片存为元件后，运用传统补间动画(注)，调整第一帧的大小、Alpha值实现了淡入变大效果。

　　但是，由于Title是UI同学设计的图片，单纯这样的出现不够有带入感，我们可以把该动画图层复制一层。

　　点选中该图层中的元件，在属性中进行对该元件的设置(注意：每一个关键帧都需要进行相应的设置)

　　不同效果的尝试后，“增加”最接近我想要表现的效果，果断的选择了“增加”。

　　在元件属性中增加了模糊的滤镜效果，根数我想表现的效果来调整数值。(注：模糊效果只针对“影片剪辑”的元件才有该选项，“图形”元件不具备该属性。)

　　注：传统补间：在时间轴上的不同时间点定好关键帧(每个关键帧都必须是同一个元件)，之后，在关键帧之间选择“创建传统补间”，动画就形成了。传统补间是针对简单的点对点平移，可以根据元件属性来调整Alpha值，来制作淡入淡出;可以添加元件滤镜效果来制作模糊、外发光等效果;可以给该元件的补间动画添加引导层设置引导线来改变元件的运动轨迹。

　　(以蓝色圆形创建为元件制作的简单位移传统补间动画)

(3)、

　　“英雄成长”单位的框体出现操作与Title类似，也是传统补间淡入效果，为了表现速度感，在第一帧增加了“模糊”滤镜效果。

　　但是，传统补间动画只是匀速位移，如果我想表现的效果是运动初始很快，越接近运动结束越慢的效果该如何达到?不断的增加关键帧来调试么?这样很辛苦啊!

　　当你的鼠标指针点击在时间轴的补间上时，留意下属性栏。

　　会发现一个叫“缓动”的家伙，这个家伙就是负责解决这个问题的。最大数值为100，最小数值为-100，数值越大，运动初始的速度越快后面越来越慢，数值越小，运动初始的速度越慢后面越来越快。很上流有木有!

(4)、

　　接下来出现的是“得分”，得分出现的方式与之前的操作一样，不详细描述，我们详细说下分数变化的动画。这是一个嵌套动画，时间轴上的淡出是一个“影片剪辑”元件，在这个元件中，其实是内有乾坤。

　　好吧，写的夸张了些，其实就是一个简单的逐帧动画，0-9数字每一帧一个，上下分别做些位置上的变动，添加了“模糊”滤镜。播放起来就是一个不断滚动的分数变化效果。

　　如果这个分数有4位数，我又不想每一位上的数字都一个一个去调，有没有什么偷懒，又不影响效果的办法?

　　首先，我们选中数字元件，在属性栏中把属性设置为图形。

　　接下来我们新建三个图层，把该原件分别复制到每一个图层，调整好相对应位置。

　　这样就可以了么?太天真了!这个时候导出动画来看发现分数是不会动的。

　　图形元件的特性与影片剪辑不同，他需要在元件外的时间轴上插入等同于元件内动画帧数的帧，才能完整的呈现出动画内容。

　　就是这样，但是这样又会有新的问题，四个数字变化起来是一模一样的，完全不是我想要的效果啊。

　　点选中一个元件，看属性栏，旁边会有一个循环选项，下面还有个数字，改改数字试试?试一试就会发现，原来这个数字是控制从哪一帧开始播放这个元件内的动画。

　　这样就得到一个我们还算满意的效果。

(5)、

　　评级动画分为了两个部分：先是这个墨迹像被一只笔画出来，接着“上甲”字样落下，重重的砸在上面。结合了“遮罩动画”与“传统补间动画”

　　先来看下这个墨迹是怎样制作出来的吧。

　　由于墨迹也是UI同学设计的位图，为了不让效果有太大的偏差，果断放弃了矢量逐帧绘制而选择了用遮罩动画来制作。(虽然不用逐帧绘制墨迹，但是依然要逐帧绘制遮罩层。苦逼啊~!)

　　这也算是一个小逐帧动画吧，为了尽可能的表现的像墨迹，所以遮罩层相对画的还是比较细致。

　　右键点击左边的