[组图]Fireworks绘制飞舞蝴蝶动画

　今天我们来绘制一个飞舞的蝴蝶动画，让蝴蝶的翅膀在不停地扇动着，如同一只现实中的彩蝶在翩翩飞舞。还可以在网页制作过程中在Deamweaver中将这个GIF动画插入一个层之中，然后设置时间轴来控制动画在网页上的运动路径，用以实现它在页面上飞舞的效果。主要用来熟悉Fireworks MX 2004中帧面板中导出GIF动画文件的用法，同时熟悉魔棒工具的用法。文章末尾提供.png文件供大家下载参考。 　　完成效果如右图。

& u5 l% W5 K* r, t! ^
( y  R/ c2 w8 d6 ?. m
# I7 J- E) a# a' ^, k2 p3 f　　下面我们介绍具体的绘制过程，看看蝴蝶翅膀扇动效果是如何实现的。
　　（1） 新建一个大小为80×80的文件，设置其画布颜色为透明，得到图1所示图像。
7 D" A! W9 \# ^* [& A, T; K　　（2） 导入一个静态的蝴蝶图片，如图2所示。但是这幅图像是有白色背景的。

) C8 g6 _, e1 Q; d/ g
  K0 f1 C3 B0 V) s- P

图1 新建文件　　　　图2 导入一幅静态蝴蝶图
　　（3） 单击工具箱上的魔术棒工具
+ q3 f+ k% @0 a7 V! c. f$ P; \: g
，在导入图像的白色区域中单击一下，这样图像中所有白色的区域就被选中了，如图3所示。 　（4） 按Delete键将魔术棒选取的白色区域删除，得到图4所示的图像。

+ A6 X- B/ A- R( Q9 ^% ?
% Z) f" {* F; ~5 ]' {+ ~3 e; L1 h2 g

图3 使用魔术棒单击白色区域　　　　图4 删除白色区域
?
' F4 G  {" K1 F+ x/ B+ l6 f　　（5） 单击工作区状态栏的
) L9 ]' j$ b! ~- ]2 F
: O9 T9 H! t$ Y5 O9 u按钮回到矢量图编辑状态。使用对其面板将图像放置在画布的最中央，得到图5所示的图像。
  H, f+ G0 c0 Q; N+ v　　（6） 打开帧面板，单击
' J( y1 u2 W$ t9 T  K
# G# Z' c! s5 Q" o  b按钮新建一帧，并把第一帧的图像复制到第2帧之中，使用工具箱上的缩放工具
/ O( F0 K0 v9 J# a+ I
对复制所得图像进行调整，如图6所示。
/ h+ _6 ?# @, w0 A7 u8 ^9 q& s# K, z

1 ?4 H+ f' T3 }& Q4 G% L

图5 将图像放置画布中央　　　　图6缩放图像
　　（7） 为了能模拟蝴蝶飞舞时产生的颜色明暗度变化，所以需要对第2帧的图像进行色相、饱和度和亮度的调整。单击【滤镜】菜单，选择【调整颜色】|【色相/饱和度】，在弹出对话框中调整色相、饱和度和亮度，如图7所示。
: j. T- [" x) \/ O
& q& b( n" _- H/ o3 c6 ^

+ k; \* Y4 M# q3 j, V2 \
5 k  Y9 M' F) \图7 调整图像色相、饱和度和亮度
　　（8） 最终得到满意的效果，如图8所示。接着在新建一帧，和上面两步类似，再调整图像得到图9所示的图像。

$ B8 k* c' r& r7 C% K/ E- V
9 f! F, l" @3 K; K& f1 [. K5 R
+ h1 s, n: I; ]" ^: [
  b3 V0 d6 o# M: P" u+ t图8 第2帧图像　　　　图9 第3帧图像
1 _6 ^2 y( i  T9 e( B) ~　　（9） 由于蝴蝶飞舞过程中翅膀会往返两次同一个位置，所以第4帧图像和第2帧图像是相同的，第5帧和第一帧图像是相同的。只需要分别将第2帧图像复制到第4帧，将第一帧图像复制到第5帧就可以了，分别如图133和图134所示。
9 ^7 [3 u9 O7 i9 I& [4 ]
4 u& R8 Z9 {0 l0 R% Z6 t

  d/ Q' L+ d1 \0 F) j
图10 第4帧图像　　　　图11 第5帧图像
' F) G2 X/ I/ i, \　　（10）最后再新建一帧，将第5帧图像复制到该帧，使用缩放工具将图像再进行缩放，使得蝴蝶的翅膀展开度更大一些，得到图12所示的图像。
, L+ ]; D; U3 ~; Z8 e' T  I/ ]( x　　（11）帧面板中共有6帧，帧延时都是Fireworks默认的7/100秒，这样会使得蝴蝶翅膀扇动的频率过快。希望蝴蝶翅膀扇动频率慢一些，只需要在帧面板中选中所有的帧，双击帧延时区域，将帧延时设置为15/100秒，如图13所示。这样蝴蝶翅膀扇动就会变慢了。


+ e% n/ X; N9 Q5 A* p+ U& c

( ^% E" [% }5 }图12 第6帧图像　　　　图13 设置帧延时
　　
　　（12）最后使用导出向导将这个图像导出为GIF动画文件就可以了。然后就可以在网页制作过程中插入这个动画，来实现蝴蝶在网页上翩翩起舞的效果了。 .png文件下载
$ s( t5 K7 U+ I4 r% o: W1 m
, \" P7 j- C2 m; }+ x' K
) @; w% ?* V) M( }; T0 x1 V# X* k完成效果
, [0 ~& u8 \( Z( [. Q; {3 i- s
. R& N. e0 \. A/ s. }
7 U& \$ S  i- A6 v. P5 O" p