项目二十 按钮及帧动画的制作.doc

项目二十 按钮及帧动画的制作 一、目的1 、掌握Fireworks中帧面板、库面板的使用方法2 、掌握动画、按钮等元件的添加使用方法3 、掌握按钮的制作方法以及帧动画的制作方法二、步骤 1.制作GIF动画Banner效果见文件GIF动画Banner.gif。（1）画布大小为46860，设置画布颜色为透明。（2）导入的汽车图片需要用“魔术棒”工具去掉背景色。2.制作打火机效果效果见“打火机效果”文件夹中的打火机效果.html。（1）新建一个500*400大小的白色画布，然后导入一张事先准备好的打火机位图。（2）用“钢笔”工具沿着这个打火机的外形绘制一个封闭路径，然后对该路径使用无描边色的实心填充，填充色为全白色，如图（3）将路径对象与位图同时选中后，使用菜单栏上的“修改蒙版组合为蒙版”命令。从而使我们得到一个较精确的打火机外形。然后再点击菜单栏上的“修改平面化所选”命令，将这组蒙版对象转成位图。（4）将当前的这个打火机位图进行复制，然后在复制出来的位图上，用“钢笔”工具沿着打火机的翻盖绘制出一个无描边色的封闭路径，填充色为白色，如图。（5）将该路径与复制的打火机位图同时选中后也使用菜单栏上的“修改蒙版组合为蒙版”命令，从而将打火机的翻盖也“扣”了出来。接着再使用“修改平面化所选”命令，将这个蒙版对象转成位图。如图（6）为了使这个翻盖能将打火机的上部“盖住”，我们选中这个“翻盖”后点击“缩放”工具对“翻盖”进行旋转放平。（7）接下来再用蒙版扣图的方法把打火机的开关也扣出来，然后使用“修改平面化所选”命令将其转成位图。至此，画布上就有了三个位图对象，分别为“翻盖”、“开关”和“机身”，如图（8）将当前的这三个对象同时选中后，在任一对象上点击鼠标右键，并在弹出菜单中选择“转换为元件”命令，然后在弹出来的“元件属性”对话框中选择“按钮”类，打开“库”面板后再双击这个打火机元件的缩略图，从而进入该按钮元件的编辑区。（9）将当前“释放”选项卡而中的三个位图对象分别复制到“滑过”、“按下”和“按下时滑过”这三个选项卡当中。复制完成后我们再回到“释放”选项卡中，先对该选项卡中的打火机图形状态进行绘制。（10）在“释放”选项卡中用“橡皮擦”工具将“机身”对象上的那个翻盖进行擦除，如图（11）对“翻盖”对象使用“修改排列移到最前”命令后，把“翻盖”对象放到“机身”对象的上部。（12）完成后点击“滑过”选项卡，由于这一选项卡中的鼠标动作与“释放”选项卡中的鼠标动作完全相同。因此我们只需将“滑过”选项卡中原来的三个位图对象删除后，再把“释放”选项卡中的全部图形复制过来即可。（13）在“按下”选项卡中将要绘制鼠标在松开该按钮元件后的图形。此时打火机的翻盖被打开。而在该选项卡中已有打火机的翻盖被打开的图形了，因此，我们只需将该选项卡中那个多余的“翻盖”对象删除即可，如图（14）点击“按下时滑过”选项卡，把那个多余的“翻盖”对象先行删除。然后将这个选项卡中打火机的“开关”对象用进行180度翻转，如图。（15）再来绘制火苗的外焰。先用“椭圆形”工具画一个椭圆，再用“部分选择”工具对该椭圆进行适当的修改，使其具有火苗般的外形。然后为这个对象使用无描边色的“椭圆形”渐变填充，填充方式如图20。其中四个色彩滑块的数值从左至右依次为：#3067B9、#FFFAAE、#FFEDA3、#FEFEFE。（16）再来绘制火苗的内焰。同样是选用“椭圆形”工具先画一个椭圆形，用“部分选择”工具进行适当调整后，对该椭圆使用无描边色的“线性”渐变填充，填充方式如图21。其中左右两个色彩滑块的数值分别为#3F3F3F和#000000，而左边色彩滑块上的不透明度滑块数值则为0%。（17）完成后把火苗的外焰与内焰两个对象同时选中，并使用“修改组合”命令，将其合成一个组合对象。效果如图（18）下面我们再来绘制火苗的光芒。用“椭圆形”工具绘制一个大小为450*450的正圆。将该圆的中心与火苗的中心点进行对齐。然后对该圆使用无描边色的“椭圆形”渐变填充，左右两个色彩滑块的色彩值分别为#FFF1A7与#FFFFFF。而左右两边的不透明滑块的数值分别为50%和0%。选择“修改画布画布颜色”选项，将背景色改为黑色。（19）回到“原始”工作区，此时有一部分的网页切片处在画布之外，这就意味着这个按钮元件在导出为HTM格式之后，画布之外的元件图形将会被自动删除，从而无法看到作品的整体效果。可通过点击菜单栏上的“修改画布符合画布”命令，使该画布完全符合按钮元件的切片大小。（20）通过