Flash MX实战精选：填色与变色

图由心生

版主

Rank: 7 Rank: 7 Rank: 7

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

Flash MX实战精选：填色与变色

实例说明( Q3 {- V' N/ M& I

" s& j: g9 ^; @* F7 H
　　开始的背景是一幅没有着色的图画，可以使用右下角的颜色选择器选择合适的颜色对图画进行填充。# ~$ p( _/ ]8 ^
% s' T4 G* k, r0 M# n9 h

5 k6 r4 w8 l7 j! s  e6 u
/ o  ]) n# U8 a1 b
# ?% I: [% @* [9 R3 S5 |3 y5 `" v; M
　　有关知识

7 r/ [/ D6 t9 b

4 T" Z4 f& W% r2 o  B
4 r3 ?" {0 K; `# S
　　telltarget命令，movie clip和隐形按钮的灵活应用。

　　制作过程
* c& _2 s8 n" S/ P% o8 Z

( J% w+ G: y' ^

/ _, K) _5 U% f8 i$ |9 M
　　步骤1：在Flash 5中新建文件，按组合键Ctrl M打开电影属性对话框，设置影帧速度12fps，场景大小：400px*300px，背景颜色为白色(color=#ffffff)，如图1所示：

% g5 b" a) I2 O
图1设置电影属性

) q5 P e1 _. g- X! j
. l2 g* M) V! p$ u; g' H

　　步骤2：在场景中用铅笔工具（Pencil Tool），钢笔工具(Pen Tool)和线段工具(Line Tool)画一幅图画，或者用freehand，illustrator或coreldraw等工具做好后用AI文件格式导入Flash中使用，具体的绘画过程就不再详细说明，图2是已做好的风景画。
- t& W3 M) A" C4 Q0 F

1 N. @1 I% p0 Z$ c( L" x

图2绘制图画

　　步骤3：此图是由太阳、花、天空、远处的山、近处的山和树组成。而树又由树冠和树干组成。所以我们分别将其转换为电影片段mv-sun， mv-flower， mv-sky， mv-after， mv-front， mv-treetop和 mv-tree。按下Ctrl Alt M，即可打开电影向导（Movie Explorer）分类进行查看，如图3所示。
: G, n( n+ B4 E& d. ?

  图3分类查看组件

& T8 U3 F3 l0 q6 x! p) P
　　提示：因为一个Flash作品完成以后，可能会有很多物件，Flash提供一个分类查看功能，可以按照不同的分类进行查看。当然，如果已经养成了在物件名称前加一个属性说明也是一个好习惯。如将电影片段存为mv-*形式，将按钮存为bu-*形式等。7 j7 d. N! v# v$ q6 b
% X, {& [8 s3 }

) F9 W6 F  [1 n9 ^# _
' ^8 N' N  k# \+ b8 v/ m

　　步骤4：现在来编辑mv-sun，在库中双击电电影段mv-sun，进入编辑环境，按F6建立7个关键影帧，增加一个action层，将每帧的action设置为stop。在第一个关键影帧，用墨水瓶工具  将color设为黑色(#000000)，在Stroke面板将线条宽度选为hairline。填充物件边缘。如图4所示。7 h2 p, p+ x! z0 {* ?* Z) ]" i+ t

  图4设置”墨水瓶”属性
4 p- W3 V3 c: ^* T# s5 k  |! b

% ?6 Y1 {1 z9 Y" \
使用油漆桶工具  。将color设为白色(#ffffff)，对物件进行填充。第一个关键帧就做好了，如图5所示。
& S5 i/ A- q) q, ^
3 Y7 q' T+ Q0 e. _( k

9 ~4 C1 X0 A, M# o( ~; P, G
图5已完成的第1帧太阳8 r, K/ ^) J! v5 `

3 _0 `9 c, K; z7 X' X
& j# [7 y7 w/ W5 f
% Q% K& D# g0 D3 z# \: ]
　　按上述的方法，用不同的颜色分别对其余6个关键影帧进行填充。另外，我们不希望在图画中出现边框，所以要注意每个物件边缘颜色和物件整体颜色一致。
* l6 ^. e" |" u/ ]2 X+ w

　　步骤5：将剩余的六个电电影段mv-flower， mv-sky， mv-after， mv-front， mv-treetop和 mv-tree按步骤4的方法增加6个关键帧并编辑，过程就不再讲述。

% m+ a* W2 V* [3 ^

( B8 f7 u5 N# g4 ^9 F @1 j

　　步骤6：回到场景1，在Instance面板中，将7个电影片段分别命名为sun， flower， sky， after， front， treetop， tree。如图6所示。
1 g' Z! U9 R5 S
- c+ T' d9 o" ?3 |" b' G. N$ M; j
/ B! h% S4 @2 ?- f% K

/ p- D- t6 D1 @% ^# Q0 K9 c
  图6在场景1中命名电电影段

( J  Q) i$ d: H) v9 O# J
! I  [. L. ]3 f5 G" ?6 ^' y4 Y
5 D" s0 P% u, m5 ?4 ?. p

　　步骤7：为了方便管理，可建立sun、flower、sky tellTarget ("/sun") {
' e+ X! i- {9 l! t9 F. ^6 f8 u0 O

   gotoAndStop (2);

: `' h" c3 c/ F
   }  ! a9 s, u9 q( v4 N: M9 g
+ n0 O" o6 J8 N
, q8 ~1 G0 y( z* s
   }
8 ^3 \4 \0 D' b( r/ v& `
% D0 M, V! b5 c

% y6 f1 X6 \" z) x  f

   6 T) f/ R" Q; K/ p4 Y7 X  ]- h* i9 V- l

8 Q6 t/ W3 w- g8 F' x5 J


  "Times New Roman"'>鼠标放开{  告知目标(“/sun”){
) _1 r3 R$ o* f" i8 y



  "Times New Roman"'>跳至并停止(2);  , P" E. h+ E: R

6 \9 A8 f' }6 M6 Q7 P1 I
   }
