看到这个题目您也许会说,Flash本身就是很酷眩的。很多Flash初学者认为,只要动的元素多就是眩,就是动感十足。其实动态效果设计本身就是一门学问,国外有很多传统动画师可能为此付出了毕生的精力。作为利用Flash来传达思维的网络设计师,应该充分吸取传统动画、卡通、视频等多种表现形式的经验和技巧,真正使你的作品流畅而富于动感。在我这两年来的商业Flash设计中,尝试了很多的动态效果、视觉表现手段,也研究欣赏过不少国外的优秀作品,希望我的一点点心得能够给大家以帮助。作者水平有限,不足之处,请不吝赐教!
文章由一个实例入手,主要从流程设计、节奏控制、速度感、视觉冲击力几个方面谈谈我的商业flash设计感受。
一、设计流程
这里所说的流程就是Flash设计时的工作流程,不论是小组还是个人,这个流程的每一个环节都是必不可少的。
1、静态效果图结构图
任何动画都离不开平面美术,就像好的电影有一个好的美术指导一样。因此在做Flash之前,我们应该先使用photoshop等软件将整个Flash动画中,几个关键场景和出现元素的效果图画出来。(如图1、2、3)这是一个宣传CDMA移动电话网的片头,设计风格:科技、高速、精准。这3张效果图本身也标志了动画的结构:引子、动画主体、结束总结。如果动画结构更加复杂,比如动画主体当中还有转场等情况,也需要画出更多相应的效果图。
图1
图2
图3
2、动画设计 这一步我们要按照设计好的效果图,具体来设计整个动画,其实也就是用各种动态效果把静态效果图中的元素串联起来。(如图4)
图4
为了不使我们的动画成为流水帐,需要使动画有明显的节奏感,并在结构上有明显的过渡,当然过渡也要合理、流畅,不能生硬、唐突。下图中(如图5、6),就是一个结构过渡其中的2桢,图5中,一直在两端的灰色板块一至向中心移动。使整个画面过渡到灰色,图6中文字斜飞出,灰白底框渐出。这样就形成了明显的结构过渡。
图5
图6
3、配音 理论上讲,音乐应该在动画结构设计的时候就开始制作。但是,国内的Flash设计一般都是1,2个人完成,很难有专人配乐。一般都是在动画设计完成以后,从素材库中找一些合适的音乐进行配音。好一点的可能也会根据音乐来设计动画。不管是什么顺序,最重要的就是合适,风格、节奏的合适才能使画面和音乐浑然一体。(如图7)
图7
二、节奏控制
好的动画应该是视觉冲击与信息传达相结合,流畅充满美感,这些都需要我们为动画设计一个好的整体节奏。
1、起伏
假如我告诉你我要做一个片头动画,动画的开始(引子)是一段渐起的音乐,动态柔和唯美,随着音乐的渐强达到高峰,也进入动画第2阶段,这是动画主体也是信息传达的主要时期,在连续高速的动画过后音乐嘎然而止,进入结束画面,也就是整个动画的结尾。那么这个动画的整体节奏起伏是什么样子呢?如下图:(如图8)。这种节奏更适合做介绍产品的动画,叙事性强。
图8
节奏起伏还可以有很多种,比如快慢交替,不管是什么节奏,都是为传达设计者的概念而服务。我们在观看优秀的Flash作品的时候一定要注意观察他的整体节奏,以及节奏与传达概念之间的联系。这也是动画的精髓所在。
2、交替
在具体的元素动态效果上,我们经常会采取速度交替的动态效果。例如,文字从画面的左部飞入,速度飞快,(如图9)到达目标位置以后速度减慢,右部飞入更大,透明度更低的相同文字。(如图10)两文字交错而行,速度很慢(图11)。这种速度与位置的交错,满足了动画对速度的需求,也实现了清楚传达信息的目的!
图9
图10
图11
3、效果
不同的动画节奏,需要不同的动画效果来处理。节奏悠扬舒缓,元素的动态效果也多采用移动、淡入淡出、条形遮罩、单线条等表现方式。如果节奏紧张、快捷,则多采用闪动、高速位移、旋转、耀眼光芒等表现方式。效果没有定式,我们可以学习大师作品的精髓,但也要有原创的东西。好的Flash作品不是效果的累加,再好的效果不能为内容服务,也是累赘。(如图12)
图12
三、速度感
既然是酷眩Flash就一定要有很好的速度感,如果你在以下几个方面注意了就会发现,速度感觉不仅仅是动作快就能够满足的。
1、移动模糊
熟悉photohsop的人都知道motion blur,移动模糊是模拟人眼看到高速运动的物体时的样子(如图13)。由于人眼的视觉停留,高速运动的物体都会延他的运动路径被拉长,就象你看到高速公路上奔驰的车流,是彩色的线组成的一样。我们可以在photoshop或者flash里制造物体的移动模糊效果,当需要物体高速位移可以采用经过motion blur处理后的物体替代。当运动结束时再换之真正的物体,视觉上就会觉得物体运动的速度极高。还有缩放模糊(如图14)、旋转模糊都可以应用在flash中,例如表现镜头的高速缩放、高速旋转等等
图13
图14
2、速率
这里说的速率即FPS(每秒钟播放桢数)(如图15),这个速率合适与否直接影响了动画的播放速度、占用cpu资源,最重要的是影响了流畅度。理论上说,当然是fps越高,占用cpu资源越重,也就是说可能反而会断断续续。一般情况下24-40是一个合理范围,在这个速率内的动画显得非常流畅,同时耗资源也不是很重。
图15
3、加速度
通俗的说加速度就是速度越来越快,当然也有反向的,在flash中就体现在frame标签里的easing的值(如图16),加速度在动画中的作用,是使元素的运动更接近自然界的运动,例如物体呈抛物线运动的时候,速度应该是越来越慢的,而下落的物体应该是越来越快的。一般来说从运动到静止的物体都是逐渐减速的,反之是逐渐加速的。总之掌握好物体运动的加速度,是把握物体运动更自然更人性化的关键因素。
图16
4、反弹
反弹是自然界最常见的物理现象,动画中也常常会用到它,特别是在设计卡通风格的动画中由为重要。简单地说是使物体动的看起来有弹性,例如文字落下时没有马上静止而是向上弹了一、二下才静止,使得文字看上去充满了生气。弹性配合加速度,就可以体现物体的重力和运动的真实程度了。
5、惯性
又是一个常见的物理现象,和加速度相反,惯性的表现一般用在突然发生动作或者突然静止的时候,例如物体要高速向前运动时,可以先稍稍得向后运动一点,来表现原来静止带来的惯性。高速运动的物体突然停止的时候,可以给它以形变,然后恢复,体现高速运动的惯性。惯性大会显得很卡通,轻微的体现惯性则更自然。
四、视觉冲击力
酷眩Flash,是否有视觉冲击力是很重要的,不是晃的人眼晕就是有冲击力。视觉冲击不应该过多,而且要在合理的地方出现。那么怎样设计有冲击力的动画呢?
1、速度
高速度本身就产生了视觉冲击,但在众多高速运动的物体中,缓慢运动的物体反而更引人瞩目了。因此除了高速、变速,跟周围环境差异大的运动速度,都能给人带来一定的视觉影响。
2、面积
毫无疑问,大面积的运动能带来更大的冲击力,但一定要在不给人造成心理压力的前提下。如果面积很小而且无法扩大,高速闪动是个不错的选择。
3、动作
一般来说,高速缩放是最能带来视觉冲击的。位移其次,其它是各种各样的特殊效果,其实这和环境的关系很大,动作特殊往往就会带来不错的效果。
4、颜色
颜色与面积关系很大,我们经常可以在影视片断当中看到这样的处理,两个片断之间,突然白屏,然后画面渐出。给人很强的视觉冲击,可以说颜色变化的越大视觉冲击就越强。我们可以经常在一些优秀作品当中看到物体往往会变白以后再移动,因为白色最亮,自然会非常抢眼。这只是一个典型的例子,颜色的变化还要依据动画的整体风格,不可生搬硬套。
说了这么多,制造又酷又眩的Flash,首先要从平面效果下手,设计合理美观的表现方式。然后利用各种动态效果和适当的元素去表达所需要传达的概念。动画设计的过程重要从节奏、速度、冲击力等几个方面去考虑!希望这篇文章能够起到抛砖引玉的作用,使大家能够更多的注意到优秀作品的科学合理性,更深层次的去挖掘适合Flash动画的表现方式!