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


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

时间: 2024-09-27 10:16:38

解密《英雄传奇》动态界面的相关文章

win7打不开lol英雄联盟登陆界面的七种解决方法

  win7打不开lol英雄联盟登陆界面的七种解决方法           1.下载lol补丁. 2.出现登录黑屏或者选择大区后出现登录错误 :点击"电脑管家">点击"游戏加速">点击"一键优化". 3.用杀毒软件,对电脑进行一次全面的排查. 4.重装电脑系统. 5.可能是宽带带不动游戏,一般玩lol建议用电信宽带,其他品牌的宽带需要加大兆数. 6.卸载当前版本LOL,然后到网上下载一个最新版本的英雄联盟. 7.重启路由器. 以上也就

javascript-JS 与CSS设计动态界面效果

问题描述 JS 与CSS设计动态界面效果 火狐浏览器首页的那个换肤效果怎么做的?点击之后,页面向下滑动,现实可能需要更换的主题 解决方案 在页面的顶端创建一个DIV(这个DIV里要包括你想表达的其他DIV) 然后次height 为0px ; 之后的滑动效果 是要用JS 或者JQuery 来 实现的(用JS 的点击事件将这个DIV 的height 改为题主想要的,当然要是想火狐主页滑动的有流畅感的话,还需要自己写一个 speed();的函数..):希望题主先去了解 JS 加油.. 解决方案二: 你

html来写安卓的动态界面,哪位大神能给个列子,谢谢诶

问题描述 html来写安卓的动态界面,哪位大神能给个列子,谢谢诶 本人新手,现在老板想要我用html来写一个安卓的动态界面,哪位大神能给个列子,谢谢诶 解决方案 什么叫动态界面?用脚本还是html5什么的? 解决方案二: JQueryMobile可以实现.

Android仿QQ空间动态界面分享功能

先看看效果: 用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持 下拉刷新与上拉加载 和 模糊搜索,反复快速滑动仍然非常流畅. 缓存机制使得数据可在启动界面后瞬间加载完成. 动态详情界面MomentActivity支持 (取消)点赞.(删除)评论.点击姓名跳到个人详情 等. 只有1张图片时图片放大显示,超过1张则按九宫格显示. 用到的CommentContainerView和Mom

Android雷达扫描动态界面制作_Android

先看看效果图: 源码: package com.zihao.radar; import android.app.Activity; import android.os.Bundle; import android.view.Window; import android.view.WindowManager; import com.zihao.radar.view.RadarView; public class MainActivity extends Activity { private Rad

问个高科技,QQ2013/2014的动态界面上边的按钮怎么实现透明.

问题描述 就是按钮还是透明的,还可以看见后面的动画,我用flash控件加上按钮,发现不行,求大神告诉原理.网上搜了,也没有说具体到底怎么实现.设置父窗口透明不行,设置button的父窗口为flash控件也不行,难到winform做不出来. 解决方案 解决方案二:坐等来人解答.解决方案三:扣扣有自己的一套ui,技术上用的是directui,winform自然是搞不了的,你可以看看wpf这个实现起来比较简单,但是半透明效果在xp上好像还是不行

《硬汉2》动作场面升级丁晟续写英雄传奇(图)

<硬汉2>导演丁晟 新浪娱乐讯 由丁晟执导,刘烨.焦恩俊.张梓琳.刘承俊等出演的硬派幽默警匪大片<硬汉2>将于4月1日公映.片中,刘烨扮演的老三承袭了上一部的性格,与黑恶势力决战.昨天,丁晟在接受采访时透露,在韩三平的支持下,他完成了<硬汉2>,"我被人物打动了,爆发点是我的英雄情结,在<硬汉2>中我将老三的故事延续下去,与商业更贴合". 2008年岁末,丁晟导演的<硬汉>杀入贺岁档,获得1000多万元票房,这个数据没能让丁晟

PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)_php技巧

复制代码 代码如下: // +----------------------------------------------------------------------+ // | Willko Framework | // +----------------------------------------------------------------------+ // | Copyright (c) 2008-2009 Willko Cheng | // +---------------

app-Android怎么根据节日来动态的更换界面布局?

问题描述 Android怎么根据节日来动态的更换界面布局? 就像淘宝App一样,可以根据更个节日来更换相对应的主题界面,并且不需要更新App.这种要怎么实现? 解决方案 后台给你数据,比如后台给你一个标识的type,==1的时候是正常显示,==2的时候显示下雨天,==3的时候显示下雪天.等等这样子,如果图那些呢,可以做本地,也可以后台给你传. 解决方案二: 启动时判断时间,动态加载布局网上的教程有很多请自行百度. 解决方案三: 最好是动态的从服务器上去获取页面布局下来进行布局,比如获取一个htm