: k$ Z5 @/ W5 P# v7 ]1 m6 A
+ q% H% e# `& g
   }  6 w7 x7 D5 N3 X' X
7 C+ C, K2 g6 J7 P- V4 c0 x

# J; P6 |0 D" N: _2 W! W+ f$ i
. U' a% W- l: v3 K+ a1 u' T

  9 E; m2 H0 x0 v. m: V/ Z5 `

) S* q' D7 {" H# |5 r9 }: S

4 p) L' u! z/ W" G
- R  F) A) m% x$ R
　　按钮bu-flower的Actions：

$ O$ g7 W! J- p  z5 ?# S

6 r7 r* J/ l/ ?0 J
: l; Y- K0 c* Z3 m) Z; ]% h



   on (release) {  8 k3 ]+ W( z9 U
! c6 w" ]0 o( D+ o) d( H2 K
+ J% w3 }2 H4 E. N% ^
   tellTarget ("/flower") {

   gotoAndStop (2);  : e: z! q; D7 f) H

   }

   }

. O( L! M4 \2 ]: w. ?4 B; A, y6 }4 n

3 n  k; C. P( b. E7 A! J
   . r3 G' m/ I* Q/ B$ K
/ A) W- }9 l" g/ v- H* R# G4 w4 @
3 h# u$ G9 |- q, T, d) t- A  e+ j3 H
   4 S1 }8 F# P7 m

  "Times New Roman"'>鼠标放开{  2 ^" q  }( P6 H2 Z
" R4 T8 |2 t. Y

   告知目标(“/flower”){

: x# W9 q, F; y. ?


  "Times New Roman"'>跳至并停止(2);  ) t4 X. G3 T& v0 v7 V: `
$ B* |% l5 t8 D0 W/ U; g  D
# }- m3 [* n$ Y4 Z! o; y
   }  1 A* ?8 u8 f6 O! G1 P

   }  4 b) g7 T1 s: I% {
  l7 p* _- Z5 z- N

/ ~+ \& a4 `% Y* U
  0 Q) i, a) \" S4 }
4 S. k' o& f* I& {) F( p

8 J$ {# \5 W) i" m4 T* }$ t) M
- |. i* y  l9 F% |

　　用同样方法设置按钮bu-sky， bu-after， bu-front， bu-treetop和bu-tree的Actions。
# V5 S1 u, y/ q6 k0 W  |

: n0 V# ~0 o9 K8 T" ?* f2 {

3 H# ?5 \; `4 ^1 v+ F3 L; z6 r
　　步骤16：在关键帧c， d， e ， f， g处分别设定按钮bu-sun， bu-flower， bu-sky， bu-after， bu-front， bu-treetop， bu-tree的Actions。控制电影片段分别跳向第3、4、5、6、7帧。) D5 r- Z0 h; a  ]& I+ H( h# g- |, ~
3 U8 K  B& W/ g
5 i% w% N) l: d7 l( U
0 Y4 ]" C8 K3 f' l' ^6 \+ ~; H. O
  Y% X; j# G* r# e/ c

　　步骤17：设置选择颜色按钮的行为2 O" f' r: `2 B) r

