Flash 3d效果精彩实例--变换矩阵

本实例中的方块矩阵会在横向和纵向顺序翻转,很象翻动魔方时的效果,最终效果分别如图1和图2所示;
: g) P& W2 V1 z6 `+ a! ~, P  v9 V; r
; h& _4 C/ C; h* M
/ \! ]+ X" M" v2 a/ f) m0 I$ E! u% N0 p6 {0 n2 Q7 u

) e5 U. |! @/ k
5 i, b: g8 i, k; A; L: ]4 k. A
- S  H# i9 r% K) T5 J: C; z5 K# P( N9 O( {

# b4 j' \) `$ R6 i4 v图1  水平翻转效果
! a' e1 ^7 T+ B. {
. J$ a+ e. \4 X9 n8 s1 m, V
7 i7 M% |. X, V+ `$ f# ?) }) v& h5 g* t5 H
, }2 ^! ~) w- u/ y- C# q

: @% E3 d1 O3 I# Q" g- M2 y1 r: ^& o3 B, M! w5 R( C. ^
* ^/ s( `; `$ ~" K, C

  F2 d- i3 f9 Q0 k1 f图2  垂直翻转效果
6 T3 b/ p3 x8 g  a
. s; m. e- |* O" M- i8 r' J$ N1 N5 N" f4 p3 \  N
! g0 ~; k; b) H8 @' ^  G
. U5 B; Q5 |  x# P
% Y" R* [- j8 X1 |, ?9 R
　　1.启动Flash,新建一个影片,设置影片舞台大小为200px*260px(单位为象素),影片背景色为紫色,颜色代码为#1B1C47.# s( ]- D2 S% P/ v

" k  t4 ^2 w% {7 @( a( G% M. U& O; X

8 @/ s9 M- g& i7 o  i
- b4 [" t- H/ c% @. Y1 W
; Z$ M( G. T" B# H# r　　2.首先制作方块矩阵里的方块单元,为了在后面排列矩阵时方便,本例中以一列方块为单位,每列有8个方块单元,将8个方块列水平排列,就成了8*8的方块矩阵.
% [% W9 g7 j3 `+ C, @7 j% E: g4 @' m, e+ P: u2 u
- ]: L6 O+ g6 X) w  |. J" b- c
3 t! U7 B) ^  c  s6 a$ i% @( A

4 C8 t0 c9 {; B# W' S+ B+ u
% Z$ [& d  A. c$ x7 t  o3 n　　新建一个图形元件,命名为square row,进入元件的编辑区后,使用矩形工具绘制一个无边框的正方形,填充色为蓝色,颜色代码为#33CCFF,然后连续复制7个方块的副本,在垂直方向将其排成一列,如图3所示:
( ~9 Z5 i: [/ ]9 y  _2 c' v
5 j! t" V4 n4 T+ |+ U
3 E' P0 W! {* l, b  E/ H- g; g! m+ ?% `! }" u/ s- Q1 t6 l8 X
$ v4 N6 T2 n4 u/ F: n$ [7 O5 {' B* \! i4 ^

6 y2 k7 v0 @0 f) f
3 k$ B7 W; x0 K9 S/ A+ z4 o
6 E$ B3 w! Y" ?& b2 [8 F( I& T* b' k" D* r% |
图3  制作方块列. b7 B5 `. a6 [) ^; m$ P% A! p  X
$ F( [6 s8 y/ g% P4 M$ k

9 B7 U1 G/ |6 |+ c3 M$ [0 [
! H) {( `7 c0 F) W9 J* Z% S: v* v' A2 q: J& ^! t0 W

: S5 y0 u: C6 z* b　　3.下面制作方块垂直翻转的效果.新建一个影片元件,命名为row flip,进入元件的编辑区后,将元件square row拖到图层一中,然后在第20帧插入一个关键帧,回到第1帧square row点右键,从弹出的快捷菜单中选择缩放命令,这时在元件四周出现了缩放调整手柄和元件的中心点,首先拖动元件的中心点到元件的最下面,如图4所示;
$ Y2 k$ p( p0 i" P
5 K: r, w% y4 E2 B
3 O$ v0 B9 ^. `" T! Q
$ _9 |2 f, |, ?' O7 |7 z; O1 `1 ?( `( k' u

& |: x7 Z" s$ a4 f' D. D$ X. I5 j& B9 S6 `
$ W7 m: x1 W' ^5 v- s
8 B: D9 _) f$ t- }/ h& b
图4  调整元件的中心点' E# k' n' [( D  ?& b

+ j6 X2 W. r! e1 K0 V: b( f& u$ [( I/ p- n$ H% l- N
% L& d* f+ S4 c1 t  y
3 ]( k8 |5 _4 B$ K/ B1 ]

* i! |* ?8 g- ]' r　　然后向下拉动最上面中间位置的手柄,使其高度逐渐缩小,如图5所示;
' G7 }; J. d' a  Z
' [" v4 f) v; m0 l5 w6 ~/ j# a/ D2 X
$ b) Q' c$ a% O* {6 ?' D+ `
6 l5 y; d' ]& b' Q# ^( u8 G: M) Q
! R) V% a; S. Y$ g9 X9 O# Z

0 |, ?1 k5 L7 ^! @* y1 ]) G' Q% [: f7 H

2 {$ b; H% V( M  W; ]" J图5  向下拉动方块列, H) x) W9 ]8 b
) J( W+ r9 B, d  W
3 `4 D' h8 ?+ ~8 J. h' J! q
# y0 }/ y0 M+ h' a# B

' w- u" ?1 `9 \& _9 e, Y! t" \
9 e# ~2 \( d: p* D/ ~　　直到方块列被压缩成如图6所示的样子即可;+ L# Z! }/ K9 j
2 R- ^+ Z" ^% E# r0 M+ j( ~

; {8 e) f8 _4 x* K0 n: N1 u- O2 H/ \7 ~+ h
$ h) E" ^# c) ~& Q

( R  W% q& w0 ?. _) d1 I$ ^1 z
& Q3 p, ^* J2 C; ~# F0 s! B' ~  m& g0 a) f6 `
$ n6 r. R, V& E. w) o! Q
图6  被压缩后的方块列
$ ~: a$ P' f7 m5 c" h
; W! Z1 E! i# W$ `# s  B' f' H+ P# x0 |8 n: u

! j: d+ T$ u5 k8 k: z
' P5 b$ `+ R+ k% w$ J
# k7 k* w! c$ i) R　　4.建立第1帧到第20帧的运动渐变动画,在上面新建一个图层,分别复制图6中压缩后的元件和图4中压缩前的元件到图层Layer2的第1帧和第20帧,不过这里元件的位置需要放好,将压缩后的元件放在压缩前元件的最上部,同样建立运动渐变动画,最后在第20帧添加Action: stop();,这时候把时间轴移动到第10帧,会看到图7所示的翻转效果:
+ D" n/ ^9 W, a. N: Y( `! ]( j$ _& R0 @; D4 m
+ l3 ?' Z  y* i1 v0 B$ G% g/ T( u

4 Z% A. d  J" [* ~; V# r
( y7 |  V5 ?0 u. b' S
1 W% r" I3 }* z. ]1 i
8 m+ n+ B2 N7 B% f6 l% g4 d1 C: T8 d) J' \0 V3 O+ [
9 b  v( n( ~6 S; W2 q
图7  垂直翻转效果# ]. Y2 A9 u& m: h0 @
7 F& a1 n9 G( B& \! @! `

+ q5 z$ ~' L4 z! A, R  m+ [
3 W6 Y1 Z. T7 Y& z6 Y4 U6 D
% m* F% r/ i* o( c. ]: ~1 Q$ e0 K2 U% M5 h* }2 Q$ }
　　5.下面就利用前面做好的垂直翻转,通过简单的旋转操作,将其旋转成水平位置,就实现了水平翻转的效果.新建一个元件命名为controller movie,进入元件的编辑区后,插入两个关键帧,分别设置其帧标签为horizontal和vertical,然后给两个帧都添加Action:stop();.其中第1帧设置为水平翻转效果,第2帧设置为垂直翻转效果.3 A/ k7 Y8 z- j3 u& y
* o: j( d4 y5 {+ p5 p' P
  H* f/ M+ \: o6 Z. M; Y8 U# C
$ q0 d' Q5 i6 [# ?
6 R# }& k) T4 S$ m& L  X0 B" `
9 t! p0 @- W! X1 A: G& a
　　回到第1帧,将元件row flip拖到编辑区中,使用旋转工具将其旋转成水平,然后复制7个副本,排列其为一个方阵,如图8所示;
. Q# G) k3 x8 d7 I- [0 d( f0 \
: z2 P: Y" @0 a/ L9 a7 ^$ }/ U
8 m8 e& F7 o4 a- ]5 _7 n8 E! P
5 e( M9 N+ K+ I; C
6 ^, ]' a; D& J, A
: F/ c$ K" h4 p+ d
+ V0 @3 i8 P; e8 Z, q" y
  S3 }$ s) l3 }. M! o+ v% C
) B) h# o/ i; B' e" M* p9 V图8  排列元件成方阵
" X+ j( @+ \# L% O5 |& h) R7 i; y3 {+ ]; r$ H) b2 C% V$ U0 B
" x0 M$ T( I! q% M& g

  b. }' m' n) Z# H5 E
