Cách tạo ra các ảnh chuyển động animation

GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BANG HèNH NH -t a m CHNG s' CCH TO RA CC NH CHUYN NG ANIMATION TNG QUAN V CCH TO RA CC ANIMATION Bn to cỏc Animation bng cỏch thay i ni dung ca frame liờn tip Bn cú th to i tng di chuyn ngang qua vựng Stage, thay i kớch thc, hng xoay, mu sc, hỡnh dng v cỏch lm cho i tng vo hay m dn (Fade In hay Fade Out) Nhng thay i ny cú th xy c lp hoc kt hp vi nhng s thay i khỏc Vớ d, bn cú th to cho i tng xoay v nú di chuyn vo ngang qua vựng Stage m dn Cú hai cỏch to mt i tng Animation chuyn ng liờn tip Flash: chuyn ng Animation theo frame-by-frame v Tweened Animation Trong cỏch chuyn ng Animation theo frame-by-frame, bn phi to nh toong mi frame Trong cỏch chuyn ng theo Tweened Animation, bn cú th to frame bt u v frame kt thỳc v cho phộp Flash to nhiu frame khong gia frame u v frame cui ny Flash thay i kớch thc, hng xoay, mu sc hoc cỏc thuc tớnh khc ngang gia frame u v frame cui to nh thay i chuyn ng v hỡnh dỏng Cỏch chuyn ng theo Tweened Animation l mt cỏch cú hiu qu to nh chuyn ng v thay i liờn tc ú kớch thc file rt nh Trong cỏch chuyn ng Tweened Animation ny, Flash ch lu li cỏc giỏ t thay i gia cỏc frame Trong cỏch chuyn ng Animation theo frame-by-frame, Flash lu li cỏc giỏ tri cho mi frame kt thỳc bit thờm cỏch hng dn to nh chuyn ng Animation ny, bn hóy tham k h o t h m t i l i u GIO TRèNH THIT K WEB : PHAN THC hnh - T HC MACROMEDIA FLASH 5.0 BNG HèNH NH c ự n g t ỏ c g i Ch V : Ngoi bn cng cú th to nh chuyn ng Animation bng cỏch dựng Set Property action Bn cú th xem mc ActionScript Help bit thờm chi tit CCH TO RA CC KEYFRAME Mt keyframe l mt frame m ni ú bn thay i quỏ trỡnh chuyn ng Animation Khi bn to nh chuyn ng Animation theo cỏch frame-by-frame, mi frame l mt keyframe Trong keyframe chuyn ng theo cỏch Tweened Animation, bn phi xỏc nh ti nhng im quan trng quỏ trỡnh chuyn ng v cho phộp Flash to ni dung gia cỏc frame Flash hin th cỏc frame b sung ca ch Tweened Animation nh cỏc mu xanh nht, xanh m cú mi tờn v gia cỏc keyframe Flash s v li hỡnh dỏng ca i tng mi keyframe Bn ch nờn to cỏc keyframe ti nhng im ú toong nh thay i Cỏc Keyframe c xỏc nh thc Timeline : mt keyframe cú mt vũng trũn t trờn ú cho bit keyframe ú ang cha d liu v mt keyframe trng th hin mt ng thng ng trc mt frame Cỏc frame thờm vo sau ú trờn cựng mt layer s cú cựng mt d liu nh keyframe T SCH STK - TH GII HA 191 BIấN SON: KS PHM QUANG HUY GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BANG HNH NH r ằ Layer - lJ * a * D -ằ CHNG \ r- f 20 I/ ^ Keyframe cú cha d liu V 10 * 4Ơ m 15 - \k Static Keyframe Cỏch to mt keyframe, bn cú th chn mt nhng bc sau õy: Chn mt frame thc Timeline v chn trờn tnh n Insert > Keyframe Nhp phi chut (trong Windows) hoc nhp Control (trong Macintosh) ti mt frame thc Timeline v chn lnh Insert Keyframe cú trỡnh n 25 30 \r C ie te M o tio n T w e e n In se rt Frame Remove Flames I M S ifli In se rt B la n k K eyliam epliame e C leai K.yfi M rng nh nhiu frame: K To mt nh toong keyframe u tiờn ca on phim "bo ' K Chn mt frame bờn phi, ti v trớ frame cui m l b n m u n th m v o Chn trỡnh n Insert > Frame > Dựng mt Shortcut m rng nh: To mt nh keyframe u tiờn Nhn phớm Alt v nhp chut vo keyframe sang phi iu ny s to mt vựng m rng mi m khụng cn mt keyframe mi ti im cui TNG QUAN V CH CHUYEN n g TWEENED ANIMATION Flash cú th to loi chuyn ng ca Tweened Animation Ch Motion Tweening, bn phi xỏc nh cỏc thuc tớnh nh v trớ, kớch thc v hng xoay cho mt Instance, Group hoc ký t ti mt im v sau ú bn thay i cỏc thuc tớnh ny ti mt im khỏc Ch Shape Tweening, bn phi v i tng ti mt im v sau ú bn thay i hỡnh dng hoc v mt i tng khỏc ti mt im khỏc Flash s thờm vo cỏc giỏ tr hoc hỡnh dng cho cỏc frame gia, to chuyn ng TO CHUYN NG (TWEEN) CHO CC INSTANCE, NHểM (GROUP) V Kí T (TYPE) lm thay i cỏc thuc tớnh ca cỏc Instance, nhúm v ký t, bn s dng ch chuyn ng Motion Tweening Flash cú th thay i v trớ, kớch thc, hng xoay v kộo xiờn cỏc Instance, nhúm hoc ký t Ngoi ra, Flash cú th thay i mu ca Instance v ký t, to s chuyn i mu t t hoc to mt Instance ch vo hoc m dn thay i mu ca cỏc nhúm hoc ký t, bn phi to cho chỳng tr thnh cỏc Symbol Bn cú th xem mc Cỏch to cỏc Symbol bit thờm chi tit Nu bn thay i s frame gia hai keyframe hoc di chuyn nhúm hoc Symbol keyframe, Flash s t ng tween cỏc frame ny mt ln na Bn c th to ch chuyn ng Motion Tweening dựng mt hai cỏch sau: Cỏch Th N h t: To keyframe u v keyframe kt thỳc cho quỏ trỡnh chuyn ng v dựng tựy chn Motion mc Tweening t bng Frame Properties I Flame m f i ln s tl G F l a m e ] j j < f S o u |T jE F (e< j ( ? ) 1 T w e e n in g :| M o tio n E a s in g : |o ^ III I 'r f r K O lie n tto p a th S y n c h ro n iz e | 194 S c-ỡle -rj R o t a t e : ! A u to O p tio n s ; - T SCH STK - TH GII HA J Label: I Snap J BIấN SON: KS PHM QUANG HUY GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BNG h ỡn h n h CHNG Cỏch Th Hai To keyframe chuyn ng u tiờn v sau chn trờn trỡnh n Insert > Create Motion Tween v di chuyn i tng n v trớ mi vựng Rash s t ng to keyframe kt thỳc Kh thay i v trớ, bn c th to cho i tng di chuyn dc theo mt ng dn ph tuyn (Nonlinear Path) nh vớ d ong ti frame th hai, ba v th t l kt qu chuyn ng t key&ame u n keyframe cui cựng To mt nh chuyn ng Motion Tween dựng tựy chn Motion mc Tweening: Nhp chut vo tờn ca Layer kớch hot n thnh Layer hin hnh v sau chn mt Keyframe trng Layer ni bn mun to vựng chuyn ng bt u 11 31 s j f l EI IK IUa BsiiM 0â â II r 11-1 11 I ! n * | To mt Instance, nhúm hay mt ký t vựng Stage hoc ko mt Instance ca mt Symbol ca s th vin Library chuyn ng i tng ó v, bn phi chuyn i i tng ú tr thnh mt Symbol To keyframe th hai (keyframe kt thỳc), ni bn mun vựng chuyn ng kt thỳc bng cỏch dựng chut nhp vo xỏc nh v trớ frame cui cựng Sau ú bn nhp phi chut chn lnh Insert Blank Keyframe cú trỡnh n thờm vo cỏc keyframe trng cho on phim 10 15 20 25 30 35 40 J LJL-LJL- LJL-LJL-IUJLJ-JL ? Layer Jj C re a te M o tio n T w e e n Xỏc nh v frame cui n s e it Fram e R em o v e Fram es ' [ I jo ] |l2-0 Transform thay i kớch thc ca i tng ó chn T SCH STK - TH GII HA 196 BIấN SON: KSPHM QUANG HUY GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BNG h ỡn h n h CHNG Nhp chut vo kộo cỏc phớm mi tờn k tip chn giỏ tr mc Easing hoc nhp vo giỏ t hiu chnh t l thay i gia cỏc frame chuyn ng nh: J F ớa m e [S Q in stiE Q Fr Sou i ] EFFecj! Ir Label; T weening: Moti Easing: |ij s '' R otate: Auto Options; O F " Seal* < ^ | ~ ,Ă co p-ath , _ _ ronize Snap Khi bt u chuyn ng tc chm chm sau ú tóng tc hng v phớa kt thỳc chuyn ng, kộo trt ln hoc nhp vo giỏ tr t -1 n -100 Khi bt u, chuyn ng cú tc rt nhanh sau gim tc chuyn ng hng v im kt thc chuyn ng, kộo trt xung hoc nhp vo giỏ tr dng t n 100 Theo mc nh, tc thay i gia cỏc frame liờn tc Mc Easing to hỡnh dng i tng xut hin nh dn hoc ln dn bng cỏch hiu chnh tc tha i ca chng xoay cỏc i tng c chn chuyn ng, bn c th chn mt tựy chn trỡnh n Rotate: Chn None (ch thit lp mc nh) khụng ng dng ch xoay cho tng F m e f s Q l n s c } ; Q F m e ! B Ê s o u [ Ă G e M L abel: Chn Auto xoay i tng chuyn ng ớt nht mt ln theo hng xỏc nh |7 S c a le r E a s in g : R o t a te : 1A u to p lio n s : i n T w ee n in g : 1M o tio n Trong mc Rotate chn Clockwise (CW) hay Counterclockwise (CCW) xoay i tng theo hng c xỏc nh v sau nhp vo gc xoay đ _V ] lo t im e s ùHSĩIt'l th A u t o H i cw DCV _ J Ă7 S nap Ch V : Hng xoay ny thờm vo bt k hng xoay no bn ng dng vo frame cui cựng bc 10 Nu bn ang dng mt ng dn chuyn ng (Motion Path), chn mc Orient to Path inh hng ng biờn chuyn ng vo ng Motion Path F ram e B i S G l n s l * FramefkJili: S a u [ Ê ] Eớtec L-óbel Tweenirg:| M otion JN1 T SCH STK - TH GII HA Scale Easing: |ij R otate: 1Auto ^ O p tio n s; [ T |7 ế tirris-j p iie n f l CO p a th ! [ Bjrtchrortise Is? Snap 197 J BIấN SON: KSPHM QUANG HUY GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BNG h ỡn h n h CHNG 11 Chn mc Synchronization m bo Instance din hot lp i lp li ng on phim Dựng lnh Synchronize nu so frame quỏ trỡnh chuyn ng bờn ong Symbol thm khụng nhiu hn s frame m Instance Graphic gi on phim 12 Nu bn ang dựng mt ng Motion Path, chn Snap gn cỏc thnh phn chuyn ng vo ng Motion Path theo im khai bỏo (Registration Point) 13 Cui cựng nhp chut vo keyframe cui cựng vo kộo i tng n v trớ xỏc nh im dng chuyn ng to ng Motion Tween Bn c th xem vớ d nh hỡnh bờn di â E D ? Layer â la ô s ó * * m i? I- I * t > ỡ i 15 \ l ' I I Layer C 10 > & h } m 15 ' T 35 \ f n | % \ [ :! " ] ó ' / \ 25 ' ' ' 30 13 112.0 fps I 1.5s i] - (^ I t h , 14 i tng ó to xong v bn c th nhn phớm Enter din hot on phim va to Lỳc ny bn s thy ký t Flash s chuyn ng t trỏi sang phi on phim ang din hot T SCH STK - TH GII HA 198 BIấN SON: KSPHM QUANG HUY GIO TRèNH THIT K WEB ; PHAN L THUYT - T HC MACROMEDIA FLASH 5.0 BNG h ỡn h n h CHNG To mt Motion Tween dựng lnh Create Motion Tween: Chn mt keyframe trng v v i tng vựng Stage hoc kộo mt Instance ca mt Symbol ca s Library Nu v mt Instance thỡ sau kh v phi chn tt c i tng Chn trỡnh n Insert > Create Motion Tween Nu bn v mt i tng bc mt, Hash s t ng chuyn i i tng thnh mt Symbol v gỏn nú vi tn l Tween Nu bn v nhiu i tng, cỏc i tng thờm vo c cỏc tờn l Tween2, Tween3 v v.v Bõy gi bn s thy xut hin du cng trờn i tng l im khai bỏo cho Motion Tween 11 12.0 Fps ' G te i tng trc v sau kh chn lnh Create Motion Tween Nhp chut vo s frame m bn mun vựng chuyn ng kt thc v chn trờn trỡnh n Insert > Frame Sau nhp chut phi chn lnh Insert Keyframe c txỡnh n x xung Lỳc ny bn s thy ng Motion Tween xut hin m ó n tú ir 2fi ằ jj an * 40 C r e a t e M o tio n T w e e n / z I \ \ l n s e r t F ram e R e n o v e F ram e s S B ' - W / W S S H M C lP In s e rt K ey fram e k In s ftrt B la n k IC e y fiS n e C l e j i K e ji f r a m e ẻ ] S c h ỹ l A ll C u l F la m e s C opy F ram e s P a s t e F la m e ? Chn lnh Insert Keyframe trỡnh n s thy xut hin ng Motion Tween T SCM STK - TH g i i HA 199 BIấN SON : KS PHM QUANG HUY GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BNG h ỡn h n h CHNG Di chuyn i tng Instance hoc ký t vựng Stage n v trớ frame cui cựng mong mun Hiu chnh kớch thc ca cc i tng nu bn mun chng chuyn ng thay i kớch thc ca nú Hiu chinh hng xoay nu bn mun nú chuyn ng xoay B chn tng kh bn ó hiu chnh xonr m J j l%1 đ [M]]~ừ~irEừFp7 * Nhp chut vo keyframe cui ca quỏ trỡnh chuyn ng Motion Tween v chn trờn trỡnh n Window> Panels > Frame Ch Motion Tweemng s c chn mt cỏch t ng bng Frame Nu bn mun thay i kớch thc ca i tng ging nh bc 4, bn hóy chn lnh Scale trỡnh n Modffy > Transform Nhp chut v ko vo mi tờn chn giỏ tr bờn cnh mc Êasing hoc nhp giỏ tr vo tha i tc chuyn ng gia cỏc frame Kh bt u chuyn ng tc chm chm sau tng tc hng v phớa kt thỳc chuyn ng, kộo trt lờn hoc nhp vo giỏ tr t -1 n 100 Kh bt u chuyn ng tc rt nhanh sau gim tc chuyn ng hng v im kt thỳc chuyn ng, kộo trt xung hoc nhp vo giỏ tr dng t n 100 Theo mc nh, tc thay i gia cỏc frame lin tc Mc Easing to hỡnh dng i tng xut hin nh dn hoc ln dn bng cỏch hiu chnh tc thay i ca chng xoay cỏc i tng lc chuyn ng, bn c th chn mt ong cỏc ch chn c trỡnh n Rotate nh sau: Chn None (ch thit lp mc nh) khụng ng dng ch xoay cho i tng Chn Auto xoay i tng chuyn ng ớt nht mt ln theo hng xỏc nh Chn Clockwise (CW) hay Counterclockwise (CCW) xoay i tng theo hng c xỏc nh v sau nhp vo gc xoa Ch V : Hng xoay ny thờm vo bt k hng xoay no bn ng dng vo frame cui cựng bc T SCH STK - TH GII HA 200 BIấN SON: KSPHM QUANG HUY GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BNG h ỡn h n h CHNG Chu V : Khi i tng n cỏc ch cong bn phi dựng cụng c xoay Rotate ny ln na hiu c h ỡn h cho mi tờn nm trờn ng qu o nh h ỡn h trang trc 13 Bn c th chia cỏc keyframe khụng u tựy thuc vo ng n ch khỳc cong ca qu o m chia cho phự hp Yi i tng Guide: Lyei Q? Layei I?1 Layei 14 Bn thc hin tng t t bc 11 cho n bc 13 cho mi tờn Layer2 Sau ú bn s cú kt qu nh hỡnh bờn di Keyớtame cui cựng i tng dng li ti vớ bt u 15 Cui cựng trc din hot chuyn ng bn mun lm n ng Moton Guide vựng Stage, bn hóy nhp chut vo ct bờn di mt ong Layer Motỡon Guide ô ? Laver ^ ? Layer * E T SCH STK - TH GII HA 208 õ * ô > > ? j * :> + ( m II BIấN SON: KSPHM QUANG HUY GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BNG h ỡn h n h CHNG din hot chuyn ng, bn hóy nhn phớm Ctrl + Enter din hot nh mụi trng Debug Hai i tng ang chuyn ng Flash Player Kt ni cc Layer vo mt Layer Motion Guide, bn c th thc hin mt nhng cỏch sau: Kộo Layer ang tn ti bờn di Layer Motion Guide Bõy gi Layer ny s thc vo bờn di Layer Motion Guide Tt c cỏc i tng Layer ny s t ng bt dớnh vo ng Motion Path To mt Layer mi bờn di Layer Motion Guide Cỏc i tng bn chuyn ng Layer ny s t ng chuyn ng dc theo ng Motion Path Chn mt Layer bờn di Layer Motion Guide Chn trờn tnh n Modify > Layer v chn mc Guided hp thoi Layer Properties Layei Properties OK Name: iLaj-'er |7 Show yjpe; r Lock Normal Cancel H elp o GiUtte Guided Masked Outline Color: Laet Height: View layer as outlines 100% Nhn phớm Alt v nhp chut (trong Windows) hoc nhn phớm Option v nhp chut (trong Macintosh) vo Layer mun liờn kt vi Layer Motion Guide Thỏo b cỏc liờn kt Layer t mt Layer Motion Guie Chn Layer bn mun b liờn kt Sau ú bn cú th thc hin mt nhng thao tỏc sau: T SCH STK - TH GII HA 209 BIấN SON: KS PHM QUANG HUY GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BNG h ỡn h n h CHNG Kộo Layer bờn di Layer Motion Guide Chn trờn bỡnh n Modify > Layer v chn Normal mc chn Type ong hp thoi Layer Properties Layei Properties Name: K 1Layer OK vằ Show r Lock Cancel Help / T y p e : i* -Norma! TO*)ằ r c G u id ed oM dsfc: c Masked Outline Color: j f- \ V ie w layer a s outlines Layer Height: 1% ^ Nhn phớm Alt v nhp chut (trong Windows) hoc nhn phớm Option v nhp chut (trong Macintosh) vo Layer mun b liờn kt vi Layer Motion Guide CHUYN NG BIEN d n g ch Tw e e n in g sh a p e Vi ch chuyn ng Tweening Shape, bn cú th to mt hiu ng tng t nh hiu ng Morphing (vit tt ca t Metamorphosing), mt k thut to cỏc hiu ng c bit k xo hot hỡnh, to cho mt nh xut hin thay i liờn tc thnh mt nh khỏc (bin hỡnh) Ngoi Flash cng lm chun ng v trớ, kớch thc v mu sc ca i tng K xo hot hỡnh hay c s dng hn gi l tweening (vit tt ca ch in-betweening), to cho mỏ tớnh c kh nng tớnh toỏn v v cỏc khung hỡnh trung gian gó cỏc khung hỡnh chớnh cỏc ho s v bng tay Morphing chớnh l quỏ trỡnh tvveening vo mt i tng khỏc Khi bn nhp chut vo nỳt Play, nh G s chuyn ng bin dng t t thnh Bờ Khi bn Tweening mt i tng ti mt lỳc no ú thng to kt qu tt nht Nu bn mun Tweening nhiu i tng cựng lỳc, tt c cỏc i tng ny phi trờn cựng mt Layer Flash khụng th Tweening cỏc i tng nh Group, Symbols, ký t hoc nh Bitmap Bn phi s dng trinh n Modify > Break Apart gỏn ch Tweening Shape vo nhng i tng ny iu khin cỏc i tng khụng chc cú thc v nhiu thay i phc tp, bn hóy dựng ch Shape Hints, iu khin tng phn nh gc di chuyn thnh i tng mi Bn c th xem mc Cỏch dựng Shape Hints (cỏc hỡnh gi ý) toong phn sau bit thờm ch tit T SCH STK - TH GII HA 210 BIấN SON: KSPHM QUANG HUY GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BNG h ỡn h n h CHNG Cỏch Tween mt i tng: Nhp chut vo tờn ca mt Layer kớch hot Layer ny hot ng v chn mt keyframe trng ni bn mun vựng chuyn ng bt u * õ | /[ ' i' 'i Ix {I ĂIi]Ơ| %\ r-:| To nh tng cho frame u tiờn Bn c th dựng bt k cụng c v no to mt i tng Vớ d, n gin nht bn c th v hỡnh trũn Tip n bn hóy to keyframe th hai cú s frame mong mun sau frame th nht E 10 15 2D 25 30 3E s < Cieate Motion Tween Insert Frame Remove Frames r n s r a IU [ i n Insert Kevhame Insert Blank Keyfiame L " To nh frame cui cựng quỏ trỡnh chuyn ng (Bn c th lm chuyn ng hỡnh dng, kớch thc, mu sc v v trớ ca i tng bc 2) Ti frame ny bn cú th dựng cụng c bỳt chỡ Pencil Tool v v vo ch Flash chng hn II iN 1*1 Sau bn nhp chut tr v frame th nht v chn trờn trỡnh n Window > Panels > Frame Trong mc Tweening, chn Shape Nhp chut v kộo mi tờn k bờn mc Easing hoc nhp giỏ tr vo ụ hiu chnh tc thay i gia cỏc frame chuyn ng: T SCH STK - TH GII HA 211 BIấN SON: KSPHM QUANG HUY GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BNG h ỡn h n h CHNG Khi bt u chuyn ng tc chm chm sau tõng tc hng v phớa kt thc chuyn ng, ko trt lờn hoc nhp vo giỏ tr t -1 n -100 Khi bt u chuyn ng tc rt nhanh sau ú gim tc chuyn ng hng v im kt thỳc chuyn ng, kộo trt xung hoc nhp vo giỏ tr dng t n 100 Theo mc nh, tc thay i gia cỏc frame liờn tc Mc Easing to hỡnh dng i tng xut hin nh dn hoc ln dn bng cỏch hiu chnh tc thay i ca chng Chn mt tựy chn mc Blend: Mc chn vi Dstrbutve to nh chuyn ng m ú cỏc i tng trung gian nhn hn v khụng u Mc chn Angular to nh chuyn ng m gi li cỏc biờn rừ rng v cỏc ng thng i tng trung gian F ram e B 1' J lớỡst Fram el'y^r S o u iớ jE ifec] â > || Label: Twewiing: 1S h ip ? Easing: - * I Blerớd: ĂDistributiveAngular Sau kh chn xong tt c cỏc mc c bng Frame, cỏc frame ca bn trờn thc Timeline c hỡnh ging nh hỡnh bờn di i tng c din hot bõy gi hỡnh trũn bin thnh ch Flash5 Ch V : Mc chn vi Angular ch thớch hp vi cỏc biờn sc nột v cỏc ng thng Nu i tng ca bn khụng c cỏc biờn, Flash hon tr li mc chn Tween Shape l Distributive T SCH STK - TH GII HA 212 BIấN SON: KSPHM QUANG HUY GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BNG h ỡn h n h CHNG CCH DNG SHAPE HINT (CC HèNH Gl í) iu khin cỏc i tng khng chớc cú thc v nhiu thay i phc tp, bn hóy s dng Shape Hint Ch Shape Hint ny xỏc inh cỏc im tng ng nh u v nh cui Vớ d nh nu bn ang chuyn ng mt bn v khuụn mt nú thay i nột mt, bn c th dựng mt nh g ý ỏnh du vo mi mt Sau , tha vỡ nt mt tr thnh mt nh ln xn vụ nh nh thay i chuyn ng, mi mt cũn thay i, bn c th nhn bit c nhng c lp sut quỏ trỡnh chuyn ng Cỏc hỡnh ging chuyn ng c v khụng c cc hỡnh gi ý liờng bit Shape Hint c cha cỏc ch cỏi t (a n z) xỏc nh cỏc im tng xng ti i tng bt u v tng kt thc Bn c th dựng n 26 Shape Hint Cỏc Shape Hint nm keyframe u tiờn u cú mu vng v mu xanh keyframe cui Cc Shape Hint mu nu n khụng nm trờn ng cong Cỏc Shape Hint c cỏc ký t a, b, c, d, e nm trờn ng cong c mu vng kh Shape Hint ký t f khụng nm ng cong nờn c mu ụ T SCH STK - TH GII HA 213 BIấN SON: KSPHM QUANG HUY GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BANG HNH NH CHNG Cể c kt qa tt nht kh cỏc i tng chuyn ng, bn cú th lm theo nhng cỏch ch dn sau õy: i vi cỏc i tng chuyn ng phc tp, bn hóy to cỏc i tng trung gian v lm chuyn ng chỳng thay vỡ bn ch xỏc nh mt i tng bt u v i tng kt thỳc Bn phi chc chn rng cỏc Shape Hint u hp lý Vớ d, nu bn ang dựng ba i tng Shape Hint cho mt hỡnh tam giỏc, ba tam giỏc ny phi cựng mt loi tam giỏc gc ban u v tam giỏc c thay i Loi trt t ny khụng th l cỏc ch cỏi abc keyframe u v abc toong keyframe th hai c Cỏc Shape Hint cho kt qu tt nht nu bn t chỳng vo theo hng ngc chiu kim ng h u gúc trỏi trờn ca i tng Cỏch dựng cỏc Shape Hint: Chn keyframe u tiờn tin trỡnh to chuyn ng Shape Tweening ôa* a 10 Shape T weening @ 1U M â b fc j K l Chn trờn trỡnh n Modify > Transform > Add Shape Hint nh ch chn Shape Hint u tiờn xut hin vũng trũn mu cú cha ký t nm trờn i tng Flip Hoiizonlal Remove Tiansorm Ctfl+Shill+Z Cenlei Add Shape Hint Remove All Hints n Di chuyn nh gi ý Shape Hint n im bn mun ỏnh du Chn keyframe cui cựng ch chuyn ng nh ch Shape Hint cui cựng xut hin ti ni no ú i tng vi ký t a cú vũng trũn mu xanh lỏ cõy T SCH STK - TH GII HA 214 BIấN SON: KS PHM QUANG HUY GIO TRèNH THIT K WEB ; PHAN L THUYT - T HC MACROMEDIA FLASH 5.0 BNG h ỡn h n h CHNG Di chuyn nh Shape Hint n im i tng sau cựng m tng thớch vi im u tiờn bn ó ỏnh du Din hot on phim li ln na xem ch Shape Hint lm thay i ch chuyn ng Shape Tweening Di chuyn cỏc Shape Hint tinh chnh nh chuyn ng Lp li tin trỡnh ny thờm vo cỏc Shape Hint Nhng Shape Hint mi xut hin ; - +i C mliớll HI li 24- 12.0fps 1.9 \ ^ Trong lm vic vi cc Shape Hint, bn cú th thc hin cc bc sau: xem tt c cỏc Shape Hint, bn hóy chn trờn trỡnh n View > Show Shape Hints Layer v keyframe cú cha cỏc Shape Hint phi hin hnh i vi lnh Show Shape Hints Xoỏ b mt Shape Hint bng cỏch ko n vựng Stage Xoỏ b tt c cỏc Shape Hint, bn hóy chn trờn trỡnh n Modify > Transform > Remove All Hints H ip Hatizortf-al R e m o v e T ransform C tft+ SW ft+ Z E d it C en ter A d d S h a p e Hint D ri+ S h ift+ H R e m o v e All H in ts TO NH CHUYN NG ANIMATION THEO CH FRAME-BY-FRAME nh chuyn ng theo ch frame-by-frame lm thay i ni dung vựng Stage mi frame v thớch hp nht i vi cỏc i tng phc mt nh thay i liờn tc mi frame thay vỡ ch n gin di chuyn Ch chuyn ng theo dng frame-byframe s lm tng kớch thc file nhanh hn ch chuyn ng theo dng Tweened Animation T SCH STK - TH GII HA 215 BIấN SON: KSPHM QUANG HUY GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BNG h ỡn h n h CHNG Tim eline I?-1 animation * * 10 15 20 ' ! ; ; : : : ; ; ; ; : ; ; ; ; ; 25 30 35 40 45 ! 1 1 1 1 *#* t Jk >** ô T â w H 1n l M ới H i m 12 fps O.Os Keyframe to mt keyframe frame 10 Keyframe hay nhp phi chut (trong Windows) hoc nhp Control (trong Macintosh) v chn lnh Insert Keyframe trỡnh n x xung Frame T SCH STK - TH GII HA 216 a t i ' |11i f c i rj| ô r â p â t pl p > BIấN SON: KSPHM QUANG HUY GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BANG HNH NH a 10 CHNG 20 Cleat e Motion Tween Inserớ Flam e R em o ve Flam es Inserớ Kyớrame Insert Blank Keyframfe Chn lnh ny s thờm vo mt keyframe mi m ni dung d liu ca nú ging nh ni dung d liu ca keyframe u tiờn Ln lt thay i ni dung d liu ca frame ny vựng Stage phỏt trin cỏc vựng chuyn ng tip theo sau ú hon thnh tỡnh t chuyn ng theo dng frame-byframe, bn hóy lp li bc v bc cho n bn to c vựng chuyn ng bn mun Sau ú xem trc on phim va to, bn cú th chn trờn trỡnh n Control > Play hoc nhp chut vo nỳt Play trờn Controller Bn cú th chn ch Play Back (xem li) bn to HIU CHNH CHUYN NG ANIMATION Sau bn to mt frame hay mt keyframe, bn cú th di chuyn nú n bt k v trớ no toong Layer hin hnh hoc sang mt Layer khỏc Bn cng cú th xoỏ b hoc thc hin nhng thay i khỏc Bn ch cú th hiu chnh trờn cỏc keyframe Bn cú th xem cỏc frame chuyn ng nhiig khụng th hiu chnh trc tip lờn nú c Bn cú th hiu chnh cỏc frame chuyn ng Tween bng cỏch thay i mt nhng keyframe ó xỏc nh hoc chốn vo mt keyframe mi gia keyframe u v keyframe cui Bn cú th kộo cỏc mc Item ca s Library vo vựng Stage thờm cỏc Item vo keyframe hin hnh T SCH STK - TH GII HA 217 BIấN SON: KS PHM QUANG HUY GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BNG h ỡn h n h CHNG hin th v hiu chnh nhiu frame cựng lc, bn dựng Onion Skinning Chốn nhiu frame vo thc Timeline, bn c th thc hin mt nhng thao tỏc sau: Chốn vo mt frame mi, chn trờn trỡnh n Insert > Frame To mt keyframe mi, chn trờn trỡnh n Insert > Keyframe, hoc nhp phi chut (trong Windows) hoc nhp Control (trong Macintosh) ti frame bn mun t vo mt keyframe v chn lnh Insert Keyframe trờn trỡnh n õ * -'1 r'l 1- '1 IT i-i-r- -l T'l 10 15 !' 11 11- | 2D 2E j ? Layer * : C r e a te M otion T w e e n In sert F ram e a R em o v e F ram es â gp m t ^ In sert B la n k K e jằ fr a m e \| u to mt keyframe trng mi, bn hóy chn trờn trỡnh n Insert > Blank Keyframe hoc nhp phi chut (trong Windows) hoc nhp Control (trong Macintosh) ti frame bn mun chốn vo mt keyframe v chn lnh Insert Blank Keyframe trỡnh n Xoỏ hoc thay i mt frame hay keyframe, bn c th thc hin mt nhng bc sau: Xoỏ mt frame, keyframe hoc mt chui cỏc frame, bn hóy chn mt frame, keyframe hoc chui frame v chn trờn trỡnh n Insert > Remove Frame hoc nhp phi chut (trong Windows) hoc nhp Control (trong Macintosh) ti frame, keyframe hoc chui frame v chn lnh Remove Frame c trỡnh n x xung ny Cỏc frame xung quanh khụng thay i 20 & 25 Create Motion Tween [ j? Layer Insert Frame Remove Flames Insert Keyframe T SCH STK - TH GII HA 218 BIấN SON: KSPHM QUANG HUY GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BNG h ỡ n h n h CHNG Di chuyn mt keyframe hoc mt frame v ni dung d liu ca nú bng cỏch ko keyframe hoc chui frame sang v trớ mong mun Kộo mt frame u tiờn sang phi ti v trớ cui cng I D 10 15 *I-Lock/fcj IUnlockAI Lavers ô>> - ** m â +1 il'bi 5a! [] 1: Thay i vựng hin th ca cỏc du Onion Skin: Nhp chut vo nỳt Modify Onion Markers v chn mt mc Item cú trỡnh n: T SCH STK - TH GII HA 221 BIấN SON: KS PHM QUANG HUY GIO TRèNH THIT K WEB : PHAN Lí THUYT - T HC MACROMEDIA FLASH 5.0 BNG h ỡ n h n h CHNG ||.||li%| |ớ H I s IIl2.QFps|| 0.7s [7T I ^ Always Show Markers - / Anchor Onion Onion Onion Onion All Mc Always Show Markers hin th hoc khụng hin th cỏc du Onion Skin Timeline header Mc Anchor Onon Marks khoỏ cỏc du Onion Skin sang v trớ hin hnh Timeline header Bỡnh thng, vựng Onion Skin tng ng vi tr frame hin hnh v cỏc du Onion Skin Bng cỏch th neo cỏc du Onion Skin, bn c th ngn cn khụng cho chỳng di chuyn vi tr frame hin hnh Mc Onon hin th frame c hai mt frame hin hnh Mc Onon hin th frame c hai mt frame hin hnh Mc Qnon All hin th tt c cỏc frame c hai mt ti frame hin hnh m n n đ B I112.0 fps I 0.3s Always Show Markers Anchoi nion Onion Onion nion All f 5*/ -rớ' :s 'ớ-1' '(p nh vi mc chn Onion U DI CHUYN TON B VNG CHUYN n g a n im a t io n Nu bn cn di chuyn ton b vựng chuyn ng vựng Stage, bn phi di chuyn cỏc nh Graphics tt c cỏc frame v cỏc Layer mt ln trỏnh vic t chc li tt c mi thc i chuyn ton b vng chuyn ng sang mt v trớ khỏc vựng Stage: Md khoỏ tt c cỏc Layer di chuyn mi th ong mt hoc nhiu Layer nhng khụng phi cỏc Layer khỏc, bn c th khoỏ li hoc lm n i cỏc Layer bn khụng mun di chuyn Nhp chut vo nỳt Edit Multiple Frames thc Timeline T SCH STK - TH GII HA 222 BIấN SON: KSPHM QUANG HUY ... ti frame bn mun chốn vo mt keyframe v chn lnh Insert Blank Keyframe trỡnh n Xoỏ hoc thay i mt frame hay keyframe, bn c th thc hin mt nhng bc sau: Xoỏ mt frame, keyframe hoc mt chui cỏc frame,... frame ú Sau ú chn trờn trỡnh n Edit > Copy Frames Chn mt frame hay mt chui frame m bn mun thay th, sau chn trờn trỡnh n Edit > Paste Frames Chuyn i mt keyframe thnh mt frame, bn hó chn keyframe... hóy chn mt frame, keyframe hoc chui frame v chn trờn trỡnh n Insert > Remove Frame hoc nhp phi chut (trong Windows) hoc nhp Control (trong Macintosh) ti frame, keyframe hoc chui frame v chn