Fireworks动画制作:飞机和降落伞

?　　今天我们来学习用Fireworks制作一个精彩的动画，从这个例子中我们可以学习套索工具的使用和外部图像的输入方法，同时你还会实际接触到动画制作必不可少的概念如Layer（层）、Frame（帧）、Symbol（符号）和Instance（引用），以及如何合理地使用它们。　　为了使动画看起来更加真实，我们采用飞机和降落伞的照片作为素材，如果你能仔细地按照下面的方法操作，就能做出和本例一样近似于电影画面的精彩动画。
5 S9 B; H( j! }. Q+ _9 v
3 f# c! D" V2 Q+ N( }

　　第一步：导入飞机图片并去掉背景。打开一个新文件，Width=250，Hight=120，背景色为#0066FF。选择File > Import（导入外部文件），在目录中选择飞机的照片（本例使用的照片已事先调整好大小，为GIF格式），如图1。在工具箱中选择套索工具的Polygon Lasso，用鼠标细心地沿着飞机的外部轮廓一小段连着一小段地选取， 当选取的路径首位相连时，击下鼠标左键，轮廓线变为虚线，如图2。然后在主菜单中选择Edit > Cut，就把选取的飞机图像剪下并存入剪贴板中，再选择Edit > Deselect，Edit > Clear，清除掉剪下以后剩余不要的照片。
$ p6 {1 F* ?9 ?1 J$ u0 z; F  o

& p4 v* K( b: v1 _- z
% w5 h7 a1 L; q& T
: k. c6 j* z5 I$ K, M
5 N3 `/ D  m8 b( J5 e1 v
8 E" ]/ P" j9 p2 x& _% X; W: m, _





8 k$ x  x0 p% p& v) \. ~6 ^: y! J图 1 导入飞机图片
6 j& e4 g' A1 Q+ _$ b
6 K5 \+ @) T% z* [图 2 使用套索去掉背景
* Y+ A; O4 E: G1 t4 |" ]( [$ e6 G　　第二步：把飞机图像变为Symbol。选择主菜单的Edit > Paste，就把刚才剪下的飞机图像拷贝到了画板上。点击一下飞机图像，选择Modify > Group，再选择Insert > Convert To Symbol，把飞机图像变为一个符号，在出现的对话框中，Name栏输入一个名字，如Plane（不要输入中文名），Type选择Graphic，如图3，再点击OK，就把飞机图像变成了一个Symbol（符号）。选择Edit > Clone，克隆出一个飞机的Instance，把新的飞机拉到上面一些，再选中原来的（第一个）飞机，选择工具箱中的Trasform按钮，拖动出现在第一个飞机周围的方框角上的小方块，把它调到较小，再把克隆出的（第二个）飞机拖到左上方画板边沿以外的位置，按着Shift键，把两个飞机都选中，如图4所示。




% z# `7 \" N* p  p) u2 s/ z

" T5 z, O+ t7 U) k% @) d: F

! t& w* h" U5 Q1 |8 j1 F: b" z0 e8 i图 3 符号属性设置
0 o0 a$ I+ G' l; v

5 |$ f% E+ J2 Z" C/ Y+ I+ w3 }& f1 h
% S( i* ~# R4 u2 b
: i$ m: ]  |/ b! z& l' a2 |
" g; q4 h' P1 r; X1 K( ?# P, ^
) \2 v' D) n& Z  H9 u9 Z3 J0 ^! _
图 4 同时选中符号和引用
　　第三步：让飞机飞起来。选择Modify > Symbol > Tween Instances，在出现的对话框中，Step栏改为20，表示飞机从右下方飞到左上方的过程要用到20帧，勾上下面的小方框，如图5，点击OK。选择Window > Frames，打开帧面板，出现了一个有22行的帧编辑框，按着Shift键把他们全部选中，点击帧面板右上角的小三角形，选择Properties，在出现的对话框中把20改为10，使每一帧的播放时间由0.2秒变为0.1秒，再勾上下面的小方框，如图6。在帧面板的任意位置点一下鼠标，飞机的动画就完成了。按下屏幕右下角的播放键看一看，你会看到飞机由远处飞来，飞得越近就显得越大，最后从画面的左上方飞出。


4 \9 }% N( S, s$ C- X
  B" C  b8 S2 x& j( |$ Q5 l/ p
7 _; J$ U6 F& j" H5 g5 R


$ }' {' c% o. W% d' ~7 s图 5 动画的帧数设置
2 s9 L4 Y* ?% x- B



