banner广告动画的制作(一):色彩的变化【实验目的】本实验中我们用Fireworks来制作一个变色的Banner,需要学生掌握² 符号(symbol)的使用² 补间实例动画(tween instance)的制作² 层(Layers)和帧(Frames)的基本用法【实验环境】Fireworks【实验步骤】 Banner广告动画中色彩变化的实现过程如下: 1.新建文件,设置文件属性(1)首先新建一个大小为468×60的文件,并设置画布颜色为黑色 2.制作动画中所需的符号(2)然后导入一个要进行变色效果的位图文件当然我们同样可以使用绘图工具绘制这个图像,这里是为了方便讲解选用外部图像的 (3)选中该幅图像按Ctrl+Shift+D两次,克隆图像两次然后选中其中的一幅图像,点击“Filters”,选择“Adjust Color”>>“Hue/Saturation”,这时在弹出对话框中调整色调的值同样方式调整另外一幅图像的颜色,最终得到下图所示的图像效果 (4)选中其中的一个图片如左边的紫色图片,按快捷键F8或者右键在弹出菜单中选择Convert to Symbol准备将图像转换为符号。
在弹出的对话框内为符号命名并选择动画符号(Animation) (5)点击“OK”之后会弹出动画设置的对话框,暂时对它不做设置 (6)单击“OK”,这时回到工作区中,在画布上会看到带箭头的虚线边框的符号使用同样方式将另外两幅图像转换为符号,并分别命名为Symbol 2和Symbol 3,然后将三个符号都删除掉 (7)我们再在Banner的左边加些图片并做适当调整使Banner更加生动,如下图所示8)接着我们点击“Window”菜单,分别把“Layers”、“Frames”和“Library”三个面板打开,为了我们将来创建动画服务在Layers(层)面板中选中Layer 1图层双击鼠标给图层命名为Background,并选中“Share across frames”复选框即共享这个图层 3.实现变色的效果(9)单击层面板右下角的按钮新建一个图层然后将Library(库)面板中的Symbol 1拖到画布中去,并放置到Banner的最右角,如下图所示同时记住它属性面板中的位置信息(X:282,Y:0) (10)选中这个符号,然后点击 “Modify”菜单,选择“Animation”>>“Settings... ”,在弹出的动画对话框设置帧数为10。
(11)单击OK,这时弹出对话框,询问是否要自动添加帧 (12)选择OK,这时候我们发现帧面板中出现了10个帧13)接着使用同样方式新建一个图层3,并将Symbol 2拖到场画布中,符号的位置应当Symbol 1的位置一样,即都为X:282,Y:0点击 “Modify”菜单,选择“Animation”>>“Settings... ”,在弹出的对话框设置动画同样是10帧,但是将透明度由0变到100 (14)点击“OK”即可一种渐变效果已经形成了15)下面我们就来制作第二个渐变效果了也就是由红色变成绿色的了在帧面板中选择第10帧,这时我们发现画布右边的图像是红色的,如下图所示16)单击帧面板右上角的按钮,在弹出菜单中选择“Duplicate Frame”,这时弹出了复制帧对话框,我们在其中选择After current frame单选框将复制的帧放置到当前帧之后, (17)选择“OK”回到画布,出现第11帧的图像,此时画布变为背景图了18)此时在层面板中选中Layer 2,将绿色的Symbol 3拖到画布中,在属性面板中设置与前面相同的XY坐标点击“Modify”菜单,选择“Animation”>>“Settings... ”,在弹出的对话框设置动画同样是10帧,这时同样会弹出提示对话框。
选择“OK”,这样新的帧就被添加到了帧面板之上了,如下图所示19)接着选择Layer 3,将红色的Symbol 2拖到画布中,在属性面板中设置与前面相同的XY坐标点击“Modify”菜单,选择“Animation”>>“Settings... ”,设置其不透明度由100到0,帧数为10,使得红色逐渐淡去,绿色显示出来20)接着便是由绿色再变回紫色的了同上,在帧面板中选中20帧,再添加一帧,选中Layer 3,将紫色符号拖到画布中,设置透明由0到100,选中Layer 2,拖入绿色符号,透明度不变,帧数也是10帧点击播放按钮浏览,发现速度快了一些,按住Shift键选择帧面板上的所有帧,双击鼠标,设置帧延时为15/100 sec即可。