Ebook hướng dẫn và thiết kế website bằng macromedia flash phần 1 TS hoàng vân anh

TS.HONG VN ANH HNG DN V THIT K WEBSITE BNG MACROMEDIA FLASH NH XUT GIO DC - 2009 Phõn th nhdl" TtllT K C BN M u $ TNG CPURN vộ FWSH VA NG DNG TRONG THlr K MULTIMDlfl CHO ujeesire Trong chong ny chỳng ta s tỡm hiu v: T SQO ph s dng Flash? t cõu hi ny vỡ nu khụng hiu rừ tớnh nng v ng dng ca mt chng trỡnh, bn s rt khú cú th khai thỏc v s dng nú ỳng mc ớch to cỏc sn phm ng ý Vy Flash cú nhng u im gỡ? Cỏc li th v ho Vector ( nột v cht lng hỡnh nh) Cỏc kh nng thit k ho Animation thit k Web Cỏc tin ớch cựa vic to dũng (Seaming - l k thut truyn ti d liu y v liờn tc Cỏc trỡnh duyt Web s hin th d liu hỡnh nh trc ton b tin Flash c ti v), u th v li ớch ca k thut ny s c trỡnh by y cỏc bi thit k Kh nng lp trỡnh v tng tỏc tTong cỏc trang Web Multimedia l gỡ? Multimedia hay cũn gi l a phng tin: l mụi trng s dng nhiu loi phong tin truyn t mt thụng ip, mt ý tng thụng qua õm thanh, hỡnh nh, s tng tỏc Vy vai ũ v ý ngha ca Multimedia trờn mụi trng Internet v s liờn quan ca nú vi phn mm thit k Flash nh th no? Chỳng ta c th hỡnh dung qua tới di õy: Cỏc file cú õm võ hỡnh nh c thit k v xut t Flash Cỏc trỡnh duyt Web hin th ni dung v hỡnh nh cỏc file Flash Multimedia Cỏc ỳng dng CQ Flash thit kộ a phuong tin Thit k logo (Hỡnh nh minh ho) Thit k banner Thit k nh nn Thit k Animation v Sound Thit k tong tỏc Chng I HNG dAn S dng cụng c tro ng f WSH Trong chng ny chỳng ta s tim hiu v: Ci t v ng chng trỡnh Cỏch s dng cỏc menu lnh Cỏch s dng bng cụng c Tool Box Cỏch s dng cỏc bng tham s thuc tớnh i tng v cỏc ca s Panel 1.1 Vụu cu cu hỡnh h thng c t v ỡ chuong trỡnh Cu hỡnh phn cỳng cng cao cng tt vi dii bn thit k mt file vi dung lng ln nú s lm bn gim bt thi gian ch i test v load file H iu hnh Windows (tt nht l Windows XP) Ngoi bn ci t thờm chng trỡnh b tr cho vic play v xut file cú uụi MOV nh chng trỡnh Quicktime Khi ng v chy choTig trỡnh Mun chy c choTig trỡnh Flash thỡ trc tiờn bn phi ci t chng trỡnh sn trờn mỏy tớnh Sau c ci t, biu tng ca chng trỡnh ing nm trờn mn hỡnh Desktop v xut hin frong tỡianh menu Start nờn bn ch cn click chut ng chng trinh (hỡnh 1.1.) Hỡnh 1.1 1.2 Lm quen VI glQO din vũ vựng lm vc (Uork fỡrea) iuong trỡnh UJ M file c sn Hỡnh 1.2 Sau khi ng, giao din ca chng trỡnh Flash s xut hin nh hỡnh minh ho 1.2 vi ca s Start up lit kờ cỏc chc nng s dng ban u nh to mi mt file Flash hay m mt file Flash ó c thit k trờn mỏy tớnh hay to mt file Flash da trờn mu cú sn ca th vin chng trỡnh Khi ln u im quen vi chng trỡnh, ta nờn th to mi mt file da theo gi ý ca th vin Template bi vỡ nú s giỳp ngi thit k d hỡnh dung mt file Flash mu c thit k v b trớ th no Sau ú, ta cú th nhn t hp phỳn Ctrl + Enter Preview (xem kt qu ni dung file) thc hin c thao tỏc trờn, lm theo cỏc bc sau: Bc : Clỡek chut vo mt cỏc mc ca bng Create from Template Vớ d: Photo SlideShows (hỡnh 1.3) Hỡnh 1.3 Bc 2: Xut hin ca s mi New from Template (hỡnh 1.3) Trong ca s ny, ti mc Templates s lit kờ tt c cỏc mu tỡiit k sn cú mc c ehn Trong bng ny th vin chng trỡnh ch cú mt mu nht tờn l Modem Photo SlideShow v mc Preview cho phộp bn xem trc hỡnh nh v kớch c ca mu ang chn Nu ng ý vi mu la chn ny bn click vo nỳt OK hoc nhn phớm Enter kt thỳc lnh Bc 3: Ca s thit k ca File m nh hỡnh minh ho vi mt mn hỡnh thit k v vụ s cỏc bng thuc tớnh (hỡnh 1.4) HNG o n VTHIrK A Hỡnh 1.4 Nu l ngi mi bt u hc Flash thỡ tng vựng cụng c, thuc tớnh v thit k i vi bn l hon ton mi m Nhng ta cú th nhn nỳt Play chy file Flash xem th hiu ng cng nh chc nng ca nú l gỡ c nhng cỏch thc hin nh sau: n t hp phớm Ctrl + Enter hoc Vo menu Control chn lnh Test Movie (hỡnh 1.5) l, imands Window Help Play Rewind Go To End Step Forward One Frame Step Backward One Frame t e s t H o v ie Debug Movie Test Scene Enter Ctrl+Alt+R , Qrl+Enter Ctrl+Shift+Enter ctrl+Alt 4-Enter Delete ASO Files Delete ASO Files and Test Movie Loop Playback Play Ail Scenes Enable Simple Frame Actions Enable Simple Buttons V Enable Live Preview Mute'Sounds Ctrl+Alt+F Ctr!-f Alt+B Ctrl+Alt+M Hinh 1.5 Ket qu mn hỡnh s hin lờn ca s Preview file Flash Template ang c m (hỡnh 1.6) I ằ? ]- Ca s Preview Hỡnh 1.6 10 HNG DN VTHItK Lun ý ta cú th to nhiu ca s Preview cho nhiu file ang m cựng mt lỳc (hỡnh 1.7) TT kCôfat r).i|ằ ô rr'U M ô h n l-l ô Iằ J ; ti) ô ôớ ^ a o > My Company 2003 A iỡiỡu a I Report - l*Xiinuning the pasi yvar O safcis al myCompan^^ iinc^ II túium P*op*rớ)ôj liou f> ttvM iurt Hỡnh 1.7 Giao din ca chng trỡnh click vo chc nng Create New -> Flash Document s hin lờn nh sau (hỡnh 1.8): Thanh menu f :7 H t> Mtằ imô! Hoôv Tut C Thanh thc iu khin Timeline ằ ô Sẫ ằ ô < ô ô ô ô ô ằ ( ô * $ ! ? , Hp cụng c v Toolbox Thanh thc k Ruler Cỏc bng iu khin th vin, i tng, cỏc hiu ng v thuc tớnh Khung thit k chớnh Vựng lm vic li (Grid) tiO Bng thuc tớnh Gỏc i tng Hỡnh 1.8 thit k 11 1.3 Cỏch s dng cỏc menu lnh Vic s dng cỏc menu lnh frong Flash hon ton khụng phc nu chỳ ý tỡiỡ s nhn thy nú c hp v qun lý theo tỡmg chc nng riờng bit: Menu File (hỡnh 1.9): chuyờn v qun lý to, m, úng, xut cỏc file ti liu ca Flash â - f y h t i ^ d -1 M acro n rW id ia # lasiS B a F ile E d it V ie w In se rt M o d ify T ext C om m ands C tr lH - O O pen O pen R ecent ne C lo s e C trl+ W C l o s e AH C trl+ A lt+ W Save C trl+ S s i S ave an d C om pact S a v e A s C trl+ S h ift-I-S S a v e a s T e m p l a t e S a v e AW fisr Im p o rt E x p o rt P u b lis h S e t t i n g s C trl+ S N ft-h F P u b lis h P r e v ie w P u b lis h S N ft+ F i2 P a g e S e tc ^ ^ P r in t C trl+ P S e n d E x it O p W C trl+ Q I p l Hỡnh 1.9 New: To mt file Flash múi Open: M mt file Flash tớii liu gc hoc tt c cỏc file m chng trinh ny h tr Open Recent: M cỏc file Flash c thit k gn õy nht Open As Library: Dựng mt tin cú lm th vin mu cho file ang thit k 12 Close: úng ca s file Flash ang thit k Nờu xut hin dũng thụng bỏo frờn (hỡnh 2.20) bn hóy chn nỳt No ch chốn mt nh nht va chn th mc tó Urtftlôr-3 >Om toRi in ibrôry Thay i v chnh sa li v ca Logo va chốn vo ng thi lp li thao tỏc nh tỡ-ờn chốn nt Banner ca trung tõm ting Anh s c nh hỡnh 2.21 'm 'id t" Vtevằ rôwrt 'MKi^''Vô*''cụrtmóằ''coôrol'' He^ y B IW Sou ằ: Hỡnh 2.21 Sau chốn xong, bn c th thờm, bút, xộn hoc thu nh kớch thc nh Nu cm thy cn thit v xut sn phm u tiờn ra, file xut bn cú th la chn cỏc nh dng nh khỏc Vo menu File - Export Xut hin ca s Export Image, click vo ụ Save As Type v chn nh dng nh mong mun Trờn ụ File name gừ tờn nh cn to v trờn ụ Save in to ng dn th mc lu file nh ny (hỡnh 2.22) 48 1wkAi.4 ^ Export ym t S-avein; s*ave ii , anh minh hod sach ; &s Type: Sow V ô08? ?iv /V R: 204 My Recisnt 5; 51 Documetrts 0: Ap^a: V Ml V v 1(K}% V #CC3300 De$ktOip J http;//www.hut.edu.vn V ^ W f i B / ^ ^ s il _ Anti*aiias for readability Vj Auto kern Target: J)terik Vj Hỡnh 2.25 50 HUNGDN VTHIấT K B Trờn ụ Target bờn phi, chn ch hin th cho cỏc Website c link vo l blank Thuc tớnh ny cho phộp khung cha trang Web c Link s hin th sang ca s mi Bõy gi ta nhn nỳt Ctrl + Enter kim a kt qu cụng vic va lm (hỡnh 2.26) ^UnlitUớd-4 M eằ m *C o i< ô o lc ô ô b u c '" ễi y '] c FOCUS Centre LET SHARE TO BE SHARED kiJNC! rM VliOI Mil; ô x ô;s V Iô*- nililK HA SI I >fl Nt ớil K I l|.^ SCI - Sho**.- A fin d ; A A Hỡnh 2.26 Sau xut hin ca s Test Preview, bn ý thy uụi file test l swf Click chut vo nỳt link i hc Bỏch Khoa H Ni s c kt qu nh trờn hỡnh 2.27 o *3 ớ: tooh I- yP A y^ tt rô t tô ô te ằr< raô ằ >toct* m itằ K Ê ; , Wth n W rt rôôôH *0u^ ôl9>kWskT>Môarm Q J 3 '!t>; Vôô l,- :n >.1 :I i '.I.ISI T < < Iô H.l -i W > t-,'-n K !.'-è ' * -./.Tằ > '.< > * >Jkt fttrằ ằ ttớèM W Jsluớ.l I1S.S Sô ; VIô.*.? vv iUr.h UaU OjHiisJili KHtU ô ằI ^ I- Mil f ;> IVMiM.ời-"iLl'.-W Hnh 2.27 51 Bc 4: ToTig t vi cỏc nỳt link cũn li, bn thc hin vic gừ cỏc a ch ụ liờn kt v khung ca s hin th tỡm a ch chớnh xỏc ca cỏc Website c liờn kt n, ta cú th s dng Google tỡm kim sau ú nờn click vo link kim tra th xem link ú cú ang hot ng tt khụng 52 Phõn th tilT K NNG ự\0 Chng TNG URN vộ fiaiONSCfilPT VA NG DNG TRONG THir K (ueBsrre Trong phn ny chỳng ta s thc hin cỏc cụng vic sau; Gii thiu v Actionscript v tớnh nng Cỏch vit v s dng Actionscript Flash Gii thiu mt s Website ng dng Actionscript 3.1 GII thiu vộ fiction Script Nu ó s dng Flash, bn cú bit v Actionscript ?, v nu ó tip xỳc vi Actionscript, bn s cú rt nhiu cn quan tõm v t nhiu cõu hi: N nm v trớ no chcmg trỡnh? Chc nng ca nú l gỡ? Mi liờn h ca Actionscript vi chng trỡnh nh th no? Nú s giỳp ớch nh th no ta thit k cỏc sn phm da trờn phn mm Flash? V s phi bt u hc th no v t õu? Nhng cõu hi ờn s ln lt c gii ỏp cỏc phn di õy: 53 Actionscript (vit tt l AS) l: Ngụn ng lp programming - OOP) trỡnh hng i tng (object-oriented Ngụn ng c s dng ớnh kốm cỏc sn phm thit k bng FLASH v nú c tỏc ng cho phộp ngi s dng c th tng tỏc vi cỏc sn phm ng dng N cú th cho phộp thit k v to nhng chng trỡnh ng dng vi cỏc i tng c th chuyn ng c t on gin ti phc Sn phm ca n cú i chy c lp bng cỏc Player riờng hoc ehy trờn cỏc ỡnh duyt tng thớch nh : Internet Explorer, Firefox, Mozzila Hin phiờn bn ca AS ó lờn ti chun Cỏc phiờn bn mi cú nhiu tớnh nng hon cỏc phiờn bn c vỡ nú h tr nhiu b lnh giỳp ngi thit k c th xõy dng nhiu tmh nng hri Nu l ngi yờu thớch ngụn ng lp trỡnh ny bn c th iam kho v c thờm cỏc ti iiu bng ting Anh nh: A Beginner's Look At ActionScript, tỏc gi Joey Lott, Jen deHaan, Peter eHaan, Actionscript 3.0, ActionScript Game Programming AS nm õu chotig trỡnh? AS bao gm rt nhiu b lnh c phõn chia theo ng dng v tớnh nng vit c ngn ng lp trỡnh ny, ngi thit k s s dng mt ca S cú tờn l Action kớch hot ca s ny bn s dng menu Window - Action (hỡnh 3.1) Chc nng ca AS l gỡ? Cho phộp to cỏc ng dng cú th tomg tỏc c t on gin n phc tp, Liờn kt c cỏc tgmg ong mt file hoe cú th nhiu file Dựng thit k Website, Game, E - leammg (giỏo trỡnh in t) Mi liờn h ca AS vi chng trỡnh nh th no? vit AS v kt ni nú vi chcmg trỡnh, thềTng cú cỏc cỏch sau õy: Kt ni AS vi mt Symbol no ú to iu khin ca chớnh symbol ú lờn i tng khc 54 Hinh 3.1 f=te Edt Môw W t MixVv Tert Cvm anỏớ O n ti Vtỡndoằ Mdp Hỡnh 3.2 Quan sỏt trờn hỡnh 3.2, s thy ca s S c mt lnh tờn l ỡlayO- Nú dựng iu khin hỳt bm PLAY trờn khung mn hỡnh chớnh 55 Tỏc dng cựa nỳt bm ny l iu khin s chuyn ng cựa qu búng i theo ng dn (hỡnh 3.3) Tng t nh vy vi nỳt STOP nú s c kt ni vi mt lnh stopO khỏc v nú s iu khin vic dng chuyn ng cựa qu búng ụ ^ ' fi ôh ia^ iớ - [Uniiid-H"'''' > i*^.) Ă5ằô^= A i ; è Syrobot Lneiof i.Coie S yw tằl2 i t Syrrboit Hỡnh 3.3 AS dựng iu khin chuyn ng ca thc thi gian Timeline: Khi mt Piayer (chng trỡnh c v dch cỏc file xut t chng ỡnh FLASH hoc cỏc trỡnh duyt) chy mt file ng dng xut t Flash nú s chy ngu nhiờn theo ỳng th t v thi gian thit k Vớ d nh hai hỡnh minh ho 3.2 v 3.3, Player s chy n qu búng ú i ht khung dõy Nhng nu mun dng chuyn ng ny t ng ti v trớ khung hỡnh th thỡ bn s thờm mt lnh script iu khin vic dng hỡnh ti v ú Vớ d hỡnh minh ho 3.4, ti v trớ khung hỡnh (frame) s s cú biu tng mt ch a (vit tỏt ca t action) ỏnh du vic khung hỡnh ny ang b iu khin vic dng hỡnh 56 MAAôpc e- cenằ ^Shựôm*flô %, V3% |>urhAằifỡ0 O>tM\ii THE fC W (^ FORDTOCuS M P m m tm s - v - id L::^C-3, rV/*,ằ-ằ : -'.J m ' :rr*'u m - < * *ô ằ5.# Iằ(l*Aôl*ằf>ằ-1j Kôớ-ôằl'wô\; SClgQ 'oô ô[...]... A ctio n S c r^ 2.0 Ck%SM% Compfer Oo'tictivts ằ085 f?ằ C o raU nl M - \ - Script Ass*st 1 Deprec^lcd Options Q 6 ^ (11 T yp^i * Cofrorằrrfs @ I r v ô Current Selection - !*j ^ Layer t ; Frame 1 Scene 1 i' Properties [y V L*yô r 1 : J js ii ^to acfciwi selected 51 Pariwti^efs Hỡnh 1. 19 Hỡnh 1. 20 1 -ir-xrorvi. H ^ ARgn & info 8e Transrorm !=v ttSl Align V Align; != S tM 0 iJa fla Distribute;... File Edit I I Tools j> I0 ^ / P i A View Insert Modify t^xt Commands "' Pont ' Untitled-2* 1 ^ * Control Style Tiroeiine èp sS èè! Letter Spacing h 9 1n0 15 , 12 14 C? Layer 1 o V'ớ^indow ' 8 18 Check spiing 24 Spelling Setup 36 48 (fy # ' 72 ử -fi-o 96 12 0 View Q, Hỡnh 1. 14 7 Menu Command (hinh 1. 15): Ket ni cỏc file JavaScript (c phn m rng jsfl) v chy chng trỡnh Ngoi ra nú cũn cho phộp... lx u Jia ,x a J? a View o Q, B Colors ! Hỡnh 1. 12 5 Menu Modify (hỡnh 1. 13); cho phộp chnh sa thay i cỏc thuc tớnh v hiu ng ca cỏc i tng M aciomedia Flash Basic 0 [Untitted'2*] Fie Edt 1 Tools View Insert |1| TllllillWlp^ Ii Timeline IP \ o y' ộ 1 20 Bitmap Symbol Shape Combine Objects tji? Êj i 2S i 7 ằ 1 Timeline Timeline Effects ằ '7 V r i i1 Convert to Symbol F8 Break Apart Ctrl+B !B... No Commands Found / p A G ? Layer 1 o õ ớ D: % ớ-} 1 12.0 f)S Hỡnh 1. 15 Javascript Manage Saved Commands: Qun lý cỏc lnh ó c gi t file 19 Get More Commands: M nhp mt JavaScript vo file Flash ang m Run Command: Chy lnh t file Javascript c gi vo 8 Menu Control (hỡnh 1. 16): iu khin cỏc thao tc liờn quan n vic chy v iu khin cc Player chy preview cỏc file flash File E dt View Insert Modify Timeiine... Break Apart Ctrl+B !B % / p ự A Document Untitled-2-' Transform Arrange Align ; I 12 .0 fips O.Os > View Group 0 Q 1 Cobrs 1 /H i1 ộ m 1 10 !ằ r' /- Ctrl+G Hỡnh 1. 13 Document: Chnh sa, thit lp tiờu , kớch thc, mu nn, tc chuyn ng cựa cỏc frame v n v hin ih cho thanh thc Timeline 3 HễNGDN VATHIẩTK , A 17 Convert to Symbol: Chuyn i thuc tớnh mt i tng thnh cỏc i tng Symbol khỏc Break Apart;... size; J= ii>i> ^ 4 n Space: 1 m 01 i s = g d t f! Library Urititled-I 4 HNG DN V THIT K A To stage: Hỡnh 1. 21 25 _ ^ / / Panel Color Mixer (hỡnh .22): Thiờt lp cỏc chờ mu v mu trn ^ C o lo r SSv Color Mixer f B l l l S S H I f i i l ^ Ufi S I Type: Solid r i yv rv đ Z) SPiFill color 1 R: 204 G: 51 B: D Alphas iV ;>/ 10 0% v - #CC3300 I S Hỡnh 1. 22 Panel library (hỡnh 1. 23): Cho phộp qun iý cỏc... hin mt s hnh ng c gỏn cho nỳt Mute Sound: Tt ton b õm thanh 9 Menu Windows (hỡnh 1. 17): kim tra cỏc ch hin hay n cỏc bng thuc tớnh Cỏc bng ny cho phộp s dng nhiu tham s hn iu khin hay thay i thuc tớnh ca cỏc i tng Q Macromedia Flash Batic 8 - Pile et View In s e rt M odtfy Text Commaods Control Toos m' ^ p ựA O Tim etne layer1 Scene1 ^ mu 1 5 * o * Q Coiors ym n H dp Duplicate Window @ ôB:.r... Ct.t+I â Caseô!â rfe aigjuwmag'Sô;'ô >Adtt0ftK ằ 'prap*ôớw pirw it^ ItJiJ Hỡnh 1. 18 Panel Action (hỡnh 1. 19): Cho phộp vit v gn cỏc on mó Script vo cỏc i tng trong bn thit k Panel Movie Explorer (hỡnh 1. 20): Qun lý n hin cỏc i tng dng Text, Symbol, Action Script, Frame v Layer Panel Align & Info & Transform (hỡnh 1. 21) : Qun lý canh l v dch chuyn v trớ ca cỏc i tng 24 V Actions -< F r a m e ... l ,- :n > .1 :I i '.I.ISI T < < Iô H.l -i W > t-,'-n K !. '- ' * -. /.Tằ > '.< > * >Jkt fttrằ ằ ttớèM W Jsluớ.l I1S.S Sô ; VIô.*.? vv iUr.h UaU OjHiisJili KHtU ô ằI ^ I- Mil f ;> IVMiM.ời-"iLl'.-W... thit k Macromedia Flash Bask - [Untitled -1 File Edit View Insert Modify Text New Symbol, T ools Commands Control Ctrl+f=8 Timeline im eine Effects 13 ^ / p Scene ur J rr A o ^ iS> tP-i'i-O Jlx... i1 Convert to Symbol F8 Break Apart Ctrl+B !B % / p ự A Document Untitled- 2-' Transform Arrange Align ; I 12 .0 fips O.Os > View Group Q Cobrs /H i1 ộ m 10 !ằ r' /- Ctrl+G Hỡnh 1. 13