Fireworks绘制飞舞蝴蝶动画

[复制链接]
查看: 368|回复: 0
gggds 发表于 2009-12-27 13:25:12 | 显示全部楼层 |阅读模式

; A& A8 I  M" ~! t: D" l4 I! W* b! W" ]( M
  今天我们来绘制一个飞舞的蝴蝶动画,让蝴蝶的翅膀在不停地扇动着,如同一只现实中的彩蝶在翩翩飞舞。还可以在网页制作过程中在Deamweaver中将这个GIF动画插入一个层之中,然后设置时间轴来控制动画在网页上的运动路径,用以实现它在页面上飞舞的效果。主要用来熟悉Fireworks MX 2004中帧面板中导出GIF动画文件的用法,同时熟悉魔棒工具的用法。文章末尾提供.png文件供大家下载参考。   完成效果如右图。% z) }( }1 J+ e3 D4 \1 ^
* o& X# D. u* [1 A  U1 a/ w" R

/ q; X# @. s% F$ G+ _. E* T  `  w
5 T. W6 w+ v% F( u  下面我们介绍具体的绘制过程,看看蝴蝶翅膀扇动效果是如何实现的。 % i0 }+ r4 M( W" b9 \: v' A
  (1) 新建一个大小为80×80的文件,设置其画布颜色为透明,得到图1所示图像。
) k& \3 p- ?' q* w  (2) 导入一个静态的蝴蝶图片,如图2所示。但是这幅图像是有白色背景的。 5 X- {2 ]. F# ~4 {2 D/ r. p

1 K0 g$ I* {4 z% Y5 y4 `$ T
% J0 D2 o6 a, c0 N " h. ~& H! N, v8 c/ A: _+ G
3 N, N" n6 T' t
图1 新建文件    图2 导入一幅静态蝴蝶图 " w: u6 f& S1 ~+ H: ~6 G
  (3) 单击工具箱上的魔术棒工具1 Q# x" O* W! A
4 p' [3 ?( i: I3 J# x+ J, ~
,在导入图像的白色区域中单击一下,这样图像中所有白色的区域就被选中了,如图3所示。
& Y: ~  \' H+ L. F: d! W% I  (4) 按Delete键将魔术棒选取的白色区域删除,得到图4所示的图像。 % K6 {7 o* d; W* s- V

9 g  p# P% ~2 v' i3 [7 F" V  F% V4 B: b& y8 U0 h+ U8 X4 u0 I

/ w" v( m. K. V' X
+ w6 M' t* l" U! X图3 使用魔术棒单击白色区域    图4 删除白色区域 # Y  @* m! Z$ O
  (5) 单击工作区状态栏的' W1 D& @4 X1 D
3 t, G- B1 {2 K/ k+ P% B! _
按钮回到矢量图编辑状态。使用对其面板将图像放置在画布的最中央,得到图5所示的图像。
! \2 f: e- \' T# n  (6) 打开帧面板,单击
! K# ?  a2 ]0 f( `" Y5 h# |8 H( I! O, v; W
按钮新建一帧,并把第一帧的图像复制到第2帧之中,使用工具箱上的缩放工具$ I: o6 C$ i1 `! ~. I2 D' K/ {1 J
/ A  ~7 X7 c- ]. j
对复制所得图像进行调整,如图6所示。 % k* h/ @+ v0 d
, ?! B3 K5 i2 t' l# h" d

( B/ u7 Y4 \; a: Q6 g6 z 0 @- y! M. N: x* i& t! _. O$ e

4 I4 o+ U7 \. U* V' G/ D* Z& g% B; }2 o图5 将图像放置画布中央    图6缩放图像% z# @" H/ \" S7 w: {$ F
  (7) 为了能模拟蝴蝶飞舞时产生的颜色明暗度变化,所以需要对第2帧的图像进行色相、饱和度和亮度的调整。单击【滤镜】菜单,选择【调整颜色】|【色相/饱和度】,在弹出对话框中调整色相、饱和度和亮度,如图7所示。9 m& j# M% E1 Z: C4 p  n
$ D0 G9 ]4 u) D

: n& N" G  f; f* r# s' l: ~# v- Z
  c. ]# P2 L* U' E3 ]$ k
$ E4 l5 F" A9 f9 p: ?! g0 j图7 调整图像色相、饱和度和亮度    ( `2 v- k2 U, h+ T1 J4 ^3 b( Y
  (8) 最终得到满意的效果,如图8所示。接着在新建一帧,和上面两步类似,再调整图像得到图9所示的图像。   k9 {2 F6 \5 M- R# f

+ y9 N, S( q# j  V# L! W/ V/ ~. `& ^2 _
5 j! D1 A4 e4 Q/ j

2 w) b" v/ q0 H4 \( ^6 H6 P. [图8 第2帧图像    图9 第3帧图像   (9) 由于蝴蝶飞舞过程中翅膀会往返两次同一个位置,所以第4帧图像和第2帧图像是相同的,第5帧和第一帧图像是相同的。只需要分别将第2帧图像复制到第4帧,将第一帧图像复制到第5帧就可以了,分别如图133和图134所示。 " k4 k9 Y  m- ?5 D* H
& [5 ^% X+ Z7 w9 D, |2 v9 l

- A& i- L; L5 v  B2 V' H" ]2 w 6 u: c6 A: g+ k4 ?. Z8 J# K

+ _; l# w4 ]" N8 Q) i* h6 j" X, p# e图10 第4帧图像    图11 第5帧图像   (10)最后再新建一帧,将第5帧图像复制到该帧,使用缩放工具将图像再进行缩放,使得蝴蝶的翅膀展开度更大一些,得到图12所示的图像。
- _! |% r1 p1 |, I  (11)帧面板中共有6帧,帧延时都是Fireworks默认的7/100秒,这样会使得蝴蝶翅膀扇动的频率过快。希望蝴蝶翅膀扇动频率慢一些,只需要在帧面板中选中所有的帧,双击帧延时区域,将帧延时设置为15/100秒,如图13所示。这样蝴蝶翅膀扇动就会变慢了。 % ^7 A$ U. k4 t' Q) Q

: E) Z' }% Q) J
# o0 d$ f' Y0 k  G- d, N; L 7 g! a) p8 w5 x& ~5 p* m
9 b3 }3 D" Q1 n
图12 第6帧图像    图13 设置帧延时      y# m3 z3 F. [, _1 U4 y
  (12)最后使用导出向导将这个图像导出为GIF动画文件就可以了。然后就可以在网页制作过程中插入这个动画,来实现蝴蝶在网页上翩翩起舞的效果了。 .png文件下载 ' _+ C7 t" i, Q/ S' M
8 S0 H" I! j8 P
! u1 D; ~& D# z7 I9 t1 Y' ]) d& b
完成效果

本版积分规则

精彩图文

Copyright   ©2015-2016  展示网  Powered by©Discuz!  技术支持:凡尚展览     ( 粤ICP备14065977号 )