$ j) D; d2 G) k5 `. l

( \9 q/ z" y; l% n! v0 u4 p1 `! {; d, `
6 S7 M4 S& C# v: `5 _/ `
　　按钮color1的Actions：9 e, i5 |4 B- E+ x
- E' c, w, X: }; W7 E8 L5 ]

2 T% Q- A' n& s# V

1 s: c; a, P3 i( I/ C
   ! D+ Z6 g( ?; [* L9 g+ Q
% t9 N8 f& g* B2 E( w; \

   on (release) {
8 ]' S2 E# N! |
( O& S: u) L" L- Y
   tellTarget ("/color") {  & n4 h; ^8 U7 w; `  H
$ l) |2 H2 j8 `( ]7 n
% L2 G0 r6 Q$ _# i$ K
   gotoAndStop (2);

   }  8 z9 _3 T# s. `# Y
8 e8 w3 t$ [: L; A% q

   gotoAndStop ("b");

: G. M* _1 `$ I% @) }& {: ]. [) J
   }  7 F4 A9 v; x+ `7 O$ ^) Y* P  |
) A: C$ Z4 G( u

4 `; S$ m/ q$ r- _8 G: c6 f


+ ]! q; R6 |$ m* e: }7 t. W
, C+ K0 z: V- k
   2 s: I' |2 M: K  x0 }
8 b# d% M, w* b0 E' k: t
  "Times New Roman"'>鼠标放开{  / M4 ]4 X0 ^3 Y
, P6 U) e/ o& b5 e* v
( F$ x' S; D5 U' s* {1 [
   1 E- Z" l7 V% h
+ D6 @& f8 [. J9 z$ o( M3 U: P2 S* E
  "Times New Roman"'>告知目标(“/color”){

. ~! k5 z# s! ?
   3 K2 |  D2 w! U! T
, e- \7 W$ L  q1 S) k
  "Times New Roman"'>跳至并停止(2);
9 r4 d- Q) {) F* d: x9 w
) U/ g7 q8 n+ P  ^/ w
   }
+ Y+ A( ~* L, x: W2 E* e- t! A, {' q# N
+ q5 Q: ~0 C& ?" z- J  \( M5 ?+ \, N& q
   / z+ h- {0 ^6 n, j0 H3 A) q1 ^' m
, V5 @$ c3 \% x$ s
  "Times New Roman"'>跳至并停止(“b”);  ( i& w# U3 h* l- ]
) [$ u* ^! _" c4 O8 C2 ]# o

   }
( B3 U: A0 N, V

3 L: c! Z% N2 u

  . q& z9 r$ i' k0 w7 b

! U( J; [3 ]! L2 B$ R! U
$ W! U. M! z9 m  A! E7 u' z
　　按钮color2的Actions：
6 h! N( P2 U6 w( C5 M

. n# |% R8 b$ ?& Q7 X/ B3 _; h



0 f7 b6 j* i) N. C. D
   on (release) {  7 G. `6 G+ d0 B& u
1 e* h* h0 i0 T

   tellTarget ("/color") {
/ G6 I: ^$ h& u
7 I3 d, u3 p6 t
   gotoAndStop (3);  6 V! Q5 m, a7 g) e9 _
5 s$ v9 H* ~# M6 _8 K0 w
+ Z$ }% C; O) u; q9 n
   }

/ ?$ x# B# w* n; m( N0 x
   gotoAndStop ("c");

   }
. e: c: f- ?% M  _0 G+ m

/ Z; q% K* _' B



