|
|
) w% g: u) D4 D: b. K* z5 v
 ' F2 y+ b: D: T, V
今天我们来绘制一个飞舞的蝴蝶动画，让蝴蝶的翅膀在不停地扇动着，如同一只现实中的彩蝶在翩翩飞舞。还可以在网页制作过程中在Deamweaver中将这个GIF动画插入一个层之中，然后设置时间轴来控制动画在网页上的运动路径，用以实现它在页面上飞舞的效果。主要用来熟悉Fireworks MX 2004中帧面板中导出GIF动画文件的用法，同时熟悉魔棒工具的用法。文章末尾提供.png文件供大家下载参考。 完成效果如右图。' s7 u+ C8 b+ G9 ]* C0 G
" M0 d1 w6 g6 c
 9 T. U6 `. P8 n4 n& r
; o3 T' u& M# P. `! N4 l0 E8 ] 下面我们介绍具体的绘制过程，看看蝴蝶翅膀扇动效果是如何实现的。 + }2 M0 A# @! }, [$ `
（1） 新建一个大小为80×80的文件，设置其画布颜色为透明，得到图1所示图像。 ' x7 m5 [6 ^5 b! V+ K& u8 D; t
（2） 导入一个静态的蝴蝶图片，如图2所示。但是这幅图像是有白色背景的。 6 R! |" H& n+ [( \2 Q
1 v+ e1 L) j% y6 u- m" @) c) b
' u6 I+ E, T7 }( l# ? 6 `2 M& s+ T. n! R: B! g
 % _# m3 }9 M2 \6 |7 k
图1 新建文件 图2 导入一幅静态蝴蝶图 8 ^" f* e) k) g5 W; K
（3） 单击工具箱上的魔术棒工具9 l* }5 Q9 A o
7 {% ]# q! |3 B1 H k$ `，在导入图像的白色区域中单击一下，这样图像中所有白色的区域就被选中了，如图3所示。
* V% \& y' M6 K4 i; m2 w （4） 按Delete键将魔术棒选取的白色区域删除，得到图4所示的图像。 : Z& _! V5 \1 a' Y
/ o. n! O2 I1 I, B
1 z5 P" \$ ]; J1 ]( }' E- @
# m2 F0 D0 u, E" A1 @; V1 B; K( x/ z ! D, z4 a4 g' P6 _
图3 使用魔术棒单击白色区域 图4 删除白色区域
' f9 ?. I7 u$ J S& g2 Z( B （5） 单击工作区状态栏的
4 I6 | t5 E/ d4 k
) n8 P3 N8 a) B) f) B/ w按钮回到矢量图编辑状态。使用对其面板将图像放置在画布的最中央，得到图5所示的图像。
8 q9 W* n& I! w- W0 Q0 z1 O （6） 打开帧面板，单击" {, N0 n) y# R. [& q) r7 G6 b
0 {8 P, K8 b4 p! x) ^按钮新建一帧，并把第一帧的图像复制到第2帧之中，使用工具箱上的缩放工具
1 L+ y; S, e" y( H% z; P & L2 R# T {8 L7 q" m* n: {9 h* f) s
对复制所得图像进行调整，如图6所示。 ) ]* J( q( R j
1 t, p: C$ S h0 F5 Y ' T& D% I1 G9 C- v' k& q2 L
/ s5 B0 a" A J7 A9 k' R- \ % |6 o! W' p3 X
图5 将图像放置画布中央 图6缩放图像
$ G7 z7 P( w0 |; w( w! b6 S4 k9 t （7） 为了能模拟蝴蝶飞舞时产生的颜色明暗度变化，所以需要对第2帧的图像进行色相、饱和度和亮度的调整。单击【滤镜】菜单，选择【调整颜色】|【色相/饱和度】，在弹出对话框中调整色相、饱和度和亮度，如图7所示。
$ s7 ^+ k) X7 c- g# |) u- T
( Z" q6 a7 s/ B' V - J+ k$ e; ^# I2 U
' k; A$ d- h: @1 s
6 t3 M+ q, `# ~% F0 S0 u图7 调整图像色相、饱和度和亮度
! a. g# g$ l, m! K! F$ N! L （8） 最终得到满意的效果，如图8所示。接着在新建一帧，和上面两步类似，再调整图像得到图9所示的图像。
9 [+ X B: n3 l$ B( `4 n9 t
0 T" v" E" X/ }6 V5 n S$ A/ Y9 Q- \5 N% V& U/ Z$ Q/ \ j
! Y8 U- H8 k/ @/ C! y1 { 7 r% x* }5 g1 O, b* ^- g, A; @
图8 第2帧图像 图9 第3帧图像 （9） 由于蝴蝶飞舞过程中翅膀会往返两次同一个位置，所以第4帧图像和第2帧图像是相同的，第5帧和第一帧图像是相同的。只需要分别将第2帧图像复制到第4帧，将第一帧图像复制到第5帧就可以了，分别如图133和图134所示。 4 E, `1 }/ i8 O' }1 P# B5 f w
( [ v2 _+ H3 j6 X. k$ x 6 k! E6 V; d( q( I3 z9 N! g
$ s$ k" D7 c- Y$ l/ F. z$ x2 d6 c8 n# C ) k% y' h$ v4 l2 ~: c
图10 第4帧图像 图11 第5帧图像 （10）最后再新建一帧，将第5帧图像复制到该帧，使用缩放工具将图像再进行缩放，使得蝴蝶的翅膀展开度更大一些，得到图12所示的图像。 + N$ P! ~) h/ |; E0 P# G* T7 y$ M
（11）帧面板中共有6帧，帧延时都是Fireworks默认的7/100秒，这样会使得蝴蝶翅膀扇动的频率过快。希望蝴蝶翅膀扇动频率慢一些，只需要在帧面板中选中所有的帧，双击帧延时区域，将帧延时设置为15/100秒，如图13所示。这样蝴蝶翅膀扇动就会变慢了。 x% Y. D4 p" b( }2 ^) Y) t
/ k& q$ `6 }3 a- {. l
! _5 W9 n1 i- W( E5 O
4 j) q. i2 ?1 M$ r. }. } 7 {( B3 E# u. D1 A* c# j1 I; j; C
图12 第6帧图像 图13 设置帧延时 / r7 }0 Y1 M% l, }: [3 U6 [: k
（12）最后使用导出向导将这个图像导出为GIF动画文件就可以了。然后就可以在网页制作过程中插入这个动画，来实现蝴蝶在网页上翩翩起舞的效果了。 .png文件下载 5 j, n9 M' k2 F4 y8 e6 m2 x6 c! k
- M- N3 s# A1 \ ? Y' G9 h
( u4 n. I! ?: q4 ^完成效果 |
|
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
在线客服（工作时间:9:00-22:00）
