在Flash中逐帧动画是一种应用很广泛的动画类型,尤其大量的应用在3D领域,本实例就利用逐帧动画技术制作一个方块扭曲的3D效果.
: ?" E+ b }1 M. j- j' z0 |
( [5 K* b* \# O: F j/ _$ v
3 P+ y# m) ~' n3 P! i
o( }% @: j* U1 x9 s0 A% d( t% @3 v7 h9 n+ ~8 ^
2 ~- ~- ^4 H/ W) i. }
本实例最终效果如图1所示:
! @$ L# J3 s; S; `" Z; I, c( L# w! W2 @2 {& z0 v
9 P' P7 h/ A8 s: E* ~6 E
/ t! @. O& K, @$ K6 h
: s' w( X" y: b. C5 B3 q# C
( ^: @6 X% M+ b% P/ _( O% L: h! M
. [& Q$ d5 c/ w' V) f' v9 @6 `
/ c5 O, h3 w( H图1 最终效果
. T. J9 `/ `/ ~$ D8 L
( f: U8 z, u2 Y0 P
4 v8 H' k3 O+ }+ H
7 Y- v! p5 g- D0 ] R" l! e* N4 g( O
- I3 J3 p, y* o* S0 x$ {4 _
1.启动Flash,新建一个影片,设置影片舞台大小为360px*270px(单位为象素),影片背景色为浅黄色,颜色代码为#FFFFCC.
t7 {+ v2 J: |% n
: q- |6 p. \0 J, z T& \
* \5 `. h& w/ ~4 @ I8 q$ J
+ F9 J# w% A( ~9 y$ _. S- Q& G7 Y
- s6 y6 l3 g2 m7 X9 z$ m* }% A; ~# B- J4 } q6 p2 X
2.新建一个影片剪辑元件,命名为Cube,进入元件的编辑区后,选择矩形工具,在按下Shift键的同时绘制一个正方形,并设置其轮廓线为黑色,填充色为灰色,颜色代码为#304E8B,绘制好的正方形如图2所示:
9 J1 t5 U4 ^' c+ L$ M5 {/ |
3 }1 m: I! o6 z( S% m/ d! ^( X$ v
" A6 e: ~% `7 S! V1 G; u6 k5 n4 K9 _+ [( `& _6 X8 M# x" F
6 n4 N& ~# B3 U( d& D
9 f5 u- H' ^$ T
# w4 l7 j0 s. k, D4 P) A1 r
3 {- C6 h( f0 [5 z$ C: |
. L, A! ~, ~) }- V/ O图2 绘制正方形
# L8 {7 t. R. I% m$ f% s
& ~0 ~/ U/ Q1 s' W# v/ B4 y5 X
9 O1 R1 b: U8 f. b/ v$ [
! Q7 ?& _1 v7 z# \9 Q6 V: ?4 h
- \/ s8 c8 D0 H3 c/ G* h I A8 u
) o2 Q- F5 T* x: @3 O s 3.新建一个影片剪辑元件,命名为Cubes,进入元件的编辑区后,分16次从图库中拖动元件Cube到编辑区中,利用对齐面板并调整其位置为如图3所示的矩阵:
. O8 d2 W, p2 b" G, o& Q
' G; m9 `! m$ a4 g/ R- a) @
) J5 N5 _0 C8 h( f9 M- J
) V" b+ x, j0 c" J! A0 i
, q! ?, Y) |9 r3 ]; ?8 d
9 D, Z+ `+ [" t3 v4 E9 L0 z- G% A3 ~9 P5 ~ H
/ t8 ?- N/ H8 u, p, T& | W5 n+ S
( Y" b1 `( o8 G* k8 ]1 _图3 排列正方形为矩阵
3 y& `, x1 V7 a2 r" Z; m$ V P7 g+ { X, ^" i: Z, F0 W
+ m w# O% V1 G' R
/ n S& e4 j6 d1 M! m7 c1 S0 ^/ [ [4 _4 h) `9 F j! J" k
9 V. l' l4 }8 A0 `7 k( g5 M
4.在第2帧插入一个关键帧,分别选择此帧的16个正方形,并如图4所示调整每个正方形的形状及旋转角度:
$ n3 f6 X2 ]! L+ @- r1 B! F- Z
+ N; p' v- n. U {! s
4 q Z$ l5 T L9 Z- V! P- l
A8 ~, G5 P" Q
- S% i: [1 ~2 B: f8 _, R d0 F1 W# E* `4 a( n% U
( Z) L9 `7 T* O: I, l( ^' h s, ]' N
4 }. D m+ a1 I, b2 G
# ~) _! S% b, b# w+ J" G图4 调整正方形的形状和角度
0 c$ V$ G. R+ C+ |4 [' D+ \3 g( D4 _
6 N# E4 b I" p g( X3 L- t) [) @1 I8 x' ^" k
8 ?6 m+ |* h1 _7 v! M3 ~( r6 x% p; Y) K! }9 J1 ?
4 R# V; ]: z* t7 W& F 5.在第3帧插入一个关键帧,按照上面相似的方法继续调整每个正方形形状和角度,如图5所示;
0 R) \. m& _, F0 |' K; a# ?5 [
9 {2 g6 d# ~, ]5 U
& o) P. [* C, @7 a8 v
' ]1 t) k% O% \1 V0 ?
1 j2 ~& t' p5 l9 m/ \8 ]$ f/ t, `% H% P6 G. K
. y: Z; e8 h: R5 q
1 I1 h+ f2 `8 A! V l+ M; J6 D, w) G W: j# z
图5 调整正方形的形状和角度
8 p6 m5 b. c% P3 D0 j& J T& r3 `0 I; j! @7 l2 Q4 H
( f" J) z% K4 [) y0 a8 k+ ~
( k. J- h, n- [! n3 ^
6 J9 R- j* i' O" }" V `. T$ J
1 V# ?- K* U& k 这里需要注意的一点是,如果有两个正方形有重叠的区域,需要设置前面的部分透明度,使透过前面的正方形可以看到后面被遮挡的正方形.
6 F8 m2 z' u0 C! m5 M* S
3 x9 y2 g( k! q/ o) _
5 A+ c' u) R: ^# D2 B4 H6 G9 _8 }" O2 y1 O% y1 [
# S- {9 b$ Q/ W1 i S# i- o6 ^8 ^
2 c9 A& o5 i. K& z8 H+ i; |
6.按照上面完全相同的步骤,依次插入关键帧,知道第36帧为止,在每一帧中都调整所有的正方形的形状,旋转角度及透明度,最后一帧的效果如图6所示:
9 f. s5 ]* f0 \ Q+ U' \6 O2 ^# d! J4 Z; y. o! l* @" ]
! l# ?7 Q' \$ B% g8 D0 z9 G! y9 |
. c! z, E. u- I, H
- D3 G- T* m+ u0 Y5 p# _ @' L8 r3 T
4 p8 \' A# J2 ?" E+ R8 F2 G: Z* q4 b; o9 f p1 f' u
/ ?* @9 `& V L
9 g! y, V9 l; A$ g' d图6 最后一帧的效果
6 q6 j( A8 ~. V' X: {4 H: _
/ d. ^: b0 K0 p3 g8 c, i7 |! h: b
" l5 _4 e1 O) q/ h1 z3 l5 ` z- I
9 I* j5 ?% \- ^6 W" S' |
( ]$ L+ b4 Y9 g/ W0 D0 s; h
! j( F, P1 F5 x# d 7.为了使整个旋转变化过程比较连续,在最后一帧添加Action: gotoAndPlay(1);,最后时间轴如图7所示;
1 n% N7 U$ R' c" K$ o7 h( b& `% }$ N( ~$ l
( D- p; s9 c, P. ~; B
: K9 C" X# z7 e5 z. J2 \
! |& I# b9 W6 _1 v; \' F& Q& `% K- N
! z A0 T2 D3 n
7 @: H2 {+ y- o8 f9 M( K
: N+ L9 K6 w* y# Y
$ M4 `+ z3 A" m+ _" [' N图7 最后的时间轴
4 ^( y4 M7 K, q% _5 S- Y8 L: K) |6 k. A/ v0 e& ^
, J6 Z6 j. L u ^6 m9 U- X$ c' j
9 Y9 u# Y, Z8 D8 B2 \& B4 S% G) Q x f) p
9 E1 I+ Y- e! e/ y) ~0 Z$ L- ^
最后的任务就是将元件Cubes拖到主场景,发布影片就可以了。
