解密《英雄传奇》动态界面

　　我们先来看几个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同学设计的位图，为了不让效果有太大的偏差，果断放弃了矢量逐帧绘制而选择了用遮罩动画来制作。(虽然不用逐帧绘制墨迹，但是依然要逐帧绘制遮罩层。苦逼啊~!)

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

　　右键点击左边的图层名称，选择“遮罩层”会自动与下一个关联起来，遮罩层其实并不是遮挡住所画的区域。相反，是展示出你所画的区域。

　　“上甲”文字的出现则比较简单，前面又讲到，调整透明度，放大，设置“模糊”滤镜等等，然后创建“传统补间”

　　为了能更好的表现“上甲”文字砸下来的力量，在文字落下的那一帧，给舞台上所有的元件都插入了几帧关键帧来制作震动效果，位移一点点，模糊一点点。

(6)、

　　“好友排名”的出现步骤与“评级”差不多，也是墨迹底先出现，玩家排名依次出现。

　　绘制前三个阶段的遮罩(绿色线框区域)第三帧开始至最后一帧中间插入“形状补间”(注)(当然也可以存为元件制作“传统补间”)

　　底下的墨迹可以存为元件，调小透明度，制作一个由浅入深的“传统补间”动画。

　　玩家排名头像只显示六个，六个分别放置不同的同层，结合界面整个的运动规律，依次由右向左淡入。

　　注：形状补间：在Flash的时间轴上，在一个时间点(关键帧)绘制一个形状，然后在另一个时间点(关键帧)更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。

　　形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变形的灵活性介于逐帧动画和动作补间动画二者之间，使用的元素多为用鼠标或压感笔绘制出的形状，如果使用图形元件、按钮、文字，则必先Ctrl+B“打散”再变形。

　　(时间轴第一帧创建一个图形圆形)

　　(时间轴第15帧插入空白关键帧创建图形方形，并换个颜色)

　　(时间轴中间帧位置点击鼠标邮件选择“创建补间形状”，就产生了一段15帧约0.3秒的从蓝色的圆变为绿色的方形的动画)

(7)、

　　剩下的两个大单元也是依次由右向左淡入。传统补间动画。

(8)、

　　当最后几个按钮和倒计时出现的时候，就是接近尾声的时候了。

　　要强调的几个地方是，细节决定成败，不要忽略一些小地方的动画。

　　比如：

　　框体单元出现时红穗的动画细节;

　　框体出现后红穗微微晃动的动画细节;

　　结合界面氛围，在背景上添加的火星飞舞的动画。

　　火星飞舞使用的是元件嵌套动画，用引导动画做好一个粒子飞舞的轨迹，重复使用，做出多个粒子同时飞舞的效果。

　　既然是演示动画，那么最后当然不要忘了添加转场，由打牌的界面转为结算界面，只是用了黑色的遮罩作为转场。

　　注：FlashCS4以后新添加补间动画：不需要在时间轴上再创建关键帧，应该先右键创建补间动画，在时间轴上移至最后帧，直接移动元件至目标位置，就会产生轨迹。

　　但是，一般做Flash项目还是用传统补间比较多，更容易把控，而且，传统补间比新补间动画产生的Ksize要小，放在网页里更容易加载，所以我个人比较少使用这种补间。

　　小结：

　　Flash的功能可能越来越复杂，如何系统地掌握这项技术就显得非常重要。系统地掌握一门技术有两个好处：一个是对目前的功能有清晰的认识;第二，就是能够从容应对更复杂的知识。了解这些对于一个初入门的动画设计者是非常有意义的，正是将这些功能逻辑的整理出来，有利于用户建立正确的、逻辑的知识体系，而不是再在黑夜里徘徊了。

注：更多精彩教程请关注三联网页设计教程 栏目，