一袭红衣 發表於 2014-12-4 16:02:35

Fireworks中的gif动画制作方式图解

<p>  有过FLASH动画制作基础的朋友一定知道,在FLASH中将绘制的图像转换成的&ldquo;图像元件&rdquo;或&ldquo;动画元件&rdquo;是可以通过软件的内建指令,产生运动及其它变化的效果。而在Fireworks中也沿用了这种动画制作方式,从而大大减省了GIF动画制作时的繁琐性。而在本篇教材中,我们也只针对软件直接生成的动画效果进行分析,不对手工分桢的动画制作进行讨论。</p>
<p>  <strong>一、动画的基本运动</strong><br /><br />  在Fireworks中,动画的运动方式可分为四个基本动作:<br /><br />  1、直线运动:图像由A点直线移动至B点;<br /><br />  2、旋转:图像原地进行顺时针或逆时针旋转;<br /><br />  3、不透明度渐变:图像的透明度发生变化;<br /><br />  4、缩放:图像的产生放大或缩小的变化。<br /><br />  每种动画效果即可独立作用于一个图形对象,也可同时作用于一个图形对象上。<br /><br />  <strong>二、图像的动画制作</strong><br /><br />  在Fireworks中,将绘制完成的图形对象制作成动画效果,可以通过&ldquo;动画&rdquo;的设置对话框直接完成。同时也可以将图像转为&ldquo;图像元件&rdquo;后,通过&ldquo;补间实例&rdquo;功能来间接实现。<br /><br />  1、使用&ldquo;动画&rdquo;设置框制作动画<br /><br />  点选将要制作成动画的图形对象后,选择菜单栏上的&ldquo;修改&mdash;&mdash;动画&mdash;&mdash;选择动画&rdquo;命令,将会弹出&ldquo;动画&rdquo;的设置对话框,如图01。<br /></p>
<p align="center"><img onclick="javascript:window.open(this.src);" alt="" src="https://img.jbzj.com/file_images/article/201412/20141204160208256.gif" /></p>
<p align="center">图01</p>
<p>  在这里,可以设置动画的帧数、图像的移动距离、运动方向、缩放程度、不透明度的变化以及旋转的方向和角度等。设置完成后可点击&ldquo;确定&rdquo;按钮。如果此时的&ldquo;帧&rdquo;浮动面板里的帧数少于当前将要创建的动画帧数时,则会弹出一个提示框,示意是否为当前动画建立足够的帧数。再次点击&ldquo;确定&rdquo;后,软件将自动把该图形对象转成动画元件并按刚才所设置的动画参数,自动成动画效果。我们可通过Fireworks画布文档下方的动画播放按钮进行效果查看。如图02。</p>
<p align="center"><img onclick="javascript:window.open(this.src);" alt="" src="https://img.jbzj.com/file_images/article/201412/20141204160208257.gif" /></p>
<p align="center">图02</p>
<p> 2、使用&ldquo;补间实例&rdquo;功能制作动画<br /><br />  这是一种间接制作动画的方式。具体的操作方法是,先选中图形对象后按F8键,在&ldquo;元件属性&rdquo;对话框中将图象转为&ldquo;图形元件&rdquo;。此时打开&ldquo;库&rdquo;浮动面板的话就会看到,这里多了一个&ldquo;图形元件&rdquo;。说明该对象已被成功转换为&ldquo;图形元件&rdquo;。如图03。<br /></p>
<p align="center"><img onclick="javascript:window.open(this.src);" alt="" src="https://img.jbzj.com/file_images/article/201412/20141204160208258.gif" /></p>
<p align="center">图03</p>
<p>  而原来画布中的图像左下角则会多出一个小箭头标志,表明这是该&ldquo;图形元件&rdquo;的一个分身。我们从&ldquo;库&rdquo;面板中用鼠标将该&ldquo;图形元件&rdquo;拖拽至画布当中,为该&ldquo;图形元件&rdquo;建立第二个分身对象。同时选中这两个分身对象后,在任意一个分身对象上点击鼠标右键,并从弹出菜单中选择&ldquo;元件&mdash;&mdash;补间实例&rdquo;命令,从而启动&ldquo;补间实例&rdquo;对话框,如图04。</p>
<p align="center"><img onclick="javascript:window.open(this.src);" alt="" src="https://img.jbzj.com/file_images/article/201412/20141204160208259.gif" /></p>
<p align="center">图04</p>
<br />  在&ldquo;步骤&rdquo;栏中可输入这两个分身之间过渡的图像步骤,在这里我们可以理解为该动画设置帧数。而&ldquo;分散到帧&rdquo;复选框则是将这两个分身之间的过渡图像按顺序分发到每个帧之中。因此只有选中了该项,整个动画才能完成。在点击&ldquo;确定&rdquo;按钮后即可生成动画效果了。<br /><br />  如果想让图像做成动画后产生缩放、不透明度渐变以及旋转效果的话,可在启动&ldquo;补间实例&rdquo;之前对这两个分身对象进行不同程度地缩放、不透明度设置和旋转后,再进行&ldquo;补间实例&rdquo;的操作。
頁: [1]
查看完整版本: Fireworks中的gif动画制作方式图解