通过制作简单的Flash片头动画,掌握制作Flash Website的技巧和方法。
4 O0 N( I) U4 }" K! r/ C
7 J4 Y0 |" k1 i2 J @9 t' E% f) Y0 L O, ]% y3 b9 m8 d
3 Q2 z. Y7 Q5 A0 B
1 ^0 W/ k% [' l% t
: K& m s& [ O9 I) `
有关知识
9 ~# x( j$ @/ d+ h7 d7 S
- z: y6 j5 F7 L7 m% @- A% n. g6 x# X" n; {* ]/ H! h
+ N) J% t8 R* l; W3 W2 P/ e6 H- R, u
: R! J# Y3 C- R A8 \9 o3 Z 控制背景
音乐的开关,3D效果的按钮制作,导引线的设置, tell target命令的应用。
6 {5 X1 T+ c: |; g6 f! p: G5 R
% s L! k; U" m/ ?; X' P, a' p
; j) i. L: i4 a
- u' w/ E+ ?' }0 G0 U
" }& m6 ~% w1 f" N C. u* i3 h4 ^, |# t3 ]
制作过程
+ T5 [6 y; Y3 d% H4 q4 g3 @2 F
! z, N* e/ x) B# B+ D0 a1 C
/ o7 a2 w, ?9 L. H H
1 ~2 I1 ]/ g! K* S- G! Z4 w V$ D8 X" C4 v4 O7 ~' D5 L3 o/ R
; w7 p* b9 ^5 ^3 }! o 步骤1:打开Flash,建立一个新文件。按Ctrl M键,设置帧速度:18fps,大小:450px*300px,背景颜色:白色(#FFFFFF)。
" f* r8 ~/ O3 l$ b: ?
4 J' `( t& }1 z& M- D' C N6 ~$ G
9 H( K" Y$ d+ o' l: ?' \+ w
/ f' I/ ^/ Y( E" g1 y$ {4 o& @9 f. V' W% |+ a& m
w" K1 _. |! }/ J
步骤2:从菜单栏中选择插入>添加组件(Insert>New Symbol),在出现的对话框中选按钮(Button),命名为bu-logo1,用绘图工具制作一个logo,如图1所示。
1 r6 f( w; c0 T I4 [+ ^+ T6 Q& y
! G1 R9 n" ^, v* C0 G6 g" x
; q8 U( q5 `. k8 K7 B& q
7 O h8 |3 l: u3 a7 l+ G) E5 L, Y
/ @8 t- J! t4 ^( e; }, A! A
/ W* u' a2 W1 U4 y& l! Y6 O$ O
$ q r! S4 `. e9 f4 |
! k) k) F* M% f& j ~: j+ k" X
. v; z6 s6 y ]+ {' g4 I O- E4 n9 b% D- D- Y b
图1 制作按钮
4 _! ?- H! S+ V: w' K. `; t
2 d. O0 q5 i: _4 u1 I- M: @
) G# x6 e4 X/ T0 g, T% L4 C3 H9 C) G4 r6 C1 m, }2 s
, W& n3 j7 h! U/ E9 \" I2 X5 | X! |
# p4 @. [0 r3 K
步骤3:制作电影片断pic-logo,将已做好的按钮bu-logo1导入pic-logo中,按F6将第2帧也设为关键帧。两个关键帧的Actions都设置为stop。
, Z% G! i0 ~. t
' K" @! i t2 K; `7 ?! O6 B2 b# u0 s; A V
# s: O3 m# T3 o+ |6 l4 R6 e! c9 s; ]; M9 T8 L9 }
3 a8 p3 p4 k$ F k+ t0 ? 导入一段音效作为背景音效。
! C, w5 ]$ H4 y; E' T- A a
# `# \+ V; d8 Z2 t$ _
% N1 C+ ~/ `! X: D) S8 }- v, J' t$ a$ u" _
. V5 o, m- H# G' V6 ]' J* y
- \4 X: t7 N7 k5 q/ i
在属性面板将第1帧中的sound设置为:
8 \, Y$ ?" V' p, I2 u) V3 d; w
9 g" f$ X0 N- u
, T) |+ F3 I) B8 ~$ z' L+ i2 D6 s
3 ?: U0 {3 W) W# j' [7 q
" Q" W' [) ^8 s; u l) \4 F
effect:custom;sync:start;loops:1000
. _6 l; `9 S" c
: s, p' Y7 u9 N* j( D; i
1 e8 z1 F% Q3 Y* b" Z2 L$ i4 D6 n% x$ e! i; j9 k
$ ~7 Q- v2 h- o, N# p' {& u/ i" t' ^+ _. s! s
按钮bu-logo1的Actions:
! D% f! B3 d( x; M) ~, J; p" q, ?) Z* w, L9 m" k' k- g* t
' d0 F2 u7 L7 [2 C; e$ V/ w1 A R: p @9 D
V& T b+ b) I$ |$ G o- T
6 U7 _9 z: @# o on (release) { gotoAndStop (2): } 当鼠标(放开) 跳至并停止帧(2)
# r2 {! Y( S9 _' P, i
) d4 h u9 Q3 R3 G3 m! I$ P
, z- j2 T* W. O- v' ]! G" f
4 `, W5 \2 g8 K- L+ ?6 C5 g& w
3 ~# T+ a3 I" \8 N6 u
) H$ q: L8 e2 N" R- ` 在属性面板将第2帧中的sound设置为:
& H& i2 O9 ~& k2 i2 ]" |
* X1 z/ j- ]( w' O, o4 A( F
7 j b2 `! p& f( z( o
8 M0 n7 L r8 r% I" a, f
: n1 e# M( e6 [. W" F5 i5 b; } {) E/ n; s& [, X* @9 [) \5 i# E# @
effect:none;sync:stop;loops: 0
7 Z1 D7 j/ S: `; r0 S
* h0 M. |# @& P7 {! d1 L$ V1 [
/ A: N! f: W# N: c1 z" G! ]5 O
, b: t0 h8 j% G: ], F" `& k3 Z P5 N3 w- @1 J
2 O4 F6 h2 i3 B( d H8 _$ t按钮bu-logo1的Actions:
) N- |" t2 M6 H8 D
' F6 P. H$ X: W' q6 q' P, W/ y
& ~& z8 E6 y, G+ G0 t& {0 h; ]: r, E8 S: S& K4 L
' i0 h8 k8 |. g2 z
r' Y, q) X9 W on (release) { gotoAndStop (1): } 当鼠标(放开) 跳至并停止帧(1)
9 [4 ]" P( G6 C. s6 ?
7 X; j1 H% n% u# t2 H
9 o- s: o ~6 C! V
4 L/ h: [; c: z6 X1 ]- [
1 }, }% C. x8 I1 K
S5 i3 x: P2 J! I* c: m5 k 这样,电影开始,背景音乐循环播放,按下按钮bu-logo1后,音乐停止。再次按下按钮,背景音乐又开始播放。如图2所示。
! ^9 C5 }( `" x4 y
) X- h1 y3 a% e
- _% i! G/ P7 ~( U6 Z5 e( F* B0 \. i8 `) X% d
, L6 |0 h1 p! |2 j I% i/ C9 V p$ o
+ Z9 i" y7 y9 _5 _* N, v
5 ]$ E4 o/ S1 w2 u
" U% t: e* u' V* i
. t8 ~) Z0 `1 O% j+ }* b) p, w2 `6 e# ` l- O/ O/ i5 f& H3 [
图2 制作背景音效电影片断
W2 A; T6 ?5 p, Y* ~$ X# r8 L: P) E% @- J' T9 V/ G
: K3 a( W, q2 [& V9 F
; ]# [/ c7 {$ V$ \) }" P6 }5 n5 V& b& K0 _6 S
/ c% O+ A7 q7 ^/ ? 步骤4:新建图像(Graphic),命名为pic-bu1,绘制3D效果的按钮图形,如图3所示。
6 S7 L' A$ E' x5 {0 m8 d! t
- _* X' O$ M: @( o' s3 X
3 F" j2 j2 m X" i
_/ b9 c# h) B8 v4 a4 D ]6 i
9 @: d+ n' s& u/ t- O. U( p2 ]! J* a) q- O! e; C
7 a( t0 _, t8 l- A. Z: G
, M: A# g) J) D
! x z: R' }% n: i7 j# A
; N4 W( i$ Y0 c+ T7 k: x( [
5 O1 r ~4 r d9 S' i图3 3D效果图像
2 m1 L N* c$ o! } r# F
4 q. Q& G0 \( \; D( c
' K+ Z8 b, h2 u* B0 b+ D4 g9 F1 e$ R, S% \( C+ O+ T
' G r' z2 Q) t9 z2 |2 g+ K/ I. n& ?" b$ L1 K
步骤5:新建按钮,并将其命名为bu-bu1,将库中的pic-bu1拖入Up帧,选中Down帧,按F5插入帧。新建一层,在Over帧插入关键帧,使用椭圆工具绘制一个圆,并用放射渐变填充,使按钮在滑过状态时产生朦胧效果,如图4所示。
* Q$ q9 G0 R9 g |6 T- d+ ^
, X* i* d; |0 X8 j3 @
7 c, M# F, `# \% G0 X" i. @* `% r) j$ y, {# l1 n3 }) L
E H r5 e# r' |) i1 B+ R. [2 s
* P* T1 |- Q8 T0 }0 m* g
7 a+ ?% p6 v- c
2 l4 D) v, X: c( x4 y" u8 \; K
2 c r6 j9 m$ [8 v1 V% v" }& r图4 制作3D效果按钮
# n8 `- H- ]) |+ p- ?$ s" o: B' Q
! o4 m, g* n3 N( o, Z
2 i2 k0 ]& E2 e. O
! @& ]" l; Z% Q% F- O: y; l7 k7 q4 y* @- @7 Z0 H9 ]; k; |
) w2 c$ K/ |5 @3 E2 @* a1 g
步骤6:回到场景中,新建logo层,将电影片断pic-logo1拖放到场景中间。在第10帧处建立关键帧,将pic-logo1放置在场景上方并缩小: 在第25帧处建立关键帧,将pic-logo1放置在场景右上方,并且在Frame面板中将关键帧设置为移动渐变(Motion),使电影播放时产生pic-logo1由场景中间逐渐移动到上方,再右上方的效果。如图5所示:
( I- ^5 K; | f* ]5 m( c. p: k
; V# |* S% h. l% d: `2 L3 `/ i5 j/ g7 |0 W( p
6 S5 B0 ]* i# C8 z. L2 r$ m5 S$ p0 I$ O r7 V
& X! p5 v5 q) v3 B3 ~! t
( p9 W8 A9 ^# Y/ C" [
8 O1 I% D, v' Y: B' d
- l2 F* Y! x. k4 c; J图5 产生移动渐变
6 T8 r b' j v, w7 K5 z4 [6 b% n* P" I/ e! K: l5 O2 n
; ^8 P- F* d& `# X% a- S, l/ j! |( `, \0 A! ?
+ q' J( x: s# i$ ?2 {
: ]! ?$ N& g( U: L
步骤7:新建daoying层,绘制一条弧形线段,在此层上点右键,从下拉菜单中选properties,在出现的Layer Properties面板中将类型选为导引线(guide),如图6所示。
$ B- ~& h! Z4 b3 {. C
- e; U+ Y& b- d/ \- u- u% t: q4 o+ F7 x# ^& t
3 {* d- w7 j. V- ~: T" J7 W
. C* w5 L% M4 }2 n
7 q. n* R5 y8 |7 X: Z2 O 步骤8:新建6个层,分别命名为1,2,3,4,5,6 层,分别在6个层的第10帧处建立关键帧,分别放置按钮bu-bu1,均匀分布6个按钮,并和导引线对齐,如图7所示。
6 A; b& e' Z, J/ H4 j6 h
' S4 F* E+ {8 j) s( |6 H+ r
9 J+ a4 W! q# c* ~1 c# _7 y$ R2 _: K& s; g% J9 C
6 D |2 F2 D3 h* J* |! B
1 j* K5 D, E: q! s* n 步骤9:分别将1,2,3,4,5,6 层和daoying引导层的第40帧选中,按F6建立关键帧,再返回到第10帧,调整按钮bu-bu1的位置,将按钮拖动到场景外部,并和导引层daoying对齐, 将1,2,3,4,5,6层分别在Frame面板中设置为移动渐变(Motion), 并将属性设置为guided。如图8所示。
B* l* ]! z0 `. \3 C4 V% g$ i+ U: }5 ?1 S# e
1 A2 Z5 q, J7 Y0 q9 Z- f0 z
4 q& C1 o6 @# }) a
- J& g. K& C" f% Z: ]% S$ P
' W$ p: U) \ S- g% ^' B3 R& q+ i 这样,从电影第10帧处开始,按钮沿着引导线由场景外滑动到场景中,并成弧形排列。
u- c% ]. c6 R- ^ R, ]8 t; c. ?
' U) e7 X3 r& N0 {: v
( U8 Q/ Q4 A0 U# n! e: [" r/ u2 _ P
( K4 S% W5 s5 f4 [- d
4 Y& Y2 P' h! D. ^7 M! E ^' p4 b p* m$ x/ ?! P! q$ N
- L: q ~+ K& t( g
1 U) i5 P' Y$ J+ N图6 设置导引层
+ G, y, J& {' I! j, a3 t
7 Y! r4 N* N- X" i/ y' f: D! t: f% b4 v, J& k! b! r
5 [7 B! t9 W% r) Z5 ^! Y4 ~
' \9 Q, n m5 S
X% d! j* ~8 b! Q! m+ g
# \& s: ?# F6 F
$ U: P; ~/ F0 e& c/ h
8 q% l/ y% J- e图7 将按钮与导引线对齐
6 t# H" E8 O7 ^ x$ ~# J1 q& O8 s
m z. m* X. M/ P
: w! b2 k7 z, G' W4 N& M; U1 v! F$ `
n& f) ^+ A7 `* _$ b5 [
b4 x- J2 _& u, O3 S
' p4 {# g" \; r3 }8 U* e* W% G 8 F1 B+ d/ g/ G) `; J1 \ K
图8 引导层
( Z7 v, }) q$ a) f, ?% p
9 u; i( g: f; m1 B# J# ~& Y9 x$ U/ l% T5 {& c2 ^
6 [6 `% y5 W& N: l
% d0 D4 p/ f9 S% h0 ?2 e% {, A# A" U, `. A/ o/ \; X
步骤10:新建电影片断mv-t2,在工作区内沿中心点画一个椭圆,用墨水瓶工具
6 E# e, E# c S% U/ R9 \5 S/ E: P7 m
4 T, g- C, K- N/ J' a( s将线段颜色填充为#ff9900,线段粗细设为8px:在Color Mixer面板设置放射渐变填充,将alpha设置为60%左右的半透明。
: y' H: F, R/ l9 w
9 ]" X# E# W! `
' I$ m" w6 E: ^
1 W6 O+ i9 U( U m3 H1 \
: ~- l: B U& j1 I& X6 T2 @) W
! c/ A2 h0 o0 W6 Z3 o" n1 w 按F6将第2帧设置为关键帧,改变Color Mixer面板的填充色再对椭圆进行填充。
( k% @3 J0 n( `2 V R5 d, o. a/ t
. b: X% l8 m( X' w0 t2 \
& _" u$ e2 y, s d$ n7 j, i0 ]# L
1 L( q* O i0 P- `0 U
! V. W5 c$ ]7 o2 p+ h
, v4 z" O" i$ h& n+ E) N6 Q# } 将两个关键帧的Actions都设为stop。如图9所示。
9 y9 c) {$ }! i0 U" \$ h' S
5 t4 t$ b" k, Y) [" K% p/ C) o% o, P2 J
& ]* K- Z+ @3 O% z0 m* ?! u2 V% n. A( H" Z
& K. f; I4 D$ I2 `, E8 K
% _+ ~6 |7 T2 Y! f% ^
步骤11:新建电影片断flower,绘制一朵花,对齐工作区中心点.分别在第300,301,600帧处设置关键帧。在301帧处改变flower的颜色。
* Y+ V$ A. g2 _: m& z) K7 t- v
# z/ `: M6 S* D) D' }3 E
: d5 J2 c) [' u2 p& ]' q- R& x
5 h! f2 s# H! D9 Y: D$ W1 u- E
; X" @3 U, T& g7 q$ {0 }3 L& l/ h9 Y W+ u
将第1,301关键帧的标签分别命名为a,b,在属性面板设置移动渐变(motion):旋转(rotate)设置为顺时针一次,如图10所示。
$ c! j/ t. X! z+ [+ H$ {
$ l2 f* E! Q/ W& q$ t% M* [
- t, X9 |" W, X( j1 h
G3 c! E0 Y; q0 c8 ]' ` H' n4 B6 f2 N g& ~( v7 o
0 q2 L0 ?; C t4 F' N$ [) `( ]8 w6 W- i7 ?# Y( G' w, W5 R- z# o
9 V7 {7 l5 M; `/ ?) d, i( A% f0 o
/ t2 b* [4 o& G图9 制作电影片断mv-t2
" d$ Z$ U; h2 G' d e
3 t' E- z' T/ Y9 T( A
6 i- b J0 J) e; z- p. y- _
) e. `) O8 k9 D
" P- d S5 |9 t7 N ?3 Q% E( t- W- `8 f K
5 E. l! F7 G% ?, k4 q, j2 k& J4 ^2 O
8 Z/ M) \6 W4 r9 o0 \( { ! t! [7 v: H/ F3 D3 k
图10 设置电影片断flower的Frame
4 i/ g, P( w+ K/ K! j
! ?) F% I7 C- U- Q3 a! t& ^
2 O+ F' O! @; Q: [# b" ~) C5 N
& b2 r; {: A- P* Q4 _% q
: g# |: [4 w; B6 p. w; a) v2 r' L8 {
* N' B* n3 X) s7 P6 r 第300,600处关键帧的Actions分别设置为:
% u7 E" U/ P- m: O2 Y: A" a: c
- L+ i' s* n* c1 z8 Y
! u* Y& \2 t/ t$ v3 m
* C5 Y N8 |5 J* |% |+ y- z( |% F4 E" c* N2 P p) O! m' C5 W) g
5 s8 O: Q8 T1 x gotoAndPlay ("a"): gotoAndPlay ("b"): 跳至并播放标签”a” 跳至并播放标签”b”
/ k! |; B1 i! z
; j' }* E$ o4 u* R/ e" t3 N X/ H
" w, G" b. L- b( E4 N9 P0 D$ S* E$ w& y
- l, w! N9 \% [* s: g4 d 步骤12:新建电影片断mv-text,建立7个关键帧。Actions都设置为停止(stop),在七个关键帧处分别写一些描述性文字。如图11所示。
) y9 b7 s* ~' P5 a
- X6 y. D( I% Z5 z& d- B/ M1 ^+ V, A
S+ N7 \: l/ r/ i( o: R* t- w
5 H& b# ?5 Z* x6 Z, s6 D! Z4 A/ q2 ^( P% j y
提示:我们想要做的效果是:当场景中鼠标滑过按钮bu-bu1时,产生对网站栏目的介绍。
# Y# N1 e4 k; K' J( Y/ o0 s& w; Y3 r0 G: {
5 L; t7 A# w: ]
& R" _1 U2 P9 k% X" P( L! w, s* h- |
2 V+ h+ K$ u8 g( M0 u6 _0 k. l% o( |6 S4 Z: `) r8 c
5 C) N& v' }$ B/ }
$ R, |2 `4 i) o. K" a$ x
图11 栏目介绍
3 |' e! @* T" p: G7 E s- ^
' W3 p" n7 |1 |. R7 X5 @
/ Q7 u4 y2 g9 v
9 t O9 `2 z# g( w7 ]6 s' |6 L G3 Q, l {% C" [ s
! j: `1 H& H+ Y" `
步骤13:回到场景中,新建三个层,分别命名为t2,flower和text.在第40帧处建立关键帧,将电影片断放置mv-t2,flower和mv-text分别在置在相应层并安排好合适位置,并在第40帧处设置Actions为停止(stop),不要让电影循环播放。
/ a( k5 B" e1 k
& k( ]9 ?/ g2 y6 s5 d! `
$ [8 z) O7 b A. z3 l% }3 D
/ F0 g! d1 l* R, b8 p$ c: ]4 }9 f: v- R6 \8 X$ U6 t, _$ R
7 j0 }+ b. u8 i. Z' `- z* A 在Instance面板将三个电影片断mv-t2,flower和mv-text分别命名为t2,flower,text,如图12所示。
$ i* z( z% S+ M" B' H* k! v) [ [; ~5 w o
7 B. W! X9 o3 ? n1 Y% r- Q* ^9 c3 I0 N, a8 V# T
z$ X8 Y! p$ l
7 x: K& V: W% a6 ^
; ]- N# x- m; \2 E
% W8 M5 p/ f( |
5 Q# ^* N$ w2 V6 Q$ a( y1 d6 M图12 给电影片断命名
( o4 a$ l/ w8 d# P* Q2 }
x4 C5 c9 h6 L' M& N$ K- n
/ N" \6 w& ?: F% z1 ?& l: W# z! Z# ~6 r
4 Q$ y; F- V/ J: U7 K# W" p7 M# A( t+ [
步骤14:分别在1,2,3,4,5,6层的第40帧处设置6个按钮的Actions:
. I) i0 f& t2 f& d9 N7 g) c, D5 @, Q4 c
+ g9 N. c7 _- y$ n1 p# m" q
1 D* j, x9 a, p
5 c" V! L0 t) F" U& A" I. a) N$ p$ @* ]
on (press, release, rollOver) { tellTarget ("/t2") { gotoAndStop (2): } tellTarget ("/flower") { gotoAndPlay (301): } tellTarget ("/text") { gotoAndStop (2): } } on (rollOut) { tellTarget ("/t2") { gotoAndStop (1): } tellTarget ("/flower") { gotoAndPlay (1): } tellTarget ("/text") { gotoAndStop (1): } } 当鼠标(按下,放开,滑过) 告知目标(“/t2”) 跳至并停止帧(2) 告知目标(“/flower”) 跳至并播放帧(301) 告知目标(“/text”) 跳至并停止帧(2) 当鼠标(滑出) 告知目标(“/t2”) 跳至并停止帧(1) 告知目标(“/flower”) 跳至并播放帧(1) 告知目标(“/text”) 跳至并停止帧(1)
' b( c" \* E6 M! W* S0 B( f
% q& E6 K( c& B
, W6 l* S$ }* v* U' v$ J# k, ]( z
$ W8 R2 t4 @* \7 a; L
; q/ i* d+ B: H+ F5 W/ N9 Q( s9 c% [1 B+ o8 Q/ l& g0 f2 g
on (press, release, rollOver) { tellTarget ("/text") { gotoAndStop (7): } tellTarget ("/flower") { gotoAndPlay (301): } tellTarget ("/t2") { gotoAndStop (2): } } on (rollOut) { tellTarget ("/text") { gotoAndStop (1): } tellTarget ("/flower") { gotoAndPlay (1): } tellTarget ("/t2") { gotoAndStop (1): } } 当鼠标(按下,放开,滑过) 告知目标(“/text”) 跳至并停止帧(7) 告知目标(“/flower”) 跳至并播放帧(301) 告知目标(“/t2”) 跳至并停止帧(2) 当鼠标(滑出) 告知目标(“/text”) 跳至并停止帧(1) 告知目标(“/flower”) 跳至并播放帧(1) 告知目标(“/t2”) 跳至并停止帧(1)
( v' O E$ K6 J; T7 R1 g$ z5 x" A: A6 k' N* \0 G! P! [5 K8 i2 k
0 \3 @4 B/ Q. D) Z8 u, d/ y* p( [
m. |' F) s* |: r9 b/ T5 p! ^3 G" {
0 c1 P/ U! R9 s8 o
( _$ G, t" K5 j/ ?, m Q; [ 好了,按Ctrl Enter测试一下电影效果。