发新话题
打印

flash遮罩特效实例精选--百叶窗效果

flash遮罩特效实例精选--百叶窗效果


百叶窗,在日常生活是经常能见到,电脑上的屏保大者有百叶窗效果,现在作为闪客当然希望能用自己的武器设计自己的百叶窗效果,最终效果如图1所示:
" k( m+ I3 |, A1 q- j: D' E  e# v8 b7 y* ~% H' d; ?2 J! l

, N+ q# E2 G8 \' R3 c
" B1 `" @% D4 ^+ Q7 y
8 z' ~* |- v8 q3 o1 `) Z0 b! c4 d
. Z% V1 k  O1 ?; ~8 K, J
8 j% I6 |: C: R/ D8 n8 J1 Q
, z1 k0 C  M8 ^# s/ ~! M. k! g; A$ m$ C( G. |0 A
图1 百叶窗效果4 X4 k1 O. N( g4 @- q  H4 A2 X
  a, H  D8 g$ Z2 e% T

8 t/ N. t8 N: F6 c% L9 n2 z9 n7 p& K+ L1 o8 P, e

3 ~: e+ o. u0 K) Z3 t9 ^& v# s- u
& {( T% x. R$ j, {  t  由上图可以看出,百叶窗主要使用了遮罩技术,当“百叶窗”被拉下时将打开将打开另一幅画面,具体操作步骤如下:
  h# p$ H3 f2 W  s& P2 b$ @8 Q1 |  ]  D8 N* b5 ?
  v8 \+ G( h8 A0 W, y& s
, c! ~! q, t2 `; i4 V. b0 ~
6 q: ~# p7 n. O0 b" @4 G

  P  Q8 L6 B6 i; C' i6 |  1.新建一影片,设置影片大小为300pxX300px(单位为像素),背景色为白色,当然设计者可以根据需要另行设置,同时将两幅准备好的图片导入到库中如图2所示:
2 ]: m3 ]& P/ B8 C
6 l: n+ _- V2 x2 ~# g3 q  T1 P) `8 Y& Z6 J7 m  G7 {

; B+ |" Z( ^( P4 p$ @4 g1 J2 [1 K3 V# F, K

, {8 N& A4 F; D+ D0 @" g) F* j5 C7 s, i$ P2 F' j) K0 J8 S4 n

# O8 P6 Q, g3 q# P8 K1 e# G# X: M, q. O3 X3 q
图2 导入两幅图片
4 a& g) [; e0 f' {
2 R1 W" a8 D- X6 o" w! O
8 S4 p6 l; i6 k7 k$ ?. u& S+ f! F/ @7 G. U0 E# r
2 w* Z& t1 p. g

* ?2 X. c% `7 [/ S. h  2.新建一图形元件“meng”,选中第1帧,插入一关键帧,选取矩形工具,设置其填充色为黑色,在工作区中绘制一矩形,如图3所示:
- R) A( J9 E' L+ a' b* O3 `! o# ~+ T0 M( V: O/ b' {4 j  q$ ?
# G* i( @, g" B$ {7 V
* T* o* y. t. C( s0 Y0 n9 v
; O9 d- Y5 X. t  R. h: w

5 [7 G; [4 B7 q* l& M5 s% A0 Z  v# p$ n/ _4 K
& h2 t% p$ ]$ P- X
1 k/ w- T, i% f5 O' R" \& z; p
图3 图形元件“meng”的设计
; Q  f1 }; J" ?
: r- n  Q% Z, R
' q% Q. a/ M7 t; N  o9 d0 r1 H7 f0 n9 g
. t; ], ^; O3 Y- n( l6 m7 d
- O& r* {& R2 }6 z  L
  3.新建一图形元件“meng_f”,选中第1帧,插入一关键帧,将图形元件“meng”拖放到工作区中,创建一实例,在第15帧处插入一关键,选中第1帧单击鼠标右键,选择“创建补间动画”,选中第15帧,将实例调整为一条线如图4所示:- z$ m2 R0 c8 t' d) s) L, g
6 s1 G( \) Q& p* s7 c
$ F% m+ \' b5 `- r, t, P; C

: W  r- ^! b: A( n. @- i/ A3 d& \! Y$ N# U' k' {

8 t$ E9 z4 U- f% s+ r0 f# m) y, N6 H3 n8 |0 R+ s
# S6 G; W) ?. I0 t1 Z
' y+ x2 p; s$ Z' s7 l
图4 创建动画渐变动画
8 S, @( {0 V3 [1 j+ U, J7 j
% V; L' W8 [7 j; Q5 C" w. l! S; f; @" k3 a
; [% _: }; I: o
4 k8 d6 ]; I9 y- k. p

* I* b- T( a2 g' _3 Y7 p  分别在第25帧和第40帧,插入两创建关键帧,并在25帧和第40帧之间创建相反的运动激变动画,即由一条线放大。时间轴如图5所示:
) N. M; i1 l) N: {! S# a+ K) s& l# v* o  G  {' R1 a2 v$ u

! b8 G5 K5 }. H7 m' i
7 S4 p9 r; I( z9 o9 h5 ]. A& v% p& T4 O
4 W  T2 K( Q! r* `9 E
* ]' D- T' k& A& J( w
5 e% s5 U  G9 D# g
  P& r! U) P$ f4 L1 c
图5 时间轴窗口6 T: j) M* e; C1 @

3 C- b0 k! m; |- v( u. D; ^* Q5 z) s. I7 m

9 G: Z; A8 [. B3 k/ [; M  l- ^- H+ V9 n; t* u5 y/ \

! g# ?- m' r. t) @( y' _  L  2.返回主场景,为了便于理解,将默认图层更名为pic1,再新建一图层“pic2”,分别将导入的两幅图片拖放到工作区中,分别对导入的两幅进行如下处理,
- G7 X: o) F5 q# I. s4 J* Z
; V6 o) ]$ g" v2 ^: C
5 P: O3 k% Z6 z# C2 Z3 V: W( n: H5 Y& K" o4 ^3 o2 Q+ F
& u! G/ {0 H  n; [
' `5 G4 |! g. Q' c
  a.将不同图层中的图片使用分离命令进行分离操作。) D( O" N+ ?/ ^. x

. e4 W+ A# q/ F3 D
" m9 D5 k& Y9 [5 e
  q* @7 S. I* ^# g3 c- u& ?" N8 {8 Q, b2 ?# {. m) p

3 K2 [0 o; \/ `6 w; ~' @  b.从工具箱中选取椭圆工具,设置其填充为透明,按住Shift分别在各图层中绘制一圆。% B( h( `* `9 S* w+ l* Y7 o
+ x1 r' o' k& d5 w5 j% P

* T7 _& H/ h' T( u; h5 z1 g2 F: l* U% {" `( x. R

5 `7 i4 z( G& w/ [5 H
( x7 U4 _  r0 k0 h  c.分别选中圆的轮廓线条及圆形外边的图片,按键盘上的Delete键,将其删除,这时图层“pic1”和“pic2”中的图片效果如图6、7所示:" p% Y1 a+ N% B, N2 }

, R: i$ y# c5 T6 j( R3 Z. A0 W
0 p4 K- d/ `+ K( I
, I. \. {" v3 n
; K9 U5 \: N. M& a2 @# ]- L  t
4 D9 a7 k5 o" m
0 D3 i$ {8 k+ `& z
; D# v% P" M) S- N* V1 c. G3 ^% S8 i3 u* Q
图6 图层“pic1”* ~/ y' M( O/ q

( K& ^: ]7 I0 m9 s, J. f4 V2 d% G  L( U2 ?7 J' B9 `/ {
: n! J4 x9 @6 N) j

) ^5 t- w3 S1 e9 j
4 u. t( G  C% H4 q3 Y; K5 q+ i
( v8 j  H# s4 g6 s. q9 N3 v0 b* p8 `' \! w( n
" n6 Q/ ]0 }; W7 V
图7 图层“pic2”5 ]% T. R6 C& `. m8 D( ?" l
+ ~. G, r- I- }$ P+ M8 R8 k6 c

2 m. P; Q: w/ J8 J" ?& D' u/ O5 ~* @7 H' @- k# A  Z- {0 W

: u9 v( O" V6 |1 M5 m# w
& B+ F: q" S8 {+ Q* |, r  d.分别在这两图层的第42帧处插入一关键帧。- r! f" [. P3 Z1 o2 m" Q

# a$ V& J" S2 g$ m, T( W. N
: o# x) M- U% j8 h, q0 t: p% j1 h" ?1 b1 i" [

, ?4 b5 E) @2 `6 g+ j. i8 ?% {9 u- f. D  v, ~) m5 V0 E; Q; l/ p. d# v' j6 z
  3.选中图层“pic2”,在其上插入一遮罩层“maske pic2”,选中第1帧插入一关键帧,将图形元件“meng_f”拖放到工作区中,并在第42帧处插入帧,调整其位置如图8所示:' o: ^" p8 W" p) o

0 V  `% S; f  Z+ C( N# }9 X. ^# [* q- k" V/ L% t
0 O# T$ F: B# R- {3 _
2 o0 _- A4 c) `: g# u+ d+ D

) X: p9 }9 L8 Z9 N0 l% `, c8 U# N0 c( {, [/ ^- p2 a
6 L' Y6 r' k0 Y

* r" C2 E, R0 K% Z- h图8 为“pic2”添加遮罩层
- m2 \' ^& K. N0 y, _* [+ ~$ l6 Q  g0 D1 h: I/ b
3 s# P/ w4 H6 E- {% C

1 p8 F# i  t9 b9 l4 ?; }" e6 @6 p2 @& M6 }- k$ b& v' k
& ^+ ]% N" W7 S/ L4 \5 U
  4.新增8个图层,按住Shift键,选中图层“pic2”和“maske pic2”,用鼠标右键点击被选中的任意一帧,从弹出的快捷菜单中选择“拷贝帧”菜单命令。用鼠标右键点击“图层4”的第1帧,从弹出的菜单中选择“粘贴帧”菜单命令,这时“图层4”将变成复制后的“pic2”和“maske pic2”蒙板层,点击复制后的蒙板层,按键盘上的向上箭头,将实例向上移动,调整到适当位置,如图9所示:; S( |& z' x) G6 \5 [: P# B1 X

( G6 `( h5 f; Y/ _* z6 K6 F' f5 c) O0 c9 K6 P4 @
* E' N/ k# w6 M/ `' ^* H
7 }; s0 f( V3 @

, S- c7 D6 I5 Z+ ?6 g. `3 i! O8 ?. E6 M/ t5 E* M+ @2 R- Y9 t

4 j5 r' H8 _$ v2 d
1 r! X' }% c7 E& \1 r2 I图9 调整实例位置! q5 U+ T! N" _* ^8 ?0 f3 |
, M7 {' D6 ^! V: Q# O
! j1 u/ d* I9 }% U1 _

5 }1 ~2 @, h# A6 j# y' ^7 X1 o" X4 ~; u; c

  n3 p2 L1 k' j$ E  j/ ]' }  5. 用同样的方法,依次在“图层5”至“图层11”中分别复制“pic2”和“maske pic2”图层,将各个蒙板图层中的实例向上移动,并顺次向上连接。最图10所示:' V9 v; w2 m  H. A. N" ^
( S9 g, ~  `5 G3 G5 K* s, r% i
" C! z- y0 P4 ?  Z. B% w

  S# O8 M. K, j
4 _0 t6 Z2 l! t  d
5 Y# E' \+ ]4 H+ V  w- Q  ~. h( Y
1 ]( c# E, r( V) V2 `6 x+ [4 T# r4 I- J. F+ i6 N* h4 y2 I

" [; a3 |: N/ ~- J3 C5 m图10 调整排列各遮罩层中的实例
8 J& N% Q+ X! k- P8 h( g8 {9 S- T( K, z' K& C% \
, S4 V5 {6 G5 e. z

4 t0 u6 G) b; z" _" Q  C
  l% W* o6 @8 L+ y# h. c- k1 `4 ^" e% c" Y; `& L) g6 w  {
  6. 这样整个“百叶窗效果”就制作完成,保存作品,按“Ctrl Enter”预览最终效果。



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

TOP

发新话题