. Q2 e0 H" y" K6 C! _# h9 j- {6 V
. H+ B6 M. `7 `4 G6 t
3 O& B1 E9 e7 C* J
: K0 @* q% v& M% |! g' O图 6 每帧的时间设置
$ d" Z5 Z7 p+ }/ W4 D& Y9 @3 }4 |　　第四步：降落伞的第一阶段。本例的设计思想是，飞机刚要飞出画面以前，有一副降落伞从飞机上降下，降落伞的下降过程分为三个阶段：未张开时快速掉下，未张开到迅速张开，张开以后缓慢摇摆下降。本步骤为它的第一阶段。点击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中已表示出来。

7 c! ^' d/ _' |/ z8 Q, D" j9 B


6 x; [# m& d( m7 U2 A+ t. e, a
. b1 Q5 t' K! ]; l1 [
4 u% A7 i0 M" Q4 P' `
图 7 添加新层设置
9 Z4 r$ }0 A2 w) P1 E3 P
- f9 z: E% Y! H. e; C% [
1 O. o* t: t* w) e+ o+ N
. H  d) e  h6 Y3 d* I5 H
' A8 X( i+ N6 D8 n
$ |3 S1 L* e8 g/ |  n
- I5 U  U6 m; T& k8 R0 k
图 8 在层面板中锁定旧层
　　第五步：降落伞的第二阶段。在Layer面板中，选择Frame 26（即已做好的最后一帧），然后选中图上的小降落伞图像，又克隆出另一个降落伞，并把它调整到较大，移动到紧靠前一个小降落伞的旁边，同时选中这两个降落伞图像的引用，如图9。选择Modify > Symbol > Tween Instances，帧数改为2，勾上下面方框，如图10。
4 g- y- `1 ~7 P6 W7 X) `: Q
3 b0 Q5 X7 C6 M9 T

3 Q8 [, T3 J5 `. Q
- B4 s8 Y8 f- S0 q5 B5 @

' @4 X! C. U( ^) y; |
4 @! P) h9 q5 L. I4 j; s, Q# F
* U4 t. r0 _4 X  |  e: D


图 9 同时选中两个引用
7 v4 I, G) O0 z1 `$ J$ i; o
图 10 第二阶段帧数设置
& Z! \% l& @$ g5 X* W+ f; W　　第六步：降落伞的第三阶段。选定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格式的动画）后，再播放时速度就可以了，效果不错吧？
3 y1 X1 r' c: w5 Y0 _7 G



8 B- O. u8 X  R+ H' N

9 t* T7 K# T4 f5 H+ r




图 11 第三阶段的两个引用
- d3 i3 ]/ S  [7 J4 i1 k
图 12 第三阶段的帧数设置
- U; w( |: U3 _' G& @4 v

2 ~: j6 v# S+ ^
5 ^9 _" I$ _: I- w( k8 g
3 p. C3 c  n, n; p# Q6 [; [

1 o" m& }7 K1 N' m( F7 P8 |- x7 J




图 13 下面的引用大部移出画面

7 ~( |- E1 k$ [5 n/ y图 14 第三阶段每帧时间调整
　　下面是这个动画中的两帧，最后一副实际上是整个动画，但是如果你不自己动手去做的话，就只有书上的图片，它怎么能动起来呢？





7 z) ]( Y2 b. b
: \5 u1 P$ [' u
: J  j! j8 Y6 }
3 v  @" J  K. \3 V. L9 F


3 i/ y) g1 ^5 ~$ E: O图 15 完成后的一帧画面

+ C7 t% m  K5 a! j0 U. y图 16 完成后的整个动画