Flash MX实战精选:动画片制作

图由心生

版主

Rank: 7 Rank: 7 Rank: 7

1^# 大中小发表于 2007-6-23 16:10 只看该作者

Flash MX实战精选:动画片制作

后裔射日

2 y& E3 F5 m+ G5 ?
7 C. o3 b, T5 U: `) Q8 M

( R5 c  [& N& X: X3 T
　　1．实例说明+ C/ L  i- p! I& s/ ^; m
- `, F8 d8 h# D( F9 `
% O8 l# ~2 ]2 v. l
" D( X) e! X8 h( k$ e4 `5 \

　　这是一个动画短片巨作，由近两百个符号，22个场景组成。每个人都有自己的梦境，自己的幻想，当你有用视觉来表现她，实现她的冲动时，FLASH无疑是一个最佳选择。当制作动画时，它打破了高资本，多人员的动画制作模式，使你在家就能构建属于自己的梦想王国——有想法就行，很酷吧？！下面让就让我们尝试着做一个动画短片。

' S2 B9 P5 K, m
' W# E$ K4 l4 q# F- L

　　1．1资料收集, W& a. [' [% }; G7 n: t

% O: `6 C7 M. N' D

　　先确定动画的题材，中国古老神话怎么样？那就做个后裔射日的故事吧。不错，就是它了……

' L7 C* J4 n0 q

　　然后到图书馆，书店去收集有关后裔射日的图案资料，文字资料与音乐资料，（这是一个必要过程哦，它是一个形象化的过程同时也会加深自己对完成这段动画的信心）。然后进行整理……
0 R# a$ I) b6 {$ M$ c4 g/ L5 q0 a

　　1．2 人物，场景设定1 l  W5 Y) d" V: A

! |) f; V9 E# V) c# Y
1 ~! p$ _, t; G& p

　　当资料完备后，人物和场景在脑中也应该有个初步印象了，这时你就可以找张纸，把想好的人物和场景画下来。我们这次作的是后裔射日，所以基本上人物就两个，后羿和金鸦，（当然你也可以直接用FLASH画）。' t  k: k2 s- Z) \- C
. d4 P8 }7 R2 m- C8 ^
. ]! y/ m/ W7 }  l6 j( S

: v. p6 g& l) u+ H
　　1．3 分镜头
& [3 p+ I) x/ {& d5 d

( Q' R+ V( x/ y) o% z/ f3 S

　　FLASH中有SCENE的概念，其实这在制作动画短片时很重要。一部短片可以分为若干个镜头，当衔接起来时，就是一个完整动画。（在FLASH中，可以通过INSERT——SCENE，来实现）。《后裔射日》大约有22个SCENE。大致是1.LOADING画面及开头、2.太阳升出海面、3.太阳肆虐…………21。射日22.结尾。当想好如何分镜头了，你可以先把他画下来。6 Z1 Q- y- o. S; v6 l, n
- j% M3 t2 Y% |0 f  p: m

, {5 r: g* l! ^+ \* c' _6 |7 j
　　1．4 制作过程; H5 y& @. y* i
( S* ~& t9 W+ J: O8 w3 X' Q
- r4 Z0 O8 a# E7 L- l- }

5 f- J1 f+ V8 W( W: b
: R9 \6 `' Q0 h) m' P
　　一．LOADING画面
( E3 \9 c- J6 \( l+ P7 a3 g
( o+ o5 e6 N4 v- N$ M
$ T+ @$ m& c0 r% O; d0 ^( F/ s% S

8 L- E& [% @4 `; m% J+ B
　　1.当上述过程都完成了，就可以正式制作了。先新建文件（File>New）调整尺寸（Modify>Document）至550px X 300px。
  e7 c8 r, ]4 I+ J  x
; }" e4 ~$ P( |0 n

1 o6 C5 B) D7 o( E- z
0 T* X# Y! L3 g- ^: d' J) u- [
　　2. 但这时画面是很空无一物的。我们如何下手呢？我们想让观众在看LOADING 画面时就对整个动画有一个大致的认识。所以我们先来进行《后裔射日》的第二主人公—太阳的制作（传说中以前太阳是天帝的儿子，他们是十兄弟，并且平时是以三只金色乌鸦的形象）。有了先前这些资料，我们就可以着手进行太阳的制作。  1 ]  b! `5 y" m
: m- ^2 Q% N9 B; }9 d) u
# C4 o- i0 b) e4 g% X6 J6 v$ G' A8 b

4 J2 p; z, X0 W5 c# A& b) i
% s2 A2 D, L- c& b- S( `" r1 H
　　（Insert>New Symbol>Graphic），取名“太阳底图”，画上太阳图案，如图1-1所示。( @6 m+ l  G4 y: A/ _7 W0 N: N

/ J% ]7 P; q% @! Q. s( }

　　不过光秃秃的太阳是显然没有人气，我们加上火焰吧。
) P4 `4 x& ?  Y* Q- N  k4 t8 G

. h) }; Y" Y  w0 l) g1 }7 q
+ K( r& b" ~+ N3 y" B  K# V

9 M3 C5 y7 [& n; @. ~8 h8 [

( v* M6 J" n. d4 E- m
% i; E, @0 m2 P0 r
图1-1太阳底图
- g( z- b2 v, i) z, d/ U3 Q1 e

2 Q1 |% \- ?" E

　　再次（Insert>New Symbol）选择Move clip取名“火焰00”，制作远动着的火焰动画，这必须作逐祯动画，即在1-9祯分别按F7插入空帧，在每祯分别中画入如图1-2的火焰图案。, J; W4 Q5 k* c1 l" b
: u% {* E1 W/ u% | H6 [
8 g; J3 @* P$ c4 q: f
/ X" Q* k( y- m) n$ W
( B, G# Y2 S! `

. L! y) H- Y9 b) a5 i9 D4 r; d
5 G- L# u1 c/ J% y3 A- w
图1-2火焰

9 m8 b2 M  d, U7 ?
" p- ]& i; t! M' o/ P8 I( c- P
　　这样就完成了一个连续的火焰动画。然后用同样的方法再画出几个不同的火焰，分别命名成“火焰01”，“火焰02”……（这样放上几个不同火焰Move clip，会使画面看上不呆滞的）

- u. V: V# G) G. u

- Y  l$ i4 w. c$ z3 i+ w. @7 s
　　接着我们在图案的中心部分加上金鸦拍打翅膀的动画
$ u9 i' z* @; \
) l, [+ \5 @1 S  t9 L) H* A% I
- M0 Y( E8 _" t9 U% c$ l
4 `  n( M$ c8 k0 H+ k

　　同样作一个Move clip取名“金鸦”，再用逐祯动画的方法完成太阳中心“金鸦”拍打翅膀的动画（具体动画参考源文件）。

( U0 k7 Z: o2 r+ u8 I2 C7 V

　　现在可以合成这个燃烧的太阳了（Insert>New Symbol）选择Move clip，取名“太阳”连续点击

两次，新增Layer2层，Layer3层。在Layer1层中调入“太阳底图”，在Layer2层中调入“火焰00”，“火焰01”“火焰02”（并多复制几个，使其以大小不同，错落有秩地围绕太阳底图排列），在Layer3层中调入“金鸦”，如图20.1-3所示。
; j i" _4 s% z5 F- I8 Z

5 \& s: J5 D- p9 ~- x# S" K
　　这样一个燃烧着的太阳就诞生了，是不是很棒啊？随后我们把它放入场景中。点击

进入Scene 1, 点击

% O6 f! g) W9 \: e
新建一层，调入Move clip“太阳”。( B/ I- R  b, M
; I  w! p1 p4 p) ~8 p. Q! G
1 X8 {& y8 N& q3 f6 @; V

& r* _+ I! q( Y- I3 V5 P
$ K& y( e3 M  k& i8 A6 ^+ |
　　现在可以导出看一下效果。一个熊熊燃烧，并带有一只扑腾的乌鸦的太阳出现在我们眼前。
5 {5 C( F/ e3 b. Q! U# ~- g

/ ?" k1 y5 K$ T
　　不错，还算符合想象中的形象，让我们提起精神接着做下去。2 o9 T; \5 B% z- c

; P# I- J" s+ T7 f  v
, m* j- i: L0 n) t9 d6 Y& q, b
! F& ]# }  i# x8 }( H/ i

! ~4 [4 W2 ?% z+ `% Y' [( T

图1-3太阳% f3 u8 ~0 X6 j' e$ M+ u
/ V7 J! @8 F7 |" s, P$ Y6 G: ~
$ {+ _. `5 `7 T; H

; z; B9 E" f- B3 I! h. K3 L
, ^( B+ C) m9 }( L% M9 W! U7 Y
　　5．然后我们来制作LOADING读取槽6 ]- \" _: g( T4 p4 q& G

5 J6 l& n0 L2 u, K! Q

　　我们想制作一个象格斗游戏中能量槽似的读取槽。使在网上下载动画时读取槽会随着下载程度漫漫变满。

N4 g. v5 t1 k3 U

5 ~1 D1 k% J6 P, ?
$ r2 {, a$ S1 Q3 v8 j- Z$ P
　　好，Let’s go4 w, ^% T% v( s6 L, g2 L3 }" n% S, q
- u% z6 z" Q ^5 b
, |5 {# A. }; ]7 r- L
. t2 c: A2 r3 b4 o

: E, q' v2 J% g. _
　　（Insert>New Symbol>Graphic）取名“长方形”,画入一个30X18的白色长方形。再次（Insert>New Symbol>Movie Clip）取名“读取槽”，点击

+ _! n- ]) O& X" d( n" R s
新建一层,在Layer1和Layer2中分别调入读取条，调整他们的宽度使Layer1中的长方形的宽为2 px.。使Layer2 中的长方形宽为325px。（Ctrl A）全选他们，（Ctrl K打开 Align窗口）点击. b9 c' W! d5 S9 @ n4 B+ R: h* ?

' M- c8 w% t9 V. e
与4 M. E# V# G* b5 d# |

使其如图20.1- 4排列（此时的背景色为

# _3 h( b( a l5 O" z( ^0 R
色）。

6 r4 O' N: D- @/ \

+ h+ M" l% L% n/ X
图1- 4读取条0 W% U7 v. b5 p: r; Q; Z- |0 }1 k

　　Layer1在第8祯时按F5,Layer2在1到8祯分别按（F6插入关键祯）然后调整Layer2中长方形的宽度使其逐祯递增，在第8祯时的宽度与Layer1中的长方形相等，即为325px。（此时读取槽为满）。在每一祯中设置“STOP”语句（Action>movie contral>stop）+ ?6 S6 h: Y9 H$ l

* n# }+ C; I9 ~5 ]  p
! R0 p: W8 g, u" F& Q

　　Scene 1中新建一蹭，把“读取槽”调入，选中它，使他的Instance Name 为 “a”(Properties>Instance Name 中输入)这样我们就可以用tellTarget语句来调用他了。9 f3 p: b. ]! C: Z: F6 R

. `' C4 ~, `, [3 f$ Y

1 ~1 |7 {+ \& v$ f  I  W
' ~2 n7 R6 D. [! {0 t) [# M5 f
　　然后就可以用If  Frame is Loaded和tellTarget 语句实现LOADING功能。' U& a$ o3 U/ U0 n6 w( N8 Z* f/ a) D4 W% p
# L9 H, c  P! r+ [/ a7 ^0 h5 b
, k' H$ _" q- e) h0 }  ~7 j

* C+ w* h0 l2 M, M

　　新建一层，在第1祯输入

' q* O- \/ W: c5 z# l; S
+ r: o4 B2 ^  v  U0 G1 U2 w9 N$ l

ifFrameLoaded ("Scene 3", 25) {/ x$ W; z2 C$ j  \* j% X6 a
$ d2 g4 Y8 I2 P4 `8 M' Q
9 T5 C6 v1 e" ~; M' H. d: B9 }
# b6 ^. Y4 O" g% c5 x

tellTarget ("/a") {4 d& h: s( O# l! h( t7 Y9 b
: O6 P& Y( F$ N
( t/ i* {/ p! y6 Q" }

; m  P7 [+ ~) ?2 W& \
      gotoAndStop(1);
$ A5 n  e* k0 ~" w8 o- i' f
% I( Z) H& M3 E; V& [- c
- j" @' K7 G" q) |! i
* y0 Y# f% b5 v) T5 m% {$ t& r

}6 V4 z7 I1 V& k) S0 Q5 w$ R  I
  F: o7 x0 A* }# y' J3 {" O& i9 J

0 K( Q6 b) ?' {- Y! q3 C* }. e$ m

) @, w/ l5 w' l5 e) k' J, v8 l9 e
gotoAndPlay(3);. g% H( q0 y/ w3 P/ h# q

+ ~5 B$ b! m4 Z$ {9 z$ ~

1 Q# ]$ _: Q' G8 m* D3 v

}  Z( e) c+ ~. f" V- T5 ^0 n* c

5 [. H* y$ m8 C
" W+ g1 D8 q8 |/ _9 X9 J
8 [8 M0 [. I, {* Y1 X

　　在第2祯按下F7后输入gotoAndPlay(1);,使语句循环"1 d  T( _( f0 e) j2 F  h
1 P3 L6 a! R4 y4 c
# P2 K/ X, ^( \0 o/ S5 a# ~

. _; b2 Y; G5 h
　　同理在第3祯按下F7后输入$ |+ n* g( f( W* S: U2 s% t

9 ~: f* w: S$ J* Q- M2 l3 y
: t( l& I6 m: ^+ E, ?
8 t5 H3 D) i# C3 o. h8 T# D
4 e8 h- C, P' _
ifFrameLoaded ("Scene 5", 35) {
% q# Y% ?$ J- L; x- M8 u' ^" g
# }- B5 H- C0 t9 f$ T. R% W$ N9 c
% _! {8 `7 a5 Q4 P! s/ C3 E, D
3 O1 p% Y1 u9 G- y
5 U% o$ S' K. U+ g0 h' y
tellTarget ("/a") {5 M! y$ S. c! K+ L
# I4 t8 ~! ?/ I3 r) X

) Q6 s6 @, ^9 g/ i  M6 `
3 X+ t$ ]2 ~9 ~; Q8 \- h1 l/ O$ h
      gotoAndStop(2);
" g9 I3 s# @# @7 k& M" X

9 B4 u' B* _7 {: U5 S0 H2 t
}
7 a1 _7 O: S; H  d) K" f
& e9 g0 f  X" K* L6 D
6 q, T, w/ a( W! J2 N; p: c
- V& n$ A3 b7 g2 ^1 K

gotoAndPlay(9);7 o) e) b' P5 z8 [0 E! r& L* J' c

7 v9 o4 g: x* _  y3 W1 [+ y- |0 x
( h, j, L# T2 J! y) p/ ]
- v2 E4 Z  g7 J% p! f; {  F

}

' Y% g# s# T2 u9 l$ k- l  `% U. Q
0 q$ g' p' ]9 x0 j2 X; b
' k4 ^9 G1 f$ s
　　在第4祯按下F7后输入gotoAndPlay(3);,………………

5 v$ h- l+ _: g/ V
" z/ i8 L! @& G8 R1 z

/ G5 v  \" H- R
　　由于读取“读取槽”一共有8祯，所以按照上述方法，最终在第15祯中输入
1 _/ C9 [. }  D

2 B+ j. V- }) p% N& \

ifFrameLoaded ("Scene 23", 60) {
  M  L$ y8 y) W
! K2 r) F" b" @

tellTarget ("/a") {/ g. Q  O3 I! R8 \& j. X

/ y, O! a% v+ r4 i4 ?

      gotoAndStop(8);& r5 H3 i# J* I' q6 w2 u( C4 ^5 m
5 s/ S3 W" ^; a( F8 d

& Q3 G- A' G3 A% u, @
' }; c: H7 x3 }4 H# e5 B0 J6 G) O4 ~

}

5 {+ q( [8 T' Q

gotoAndPlay("Scene 2", 1);  x( F8 `8 _2 B" I- U  }& Z
( O, q+ D$ p* Y. m/ x( Z
  {3 ]2 }4 X8 |9 F% e

' y! _6 `2 ], G" \

}

6 x% c2 r0 w0 w. |. y) @
+ n7 X2 r) }) l; y" G/ s3 W6 {

　　最后的gotoAndPlay("Scene 2", 1);是结束LOADING画面，进入下一个Scene。( [9 W8 Z* @: W7 W% |5 d

6 {/ o. I6 Z, a! Q% P

3 D- E$ s4 M% Y- k
3 d, U( G+ J, n: p; q: D
　　好了action设置完毕，然后我们可以在读取槽旁边加上“LOADING”字样。1 g0 B, ~8 D2 I0 Z
; R. f! o2 F. t! F3 G) k

$ S. z1 L. Z+ u) d

　　接着在Layer1拉一个550px X 300px的

! ], w. z8 W4 \5 v5 S& n: o! d
色的长方形做为底色。

5 F2 W; l) }8 ]1 p4 E
2 X: y0 y9 ]! E* m4 V4 T
' O$ M. C" v; c: o4 n
　　为了使画面颜色更丰富，（Insert>New Symbol），画一个R：245 G：124 B：3 ALPHA：40%的圆。再选择（Insert>New Symbol）把刚才的圆调入，组成一个11 X 32 的圆圈方阵。把方阵调入SCENE1 Layer2上。% B5 L4 g/ [8 ~# P. O

4 b- b/ Z( e# t1 J- t$ ]% V
5 y% `; K: p7 _2 l

　　这样就完成了整个LOADING画面的制作，如图1- 5 所示

* {6 v3 C5 ] `: L; F1 M! t
+ }# e/ H4 A1 K& {8 ~1 V

: f8 E8 w' c3 K/ e+ y  I: B
图1- 5
% t* P3 n+ ^" n1 a# _- b
7 K9 }! _: E1 p  ]$ f( v$ Z9 a8 g: ~
( e4 T$ ~7 I  J  V& x0 Y
) C& A9 d7 J, t; }# k

