几个概念的理解
在网页上,动画的使用一直在美观与速度两方面寻找着平衡点。动画不仅有较强的视觉效果,也具有一定的心理招徕作用,但一幅有较好视觉效果的动画往往体积庞大,在这方面,FLASH和GIF动画是一种比较理想的网页动画格式,但FLASH的SWF格式需要有专门的插件支持,而动画GIF可以直接在网页上浏览且可以跨平台支持,所以受到更为广泛的应用。
在有Fireworks出现之前,你要完成一副网页动画非得动用好几种软件不可(当然现在又有了FLASH):先用诸如photoshop等绘图软件绘出一副副动作相连的图像,再用一些专用的GIF动画连接软件如Animage Gif等把单副图像连成GIF动画, 最后还得用图像减肥软件对图像进行最佳化处理,如果其中某一副图像不合您老人家的意,那就是大件事了,您就得从第一步重新做起......
现在您可以叹口气了,因为有了Fireworks以后,这一切都不会再成为您烦恼的原因,你可以尽情的发挥你的想象和创意了。
要学好Fireworks动画制作,首先得理解好下面几个概念:
一、图层,共享图层
图层的概念大家都应该好熟悉了,只要用过photoshop的人都应该知道图层在绘图软件中的应用,而共享图层则是Fireworks动画制作中经常遇到的,顾名思义,共享的含义就是该层图像会出现在动画的每一副单帧上,简而言之就是一副动画中那些不会动的永远出现的背景层。
二、影格
在某些软件中又被称为帧(如FLASH),他是构成GIF动画的基本元素,就像活动电影中的一副副胶片一样,当这些帧按一定的间隔时间连续播放时,您的眼睛就看到了一副动画了(人的眼睛真会骗人)。
三、组件
除非您喜欢每一副图像都亲力亲为的去画出来,如果您更喜欢让Fireworks为您服务,那您就得指定某些图像对象为组件,这样做的好处是:您只要指定图像对象运动的首尾位置或首尾状态(某些情况下是一些参数),那Fireworks就会乖乖地为您生成了中间的过渡帧,并且过渡帧的多少由你来指定!
四、克隆
这个听着像科幻的东东这回也出现在你面前了,不用太在意这个有点故作玄虚的词,你可以理解为“复制组件”,因为动画对象的首尾必须由同一组件组成,也就是组件自身(可以有参数、位置、活效果的不同),所以在制作中间帧的过程中,你必须先克隆一下您认为要它动一下的图像组件。
好了,理解完了这些枯燥的词汇,您可以先欣赏一下GIF动画的成品,本页开始处的电脑沼泽地LOGO即为用Fireworks制作的GIF动画!
简单的动画制作
和其他动画制作软件一样,Fireworks也同样用帧来描述动画运动,下面我们就以一幅最简单的动画来讲述制作步骤,动画效果最终如下:
一、新建一个468*60(网页上标准广告条格式),背景为白色,利用文字工具写上“欢迎来到”四字。
二、转换到frame选项框内,单击右边小三角符号,出现下拉框(如图1),点击add frames...增加帧,弹出对话框,选择第三项即增加在当前帧后面;
三、单击frame2,我们开始编辑第二帧,此时画布重新清空,再利用文字工具写上“电脑沼泽地”。
四、OK!我们现在开始准备动画导出。单击菜单file-->Export preview导出预览,弹出对话框,在这个对话框中我们先把option标签中的Format选项改成Animated Gif(即动画GIF), 这个标签中的其他选项我们在以后的章节中会陆续讲到的;
五、单击Animation标签。在右边的预览窗口底下有一排播放按钮
按下白色的三角按钮,动画就开始播放了,但是可能你会提出这样的疑问和要求:这动画的两帧转换速度太快,能不能慢一点?还有动画为什么不能一直不停的播放?对于第一个问题,我们可以改变帧之间的转换时间,在Animation标签中的帧格列表中,
右边一项即为时间间隔,我们可以在列表上方的文字框内填入恰当的数值来改变每一帧的出现时间,如果你要同时改变连续帧的间隔时间,可以按住Shift键进行连续选择;对于第二个问题,我们可以在Animation标签底部的次数控制钮中控制动画的播放次数,
当按下第一个按钮时,动画只能播放一次,按下第二个按钮时,你可以在下拉框中选择永远循环播放或者是一定的播放次数;
六、好了,现在你可以按下Export...按钮进行保存了。
中间过渡帧的制作
你是否觉得上一篇学的动画太简单了,别着急,下面还有很多花样呢!这篇我们就来学习组件和克隆的使用,让Fireworks自动生成中间过渡帧,最终的效果如下:
一、 新建一个468*60的空白文档,利用文字工具键入“电脑沼泽地”,放至适当位置。
二、为了让Fireworks能自动生成动画的中间过渡帧,我们必须定义“电脑沼泽地”为组件,单击Insert-->convert to symbol...转换其为组件。这时在“电脑沼泽地”字样的左边将出现一个像快捷方式的小箭头,你可以在Library 选项卡内的Library标签中看到你刚定义的组件,定义组件的好处是:当你改变组件后,任何以该组件为原型的克隆组件都将同时改变。
三、接下去我们将这个组件克隆作为尾帧,单击Edit-->Clone,此时文档中将出现两个相同的组件,单击缩放工具,将克隆后的组件放大至适当位置。
四、这一点将是关键的一步,同时选择首尾两个组件,
单击Modify ->symbol->Tween Instances...弹出对话框:
在这个对话框中,你可以键入希望Fireworks自动为你生成过渡帧的帧数,当然数目越大动画也就越流畅,但文件大小也会相应增大,所以应该选择一个能表达出动画效果又相对帧数较小的合适的数目,这里我们填入5,还应当注意在Dirtribute to Frames选项前一定打勾,他的意思是把中间帧分散至影格,好了,您可以按下OK键了!您可以到Frames选项卡中的Frames标签中查看一下,共有7帧(5+首尾两帧)!Fireworks是不是已经乖乖的替你做好了中间帧的动作,您好好想象一下如果全部由你手工定位您会怎样?
五、接下去的步骤和上一篇基本相同,对动画做导出处理,调整帧间速、循环次数便可Export了。
Fireworks动画GIF制作手册(四)
滤镜效果动画的制作
如果动画的表现效果仅止于缩放、移动、旋转来表达,那未免太单调了,Fireworks中提供了许多滤镜,而且还可以挂接外部滤镜,这些滤镜的过渡效果是不是也可以让Fireworks自动产生呢?答案是可以的。下面我们就来动手做一做,最终的效果如下:
一、新建一个468*60的空白文档,利用文字工具在适当位置键入“电脑沼泽地”字样,随后将其转化为组件
二、对“电脑沼泽地”组件进行高斯模糊处理,单击Effect标签内的下拉对话框,选择 Blur-->Gaussian Blur...,调至适当参数(这里是4.1)。
三、将模糊后的组件进行克隆操作,选择克隆对象,在Effect标签内调整Gaussian Blur的参数至0.1,看到的效果几乎没有模糊,但不能将该活效果删除,因为删除后,Fireworks便不能对首尾组件的模糊参数进行过渡计算了。
四、选择首尾两个组件(您可能发现后面的组件难以选中,方法是用鼠标拉出一个范围,便可选中后面的组件了,不过要注意不要选择另外的对象,),对其进行实体渐变操作(Modify-->Symbol-->Tween Instance),键入适当的中间帧数(这里是8),按OK确认。
五、按Export Preview...导出,注意调整帧间的时间为10,这样连续变化的感觉更强,OK!大功告成了!不过你可能会发现该动画文件的容量有点大,这是因为有渐变颜色的缘故,需要对图像进行最佳化处理,这部分内容在以后的章节中将会讲到。
Fireworks动画GIF制作手册(五)
共享图层和复制帧
在一幅动画中不是每个元素或图形对象都需要设置动画动作,像背景图案等就是在每幅帧中都有出现并且是永远不动的,像本页篇首中的“沼泽地工作室”字样就是一个列子,这时候我们就需要设置一个共享图层来解决这个问题。
共享图层的设置其实很简单,你只需把要设置成背景的图案或对象放在同一层中,然后单击右边的小三角,弹出下拉框,
单击Share Layer即把该图层设置成为了共享图层,该图层右边将会出现共享图层的标志符号(好像是电影胶片),
此时无论在哪一帧该图层中的图形都将会出现。
您可能又会有这样的要求:我只想把背景出现在某些连续的帧图上,而不是所有的帧图都保持不变,这时候又该怎么办呢?
对于这样的问题我们可以用复制帧来完成,如果您想把第五帧中的图像连续保持5帧,您可以按照这样的步骤来做:先单击第五帧,单击右边的小三角,弹出下拉框,
选择Duplicate Frame...,随后会弹出复制帧图对话框,
在Number选项中填入5,在插入位置选项中选择第三项(即为插入到当前位置之后),单击OK,这样,第五帧中的内容将连续出现在随后的五帧中,您的问题也就迎刃而解了!
Fireworks动画GIF制作手册(六)
关于图象优化的建议
所有在网上传输的图像都必须考虑这个问题:图像的大小!其实对于图像的最佳化处理适合于任何的图像图形处理过程,在这里我只是给一些小小建议:
一、尽量不要用面积太大的图形;
二、尽量使图像的颜色数减少,最少也应做到颜色相近,这样在颜色数设置为较小数时才不会有太大地失真
三、尽量运用大块的面积渲染,少用精细的曲线勾划。
四、尽量少用渐变色、光晕等效果,因为渐变色需要大量的颜色数,会使你的图像容量急剧上升,而设置为较小颜色数时失真又会非常明显。可以比较下面两幅图像的大小:
333个字节2162个字节
五、当不可避免地发生失真时,你可以使用GIF中的抖动交错选项,这个选项对于颜色数较小时效果尤为明显,并且大小的增加也不过分。可以比较下面两幅图像