7 f, b! b9 |9 j$ t! J6 d( e
   # f+ R9 ?; }( W/ t

  "Times New Roman"'>鼠标放开{  " p; v+ Z  K" x: m! Y. s) \  f

   ' o4 u6 i' h; S& H7 j

  "Times New Roman"'>告知目标(“/color”){
6 C8 E$ D3 l9 C

   * L8 Y) H2 a+ c6 K8 `5 h2 `- v

  "Times New Roman"'>跳至并停止(3);

   }  $ a2 q7 A( ^% L* e2 o
$ z+ |" j( s& ~% x2 e& O
+ G1 @4 q& j+ f- l: `; u& C' Y
   % K! ]2 K! X9 d6 g& t# b4 F# a" \- I

  "Times New Roman"'>跳至并停止(“c”);
8 P# m1 Q  v- d* B# e7 h2 [

   }
# `7 u: f+ W0 \* `" s& U' x- R
, K  J* H+ A: ~& }- Y+ P7 {4 F8 k

  O# l' F& X$ A# ]; m. {' A. U
  * k- @9 |  C- u* G: y5 d7 f9 P
. u( e% I" D& v" H6 I7 y' J
! i+ T* A) C, |% \3 B: R
2 U9 A9 F$ K5 e. W1 F0 `( U

: |+ E! G0 E2 V& V
　　同样，设置按钮color3—color6的Actions。4 i& B3 @# D. G; `" P  F
0 d2 N- `9 p8 p3 Y" d: ~6 ?

) R1 i" G, e. j$ G9 x" @& h
0 w8 [* y. _+ q& U0 D
' e$ q  O7 T- }5 s, p
　　提示：电影开始停止在第一影帧，当鼠标按下颜色选择器：color1"color6时，颜色井跳至并停止至相应的帧，指示当前选择的颜色。同时电影也跳至并停止至相应的关键帧。这时按下图画中的隐形按钮，按钮下的电影片段就跳至并停止在相应的影帧，通过这样一连串的动作，就产生了用鼠标选择颜色并填色的效果。
9 k& M$ l  |7 O
0 P/ N& Y! F1 K: i
* Z+ j# m' K0 b+ l& ^4 [( \
' Z" E8 R9 P' j  q

　　步骤18：最后，来设置一下reset按钮的Actions：8 @* n) C$ T! @0 i7 ?* N

6 ?( ^! z! u' g7 _$ x

6 o0 s! o5 I2 J

' i/ j4 `7 \% ?
! d2 k0 n: A( y) K" r0 Z

   5 @. }( c0 Q) m$ W* z1 _/ t1 F
% r, z# C7 S; M' B$ ^7 A6 S

   on (release) {
7 y: i: h, o* T; \' O% x

   tellTarget ("/flower") {  : W5 S7 }, h% @2 M* s

, K0 Q0 L1 @0 b, m* n4 q. ^
   gotoAndStop (1);  $ S$ }9 y( ?" Y1 g0 u

   }  : k8 M. S; z2 c! T- e: z

# i0 C' M9 Y* A  ^- F
   tellTarget ("/treetop") {  ! {2 l1 p. J- _' N5 B
5 u. C+ y7 M2 Z$ _6 v
6 u5 l: n+ K5 q, j
   gotoAndStop (1);
8 j6 ~3 S% f8 y

   }  - x- S3 u+ m# j0 k) a
" o* u; r) n8 j( }, u5 b4 t# e8 p

   tellTarget ("/tree") {

" y* @/ {6 x5 m* ^
   gotoAndStop (1);  0 N6 e* K4 S0 j0 f0 ^
) c  U% a& f2 {7 i( U6 O6 K

   }

: e, x( E7 |* W/ ~, G  ?
   tellTarget ("/front") {  6 J7 |  _5 a) d, R+ @

/ E) }  q3 E3 r
   gotoAndStop (1);

& }0 m3 D8 M5 V7 @8 T$ A' \
   }

   tellTarget ("/sun") {
1 G4 D" `4 E4 K" i4 a4 m3 l

   gotoAndStop (1);

   }

6 C. }( j& s3 i$ {
   tellTarget ("/sky") {  $ p/ [1 b5 P5 w& g- h
2 W" x2 M* C* d2 D. N, @7 I6 `
: k, E- a8 M: c5 I
   gotoAndStop (1);  / L( G) j" _6 S

   }

9 [% D, P5 ]5 m6 @' [3 C; ?
   tellTarget ("/after") {  8 s% F- |# z" G: L& R& p8 B
. z$ V1 n% G3 _: T5 ^5 ]& g
! w. h/ f6 ^' D9 L% K9 O
   gotoAndStop (1);  3 \9 }; G4 P5 R( s; I. E
- {# u" A0 K8 K* n
& Y+ Y& Z* b4 n/ l
   }
6 E) y+ b% j% s8 O" d
. A& [+ [5 E! w- [* @$ g
   tellTarget ("/color") {

9 r: Q- n0 u4 L% Z" D( ~! V* L! p$ {
   gotoAndStop (1);

/ C7 u8 N4 [! p. Q: n" l( V
   }  4 P0 S  B- T2 E$ p7 p

   gotoAndStop ("a");

   }
6 ~3 x/ G5 O9 ?$ T' o8 H

   , p; z/ `7 g; s& r9 ]6 v- ]' W
; [8 ]( T' Z# E8 e' a
3 [' D& e" U4 m5 ^7 o/ D
   6 p) t* h8 T) x+ t+ D1 d, I

  "Times New Roman"'>鼠标放开{  9 ]$ S. i- s/ @4 y
" |* u# h* k% }( H- Y
5 g5 g9 s9 q- g3 x


  "Times New Roman"'>告知目标(“/flower”){  & X& E. b- K/ N



  "Times New Roman"'>跳至并停止(1);  ' K6 Z2 I0 [& K

' Z8 r4 E0 u+ N& Q( H4 h! F
   }
: q7 M- {, {+ H5 o6 `



  "Times New Roman"'>告知目标(“/treetop”){  ) Z. {) _4 H7 u2 e' z0 \/ j& Q8 g7 D



  "Times New Roman"'>跳至并停止(1);  1 y8 ^; o$ B) X, \& C

   }
: G; W; ?) s+ {; {+ v1 Y9 o3 l



  "Times New Roman"'>告知目标(“/tree”){

' y( N: ?6 N6 K


  "Times New Roman"'>跳至并停止(1);  1 T! a) \9 p) D2 `1 s" Z% e# Y
, Y+ K. e' y8 @/ s2 ^* m/ @

   }  1 P- O( e2 A. L2 w$ U) q

2 V: b/ I* E/ P2 k$ C" s
   * V  ^$ I3 O% L$ d

  "Times New Roman"'>告知目标(“/front”){
$ V3 ]) D! H1 e' l7 G! y
' d3 ?9 L2 ?% Q# l7 [$ r0 ^7 [% J! a; G7 E
   1 h7 }- {4 {8 Y# {6 P

  "Times New Roman"'>跳至并停止(1);  , d2 O* ^# |2 f8 s1 \, K
" [* W$ D& ~& t! t$ N& l  R5 |

   }
; Y/ o  ~# s& z" Q( C: w
- ]. V4 Y/ A+ {5 V

8 d' {: r+ R1 y3 X' B3 ?
  "Times New Roman"'>告知目标(“/sun”){
+ M: {+ m; M; }
+ r# U6 p* X$ Z- o. _  H


  "Times New Roman"'>跳至并停止(1);

   }  " O- P" O0 s- N0 d* Z* Z
$ a$ |# [$ Q$ J* m. Z5 y



  "Times New Roman"'>告知目标(“/sky”){  4 S; W. B2 K9 D; [) L+ A
& @; E6 i; g" I: {. j3 T


) X0 w2 ?2 z* E; M& [: M
  "Times New Roman"'>跳至并停止(1);  9 G( K/ ^4 y& b- ^" A& ^, d/ S
( b. {6 J1 Y8 w5 |: @' Y- J" d

   }  & \* _. k  D9 ?) L, n: y5 k



  "Times New Roman"'>告知目标(“/after”){

- J$ `# H8 ^# g
   3 ?8 `( X7 M- _! Q- w# ]
. {' Z3 M2 {0 Q
  "Times New Roman"'>跳至并停止(1);  , W7 U- a! z: f7 K. |

- ]/ U$ b9 ^9 i
   }  ) p* A5 e# i5 G% t. e