　　二．开头字幕- c# ?2 o1 G( e: t$ A! }+ o
; A4 ?3 j2 g3 ]9 {, @9 c3 _
+ d8 ~  ?, c" h% e6 @2 G# v; ]
  [/ {; Q) e& ]; y$ l4 j
" S# p% P" D8 |+ `- l+ M
& r+ I1 F- s, S: f/ F9 a
　　当LOADING完后，动画开始之前我们想制做一个带着光效的开头字幕。即跳出现“后裔射日”这四个字，然后再出现类似3DMAX体积光运动的效果，如图1- 6 所示
% i# K! b# u- @

! z& ]" e! a+ u7 {  @% s( t
$ f6 D* E( x* u+ C* f
) X" r# ?. `+ G, U2 v
: w! E# X( \- H/ F7 L+ @6 e) A* U

. E) O* T9 a; @
图1- 6

; H8 [' o" z; L" W# l  ^$ n+ c

8 R! T4 X) ^( f5 T7 \
　　三．背景动画9 G3 E/ v3 y2 D( x( I1 l4 n

' e7 w9 N# q) g- i  y
' J* t& N5 i# [' j; ^/ }  C8 F
# x5 A* C5 q7 x' ?  c3 J
7 W6 V/ y! Q+ b. L& N
　　由于动画制作技术大同小，主要是一些技巧及创意，以下20个场景省略，请发挥想象……。

点击图标进入精品网摘收藏欢迎大家加入网络收藏夹

TOP

‹‹ 上一主题 | 下一主题 ››