实例说明
' I, [1 Z; E/ a% t/ g! P, W5 C7 n: R: Q: R1 T6 z' t- N3 y
( r7 Q o# g- f; m3 L! c6 l0 n$ a
1 J. r" G" P! w; T& {5 c5 Q, `- u4 a1 _2 e5 P0 E8 O5 H I
- @+ Z& U3 v. q( H; o 这是一个产品广告动画，主要用作在互联网上进行产品、服务或者企业形象的宣传。由于广告动画中采用了很多电视媒体制作的表达手法，且又具备网络传输的短小精干的独特优势，这正是Flash广告动画之所以风靡全球的原因。
1 s& C) Y" q2 A2 {' _$ x q3 L
5 e- R: {& e0 X4 S1 e
- q! w, {% e; @8 ^8 f! `3 j/ J' R: M4 v$ V, F3 b7 A, C4 c3 {
|; v0 A* a }. }
x: ^ w$ f U1 r4 J1 _# z% W 有关知识
- C9 R$ L4 b4 S' n: `6 I. F
9 l, P1 M- z! [. s
1 ]2 v! x. E0 B! _8 W$ L% g$ r
0 Y3 w% Y3 a" ~
, i2 J: p A3 l6 Q8 v- F; Z# z( Z
) X- c4 j) K" }& q) ^ 这是一个多重复合动画，我们将分别就“汽车启动”，“靓车展示”及“假LOADING效果”进行剖析介绍。
! o; F: Z, b& l7 n9 @ z) ^5 I4 d) K: z, h9 [( K! P+ y# x- h
0 o- a5 S( D4 R% x+ H5 u/ P! l
* F6 U, _' R3 m. j+ `# | U( A: L) X3 N3 |9 D; k1 W- @' D
' e$ s7 N0 @ [6 W8 a 制作过程
8 H3 P! C5 ~7 S# ?1 }! g$ E( _. x1 g. I* y; b: r+ [+ q- t
& y& H! c% G" \7 a& j/ Y& P3 N; h1 ?6 i) J& P/ u. S
9 W2 W: B) G. L! G4 z( u# P9 f9 A; ~- d1 g6 ?6 R
一、汽车启动
5 F Y, B7 A9 n3 R* W% v
& p4 Z6 v& p- n' a9 N
! H8 z, p/ S8 |5 f9 k
. Q' ~1 T. n' i3 n9 p6 K0 n# H) N/ |
- n5 p5 _0 h. ?" L 步骤1：选择菜单中的插入>添加组件（Insert>New Symbol），在出现的对话框中选图像（Graphic），命名为che。选择文件>导入(File>Import)，将一张车头图片加入舞台，在菜单上选择修改>打散（Modify>Break Apart），然后用鼠标点击车头以外的部分，再在工具栏活动面板上选择套索工具
1 X! G0 q( X, ]5 W, |9 h' a% y. [
* f# r0 S7 }5 d z( @，在下方的附属工具中选择魔术棒
- X! B6 I2 b) u5 w' P5 P
/ Q0 |! D' C# F$ R Y9 q; X, f0 I，点击车头的黑色背景，即选取背景，然后按键盘上的Delete删除黑色部分。如图1所示。
& x( W; t8 F ^; [
* E, f. g5 Q: Z, D i
0 A# r5 I' u# k p! |7 h
! Q" G* b9 V' _+ G" M/ A- K
/ G/ }4 |: {% t) w+ S, F 图1车头图片的处理过程
/ X5 C3 E- v/ r* O" _
9 p: J+ K) b- Q s+ B
0 |/ J! V- [- o
步骤2：点击Scene1回到主场景，选中Layer1层第3帧，按F7插入空帧，从库中将 che拖入场景的中间偏下的位置。在Layer1层的下面点击
/ [# F- j5 M: |0 ?7 P" V
2 K, c- v% ], q m- w图标，添加Layer2层，选中第3帧，按F7插入空帧，用同样的方法将 che再次拖入场景，位置和Layer1层的che一样，即Layer2层的che覆盖了Layer1层的che。如图2所示。
1 H1 G+ x. ~, v9 A. h
& r3 Z6 ?- x. D$ P3 c) I
7 c. x1 I. y# V! _) Z/ p$ { 2 f; T0 i9 A$ \5 ^# X1 R, T1 Y
6 d* m3 P9 k& j% s! ?( l( q
图2在两个层中加入车头che
. }! W. z4 U: s7 a& V8 z, Q7 \
: P: X& O; Z4 C) J# {0 K: K
9 I7 z' K! W" J 步骤3：现在回到Layer1层第3帧，在Effect面板的下拉列表中选择Brightness，将后面的数字调整到-50%到-70%之间，这样Layer1层的车头就比Layer2层的车头要暗。如图3所示。
& _" H" O# \/ w+ y& A* X3 h# b, p/ k4 `
+ T. | x1 z% U4 h+ v
+ u3 o8 U% y6 m7 A2 S3 U* D
6 ^! |" N) J _9 q 图3明暗属性调整
* F5 K2 ?% t/ o0 z" R0 W) k/ Z- }- {2 { A5 d m9 [4 r; ?: A
8 Z9 \, q4 S7 N! l) a$ k
步骤4：选中Layer2层，再次点击下面的
8 D3 P* R5 O. {
3 H, ]# f) ^% N/ T5 q5 s9 [" T图标，新增Layer3层，选择Layer3层第3帧，按F7插入空帧，在工具栏上选择矩形工具
* A' E0 z( t- b0 N6 v6 k' u! W
8 V q3 i3 h x8 e8 M3 [，在下面的选项中点击
( ^# a _8 G, i8 H" m, o
# H% r/ k/ N( t) g; `
图标，弹出矩形参数设置窗口（Rectangle Settings），在Corner后面填入数字10，然后用鼠标拉出一小段圆角的矩形框，并移动在che车头左边的部分。如图4所示。
$ H, }2 p# ~( L' j0 E& O4 a
9 E( R; u$ B7 m% U4 o, X/ L4 u) g4 V! O, A; d7 r
! n0 G7 ^( Q. L" A* E2 O2 }
4 U9 Q7 Q" [0 ]/ r5 F- x
图4绘制圆角的矩形
9 ?, \" A5 d6 L5 Z8 N7 [& ^! L" B+ A# s6 y" m1 O
8 O; M- b2 C2 ?# q) l: Y) n) L 步骤5：选择Layer3第42帧，按F6插入关键帧，就将第3帧的圆角矩形插入到第42帧，点击工具栏的选取工具
3 D! F5 Z* m3 K. X9 G
8 \! Y/ B" J* z2 v) l; e; _
，选中下面的缩放工具
: w) P) l$ n9 Q
* a$ O& i1 E. U+ K4 Y/ W，将刚才的矩形框向右拉，长度接近车头的宽度。然后选择第3帧，在Frame面板Tweening项选Shape ，这样就生成圆角矩形由短变长的动画。如图5所示。
2 }/ A7 I( c' l; ]: u
, O0 ^: i X: v8 f
( }8 Z+ e' t) r1 E 5 F# B/ }! y9 T3 e2 O) b h2 ~
* q- T2 P5 _" t* D 图5在第3层第3至42帧之间设置渐变动画
* o. F/ ~" \5 O9 u7 V. K- P- g
; K, [: |% l$ q0 X; g6 ?6 c4 {+ U, S
步骤6：在Layer3层第45帧处，按F6插入关键帧，同样点击
' ~, h! c9 I, T0 ?- R4 a: @
' L" O5 G: E; u. i- }* J- w) a9 s7 a
，选择
( M) _9 i% a/ [# u, u; m$ Y
0 E0 Z" S! x: ^, f, @0 v
，再将刚才的矩形图形向下拉大以覆盖整个车头，就会生成圆角矩形由窄变宽的动画。如图6所示。
, Z+ C& \9 q Z. x
" ^+ p- l9 R( @7 u5 g. l: u L) \" ^' B4 Y
% B9 n+ d' V/ O; Q+ }
( n, S( s+ P, }4 h3 f. _' U. c 图6变大的圆角矩形
9 @+ \ d- z* r; [; `0 m+ U" c
; X+ f: S# k9 T, Z9 o" d; |! u
$ @/ z/ H6 z' q 在Layer3点右键，从弹出的菜单中选择Mask（遮罩）。如图7所示。
; w3 o/ q* l& h N( `3 V8 P
- d/ p' v! U9 {7 A$ U$ M- o+ ]
e2 G2 @! l" z 2 l9 l4 X, n7 J0 e2 z; t
5 L" v" ]8 i' W$ K) W. L
图7将Layer3设置为遮罩
$ ^/ T/ c+ |+ [. @# t+ q1 n9 L" e' w
! ^( X9 f& O$ \, _8 t
5 w2 c4 r$ p( ]- r' s2 T 完成后的显示效果如图8所示。
/ A! ]" g& P# C0 K! k$ c4 k% _
& d; e: X8 i* m0 u# A: A0 R5 ?5 K8 {5 b" o- c
3 T4 h# X- H$ b6 W! N
4 p; {, [2 a7 N+ v! H 图8车头上逐渐变大的亮光动画
, h3 w3 U% R9 G: J% P. A2 i% v: }& l( T# W6 ]
2 W+ M( f& [. K2 l* ^2 b
提示：由于Layer1层的车头比Layer2层的车头暗，而对Layer2层使用遮罩，就使较亮的Layer2层车头只能在遮罩区显示，所示就产生了在较暗的车头上有一亮区在由短变长，再逐渐放大的效果。
* S5 K+ y9 V: q* R4 |$ S1 u, X; s2 L8 L: u& y, A
# B. ]7 M9 j0 ]8 r6 {$ f
* t, T5 y& s9 n) _$ p2 E$ O4 o& Y
% a* D% Z7 |7 Y' t' B
! k$ {3 ~6 I# l: Q 步骤7：在Layer1层选中第51帧，按F6插入关键帧，并选定该帧的图像，在Effect面板将Brightness的明暗程度调整到0%，即使车头的亮度变为正常。然后在该层的第75帧到80帧之间分别插入关键帧。这几帧是为了得到启动时的震动效果，可分别微调它们的位置及转动角度，这里不详细介绍。最后将鼠标移动到Layer1层第85帧，按F5插入帧，以延续画面。如图9所示。
7 b. w" }& G' { A! R8 F0 X5 m1 z( U0 ?& Z4 |3 W
1 f5 {9 n6 v; C$ b+ g, X1 n
7 i( Y* } P3 r7 i1 g. P( t: L9 v; y
0 ]/ d0 q9 O' V8 s( h 图9产生汽车的震动效果
9 p3 q0 Y/ t9 G0 m' q1 H
& T8 B/ i; Y+ k/ c
* Z+ ^( }3 o* C. Y$ n 步骤8：添加声音层，具体的声音要根据动画效果而定，方法请参考有关章节，图10是加入声音后的时间轴。
) V5 K$ L. k4 P' T& l! b) {) v+ ~
0 z6 N) C1 c( W0 A6 c+ b
2 w, V$ w1 e" A' C' R
/ j. t1 i# x9 [# h. m. U& [& b
2 W" u E o. e3 {7 d8 a 图10声音层
5 d8 A+ X+ z$ I
8 c+ t; e% d& Q' a) O. m" \# [
" g6 A) h' ^0 f5 N" i7 E( w* d 二、靓车展示
, i R$ g4 ^# r5 p, f6 J7 d$ T2 Z
; o: Q' p z2 |* V
* ?8 r2 O/ f+ p* q- A) @
. d3 J8 z# ^6 b' g. g% ^4 }* J. j* l4 W
' p& U0 Q* r3 y; W3 L' m* E- q
步骤1：选择Insert>Scene，建立新场景Scene 2。导入用于展示的一组汽车图片，分别建立汽车图像符号，并将它们的命名为qiche1、qiche2......，然后在库中建立名为scene2的文件夹，将导入的位图及创建的符号全都放在这个文件夹里。如图11所示。
! e( o2 [2 Y, @0 \$ W1 v
5 b4 e- [6 w" q2 d. ~2 v5 Y6 N( T9 H/ ~$ S8 p5 q/ B6 v
# B Q5 z1 n) s
3 Z4 P e% C$ _+ E9 B
图11库窗口文件夹scene2中的符号
% F. ~; l. \0 p$ Y8 G0 l
, u, P4 O9 E6 n$ D
: Z$ C- a/ K$ h# @; f6 P) d
提示：为了便于管理不断增多的库元素，可将在Scene1运用的库元素全部选中，点右键，从菜单中选Move to New Folder，在弹出的对话框中给新文件夹命名为Scene1，则选中的库元素全部转移到文件夹Scene1中。
2 ]& K' W3 e5 R9 X( c! m3 c) |
i; e% L* k/ k0 x! F
7 o: A" k |6 X& o5 ^9 i0 j5 P% X; }. w* |6 {3 e7 p% {5 t+ Y
( H* X9 S# {: ]% E1 Z$ _* {4 ]9 i$ C- U$ w- K) Z% v
步骤2：在Fill面板中选择Bitmap，则会显示导入位图的缩影，如图12所示。
+ t2 w! [3 a$ M% A! E7 O! i
. R# b2 R9 S$ y0 l& L* l6 C! T3 f
! d f$ f6 z* h2 f* ~- O
- V: _- Y4 G: l) g) K
图12填充位图窗口
{' u9 f0 n6 O, R& O V
( G& k0 H% z$ ]- b! _3 _6 E. h+ R7 m
步骤3：点击工具栏上矩形工具按钮
2 c+ b0 X$ \! |& c# ~
3 Q( V& h# b+ J, V. r，在舞台中拉出一个矩形框，框内就会有刚才选择的填充位图。如图13所示。
( R8 b& n- x! z* l, X7 ^% b
W1 |/ y$ |5 u
6 u) d2 x$ B6 A( ^" \& {( f
1 t, Z# ^2 g& o J, u
* i; H/ o' z8 U9 C5 L3 F
图13位图填充
$ K; d7 T; C9 {2 y- [" f8 |6 k
$ D& u" f0 u& A' S) }1 ~" O5 T* u# ~& v
步骤4：由于位图大于拉出的矩形，所示矩形的位图填充只会显示位图的部分画面，为了调整矩形框中的位图，可选择油漆桶工具
) U* J1 L' N6 U; f0 h7 D2 y1 y
`3 @. t9 E3 h; q( c+ J，在出现的附选工具中选变形填充
& h+ R, r/ T5 G" s4 G# j6 V/ X
( `/ |. I+ b! t1 N& z+ C，然后点舞台上的矩形填充，就会出现一个调整框，拖拽中心的圆柄就移动位图，以调整出满意的画面。如图14所示。
/ A8 k" W* d8 Z' h
1 Y- U8 M# M6 u! b/ {
, H2 L! n m( I1 Z
% Q& s+ w" ]/ E+ A7 a& u7 p- h
6 ~7 ?8 s# i8 i4 I; v9 d6 D2 f: \0 K. d- m
提示：拖拽调整框四周的句柄可缩放、扭曲和旋转填充位图。
+ K, ?* L0 H! U0 G% Y- @3 w' u M( ?- \1 L0 I8 o; @0 B
4 u/ ?# W6 e) x5 |- `. n# J: j/ r* i8 {
$ ~7 h% p9 o4 J! y9 X$ k
+ z- O* l5 H8 U+ W8 }6 z 步骤5：在时间轴同一层，选中第4帧，按F5插入帧，这样可将画面从第1帧延续到第4帧。
8 B0 x) {/ I+ o! O/ y3 C
- ?& j7 m; `, z) r8 _
& k- `: B8 L# B. o, ?" i1 Z# W2 H
" g* a8 \! e2 N+ r
2 r6 K8 y1 u1 N! m: n0 J+ \, V, D5 m4 e$ a, v0 t5 E e
步骤6：建立新的层，在对应在上一层结束的地方建立空帧，然后参照步骤2"5方法建立位图填充，就能产生快速切换电影镜头的效果，如果在其中连续帧之间插入空帧还可以得到其他效果，因为画面很多，这里就不多讲，具体实现方法可参见源程序的Scene 2，图15显示的是Scene 2的时间轴。
) {8 W0 V# O* Y u& t4 [
, {& _6 I- x' l& K# u
/ X6 d) G; w/ I8 t
0 z8 ~# x# B- F
$ A4 i; v& }5 C5 _5 b$ F
图14位图填充调整
& f3 M, T& b" B$ \. b @
) e4 `9 t$ R5 N. H( x8 g k6 {7 E" Y
S4 F* X4 q8 U! t3 P. R. H0 a0 \
: S, [" s! Y6 d+ c, {1 \ 图15显示快速切换画面的时间轴
, J# `2 L4 \& [* k! y/ \+ e* o
! G( J2 R+ z! e: @, V6 \- X5 }9 I. w d$ b* a A3 k( j! x
三、假Loading效果
8 Y8 u& u0 s. p: a
( T' Y2 W2 e3 T4 }4 K5 p4 f3 Y. I# @' o
, N! J+ q2 i0 R$ p, a
# c: X+ r3 e& r' Z% n! J9 G/ _+ q) `# B3 G7 L# ]- c
步骤1：选择插入>新符号 (Insert>New Symbol)，在出现的对框中勾选Movie Clip，命名为Load2。在Layer1层中画出一个表盘状的图形，如图16所示。
- U0 d- Q& [6 @- [8 k: a J
' }8 n4 G# F1 t9 Z" u* ?# Q& \
, t9 ^! E' n" P6 r) x
2 g3 x4 s* Z7 ?
4 V* d, b3 U( `) ? 图16画好的一个图形
& ^! I/ m' D' j. {/ A0 I
7 e# K7 j2 o9 @( V( z7 G6 r5 j/ D" \$ P) u; y9 s3 q
步骤2：选择插入>新符号 （Insert>New Symbol），在对话框中选符号类型： Movie Clip，命名为zhizhen。在第一层第1帧，画出一个指针图形，选中第2帧，按F6插入关键帧，将第2帧的指针旋转一定角度，如图17所示。
7 ]! }. c# \+ U6 B3 }! L8 K+ Z/ M
$ Q% |9 B8 {2 ]- z" x. N& v
4 l( U5 R3 L+ O/ b
2 F: Q3 @. D1 J: f: X8 P- u! ^ 图17制作指针
& C* F7 \0 Q- q8 Q( Q! }1 c; A) d5 m) A* i R+ a1 U
# T! n) c8 Q3 W& r( {& n% @+ q
提示：指针的中心点应移动到下端，这也是指针的旋转中心。
0 @2 {3 a$ A( W2 ` g: f d- R6 ]+ A
* d# a1 R. Y. u+ k* y& @
; ^/ P d+ P4 g3 J- I/ w0 K' P7 ~ r. K
& ~0 {3 P$ q9 F: I, l# A' o; K 步骤3：回到符号Load2的制作场景中，新建“指针”层，将刚才做好的zhizhen拖入第1帧，向左旋转适当角度，如图18所示。
0 M7 B6 p3 X5 F u2 _% S
$ I* z8 g- H" i) u4 T7 c
( D q9 B4 n4 W; W8 ^ + X J: }1 v8 z3 T7 Q8 U
; O9 G, ?+ C, h) V' U; ?6 p4 w% E 图18第1帧的“指针”状态
. |- O2 p, C% D% p3 N4 d/ |0 Y0 H1 [- c' e! Y
9 q9 h# v5 t. [
步骤4：选择第15帧，按F6插入关键帧，将zhizhen向右旋转一定角度，在第50帧用同样的方法插入关键帧，继续向右旋转一定角度。如图19所示。
( V3 Z6 k+ L3 t' K- \4 T
# |" [* h4 C4 ?# x1 \8 Y
3 M* z, G8 P# l- T
Q# k: m9 k; W% Y
) W$ |. A% ?' N9 B" b( _" C d6 O8 ^% Q4 \3 P! y7 ]
1 W1 E5 F+ `8 I( j
图19 第15、50帧的“指针”状态
( x6 K- Z' @ e1 f' ? S$ j
4 u) l" x* L+ s; E& Y8 W% P! `4 }! X! }
+ M7 `0 e" _% h' V4 m3 F8 T 步骤5：分别选中第1、15帧，在Frame面板的渐变（Tweening）项中选Motion，就会生成“指针”旋转的动画。如图20所示。
K. x# @, W3 e3 C3 h4 ]
4 Z; S9 `+ _% P, z" W( c
6 }6 f" g! D: c. A 6 \7 s M- R5 r- E4 \. e1 f
/ ~2 }, q9 [- c7 E; X8 S$ {! U
图20 合成“指针”的关键帧动画
$ |8 e# A/ D! |% F7 O) K8 g r0 w# ^& |$ E" h0 T* Y
; p0 Y8 k1 e# f! W# a! E 步骤6：在“指针”层上的第50帧上双击，打开Frame Actions窗口，从Basic Actions栏双击Stop，给此帧加上停止命令。如图21所示。
7 @; _) d9 O. M; |4 ~/ N
) J% \4 H. d7 w Q( `+ o
3 F# _4 H- v% l& l- S( t* x+ u3 M5 V3 L8 T; |; w' R$ S
. a6 C1 T; p9 X
8 X7 P- D U2 W6 U
步骤7：建立“声音”层，将已导入库中的声音文件拖到舞台。如图22所示。
3 p* K( _4 t0 a4 e r
: R* Z! v' i, l' _, @& L& w f ]" D
5 ^5 S+ s; B9 X8 I$ y
# J) M: p: a8 ]# x4 `/ y1 j" }/ t9 J) ]. ^
步骤8：现在回到Scene2，选中Layer 25第143帧，按F7插入空帧，从库中把已做好的电影片段Load2拖上舞台。如图23所示。
8 T% Y* Z0 u. V5 o4 r `7 _
4 l. B+ k6 `4 P1 K* u; \$ J
& A: ^ h1 M% B
1 j( w/ U! L! U/ r3 h3 y8 `
0 m3 T; Q% n: y* e, v4 Z4 u. a' }; u: x. c
步骤9：选择同一层的第200帧，按F5插入帧，则Load2动画就会延长到这帧。
; }4 R# r0 ]+ \& r
% G" P4 H7 o7 l5 u _- R T# x( T5 h2 J
3 T0 l V/ S8 ~! D: p) @
2 S- \4 E' u) S 图21给第51帧上加上停止命令
5 l6 ^+ f- C+ \: I$ t f2 [( ?6 M1 A1 e
. X1 J' ^9 {1 L5 } L% q . t$ Z1 O+ l, J0 ?+ V# m3 X' ?
, J( e2 o S$ Q 图22已完成的假Loading
. n# C; ?/ @1 j- o9 F& M* u% b/ o% ?
" Q. P/ H9 L" O; D- b
9 I" @# t6 ~, y' Y
. }& v; B, O" x2 x! u w4 n& T; _ 图23将做好的Load2符号放在143帧处
# z/ _5 x4 d" I$ {# L% ?, C
# M* H2 k# F/ u0 v
, M+ i2 Y- `0 F
因为考虑衔接的原因，在这里安排了假Loading效果。而真Loading也是一小段动画，它放在第1帧最先播放，由于使用了If Frame is Loaded语句，当检测到指定帧下载完毕时，就会执行Go To语句跳转另一指定帧。真Loading一般用在较大的动画中，为避免画面下载时太慢（或中断）而制作的。
2 F0 q# \! x5 r7 G" M+ }
4 t. K5 E& ^9 T/ j! ]9 D* p1 K% d. K x& C& P* G
1 C D' e/ G6 M
& ^5 ~* O$ q7 j4 _
% H& } G# ^* u 可在光盘中打开本实例源程序， Scene1的Layer 1层的第1帧中有真Loading，大家可从中看出真假Loading有何不同。
