下面我们介绍详细的绘制过程，看看蝴蝶翅膀扇动效果是如何实现的。

　　（1） 新建一个大小为80×80的文件，设置其画布颜色为透明，得到图1所示图像。

　　（2） 导入一个静态的蝴蝶图片，如图2所示。但是这幅图像是有白色背景的。

图1 新建文件　　　　图2 导入一幅静态蝴蝶图

　　（3） 单击工具箱上的魔术棒工具，在导入图像的白色区域中单击一下，这样图像中所有白色的区域就被选中了，如图3所示。

　　（4） 按Delete键将魔术棒选取的白色区域删除，得到图4所示的图像。

图3 使用魔术棒单击白色区域　　　　图4 删除白色区域

　　（5） 单击工作区状态栏的按钮回到矢量图编辑状态。使用对其面板将图像放置在画布的最中心，得到图5所示的图像。

　　（6） 打开帧面板，单击按钮新建一帧，并把第一帧的图像复制到第2帧之中，使用工具箱上的缩放工具对复制所得图像进行调整，如图6所示。

图5 将图像放置画布中心　　　　图6缩放图像

图7 调整图像色相、饱和度和亮度

　　（8） 最终得到满足的效果，如图8所示。接着在新建一帧，和上面两步类似，再调整图像得到图9所示的图像。

图8 第2帧图像　　　　图9 第3帧图像

图10 第4帧图像　　　　图11 第5帧图像

　　（11）帧面板中共有6帧，帧延时都是Fireworks默认的7/100秒，这样会使得蝴蝶翅膀扇动的频率过快。希望蝴蝶翅膀扇动频率慢一些，只需要在帧面板中选中所有的帧，双击帧延时区域，将帧延时设置为15/100秒，如图13所示。这样蝴蝶翅膀扇动就会变慢了。

图12 第6帧图像　　　　图13 设置帧延时

　　（12）最后使用导出向导将这个图像导出为GIF动画文件就可以了。然后就可以在网页制作过程中插入这个动画，来实现蝴蝶在网页上翩翩起舞的效果了。 .png文件下载

完成效果