|
|
? 今天我们来学习用Fireworks制作一个精彩的动画，从这个例子中我们可以学习套索工具的使用和外部图像的输入方法，同时你还会实际接触到动画制作必不可少的概念如Layer（层）、Frame（帧）、Symbol（符号）和Instance（引用），以及如何合理地使用它们。 为了使动画看起来更加真实，我们采用飞机和降落伞的照片作为素材，如果你能仔细地按照下面的方法操作，就能做出和本例一样近似于电影画面的精彩动画。
9 K5 `; V! k% ]0 T ^( o' @
" A- S! h6 h1 P$ J
7 M. U% I) w! g5 ~
, `1 Y' Y( V, j! c+ o0 g8 L 第一步：导入飞机图片并去掉背景。打开一个新文件，Width=250，Hight=120，背景色为#0066FF。选择File > Import（导入外部文件），在目录中选择飞机的照片（本例使用的照片已事先调整好大小，为GIF格式），如图1。在工具箱中选择套索工具的Polygon Lasso，用鼠标细心地沿着飞机的外部轮廓一小段连着一小段地选取， 当选取的路径首位相连时，击下鼠标左键，轮廓线变为虚线，如图2。然后在主菜单中选择Edit > Cut，就把选取的飞机图像剪下并存入剪贴板中，再选择Edit > Deselect，Edit > Clear，清除掉剪下以后剩余不要的照片。# D4 r& l3 n/ `+ B/ x$ B. w1 q! l
4 @& C6 P' y/ I, _
$ Y7 c/ I& ?% i0 b7 P1 J6 [& Z+ ]- M1 }: n
2 K# |# L- }0 U! C7 V- [+ ~
3 V/ N# l& q# I+ ^ t
' d3 X8 w# |# [. f% I3 e" `" a& q/ U7 }* m9 G, W7 U
8 I$ P9 B" C+ l5 g3 o6 V
2 Q) s! ` p# E$ c( S9 C( c2 \
% A0 Y L: d2 m
" d2 }1 B, @! P; _& s3 i
+ @; [7 T) `! i. X- J: e7 e图 1 导入飞机图片
( h8 m5 I7 v# z3 O
8 V% {/ `# T( n, C7 V图 2 使用套索去掉背景; E* [* Z! L, }! k5 o5 U
第二步：把飞机图像变为Symbol。选择主菜单的Edit > Paste，就把刚才剪下的飞机图像拷贝到了画板上。点击一下飞机图像，选择Modify > Group，再选择Insert > Convert To Symbol，把飞机图像变为一个符号，在出现的对话框中，Name栏输入一个名字，如Plane（不要输入中文名），Type选择Graphic，如图3，再点击OK，就把飞机图像变成了一个Symbol（符号）。选择Edit > Clone，克隆出一个飞机的Instance，把新的飞机拉到上面一些，再选中原来的（第一个）飞机，选择工具箱中的Trasform按钮，拖动出现在第一个飞机周围的方框角上的小方块，把它调到较小，再把克隆出的（第二个）飞机拖到左上方画板边沿以外的位置，按着Shift键，把两个飞机都选中，如图4所示。
+ J% S7 ^; F- G
Z* D7 K6 R. R! x
# ]; j# g1 o8 J9 r' ]: I4 C- E6 }# m. z) o5 k
8 n- l8 G3 O3 X! U, H% `: R3 q - G6 E" u9 A& S) H: b
/ T( V2 h3 U4 L3 ]0 _! c
0 u! Y8 W s& l) \) L' u$ e* j
& U* T, M' j/ E* O3 s; C- |
图 3 符号属性设置3 J! E6 m0 G4 `* C
Q; Y8 D* X5 w& J: L% g: e) d5 a4 E
9 M7 v( C3 W* _8 x* u" V2 k1 @% Y- L- ^8 U* g
 7 q. {/ K; X) O$ C" k
$ O1 B# L1 h L: i6 d4 z) z! f
; f- K$ ~' J/ _5 A; V
; c1 `: t+ r7 v图 4 同时选中符号和引用
3 U+ z8 j: [5 |0 Q& m! a 第三步：让飞机飞起来。选择Modify > Symbol > Tween Instances，在出现的对话框中，Step栏改为20，表示飞机从右下方飞到左上方的过程要用到20帧，勾上下面的小方框，如图5，点击OK。选择Window > Frames，打开帧面板，出现了一个有22行的帧编辑框，按着Shift键把他们全部选中，点击帧面板右上角的小三角形，选择Properties，在出现的对话框中把20改为10，使每一帧的播放时间由0.2秒变为0.1秒，再勾上下面的小方框，如图6。在帧面板的任意位置点一下鼠标，飞机的动画就完成了。按下屏幕右下角的播放键看一看，你会看到飞机由远处飞来，飞得越近就显得越大，最后从画面的左上方飞出。
; _) C0 \# m, ~) g5 f% H$ j
% C0 u4 o5 y! G7 y+ B
r: V* O2 \/ x0 d" [7 w! i% ]- k/ o: N, M( V
% G+ B% F+ \; {# J5 E
Q! W' W4 C0 C; R, D( I3 u
5 o# M+ ~! M3 m$ S9 K; }5 R
0 R- o# W- `8 _9 K4 w) w1 P( o+ Z2 F图 5 动画的帧数设置
* Q* @9 f0 A$ D; W4 g7 E n) l6 c" p' F3 U7 H
7 y1 y& e+ N/ K! ~6 v: \
; o8 @! |, E( h" l- P7 d% I1 H & x U% f7 R9 e8 `6 U$ n: P7 P
$ J0 G. f' T X
) B" a' q1 G2 _! q; ~- \. ]1 C. C+ {4 U6 Z# ^) P. K
图 6 每帧的时间设置
6 I0 e. N$ x9 b' ^6 q, l 第四步：降落伞的第一阶段。本例的设计思想是，飞机刚要飞出画面以前，有一副降落伞从飞机上降下，降落伞的下降过程分为三个阶段：未张开时快速掉下，未张开到迅速张开，张开以后缓慢摇摆下降。本步骤为它的第一阶段。点击Frame面板左边的Layer（层），打开Layer面板，你会看到已经有了Web Layer和Layer1两个层，而Layer1（第一层）上放的就是我们前面做的飞机动画。点击Layer面板右上角的小三角形，选择New Layer（建立新层），弹出一个对话框，如图7，不必改动它，点OK，就会在Layer面板上加入Layer2（第二层），降落伞就将放到这一层上，如图8。 点击Layer面板上部的Frame信息框，选中Frame18，再选中Layer2，选择主菜单File > Import ，输入降落伞的照片（已经事先做成了GIF格式的透明图片），然后仿照以上第二步和第三步的方法，把降落伞图像变为一个Symbol，取名Parash，并在其下方克隆出第二个降落伞图像，把两个图像都调整到最小，第一个移到紧靠飞机下腹位置，第二个移到它的左下方适当位置，然后选择Modify > Symbol > Tween > Instaces，帧数输入7，就完成了降落伞的第一阶段制作。编辑这一层时，为了不影响已经做好的第一层，可以把第一层加上锁（点击Layer面板中Layer1那一行眼睛图标右面的空格），图8中已表示出来。) O C T- g8 `+ B. n2 s9 q+ ~
5 T- s) c6 Y) U* q4 `9 w
# s) ?* a& u5 L- j
/ D4 G' j7 ?' g2 u9 c
) z9 D+ v2 T4 \& e) ]* W' ~8 P- T( U
# t7 v! S6 U* O5 x5 B
& B i6 Y z: t+ Q5 X8 O
图 7 添加新层设置# Z# B" {+ X, q) r8 S* q
" K8 t* X0 W/ t# N! v: I( [
; S0 K* w$ A) D% p+ G% ~6 T! E) n! W1 j$ ?$ s% L( g
 T' q9 q* v+ d4 h$ z
3 b- j8 V8 ]( f8 F+ b6 z+ Y4 ?3 w
) @6 W e2 C! z" s3 O2 e
8 N' ^! S1 R1 Q; v1 B4 ]( `8 p& l图 8 在层面板中锁定旧层. z0 m2 v; I/ |) E% z, z& R/ s, Z
第五步：降落伞的第二阶段。在Layer面板中，选择Frame 26（即已做好的最后一帧），然后选中图上的小降落伞图像，又克隆出另一个降落伞，并把它调整到较大，移动到紧靠前一个小降落伞的旁边，同时选中这两个降落伞图像的引用，如图9。选择Modify > Symbol > Tween Instances，帧数改为2，勾上下面方框，如图10。" [& n0 ]4 b# _) b) _5 `
4 W( A/ S& R, ?# T8 A; [8 a
* i" S1 S M& g2 T) c( ]7 }2 i1 F2 B/ I
2 s1 z! j+ T/ N& B5 U7 e: g! s% ^2 ?4 A4 R0 y* Q( B. ?" a/ D
# l8 w4 K0 A: c! J7 |% [" |
" S$ d8 ]1 m" ^# p8 n" Y# s . Q0 d9 a, \. j
0 t# _' O1 h. q
% N1 E& E1 c8 ~1 f5 ^
; a3 c4 w; ]+ U4 s! e图 9 同时选中两个引用# Q+ L q1 N# i" A/ Z" I
6 S1 E6 L8 i5 v# j: b/ s! G图 10 第二阶段帧数设置
* g3 j( V0 W* @ ^3 ~ 第六步：降落伞的第三阶段。选定Layer面板中的Frame 29（第29帧），在图中又克隆出另一个降落伞，并把它调整到稍大，同时略微旋转一个角度，拖动它到前一个降落伞左下方，同时选中两个降落伞，如图11，再选择Modify > Symbol > Tween Instances，帧数改为6，如图12。在Layer面板中选择Frame 36，重复以上步骤，但第二个引用要移动到前一个的右下方一点。再选择Frame 43，再重复以上步骤，但要把把新克隆的降落伞大部分移到画面以外，如图13。最后，打开Frame面板，同时选中Frame 29以后直到最后一帧（按着Shift键），点击右上角的小三角形，选择Properties，把数字10改为20，即把降落伞第三阶段的下降速度减慢一倍，如图14所示。至此，本实例全部完成，按下屏幕右下角的播放键看看效果，如果你的电脑不太高级的话，可能感觉整个稍慢，但是当你输出成为Animated GIF（GIF格式的动画）后，再播放时速度就可以了，效果不错吧？- J p7 |3 i# I7 z2 _! j( Y, x8 |
7 M; [2 t. z' P# z# J" _ x! P# w
( a% ?2 a' G7 O* f3 d' ^- O7 B' \
2 `' C8 i, d; S3 o* v
% S- y8 {3 [* G8 R( }2 Q, A9 {# s, _0 [ _; h4 @; M
8 a" b+ q3 m& t! M' G* \
- P$ v. H; @2 v+ O1 I( N7 p# p$ z, g
 . R `! @! K% f- F6 k7 ~
) `1 q5 S0 Q. ^' g+ S) X
4 y$ D a4 R- \! _3 e, N
$ [+ n5 B4 Y7 @1 g0 X* q8 @: s图 11 第三阶段的两个引用
& l5 u% c6 b' M4 ~+ C) `) J2 q0 j$ C# g
图 12 第三阶段的帧数设置
* \+ \" H4 U8 V) U. N7 p1 s
" o& `$ f. K: x% ?7 A0 v( S3 _* e( P# g
8 X# [3 `* O* v; z4 q, _5 C + ~: _$ V+ F% Q9 ]3 \9 Z
5 ^/ ?( z5 W" p V/ E- G! u3 Q% {% \4 U$ Y/ _
% I7 [# K9 H1 R/ n. b ' Q! f6 f. Q3 a' G( R
3 p. v1 w7 E. h) X' I# p1 Q7 B
/ |0 w# q7 E; D9 N9 C
% N% v& L; h! e7 m- I( }! n图 13 下面的引用大部移出画面
4 M5 H3 o1 w: t" |; c8 C7 D4 O, @# u; W3 k3 I
图 14 第三阶段每帧时间调整
6 C6 I$ M+ ^9 a, E$ r 下面是这个动画中的两帧，最后一副实际上是整个动画，但是如果你不自己动手去做的话，就只有书上的图片，它怎么能动起来呢？
- v' s/ y4 @7 c/ ]1 G; [; R) a- m: O R/ r- f
0 o! o" m! `7 v' W' r% V
9 U. V, a6 ?! N" N. u% s3 c& A
 ; r& f7 i' c# S
, N( D4 ?: J' I8 G$ `3 Q+ o2 ^. p! Y8 N' U- h2 W
. {1 z) N: Z( F5 O# U1 \. O
( r; @$ k# Q( q
' P+ _( X6 M5 I& V7 [, R/ X7 ^6 A2 h* x' X
6 g/ j4 i, `7 d. s5 @
图 15 完成后的一帧画面
) l" g& ]4 d! N+ H) j
6 G+ ~2 ?7 S+ V$ E b. N6 G( ]/ }! h J图 16 完成后的整个动画 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
在线客服（工作时间:9:00-22:00）