- o$ _' T; `+ R' l1 K. r
6 N1 u0 G' l+ p( n- [
      W0 K/ Y8 P! l7 C# X
4 A5 m+ l! e# i
  "Times New Roman"'>告知目标(“/color”){  * \1 C4 E) N" d4 \
3 h- l! T% T# e" h6 s$ }* M
$ z0 t2 q7 q% D7 d' K+ \( f8 s) U( w

' S; j0 E" u; c
  "Times New Roman"'>跳至并停止(1);
3 Y' |! _! E' p. u. S! u

   }  / f! W& d. a- z' j' N) X  z


6 z" U. t8 F8 E$ ]% q, H
  "Times New Roman"'>跳至并停止(“a”);  " \3 E& g- D9 E5 f# T1 c) t

7 ?& ^, T+ D2 x2 Q0 e) q1 {
   }  0 ^$ b( }* ?; t7 M/ l% `* J
, |6 ?& C( M4 f0 S. G! Q

. a2 D  R4 \- q+ O

5 j- r2 @% K4 K4 l9 B& T: k7 i9 R1 ^0 D
  * S( i0 m9 f; l; H
5 ^& I1 h4 Z0 C! |$ D
: z: Y9 O6 a; A! B
, W/ G9 w4 L( E. Z

　　这样当按下按钮reset后，所有的物件都回到电影初始状态。+ s7 `# Y* x% O

  f$ d: N5 T5 |* r% G& w4 P

% V. ]. |) {( e6 e; X9 V$ c$ O

　　到这里，填色游戏的整个制作过程就讲完了，按Ctrl Enter就可在生成的文件中测试填色效果。

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

TOP

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