( o4 O# E3 @* p8 G2 L8 ]- Z% w0 F1 v6 C6 [' g6 m' e
　　回到第2帧,同样将元件row flip拖到编辑区中,也复制7个副本,然后也排列成一个方阵,这里要注意两帧里方阵的位置要相同,不要出现错位的现象.
: I, h0 I# e; |. ^
/ c: X. y* n2 k# ]% p6 y' ]
. @; a9 `2 I/ r: X( h* w3 W. e, N* o3 Z

" S/ k* p3 _: c# R3 }; n5 b9 h; k$ C9 Q. s* h
　　6.最后回到主场景中,将元件controller movie拖到舞台中间,在属性面板中设置其实例名为box,如图9所示;
+ `( W3 p$ R" a  U( {; q
1 P' p% }. J, y& R/ b( a4 P% g# T7 }) D
2 m0 o/ ^( D& P# m7 G4 I

5 B& }' ?% G/ l- V4 x( j& P
- i' E2 A+ J- \- h+ D
8 N6 V1 P0 S1 a' h# E! C3 n& X7 X& [* i+ B2 L3 J& M

8 Z7 v9 J; m1 d; ]. q+ g图9  给方阵设置实例名
4 f$ ^9 i, |7 n1 Y' @$ i
  f! a4 r6 \' K
: `7 t9 Z' B1 u7 [* @, t; ?9 J3 E' c. b% `' s# n

( C7 y& q/ z. r1 n9 {
: ^& w3 J& r  g) h' W　　最后只要在下面添加两个按钮,分别用来显示水平翻转和垂直翻转效果,如图10所示;( t  t# \5 [8 m# V2 x- f8 r

/ u% Z" Z% {- y$ K* E8 `
8 ?- L! k2 h6 B. x2 t3 z+ a5 B. V' M; f4 k
; h8 A/ J. e3 ~

6 s" y& y6 T0 H' q  ~/ x  c6 \2 I9 a# N$ p0 y; ^/ B
. j+ d! {4 N  O+ n
! `+ [7 I+ |* {7 g' J3 }
图10  给影片添加控制按钮: P) l  y' j5 |# \( O, K9 [2 J2 J+ z  t0 }

. v' W# U, N7 x. H& k5 G6 N. R. |9 f  C# U; I! Z4 k- `% l

& f0 I8 \# M$ X) b+ t% L" h
% B$ f% K( ?5 }1 A4 u2 |7 B" R# Z: E, Z1 Q6 j4 C
　　给左边的水平按钮添加如下Action:
7 V; R/ E3 F3 @0 V- p2 U! v' Y, `) g) k) o
2 a/ w" I! z5 ?2 W3 s- _7 v( N( k

+ o5 i2 e5 z' e5 ~. M( M, ]
1 N6 Q; K2 M7 U$ k  ^' \3 j& B2 ?! x; c: s: D' q, q
on (release) {/ {1 u  U% N! G; j; I- H2 x/ e3 K
; n+ H' {+ @  R7 Y4 C4 t1 P
/ R& p4 `3 N9 }. a  h+ e
) L# ?- Y' g4 v  Z# E
! ^. t7 N+ z* r1 g

: T  v& v- s! c  ?. o    tellTarget ("/box") {
" |& r4 r0 h4 V* R8 O7 g
. s; `) J; u4 X% p
9 I* y5 M4 E0 o( _% W, c( I
; ^' L, [5 ^9 f" N1 s( U, l
4 J( Y. W+ g9 z: `) J7 l, i0 H+ A
$ i! B- |- ~, Q0 z$ a3 ~* s, f        gotoAndPlay("horizontal");# W% p" \& R& A5 S& x5 Y# w

! j5 h# _7 F: W% o* d6 u5 r! h) Y' }" J7 I( O7 w/ X
3 l4 _6 _* F; T2 T* c& f/ P
8 U3 f6 Z" K. }' `$ J. i
& m5 |8 a4 O- U" W1 L' @
    }
* L9 Y' D$ X+ i  `
0 j* q8 l6 S$ l7 {
+ s% o. k/ n  F* ~5 O; w6 U* n+ d7 }) w) q5 }* `9 h/ {8 s
! o9 F5 Q/ V1 ]- v
0 H0 p7 y. L% X. w4 m& _
}
( V$ ?3 _/ N. k8 z6 H1 F# j8 Q& C9 `# P# `

# K. p9 |5 G4 y& h6 _" P
7 W3 c% P* U+ p/ `+ O* Z$ m
( X  q0 E/ x6 \* u% R
$ Q! x. W  a2 {6 ~) E8 x　　给右边的垂直按钮添加如下Action;) G# ]7 ?/ q, r5 c! \! O' V' `' g

' y0 v  G7 m$ H) a4 _1 i2 m! j0 W
" U5 b5 ]$ V, O  Q$ \. M6 h& L1 ]% v4 q& p. ~1 Y
) e! f  l, x) d1 ^, G+ V; r8 {

" C3 [% v/ T+ P' f2 l& mon (release) {& d, J, O2 k& Q# X$ Z5 }* e9 @3 R) s
. M( d: f; Y& s. J* f# O

, _  w5 O' O3 H8 }4 W& T' }: u! t* o$ n

# }' T2 j: L0 |; ?" P, R* {2 A- ^
    tellTarget ("/box") {
# s1 X, c. D- ^+ f- C
1 {5 O0 V* E9 N( _3 X$ t/ H  n3 ~, _: _
! ~0 b( `: M4 j% d) ?1 [1 {
( g2 c5 H9 e- x! X
5 z: C4 ?! l8 y0 Z1 Q0 _
        gotoAndPlay("vertical");
0 z9 o7 ]$ v7 _( M. _' K
2 L2 g' }; o! u9 s  w
; L, G9 q. w( r4 I0 j3 C* P$ o
8 O, ^3 C  i1 ?7 y; B$ p
  D8 F" [2 q8 {! {" a9 w% X1 G+ n) s9 ^' N
    }
4 `1 {  r& e0 Y9 f( R8 R% b7 I2 h: l- t' N

4 J4 Z. a) G# F& T( A! l- ?. R  ?# s$ W) q1 t+ U6 M. U/ W* ?" X$ G4 Z* q
' D+ }% @) @9 z" p* _! t

% q4 a' T6 n  Z( y3 h}