Huong Dan Su Dung Adobe Flash Professional CS4

I HC BCH KHOA H NI KHOA CNG NGH THNG TIN B MN CNG NGH PHN MM
FLASH CS4
HNG DN CN BN
CLB FLASH KHOA CNTT
09
FlashCS4 Professional Mc lc:
Chng 1: Gii thiu v ci t Flash CS4
Chng 2: Thit k hoch hnh vi Flash
Chng 3: Gii thiu v Action Script 3.0
Chng 4: Action Script nng cao
Chng 5: Gii thiu v Flex
FlashCS4 Professional
Li ta:
Cun sch ny l sn phm ca qu trnh lm thc tp ca clb Flash K51 di s hng dn ca thy L Tn Hng ging vin b mn CNPM, khoa CNTT trng HBKHN. Cun sch hng ti nhng i tng mi tip xc vi Flash v c cht t kinh nghim trong lp trnh (C hoc Pascal). Mc d vy chng ti hi vng nhng c gi tng c kinh nghim vi cc phin bn trc CS4 v c bit nhng ai s dng Action Script 2.0 s tm thy nhiu iu b ch cun sch ny.Cun sch tip cn Flash t gc ca ngi thit k cng nh lp trnh vin. Tuy nhin, hng tip cn t gc lp trnh vin c nhn mnh hn. Trong cun sch ny, Flash c nhc n khng ch nh mt cng c thit k m cn vi t cch l mt b th vin.
Chng 1: Gii thiu bn cch ci t Flash CS4 Chng 2: Gii thiu cch thit k hot hnh trong Flash v nhn mnh cc c im mi ca phin bn CS4 so vi cc phin bn trc . Chng 3: Tip cn vi Action Script 3.0 ginh cho nhng ai c kinh nghim lp trnh cht t, nu bn cha c kinh nghim lp trnh nn tm c mt cun sch v lp trnh trc khi c chng ny. Chng ti ginh a s thi gian cp n c im ca Action Script 3.0 so vi cc ngn ng ph bin nh C# hay Java. Chng 4: Chng sch ny c coi l cu ni gia lp trnh vin v ngi thit k. Cc vn pht sinh khi kt hp gia vit code v s dng cc tool c sn ca Flash s c cp. Chng 5: S pht trin ca Flash dn ti nhu cu phi pht trin n thnh mt cng c mnh m ginh cho vic vit ng dng trn my bn cng nh vit cc ng dng Internet (RIA Rich Internet Application). p ng nhu cu ny, Flex ra i da trn nn tng Flash. Chng sch ny cp ti cc vn cn bn v Flex m bn s gp phi khi pht trin trn mi trng ny.
Nu bn cha c kinh nghim vi Flash, chng ti khuyn bn nn c ln lt cc chng, c bit chng 5 c th c li sau khi c qua cc ti liu khc chng ti gii thiu phn tham kho. Nu bn l mt Flasher, bn cng s tm thy nhiu iu b ch chng 2, 4, 5. a s cc mc trong sch u gn vi mt bi thc hnh c cung cp file .fla (file chun ca Flash Proffesional CS4), v project (theo nh dng ca Flex Builder 3) i km. Bn c th tham kho hoc s dng t do cc ti liu ny. V hn ch v thi lng cng nh nhiu yu t khc, nn trong phin bn sch ny cn rt nhiu sai st. Hi vng s nhn c s gp ca cc bn. 2
FlashCS4 Professional Xin chn thnh cm n thy L Tn Hng gip chng em hon thnh quyn sch ny. H Ni, ngy 29 thng 5 nm 2009 Nhm tc gi Nguyn Hong Bch Nguyn Thch Dng Bi Trung Hiu Nguyn Thnh Linh L Anh Tng
Chng 1 : Gii thiu Flash v Hng dn ci t
1. Gii thiu Flash:

Bt u ngay t khi ra i, Flash, a con cng ca Marcromedia, thi 1 lung sinh kh mi vo cc trang web. N cho php cng ng nhng ngi thch sng to khai ph ra Web vi tt c nhng g c th : phim hot hnh, nn game, ng dng c kt ni, gallery ngh thut , video chat, chng trnh chi nhc MP3 hay bt c th g nhiu hn na m bn c th ngh ra. Vi tng , Macromedia s dng khu hiu "What the Web can be" tip th cho a con ca mnh. L 1 cng c s dng k thut vector, Flash cho ra nhng hnh nh tn t bng thng hn cc media to nh ng khc rt nhiu. iu m t ngi nhn ra l Flash khng ch t hiu qu v mt bng thng m n cn lm c nhiu hn th. Khi phn mm tip tc c pht trin th phm vi s dng ca n cng ngy cng m rng, v by gi l 1 trong s nhng media s tng tc linh hot nht khng ch hot ng c trn Internet, m cn trn bng iu khin game ln cc thit b di ng. N thc s l multimedia. Nhng chng trnh tin phong l cc b phim hot hnh ngn (cartoon shorts) nh FishBar ca hng Honkworm, pht trn MTV nm 1998. Hng ny sau sn xut 1 lot cc phim gm c FishBar, Violence of the Lambs. Lot phim ny chnh thc c chn tham d festival phim trc tuyn Sundance v sau c hng Mondo Media pht hnh trn mng. Ngay t phin bn th 3, Flash c dng to cc tr chi nh Whack-a-Mole, Leo's Great Day (<http://www.pepworks.com/leoenglish.swf> ), v c nhng nguyn mu th s ca tr Pacman v c vua. Bn hy nh li rng phin bn , cha c ActionScript nn ngi ta xy dng chng m hon ton khng dng 1 dng lnh no. K t khi ra mt nm 1997, Macromedia Flash nhanh chng tr thnh chun cho cc tng tc v nh ng cht lng cao trn Web. N cung cp m thanh, tng tc, ho, nh ng trn nhiu loi nn v trnh duyt. N cho php nh pht trin to ra nhng giao din thn thin c tnh tng tc v nhng ng dng Web khc bit. ActionScript l ngn ng lp trnh sau hu trng cung cp cho ngi dng nhiu kim sot v chc nng trong lp trnh Flash hn. Ni tm li, Flash cung cp mi th bn cn to v phn phi cc ng dng mnh c ni dung web phong ph. Bn c th to t 1 hnh nh ng n gin cho n 1 ng dng web c tng tc phc tp, c iu khin theo d liu nh 1 siu th trc tuyn ... Bn c th lm phong ph thm ng dng Flash ca mnh bng cch b sung hnh nh, m thanh, video t bn ngoi. Flash cng c nhng thnh 4
FlashCS4 Professional phn giao din xy dng sn bn ch vic dng, hay nhng behaviors tch hp sn s t ng b sung m lnh ActionScript vo chng trnh ca bn. Cu chuyn v s ra i ca Flash m t ngi bit n cho chng ta cu tr li bng cch no m cuc cch mng thc s trong lnh vc multimedia ny xy ra. Tr li cui nhng nm 80, cu chuyn ca chng ta bt u vi 4 cng ty. u tin l Macromind, mt cng ty phn mm t ti Chicago c sn phn chnh l ng dng mang tn VideoWorks. Tip n l Paracomp, tr s ti San Francisco, ni ting nht vi phn mm Swivel3D, mt ng dng 3D cho my Macintosh. Cng ty th 3 l Authorware, Minnesota vi phn mm Authorware, ng dng iu khin CBT/multimedia. Vo nm 1991, Macromind chuyn n San Francisco v st nhp vi cng ty Paracomp thnh Macromind-Paracomp. Authorware sau cng ri khi Minnesota v st nhp vi Macromind-Paracomp Redwood Shores, California thnh lp nn hng Macromedia hng mnh. Cu chuyn ca chng ta bt u t y. Bn c th nhn ra l ta mi nhc n 3 thnh vin trong b t lm nn cu chuyn. Vy thnh vin th t u? Ta hy cng quay tr li thng Ging nm 1993, Jonathan Gay, ngi vit nhng phn mm tr chi kh sm sa v ng chn trng cho Mac nh Dark Castle v Beyond Dark Castle, thuyt phc bn mnh l Charlie Jackson (ngi sng lp ra Silicon Beach Software) b cht vn u t v gip ng thnh lp cng ty FutureWave. Cng ty ny c sn phm u tay l ng dng Go v mc ch chnh ca cng ty l sn xut nhng phn mm c kh nng chim lnh th trng my tnh bt (pen computer market). Nhng tht khng may l nhng chic my tnh ny khng c tip nhn, li thm nhng can thip ca hng AT&T nn Go tr thnh 1 ng dng khng c th trng. FutureWave gp kh khn nghim trng v n ch l 1 cng ty nh khng c ngun thu nhp v phi s dng c nm tri pht trin 1 phn mm m c kh nng s khng bao gi thy c nh sng ca 1 ngy mi. S cu nguy cho n ch cn trng ch vo 1 phn mm nh mang tn SmartSketch m h pht trin nh mt gii php ph bn cnh Go. FutureWave bt u tip th SmartSketch, 1 cng c v, dng c trn c 2 nn Macintosh v Windows. l thi im khng lu trc khi ngi ta t ra cu hi ti sao FutureWave khng bin SmartSketch thnh 1 chng trnh to animation 2D. C l, mt trong s nhng v d c khi nht ca kh nng tin on cng ngh (technological foresight) l khi FutureWave chuyn SmartSketch t 1 chng trnh to nh tnh thnh chng trnh to animation. S chuyn i ny ch da trn hy vng rng Internet s l 1 phng tin ln truyn ti 2D animation. Sau khi c Adobe v Fractal Design t chi mua cng ngh ny, FutureWave pht hnh phn mm FutureSplash Animator vo ma h nm 1996. y l 1 ng dng tng i n gin cho php to nh ng trn c s vector tuyn tnh. Phn mm ny sau thu c 1 s s ch khi n c dng thit k phin bn web MSN ca Microsoft v tp ch Disney Daily Blast. Thng 11 nm 1996, Macromedia ngh FutureWave cng hp tc lm n. Vi FutureWave, mt cng ty nh ch vi 6 nhn vin th y qu l 1 c hi bt ng. Do , vo thng 12 nm y, 5
FlashCS4 Professional FutureWave bn cng ngh cho Macromedia. Hng ny sau pht hnh phin bn u tin ca Flash vo u nm 1997. Sau khi c vc dy bi Macromedia, Flash bt u pht trin nh 1 cng c phn mm. Mi phin bn mi ca n li cung cp nhng bc tin ng k v kh nng s dng ca phn mm: Flash 1: thc s ch l mt nhn hiu khc ca FutureSplash. N c nhng tnh nng c bn ca mt chng trnh to nh ng vector (vector animation): l cc cng c hiu nh c bn (theo chun ca Flash MX) v bng thi gian chuyn ng (timeline). u vit ln nht ca n l cng vi s tr gip ca 1 Netscape plug-in hay 1 iu khin ActiveX Internet Explorer, ngi dng c th a animation ln Web cho tt c nhng ngi khc c th xem v thng thc. Flash 2: l 1 bc tin ln ca ng dng ny. Ni chung th n bt u cho s chuyn i ca Flash t 1 chng trnh to nh ng vector tuyn tnh n thun thnh 1 chng trnh thit k media c tnh tng tc. S chuyn i ny xut pht t vic tch hp cc c tnh nh biu tng nt ti s dng c, ho nhng, font ch vector, nhng action rt c bn, v m thanh stereo. Flash 2 cng cho php nhp cc file c nh dng EPS, GIF, JPEG, AutoCAD DXF, BMP, Enhanced Metafile, AIFF, Windows Metafile, v Shockwave. Flash 3: Bn cnh s ci tin v giao din th mt trong s nhng b sung ng k nht trong Flash 3 l tm quan trng v kh nng tch hp ca cc actions tng ln. c xy dng lng lo trn ngn ng Javacript, actions (m sau ny c pht trin thnh ActionScript) cho php ngi dng kim sot v tng tc vi movies ca h 1 mc nht nh. Hn na, s tng tc ca mask, shape tweening, v s trong sut cho php ngi dng tn dng c s kim sot hn i vi vic tc phm ca h thc s trng nh th no. Phin bn ny cha c c 1 ngn ng kch bn chnh thng. Flash 4: c pht hnh nm 1999. Mt trong s nhng ci tin th v nht ca phin bn ny l kh nng thc thi file nn MP3 trong mi trng Flash movie. Phin bn rt s khai ca ActionScript ln u tin xut hin trong Flash. N lm cho vic thit k giao din, thit k game tng tc d dng hn. Nhng ci tin khc bao gm cc trng vn bn chnh sa c, giao din thn thin, v qu trnh publish c n gin ho. Flash 5: S nng cp ln nht trong Flash 5 chnh l ActionScript. ActionScript c xy dng theo chun ECMA-262. H thng ActionScript ca Flash tip tc c b sung vi Javascript, nh dng HTML. Macromedia thng bo vi th gii rng Flash v ActionScript sn sng cnh tranh vi bt k i th no. Nhng thay i khc trong phin bn ny l phn giao din: thm cc cng c sng tc, li gii thiu panels, Movie Explorer, Macromedia Dashboard ( h tr v cp nht qua mng), cc phm tt do ngi dng t t cho cc tc v v hm. Flash MX: l mt bc tin ln ca Flash. H thng ActionScript c b sung UI 6
FlashCS4 Professional Component, xml. y thc ra ch l phin bn th su ca ng dng nhng Macromedia khng nh s phin bn nh trc na m thay vo l ci tn MX. Ti sao phi dng 1 ci tn mi? Theo Macromedia th h s dng ci tn nhm bo cho nh pht trin rng ng dng ny gm c cc gii php c tch hp phc v cho cc media s trn Internet. V cc cng c ca Macromedia (nh Flash, Dreamweaver, ColdFusion, ) c th tch hp cht ch vi nhau, nn cng ty cm thy mi vic ch hp l khi cc ng dng ca h mang cng 1 ci tn. MX n gin l nhn hiu s dng cho h thng cc cng c ca Macromedia. V mt c im m ni th Flash MX c nhng nng cp rt gi tr. ng ch nht l giao din mi, s dng tt, v c phn nh hn. Trong phn mm cn c cc thnh phn to sn, l nhng b phn, thit b nh c th dng ngay, m nu trong iu kin bnh thng ta s mt rt nhiu thi gian to t u. Thm na, s tch hp nhiu cng c thit k trc quan mi nh free transform tool, envelope modifier, b h tr x l vn bn nng cao, v b trn mu nng cao, cho php ngi dng kim sot cht ch hn cc tc phm ca mnh. Flash MX 2004: Ti phin bn ny, ActionScript 2.0 chnh thc ra mt. y l 1 cng c hon ho cho ngi thit k web, chuyn gia trong lnh vc media tng tc, hay chuyn gia pht trin ni dung multimedia. Trng tm ca phin bn c t vo vic to, nhp liu v thao tc nhiu loi media (nh audio, video, bitmaps, vectors, text, v d liu). Flash MX Professional 2004: c dnh cho cc nh thit k web v xy dng phn mm cp cao. Phin bn ny gm tt c cc c tnh ca Flash MX 2004, cng vi mt s cng c mnh mi. N cung cp nhng cng c qun l d n ti u ho lc cng vic gia cc thnh vin trong 1 i lm web gm nh thit k v ngi pht trin. Kh nng lp m bn ngoi v x l d liu t database l 1 s c tnh lm cho Flash c bit ph hp cho cc d n phc tp, qui m ln c trin khai bng cch s dng Flash Player cng vi 1 h lai HTML lm ni dung. ActionScript 2.0: chnh thc ra mt trong phin bn Flash MX 2004. l 1 ngn ng hng i tng theo chun ECMA, h tr tnh k tha, t kiu mnh v c m hnh s kin. Macromedia Flash 8 Basic : phin bn c cng b ngy 13/9/2005, phin bn ny l mt phin bn rt gn cc tnh nng ca cng c Flash, hng vo i tng ngi dng ch mun cc tnh nng c bn v v, to hnh ng v tng tc. Ra i cng Flash Player 8, phin bn ny hn ch h tr video v cc hiu ng hnh nh cng nh hot hot. Macromedia Flash 8 Professional 8 : phin bn ny nhn mnh vo video v mobile. Cc chc nng mi bap gm Filter v ch blend, kh nng ty bin chuyn ng, h tr stroke, ch v da trn vt th, ch cache nh ti thi gian thc, ch FlashType chng ch nhe, video nh dng On2 VP6, h tr ty chnh m cho video, mt b m ha v import video ring, h tr cue point cho file dng FLV, mt thnh phn (component) chy video vi nhiu chc nng nng cao v mt b gi lp mobile. 7
Action Script 3.0: y l mt ngn ng hng i tng hon ton v c b th vin mnh m. T sau s ra i ca Action Script 3.0, hng pht trin ca Flash v cng a dng, khng ch l mi trng web hay mobile; m cn l ng dng internet - RIA (Rich Internet Application) v my bn. Adobe Flash CS3 Professional: (hay l phin bn 9) c ra i vo ngy 16 thng 4 nm 2007, y l phin bn y tin ra i di thng hiu Adobe. CS3 h tr y Action Script 3.0 cho php ton b ng dng c chuyn sang Action Script m khng cn ti thit k trong tool Adobe Flash CS3 Professional, tng tc tt hn vi cc sn phm ca Adobe nh Adobe Photoshop, Adobe Fireworks, Adobe After Effect, Adobe Illustrator to thnh mt qui trnh xy dng phn mm/web hon chnh bng cc sn phm ca Adobe; h tr v vector tt hn, tha hng cc u im ca Adobe Illustrator v Adobe Fireworks. Adobe Flash CS4 Professional: (phin bn 10) c cng b vo ngy 15 thng 10 nm 2008. Phin bn ny cha mt s tnh nng mang tnh cnh mng nh: khung xng, x l vt th 3 chiu c bn, animation hng i tng, c ch x l ch nng cao v mt s ci tin ca Action Script 3.0. CS4 cho php lp trnh vin to chuyn ng hiu qu v nhanh chng hn vi rt nhiu tnh nng nng cao m cc phin bn trc khng c. Adobe Flex Builder: y l mt bn h tr pht trin ng dng Internet da trn nn tng Adobe Flash. ng dng Flex c th c vit bng Adobe Flex Builder hoc Flex SDK c cung cp min ph. Hin ti c phin bn Adobe Flex Builder 3. ng dng Flex c th c vit bng Action Script kt hp vi ngn ng nh du MXML, cch pht trin Flex khc vi cch pht trin Flash khi m mi trng pht trin gn ging nh cc IDE khc nh Visual Studio hay Netbean m b i cc cng c v hay timeline truyn thng ca Flash. Flash pht trin t mt cng c chuyn v hot hnh thnh mt nn tng mnh m, gn nh thch hp cho vic pht trin cc on hot hnh, cc game va v nh, cc ng dng Internet, ng dng trn my tnh bn, ng dng ginh cho in thot di ng c s hu thun ca Adobe, Flash chc chn s cn pht trin hn na, tin dn vo cc lnh vc nh hiu ng truyn hnh, phim nh (phim Star Trek ~ 2009 c s dng cc hiu ng bng Flash) Trong thi im hin ti v tng lai gn, c th khng nh rng kh c nn tng no c th cnh tranh vi Flash trong lnh vc ng dng Internet. 2. Ci t Flash CS4: Trong phn sau y bn s c hng dn cch ci t Flash CS4 IYU CU CU HNH H THNG: Windows: CPU: 1GHz tr ln
FlashCS4 Professional OS: Microsoft Windows XP Service Pack 2 (Khuyn co Service Pack 3), Windows Vista Home Premium, Business, Ultimate, Enterprice Service Pack 1 ( c kim nh vi cc phin bn 32-bit). RAM: 1GB tr ln B nh trng: Ti thiu 3.5GB cho qu trnh ci t ( khng ci trn b nh flash ) Mn hnh: phn gii 1024x768 vi 16-bit ha tr ln. quang: DVD-ROM Phn mm: Quicktime 7.12 tr ln gip h tr cc tnh nng a phng tin. Internet: ng truyn bng thng rng cho cc dch v online. Macintosh: CPU: PowerPC G5 hoc B vi x l a nhn ca Intel OS: Tiger OSX 10.4.11, Leopard 10.5.4 tr ln RAM: 1GB tr ln B nh trng: Ti thiu 4GB cho qu trnh ci t ( khng ci trn b nh flash ) Mn hnh: phn gii 1024x768 vi 16-bit ha tr ln. quang: DVD-ROM Phn mm: Quicktime 7.12 tr ln gip h tr cc tnh nng a phng tin. Internet: ng truyn bng thng rng cho cc dch v online. IICI T:
1Trc khi tin hnh ci t, tt tt c cc ng dng ang chy, bao gm c cc ng dng ca Adobe, Micosoft Office, v cc trnh duyt. Cc bn cng c khuyn co nn tm thi tt cc phn mm dit virus trong qu trnh ci t. 2ng nhp bng ti khon qun tr (Administrative Account) 3Lm theo hng dn sau: Cho a DVD ci t vo , v lm theo cc ch dn trn mn hnh. Nu b chng trnh khng c t ng ci t, vo th mc Adobe CS4 trong th mc gc ca a ci, click p vo file Setup.exe v bt u qu trnh ci t. Nu bn download phn mm t Internet, vo th mc Adobe CS4, click p vo file Setup.exe v bt u qu trnh ci t. 4Nu nng cp t phin bn c, chng trnh ci t s kim tra h thng chn nhng sn phm c nng cp. Nu ko th tm ra, chng trnh s hi bn nhp m ng k (serial number) ca phn mm c nng cp. Bn cng c th ci t phn mm di dng dng th (trial), sau nhp m ng k mi vo ca s ng k lc s dng phm mm. 9
FlashCS4 Professional *) Lu : ci t cc gi b sung hoc ci li phn mm sau khi ci t hon tt, bn cn s dng b ci gc ( nm trong CD, DVD hoc t Internet)
III- G B CI T: 1Trc khi g b ci t, tt ton b cc chng trnh ang chy, bao gm c cc ng dng ca Adobe, Microsoft Office, v cc trnh duyt, 2Lm theo hng dn sau: WINDOWS XP: M ca s Control Panel v click p vo biu tng Add or Remove Programs, chn phn mm cn g b, Click Uninstall/ Change, v lm theo cc ch dn trn mn hnh. WINDOWS VISTA: M ca s Control Panel v click p vo biu tng Programs and Features, chn phn mm cn g b, click Uninstall/Change, v lm theo cc ch dn trn mn hnh. MAC OS (QUAN TRNG): i vi h iu hnh ca Apple c tnh nng g b mi. Khng g b theo phng thc truyn thng l ko th ng dng vo thng rc (Trash). g b mt cch an ton, click p vo b ci c trong ng dn Application/Utilities/Adobe Installers, ng nhp bng ti khon qun tr, ri chn Remove Components v lm theo cc ch dn trn mn hnh. HNG DN CI T BNG HNH NH: Vo th mc ci t, click p vo file Setup.exe tin hnh ci t.
10
FlashCS4 Professional Chng trnh ci t tin hnh kim tra thng tin cu hnh my tnh.
Nhp m ng k, hoc la chn ci t dng th sn phm, ri chn Next.
11
FlashCS4 Professional - Chn ngn ng s dng, ng dn ci t, v cc ng dng i km ri click Install bt u qu trnh ci t.
Qu trnh ci t bt u.
12
ng k thng tin c nhn:
Click Exit hon tt vic ci t Adobe Flash. 13
HNG DN G B ADOBE FLASH BNG HNH NH: M ca s Control Panel v click p vo biu tng Programs and Features, click p vo biu tng Adobe Flash CS4 Professional.
nh du vo Remove Application Preferences nu mun xa mi ci t. 14
Qu trnh g b bt u
Click Exit hon tt vic g b Adobe Flash.
15
16
Chng 2: THIT K HOT HNH VI FLASH

Gii thiu: Flash l 1 cng c s dng k thut vector c pht trin t nm 1997 do hng Macromedia. im mnh ca Flash nm b cng c v vector hon thin v cc cng c to chuyn ng thng minh v mm do. Chng ny s gip cc bn: 1. Lm quen vi mi trng lm vic ca Flash CS4 2. Cch v, t mu chuyn nghip 3. To cc chuyn ng hot hnh
17
Bi 1: Lm quen vi Flash CS4

Mc tiu bi hc: 1. Mi trng lm vic ca FlashCS4. 2. Cc khi nim c bn.
1. Giao din ca Flash Professional CS4:
to 1 file Flash mi s dng cc la chn c lit k trn. Gc trn bn phi l cc cch sp xp vng lm vic ty theo i tng s dng. Mc nh l kiu Essential.
18
FlashCS4 Professional Do mc ch ca chng ny nn ta chn kiu lm vic Designer.
C mt s vng lm vic quan trng c hin thi: 1. Timeline:
Timeline l trc thi gian, thng s fps (frame per second) ch ra s frame (cnh) c din ra trong 1 giy. Vch ch frame hin ti c hin th.
19
Trong hnh trn, frame ang hin th l frame 5. Mi dng l 1 layer. C th hnh dung mi layer nh mt lp bng knh trong sut m ta c th v ln trn. Trong hnh trn: Layer 2 c cc frame 1,5 l keyframe, c 15 frame; layer 1 ch c 1 frame 1 v l keyframe. Keyframe l frame m ti ni dung ca n khng lin quan n cc frame khc. Cc frame khng phi keyframe th ni dung ca n l ni dung ca keyframe trc gn nht. kha khng chnh sa mt layer ta s dng biu tng Khng hin th layer, ta s dng biu tng thm layer, ta s dng biu tng chn Insert layer. hoc click chut phi vo 1 layer bt k, hoc click chut phi vo layer
xa layer ang chn, ta s dng biu tng cn xa, chn Delete layer. S dng Timeline:
B phn ny c dng t chc, iu khin ni dung movie theo thi gian di dng cc lp v khung hnh. Cng ging nh khi lm phim, ngi ta chia di v mt thi gian ca 1 Flash movie thnh cc khung hnh lin tip. Cc lp th c th c coi nh nhng di phim xp chng ln nhau. Mi lp l 1 hnh nh khc nhau c t trn Stage. Thnh phn chnh ca Timeline gm c: lp (layers), khung hnh (frames), v playhead (khi playhead tr n khung hnh no th khung hnh c th hin. N c nhim v chy t u film n cui film cc khung hnh ln lt c hin ra) (xem hnh di). Cc lp ca movie c lit k di dng ct bn pha tri ca bng iu khin Timeline. cc khung hnh c trong mi lp xut hin theo hng nm bn phi ca tn lp. Vch Timeline header nm trn cng ca bng ch ra s th t cc khung hnh. Cn playhead, vch mu , l ch ra khung hnh no ang c biu bin trn Stage. Thng tin v trng thi ca Timeline c t cui bng, cho ta bit khung s my ang c chn, tc tri ca khung hnh, v thi gian chy t khung hnh th nht n khung hnh hin ti l bao nhiu.
20
Bn c th thay i cc khung hnh biu din trong Timeline, cng nh t du (thumbnails, chm en, trng, vung, trn ... ) cho ni dung ca khung hnh. Bng iu khin ny cho bit khung hnh no th c animation. C 3 loi hnh ng l animation theo cch hin th ln lt cc khung hnh, theo cch bin i hnh dng v bin i theo ng i. bit nhiu thng tin hn v animation, bn hy xem chng 3. Nhng iu khin bn cnh tn lp trong bng Timeline cho php bn n, hin, kho, hay m kho cc lp, cng nh biu din ni dung ca lp dng ng vin. Bn c th chn, xo, chn v di chuyn cc khung hnh trong Timeline, cng nh c th dch chuyn khung hnh n v tr mi trn cng 1 lp hay sang lp khc. S dng Frames v Keyframes: Keyframe l khung hnh c bit, nh du mc thay i trong animation, hay cha cc actions iu khin movie. Flash c th t sinh cc khung hnh (tween) gia nhng keyframe to hnh nh animation lin mch. Chc nng ny ca Flash gip bn to animation d dng hn v bn khng phi v tng frame 1 na m ch cn to mt s khung hnh mc. Thi lng ca 1 animation cng c th thay i c bng cch dch chuyn cc keyframes trong Timeline. Th t xut hin khung hnh v keyframe trong bng Timeline s quyt nh th t 21
FlashCS4 Professional xut hin ca chng trong 1 Flash movie. Bng cch sp xp cc keyframes trong Timeline, ta c th bin tp chui cc s kin ca animation mt cch tu . Lm vic vi cc khung hnh trong bng Timeline: Bn c th thc hin nhng cng vic chnh sa i vi frames v keyframes: - chn, chn, xo, dch chuyn frames v keyframes. - Ko frames v keyframes n v tr mi trong cng 1 lp hay sang lp khc. - Sao chp frames, keyframes. - Ko cc thnh phn t Library panel ra Stage thm thnh phn vo keyframe hin ti. C hai cch chn khung hnh trong Timeline. Cch chn mc nh l chn theo khung hnh, bn phi chn tng khung hnh ring l. Trong cch chn theo khong (span-based), ton b khung hnh t keyframe ny cho n keyframe tip theo s c chn khi bn click bt k khung hnh no nm trong khong . Ngi dng hon ton c th t t ch chn theo mnh. chn khung hnh vo Timeline, c 1 s cch nh sau: - Chn 1 khung hnh mi: chn Insert -> Timeline -> Frame. - To keyframe mi: chn Insert -> Timeline -> Keyframe, hoc kch chut phi vo frame c chn, chn tip Insert Keyframe trn menu va bt ra. - To keyframe trng: chn Insert -> Timeline -> Blank Keyframe, hoc kch chut phi, chn chc nng Insert Blank Keyframe. chn 1 hay nhiu khung hnh trong Timeline: - Chn 1 khung hnh, ri kch vo . Nu bn t ch chn theo khong th khi kch vo 1 khung hnh, ton b chui khung hnh nm gia 2 keyframes s c chn. - Chn nhiu khung hnh lin k nhau: bm Shift v click cc khung hnh cn chn. - Chn cc khung hnh khng k nhau: bm Control v click cc khung hnh cn chn. chn tt c cc khung hnh trong Timeline: - Chn Edit -> Timeline -> Select All Frames.
22
FlashCS4 Professional xo hay chnh sa 1 frame, keyframe, thc hin 1 trong s cc cch sau: - Xo 1 khung hnh, 1 keyframe hay chui cc khung hnh: chn nhng khung hnh cn xo, chn Edit -> Timeline -> Remove Frame, hoc kch chut phi vo khung hnh chn ri chn tip Remove Frame t menu va xut hin. Nhng frames xung quanh vn khng thay i. - dch chuyn 1 keyframe hay 1 chui cc khung hnh cng ni dung ca chng th ch vic ko keyframe hay chui khung hnh n v tr mong mun. - m rng khong thi gian ca 1 keyframe, bm Alt v ko keyframe n khung hnh cui cng trong chui mi. - sao chp keyframe hay chui khung hnh: bm Alt-click v ko keyframe n v tr mi. - sao chp 1 hay nhiu khung hnh: chn nhng khung hnh ri chn Edit -> Timeline -> Copy Frames. Chn khung hnh hay chui khung hnh m bn mun thay th, ri chn Edit > Timeline > Paste Frames. - chuyn 1 keyframe thnh khung hnh bnh thng, ta chn keyframe ri vo Edit -> Timeline -> Clear Keyframe, hay kch chut phi ln keyframe ri t menu bt ra, chn tip Clear Keyframe. Keyframe c xo v tt c cc khung hnh tip sau cho n keyframe tip theo s c thay th bng ni dung ca frame ng lin trc keyframe xo. - thay i di ca 1 chui khung hnh tweened (c Flash t ng to ni dung): ko keyframe bt u hay cui cng ca chui v bn tri hay bn phi tng ng. - thm 1 thnh phn t th vin vo keyframe hin ti: ko thnh phn t Library panel vo Stage. Lm vic vi lp: Bn c th coi lp nh nhng t giy acetate trong sut c xp chng ln nhau. Nhng lp ny gip bn t chc tc phm ca mnh d dng hn. Bn hon ton c th v v chnh sa trn mi lp m khng lm nh hng n cc lp khc. Nu trn 1 lp khng c i tng no, hay ni cch khc l n trng rng th bn c th nhn xuyn qua n n nhng lp bn di. v, t mu hay chnh sa lp, bn phi chn lp t n trong trng thi lm vic (active). Biu tng chic bt ch cnh tn lp cho ta bit lp c c chn hay khng. Mc d c th c nhiu lp c chn ti 1 thi im nhng ch c 1 lp l ngi dng thc s lm vic trn .
Khi bn to 1 file Flash mi (Flash Document), chng trnh s to sn trong 1 23
FlashCS4 Professional lp. Bn c th b sung thm nhiu lp tu . S lp bn s dng ch b gii hn bi b nh my tnh ca bn v cc lp ny khng h lm tng kch thc file .swf. Bn c th n, kho hay sp xp li th t cc lp. Bn cng c th t chc v qun l cc lp bng cch to nhng folder v t cc lp vo trong folder . Bn c th m rng hay thu nh cc lp trong bng Timeline m khng lm nh hng n nhng g bn thy trn Stage. l 1 kin tt nu bn dng cc lp hay folder ring bit cho cc file m thanh, actions, nhn ca khung hnh, v li ch thch cho khung hnh. iu ny gip bn tm nhng thnh phn nhanh hn khi bn cn chnh sa chng. Thm na, bn c th s dng cc lp ch dn c bit vic v v bin tp c d dng hn, dng cc lp mt n (mask layers) to nhng hiu ng phc tp. tm hiu k hn thao tc lm vic vi lp trong Flash, bn hy chn Help -> How Do I -> Basic Flash -> Work with Layers.
2. Tools:
Cc tool quan trng hay c s dng: Selection Tool, Free Transform Tool, Text Tool, Line Tool, Rectangle Tool, Pen Tool, Brush Tool, Paint Bucket Tool, Eraser Tool, Zoom Tool. Selection Tool: c s dng chn cc i tng Free Transform Tool: c s dng thay i kch c (scale), lm mo (skew), 3. Stage:
24
y l khu vc lm vic chnh. Tt c mi cng vic v, thc hin chuyn ng u thc hin trn khu vc ny. Lm vic vi Stage: S dng grid, guides, rulers: Trong Flash c rulers v guides gip ngi dng v v sp t cc i tng 1 cch chnh xc. Bn c th nh ra cc guides v bt (snap) i tng theo cc guides hay bt ch hin li v bt i tng dng theo . Ch : Bn c th bt i tng vo cc i tng khc hay vo cc pixel, hay dng i tng bng cch s dng nhng ng vin dung sai. a) Dng grid: Khi ch li c bt, mt tp cc ng thng xut hin pha sau tc phm ca bn trong mi cnh. Bn c th bt i tng vo cc li , v chnh sa kch thc ca li cng nh mu ng li. hin th hay n li v: ta chn View -> Grid -> Show Grid. bt, tt ch bt (snap) theo li: chn View -> Snapping -> Snap to Grid. t tu chn cho li: 25
FlashCS4 Professional 1. Chn View -> Grid -> Edit Grid. Ca s sau xut hin:
2. Chn mu cho ng li: click vo tam gic nh trong hp mu v chn mu tu t bng. Mu mc nh cho ng li l mu ghi (gray).
3. Chn Show Grid hin li. 4. Chn Snap to Grid bt ch bt theo li. S khc bit khi bt hay tt ch ny c th hin hnh sau:
Hnh elip bn tri c v bng cng c bt ch khi khng c ch Snap to Grid. Cn hnh bn phi c, ta thy Flash t iu chnh cc tip tuyn chnh ca elip 26
FlashCS4 Professional trng vi ng li. 5. iu chnh khong cch gia cc ng li, ngi dng nhp gi tr vo hp vn bn bn cnh mi tn ngang v dc trn ca s Grid. 6. C th thay i chnh xc trong vic bt li bng cch chn cc tu chn mc Snap accuracy. 7. Nu mun nhng ci t tr thnh mc nh th click Save Default. b) Dng guides: gip cho vic v hnh n gin hn, Flash cho php ngi dng to ra cc lp hng dn (guide layers). Ri da vo nhng lp , ngi dng dng cc i tng trn lp khc vi i tng to trn lp guide. Cc lp guide ny s khng c mt trong file swf, v ta c th chn bt k lp no lm lp guide. Bn tri tn lp c biu tng ring, ging nh hnh 1 chic ba, ch ra rng n l lp hng dn. Bn c th to 1 lp guide kim sot chuyn ng ca i tng trong 1 animation. Thay v Flash t ng to ra ng chuyn ng ca i tng th bng lp guide ny bn c th cho i tng chuyn ng theo l trnh m bn t vch ra. Ch : Nu bn ko 1 lp bnh thng ln trn lp guide th Flash s hiu l bn chuyn lp guide thnh lp guide chuyn ng. trnh s thay i v ny, tt nht ta nn t tt c cc lp guide pha cui trong th t lp. ch nh 1 lp bnh thng lm lp guide: Chn lp v click chut phi, chn tip mc Guide t menu va xut hin. Mun chuyn lp guide thnh lp bnh thng th ta cng lm nh vy v chn Guide 1 ln na a n v trng thi ban u. c) Dng rulers: hin thc o, ta chn View -> Rulers. xc nh n v cho thc, ta vo Modify -> Document ri chn n v l pixels, inches, centimeters, ... tu .
Thc o s xut hin cnh bn tri v cnh pha trn ca vn bn. Khi ta dch chuyn 1 phn t trn Stage, cc vch trn 2 thc o vung gc cho bit chiu di 27
FlashCS4 Professional v chiu rng ca phn t cng dch chuyn theo. 4. Properties: y l mt panel quan trng, cha cc thng s ca i tng ang c la chn. V d khi ta chn mt hnh c v trn stage th s c panel properties nh sau:
Ty vo i tng ang c chn m s c cc loi thng s khc nhau hin th panel properties 2. Cc khi nim c bn trong Flash: Symbol: Khi mun nh ngha mt i tng trong Flash, ta dng khi nim Symbol. Cc loi symbol: Movie Clip, Button, Graphic Chn i tng cn nh ngha, click chut phi -> chn convert to symbol
28
Classic Tween: Khi mun cho mt Symbol thay i thng s (v tr, mu sc, ) t frame ny ti frame kia ta dng khi nim Classic Tween. V d: Ta c 1 Symbol tn l Symbol1 frame1, frame20; symbol thay i v tr. lm c vic ny, gi s frame1 c sn symbol trong stage. Chn frame20, click chut phi v chn Insert Keyframe. khong gia 2 frame ta chn Create Classic Tween. n Enter xem kt qu.
29
30
Bi 2 S dng cng c v trong Flash CS4
Mc tiu bi hc: 1. S dng Brush 2. S dng Pen Tool 3. S dng mu sc mt cch hiu qu
1. V bng cc hnh c bn: to ra cc hnh v trong Flash ta s s dng cc tool c bn nh hnh trn, hnh ch nht, bt, Kt hp cc hnh n gin vi nhau ta s c c hnh phc tp nh mun. y, ta s v li mt bn v / bc nh c trc a vo Flash theo dng vector (S s dng hnh vector ny v sau).
To 2 layer, vi layer scan cha nh v b kha nhm khng b thay i khi v trn layer drawing
y l bn v gc
S dng cc cng c Pen tool, Rectangle Tool, v Oval Tool v cc khi hnh c bn da theo hnh ban u
31
S dng chc nng lm cong ca Pen tool chnh cho hnh v ging tht
Chnh sa mt cht ta s c hnh nh sau
T vin theo cc mu ta li c hnh trn
Sau ta t mu nhn vt theo hnh gc v c kt qu nh trn
32
Xa cc hnh tm i ta s c c kt qu nh trn
Lm tng t vi chic vn ta s c hnh nh trn
V ta c kt qu cui cng
2. S dng Brush tool: Brush tool l mt trong nhng cng c v mnh nht, c bit khi s dng cng bng v. Khi v bng brush tool, mi nt ca bn s c chuyn thnh 1 khi hnh. S dng brush tool nh th no thc s ty thuc vo kh nng v v phong cch v ca bn. Lun ghi nh khi v rng mc ch ca vic v ny nhm to cc animation. Chnh v vy khng nn v lin 1 nt m chia ra nhiu nt nh c lp s tt hn khi to chuyn ng. S dng Selection tool di chuyn cc nt.
Thng s bn chnh sa u tin khi s dng brush tool l mm ca nt v (smoothing
C hng lot ty chnh cho pht bn t c hnh v nh mong mun
33
FlashCS4 Professional Kt qu cui cng l 1 bn v mang m phong cch hot hnh
3. S dng mu hiu qu: Mu thc s mnh v hiu qu trong vic din t tng ca thit k hoc cm xc ca nhn vt hot hnh ban ang v. Chng ta s chnh mu s dng bng trn mu HSB. Trc ht, hy chuyn ch mu t RGB sang HSB. Ch mc nh RGB l ch trn mu da theo t l 3 mu c bn: Red-Green-Blue Ch HSB (hay HSV) l ch trn mu da theo t l ca: H (Hue) Vng mu S (Saturation) bo ha mu B (Bright hay V - Value) sng
34
Ta c thit k gc:
Mun chuyn mu v dng en trng, hy chuyn S ca mu v 0, bn s t c kt qu nh di y
Chuyn tan b mu ca thit k v cng mt gi tr H cng s to ra mt hiu ng rt c bit v th v
Thay i gi tr S s to s tng phn gia cc mu vi nhau. Chnh cc gi tr HSB s gip bn thay i tng ca thit k nhm gip thit k ph hp vi nhng g c sn trc .
35
Bi 3 S dng cng c v nng cao trong Flash CS4
Mc tiu bi hc: 4. S dng Gradient 5. S dng nh lm texture 6. Bin nh bitmap thnh nh vector
1. S dng Gradient: Cc hnh nh c to ra vi mu c bng thng em li hiu qu cao v mt thm m, to cm gic ba chiu. Sau y chng ta s hc s dng cch mu theo ch gradient c c iu trn. Ta to 2 layer cha u v mt ca robot Mt gy cm gic bong cho u robot, ta s dng loi mu Radial
Mu pha tri ngoi cng tng ng vi mu tm ca hnh. S lng loi mu bin i l nhiu ty
u 36
mu cho u robot, ta c kt qua:
t mu to cm gic tht cho vt c hnh ng, ta dng loi mu Linear
Cch dng tng t nh vi Gradient
Ta c kt qu nh sau:
Lm tng t vi phn mt, ta c:
37
chnh cho bng phn mt hp vi phn u, ta dng chc nng Gradient Transform Tool
Chnh mt cht v ta c kt qu nh sau:
38
FlashCS4 Professional 2. S dng nh lm texture: i khi vic mu theo cch trn cha t c hiu ng cn thit, c bit vi nhng chi tit phc tp nh v cy, bi c th cch mu da vo 1 nh bit map li l 1 cch tt hn gii quyt vn trn
Chun b trc nh lm ha tit, nh nn nh c th xut file flash ln web
Chn Paint Bucket Tool, sau chnh ch mu sang Bitmap
Chn nh bitmap tng ng sau t mu nh bnh thng, ta c kt qu nh sau
Chnh sa mt cht v ta c kt qu
39
FlashCS4 Professional 3. Bin nh bitmap thnh nh vector (Trace bitmap): Cc bc nh chp thng c thm vo Flash nhm tng tnh chn thc. Chng c th c dng nguyn trng hoc c v vector nh nhng cch c trnh by cc bi trn. Tuy nhin, vic v nh vy rt tn thi gian, v ty thuc vo chi tit ca bc nh m i khi khng th vector ha bc nh theo cch . C mt cch khc bin nh bitmap thnh nh vector nhanh chng, l s dng tnh nng Trace Bitmap trong Flash.
S dng mt bc nh c tng phn tt. C th chnh sa trc trong photoshop hoc cc phn mm no trc bc nh trng sc nt nht.
M hp thoi Trace Bitmap bng cch m Modify > Bitmap > Trace Bitmap
Cc thng s cng nh th nh cng chn thc, tuy nhin dung lng file s cng ln
Vi thong s nh trn, ta thu c kt qu nh sau
S dng cng c Subselection Tool, ta thy bc nh c vector ha hon ton
40
gim kch c ca file, ta vo Modify > Shape > Optimize
Kt qu cui cng l 1 nh vector c dung lng chp nhn c v t c yu cu chuyn t nh bitmap sang nh vector nh mong mun
41
42
Bi 4 To hot hnh vi Flash CS4
Mc tiu bi hc: 1. 2 3 4 5 S dng classic tween S dng motion tween S dng shape tween S dng tnh nng bone Tm hiu v mask
Hot hnh trong FlashCS4: Flash c sinh ra vi mc ch ban u lm hot hnh vector, nn to hot hnh l mt phn quan trng trong Flash. lm hot hnh trong Flash ngoi vic v cc frame lin tip khc nhau, ta cn c mt cch khc nhanh hn l dng tween. Tween l khi nim dng ch chuyn ng c to ra mt cch t ng, m t s thay i gia 2 frame. V d: s thay i v tr, mu sc, hnh dn, ca vt th. i tng c tween l symbol. Nu ta khng to symbol m p dng tween ngay lp tc vi mt hnh v, hnh s t ng c bin thnh mt symbol. Mi layer ch c php cha mt tween, khng c php cha thm g khc, nu khng tween s khng hot ng. C 2 loi tween trong Flash: Motion tween: Classic tween v Motion tween cng thuc loi ny. T phin bn CS3 tr v trc ch c Classic tween, khng c motion tween. V bn cht 2 tween ny ging nhau, tuy nhin Motion tween p dng mt s tnh nng mi ca Flash CS4 (v d: 3D tween) v cch s dng thun tin hn classic tween. 2 loi tween ny cng to ra hot hnh da trn s thay i tnh cht ca 1 symbol gia 2 frame. Shape tween: Khc bit c bn gia shape tween v 2 loi trn nm vic shape tween khng lm vic vi symbol. Thay vo ta nh ngha shape tween bng vic thay i i tng ha ti 2 frame khc nhau, shape tween s t hiu v sinh ra chuyn ng thay i hnh dng tng ng. gip vic ny ng nh ta mong mun, Flash cng cung cp mt s cng c h tr s c bn ti trong phn tip theo ca bi hc.
Flash CS4 cung cp mt tnh nng rt mnh cho ngi lm hot hnh, l bone. Tnh nng bone s gip ta nh ngha khung xng ca i tng ha, qua ta c th to cc chuyn ng phc tp nh ng vt di chuyn, khp my, Sau y ta s i chi tit vo tng tnh nng h tr chuyn ng trong Flash CS4. Hy chuyn ch lm vic sang Animator bt u to hot hnh vi Flash.
43
2 S dng classic tween:
V qu bng hnh r nh hnh bn di
Chuyn qu bng sang symbol
t tn i tng l Ball
Click chut phi vo frame th 15, chn Insert Keyframe.
Thay i v tr qu bng. Li click chut phi vo gia 2 frame 1 v 15, chn Create Classic Tween
44
n Enter xem kt qu, hoc chn Control > Test Movie.
Ta cng c th xoay qu bng, thay i cc tnh cht khc ca qu bng trong panel Properties
Hoc click chut tri vo 1 frame bt k gia frame u v cui, nhn sang panel Properties. C mt s tnh cht ng ch sau: Ease:
Trc ngang l s frame, trc dc l s % m Tween hon thnh. Chnh ng thng thnh ng cong theo mun ta s c mt tween tht hn theo mun. Rotate: chnh cho vt th quay theo mun. Sau y, ta s cho qu bng i theo 1 ng bt k. Click chut phi vo layer hin ti, chn Add Classic Motion Guide
Mt layer mi c sinh ra, trong layer ny ta v 1 ng thng. Di chuyn ng thng / qu bng (trong 2 frame u v cui) sao cho ng thng i qua im trn trong qu bng.
Chnh ng thng thnh ng cong nh mong mun. Li Test Movie ln na xem kt qu. Xoay qu bng ti frame u v frame cui mt cht, ta c chuyn ng thuyt phc hn rt nhiu.
Frame 1
Frame 15
45
3 S dng Motion Tween: Flash CS4 gii thiu mt chc nng mi l Motion Tween . Khi nim Motion Tween t cc phin bn trc tr thnh Classic Tween. Mt trong nhng tnh nng mi ca Motion Tween l c th to ng di chuyn m khng cn to guide layer nh cch truyn thng. Thm na, Motion Tween cho php to hot ha vi chc nng 3 chiu mi trong Flash CS4. hiu thm v Motion Tween, hy th nghim vi n, hn bn s khng tht vng vi nhng n lc ca Adobe khi ci tin mt trong nhng tnh nng lu i v c trng nht ca Flash trong cc phin bn trc ca hng Macromedia. Di y l demo to mt chuyn ng tng t nh vi Classic Tween.
To mt symbol mi, t tn l ufo
To 2 key frame, v v trong 2 frame nh sau
Ta c 1 ufo t quay xung quanh trc
Ko ufo t panel Library vo stage, to 1 frame mi frame th 60
Click chut phi vo 1 frame bt k nm gia frame u v cui, chn Create Motion Tween
46
Chn frame 60, di chuyn v tr vt th.
Chn 1 s v tr bt k gia 2 frame u v cui, di chuyn vt th theo cch bn thch. Chnh ng mu xanh (chnh l ng di chuyn ca vt th sau ny) theo cch bn thch.
47
Quay vt th v thay i kch thc mt cht, chn Control > Test Movie, ta c kt qu kh ging thc. Mt chic a bay ang tin t xa ti gn.
Tong t nh Classic Tween, ta cng chnh sa panel Properties ca Motion Tween. a bay t xa ti nn lc u c v i chm, lc sau th i nhanh hn. Chnh v vy nn chnh trong Ease c gi tr < 0. ta chn gi tr -100 (Hy th nghim, c th bn s tm c cc gi tr cho kt qu tt hn ti). Bn cng c th chc nng Motion Editor (Chn Window > Motion Editor panel ny hin ln) c c chuyn ng mt hn. c hiu ng tt hn, ta to bu tri y sao pha sau a bay. To mt symbol, t tn l star Click vo 1 v tr bt k trn stage (khng click vo 1 i tng no), chn panel Properties, chnh mu ca stage v en.
48
Chn brush, v mt chm trn mu trng. To mt symbol mi tn l star_blinking. Ko symbol star t panel Library vo stage. To 2 keyframe. Trong keyframe u tin, chn vt th, m panel Properties, nhn xung mc Filter. Thm filter Blur.
To keyframe th 2 cng lm tng t, nhng gi tr trong BlurX v BlurY c chnh ty , vi iu kin gi tr phi khc vi frame u tin. Quay tr li vi scene. To 1 layer mi, t tn l bg nm di layer cha ufo. Ko mt vi symbol star_blinking t panel Library vo. t cc v tr bt k. Chnh kch thc cho ph hp. Ta c mt hot cnh a bay bay trong tri m nhp nhy sao :D.
49
4 S dng Shape Tween: Nh ni trn, shape tween to ra chuyn ng bin hnh gia 2 hnh trong 2 frame khc nhau. Di y l v d ch ra cch thc to 1 shape tween.
To 1 file Flash. Trong frame u tin, v 1 ng cong
To 1 key frame ti frame s 20 Chnh hnh cong cho di ra 1 cht
gia 2 frame , ta click chut phi vo 1 frame v chn Create Shape Tween
Ta c kt qu
Nh vy l ta c 1 shape tween n gin.
tween chnh xc hn, ta c th thm Shape hint bng cch vo Modify > Shape > Add Shape Hint.
Ti frame cui, ta chnh cho im a frame u trng vi v tr im a frame cui trn hnh m ta mong mun
50
Test movie ln na, by gi ta c shape tween chnh xc hn. Cng s dng nhiu shape hint th chuyn ng cng chnh xc.. S dng tnh nng bone: Ta trong phn ny ca bi tp, ta s to mt ngi chuyn ng vi bone tool. Bn s thy n thc s n gin v hiu qu nh th no.
To mt symbol tn l chn
Chn bone tool Chn c chn
Trong frame u tin, v mt ci chn nh hnh di y Phn i l ng thng c dy l 20, phn ng ng c dy l 16, phn bn chn c di l 14.
n vo phn trn cng bp i, gi chut, ko n u ng ng ri th ra.
Li n chut t phn u ng ng ti phn bn chn ri th ra.
Li tip tc n chut phn u bn chn, ti cui th th ra.
Ton b i tng ha ca layer ban u c copy vo layer Armature mi c sinh ra. Bn hon ton c th xa b layer ban u by gi rng khng.
51
Ti frame s 5,ta Insert Pose v thay i hnh dng chn mt cht, cho chn nhc ln (Chn Selection Tool ri chnh nh hnh di y)
Lm tng t vi frame s 10, nhng ln ny cho chn ging frame u tin 1 cht
By gi ta c chuyn ng ca chn s dng bone. Kt hp vi Motion Tween ta s c hnh ngi chuyn ng nh sau.
Kt hp mm do gia bone v cc loi motion khc, bn s c nhng on hot hnh v cng n tng m vic to chng li rt n gin khng h mt nhiu cng sc
52
S dng mask trong Flash:
Ta s s dng mask to mt l c bay trong gi. To mt symbol tn l flag V mt hnh ch nht nh hnh di y
Lm cong n
Copy, xoay v dn n bn cnh hnh c, ta c
Lm vi ln ta s c
To 1 layer mi t trn layer cha hnh trn, trong layer ny v 1 hnh ch nht.
To motion tween cho hnh di mu chuyn ng t u ti cui trong 15 frame, ch mp cui hnh ch nht vn nm trong di mu. Layer cha hnh ch nht cng c 15 frame nh layer cha di mu.
53
Click chut phi vo layer ny, chn Mask
Lu , mask hot ng, cc layer mask v b mask u phi c kha li nh hnh trn. Lc ny ta s c l c bay trong gi. a vi l c t trong panel Library ra ngoi stage, chn Control > Test movie; ta s c hnh cc l c bay bng mask.
Bn c th sa chuyn ng ca l c mt cht cho hnh ng c v tht hn.
54
Kt thc bi hc ny cc bn bit cch to hot hnh trong Flash CS4. Tuy nhin nhng iu cp bn trn ch l nhng iu c bn, cn rt nhiu iu th v v hot hnh trong Flash m bn c th khm ph. Hy tip tc khm ph v th nghim, bn s thu c rt nhiu iu th v m bn khng ng ti.
55
Bi 5 S dng m thanh trong Flash CS4
Mc tiu bi hc: 1. Thm m thanh vo file Flash 2. iu chnh m thanh
1. m thanh trong FlashCS4: Flash cung cp mt mi trng lm vic va vi m thanh: cho php bn iu chnh vic bt u, kt hc v mt s hiu ng c bn. ng mong ch Flash c th gip bn lm c mi th, hy ginh nhng chnh sa m thanh phc tp cho cc phn mm chuyn dng. Chn frame u trong file Flash, chn File > Import to Stage v sau chn file WAV hoc file AIF, MP3 ca bn (c kh nhiu loi flie Flash c th import c, ngoi 3 loi k trn). File m thanh s bt u t frame 1, do bn cn chn thm frame p ng di ca file m thanh. Mc nh, file m thanh s c a v ch Event. S dng menu Sync thay i thuc tnh ca file m thanh. Event: Ch ny c s dng chy file m thanh ti mt thi im bt k v c lp hon ton vi cc m thanh khc. Mt m thanh c gn ch Event s chy cho ht di ca n k c khi ht frame (c th xy ra trng hp 2 bn ca cng 1 file m thanh dng Event b chy cng 1 lc). Mt file m thanh kiu Event phi c download ht v my trc khi c chy. Start: Tng t nh Event, ngoi tr vic nu m thanh ang chy s khng c thm instance no khc ca n c chy. Stop: m thanh c thuc tnh ny khng c t ng chy. Stream: Thuc tnh ny c dng ng b mt m thanh vi timeline v cc chuyn ng. m thanh kiu stream s bt u v kt thc ty ty thuc iu khin. n Edit chnh sa m thanh
56
Bn s nhn thy dng sng ca m thanh v mt vi tnh nng iu khin c bn ti ca s ny. pha di cng ca ca s ny bn s thy nt play, stop, cng c phng to dng sng ca m thanh, la chn chuyn gia n v thi gian l frame v giy.
Menu Effect cho bn mt s la chn thm hiu ng vo m thanh ang c Left Channel/Right Channel : m thanh c chy t pha tri hoc phi. Fade Left to Right/Fade Right to Left : o knh m thanh. Fade In/Fade Out: m lng tng/gim dn dn khi m thanh c chy. Custom: Cho php bn ty chnh m lng ti cc thi im ty . Bn c th c ti a 8 im x l bng cch click vo bt k v tr no trong ca s iu chnh m thanh. Mi im c th c ko th iu chnh m lng ti v tr trong file m thanh. V tr im cng cao th m lng cng ln v ngc li. loi b 1 im ty chnh ko n ra khi ca s chnh m thanh. ng thng ch ra m lng ca m thanh khi n c chy, Tng tc vi cc ng thng tng t vi cc im nh ni trn. thay i im bt u v kt thc ca mt m thanh, iu chnh im iu khin Time In v Time Out trong ca s Edit Envelope. 57
Chng 3: GII THIU V ACTION SCRIPT 3.0
Gii thiu: Action Script l ngn ng kch bn ginh cho Flash, nhng vi nhng c im ni tri v s tin b khng ngng nh vic hng i tng hon ton, b th vin mnh m, b dch nhanh, my o hiu qu, ; Action Script ang tr nn mnh m v c cc lp trnh vin Flash yu thch. Chng ny s gip cc bn nm c Action Script 3.0 trn c s bn c kinh nghim lp trnh trc y thong qua cc ni dung sau:
1. C php ca Action Script 3.0. 2. Lp trnh hng i tng. 3. C ch qun l s kin trong Flash.
58
Bi 1: Lm quen vi Actionscript 3.0

Mc tiu bi hc: 1. Lch s pht trin Actionscript. 2. C php
1. Lch s pht trin ca Action Script: T khi ra i, Macromedia Flash m ra mt cuc cch mng v x l hnh nh ng. Cc version sau ny cng b sung nhiu hiu ng p v hp dn hn, to nhng n tng kh qun cho nhng ngi tip xc vi n. Bn c th hi, iu g n giu sau nhng hiu ng tuyt p ? Ti c th tr li ngay cho bn, chnh l Action Script m phin bn mi nht hin nay l 3.0 (AS3). Nu lm vic vi flash, c th thy, bn khng nht thit phi s dng ti Action Script c c cc hiu ng hot hnh. Nhng to ra c nhng chng trnh c tng tc vi ngi dng, bn bt buc phi s dng ti AS. Action Script l mt ngn ng c vit da theo chun ECMAScript (cng chun to ra Javascript/JScript). Action Script c to ra cng vi Flash ngay t nhng phin bn u tin. Nhng trong ba phin bn u, n gii hn kh nng ca lp trnh vin v ch c nhng lnh c bn di chuyn gia cc frame, nh play, stop, getURL v gotoAndPlay. Phin bn Flash 4 ra i nm 1996, Action Script mi chnh thc tr thnh mt ngn ng vi vic h tr khai bo bin, biu thc, ton hng, lnh r nhnh v vng lp; v ci tn Action Script c chnh thc s dng. Nm 2000, cng vi s ra i ca Macromedia Flash 5, AS1.0 h tr y cc c tnh ca lp trnh hng cp trc v mt phn lp trnh hng i tng. Flash 6 b xung m hnh x l s kin, h tr switch. y cng l phin bn u tin h tr phng thc AMF v RTMP cho php truyn m thanh v video trc tuyn (streaming). Nm 2006, Flash 7 hay cn gi l Flash MX c gii thiu, v khng ch mi v nhng g c h tr, AS2 cng c ra i vi nhng ci tin quan trng vi vic hon chnh cy k tha mt cch cht ch, h tr CSS cho vic hin th cc k t. Flash 8 tip tc pht trin Action Script 1 v Action Script 2 vi vic thm cc lp mi vo th vic API iu khin d liu bitmap ti thi gian thc, upload file, cc hiu ng lm m, bng. Nm 2005, Sau khi b Adobe mua li, v vi s ra i ca flex 2, action script cng pht trin thm mt bc di, l s ra i ca Action Script 3, mt s lt xc hon ton, ci nhn AS2 dng nh cng b lu m trc mt ngn ng hng i tng thun nht, c th ng c lp m khng cn ti design nh trc y. My o ca Flash 9 cng c nng cp ln thnh phin bn mi AVM2 (Action Script Virtual Machine 2). AS3 h tr socket, ch xem ton mn hnh, biu thc chnh quy, mt cch mi l vic vi XML hiu qu hn (E4X XML) 59
FlashCS4 Professional Flash 10 (cn gi l Astro) tin dn vo lnh vc 3 chiu, Action Script ca phin bn ny h tr cc hm 3 chiu c bn nh xoay trc X, Y, Z; h tr cc hm v 3 chiu; mt s tc v hnh nh c chuyn bt sang GPU khin thi gian x l nh c gim ng kt, c bit vi video nh dng H.264. Cc th vin m thanh cng c ci tin tt hn trc mt cch ng k. Khng dng li vic ng dng Action Script trong vic to cc file Flash chy trn mi trng Internet, cng vi s pht trin ca cng ngh AIR (mt my o tng t nh .NET fhay Java), Adobe thm nhp vo th trng ng dng ca my bn, to ra mt cch tip cn mi trong vic xy dng cc ng dng truyn thng vi giao din c sc hn, ng dng bn khng ch l ng dng c lp ch chy ti mt my m cn hng n vic tng tc vi my ch ly thong tin qua mng Internet. 2. Cc khi nim c bn ca Action Script: 2. 1 Khi to v lu tr bin Lu tr gi tr trong ActionScript 3.0 c th thc hin bi mt cu lnh n gin. Tuy nhin bn phi ch ra bin ln u tin bn s dng. Bn c th lm bng cch t t kha var trc ln s dng bin u tin
var a = 3;
Hoc bn ch ra bin trc ri s dng sau

var a;
Khi bn to bin vi cch ny, n l kiu i tng rt linh hot. C ngha l n c th gi bt k gi tr bin no : mt s, 1 xu nh Hello C nhng kiu bin nh kiu : int (s nguyn), number (s thp phn) string (k t) Boolean ( kiu logic ng hoc sai) 2. 2 Cu lnh iu kin Cu lnh if trong ActionScript 3.0 cng ging nh trong nhiu ngn ng lp trnh khc
if (myValue==1) { Dosomething(); }
Du == so snh c bng hay khng. Bn c th dng cc k hiu so snh khc nh >, < , >=, <= 60
FlashCS4 Professional Bn c th dng else v else if m rng cu trc if

if (myValue == 1) { doSomething(); } else if (myValue == 2) { doSomethingElse(); } else { doNothing(); }
Bn c th c cc iu kin phc tp hn nh s dng ton t so snh && (v)hay || (hoc)
if ((myValue == 1) && (myString == This)) { doSomething();
u tin cc ton t ging vi cc ngn ng lp trnh khc
2.3 Vng lp Vng lp c thc hin vi khai bo for hoc while. Lnhfor gm 3 phn. Phn khai bo u, iu kin, s thay i khai bo. Nh v d di y ta s t bin i t 0, lp n khi nh hn 10, v tng gi tr i mi trong sut vng lp
for(var i:int=0;i<10;i++) { doSomething();
61
}
Bn c th dng lnh break thot khi vng lp bt c lc no Vng lp While n gin l vng lp tip tc mi chng no iu kin u cn c gp
var i:int = 0; while (i < 10) { i++; }
S bin i ca vng lp while l vng lp do. V bn cht l ging nhau ngoi tr cu lnh iu kin sau vng lp, m bo n c thc hin t nht mt ln
var i:int = 0; do { i++;
} while (i <10);
2.4 Function (Hm) Mun to hm trong ActionScript 3.0, bn cn ch ra hm, nhng tham s ca n v hm tr v ci g. Sau nh ngha hm bng nhng dng lnh bn trong n Vi cc hm trong mt class, bn phi xc nh n l hm public hay private hay protected hay internal. Hm private khng th c truy cp bn ngoi class . Hm protected ch c truy cp cc class l con ca class. Hm internal ch c php truy cp t cc hm trong cng mt package Sau l mt hm c bn trong mt class.
private function func(numb : Number, txt :String): Boolean { if (numb == 7) return true; if (txt.length < 3) return true;
62
return false; }
Mi v d u s tr v gi tr true nu numb ng bng 7 v di txt nh hn 3. Cn cc v d khc hm tr v false
63
Bi 2 : LP TRNH HNG I TNG
Mc tiu: N m c cac khai nim c ban : L p (Class), i tng (Object), Thuc tin h (attribute), phng th c (method).. Cc c im quan trng trong lp trnh hng i tng nh : tnh bao gi, tnh k th a, tnh a hnh .
2.1. Gii thiu Hng i tng (object orientation) cung cp mt kiu mi xy dng phn mm. Trong kiu mi ny, cc i tng (object) v cc lp (class) l nhng khi xy dng trong khi cc phng thc (method), thng ip (message), v s tha k (inheritance) cung cp cc c ch ch yu. Lp trnh hng i tng (OOP- Object-Oriented Programming) l mt cch t duy mi, tip cn hng i tng gii quyt vn bng my tnh. Thut ng OOP ngy cng tr nn thng dng trong lnh vc cng ngh thng tin. Khi nim 1
Lp trnh hng i tng (OOP) l mt phng php thit k v pht trin Phn mm da trn kin trc lp v i tng.
Nu bn cha bao gi s dng mt ngn ng OOP th trc tin bn nn nm vng cc khi nim ca OOP hn l vit cc chng trnh. Bn cn hiu c i tng (object) l g, lp (class) l g, chng c quan h vi nhau nh th no, v lm th no cc i tng trao i thng ip (message) vi nhau.
OOP l tp hp cc k thut quan trng m c th dng lm cho vic trin khai chng trnh hiu qu hn. Qu trnh tin ha ca OOP nh sau:
Lp trnh tuyn tnh Lp trnh c cu trc 64
FlashCS4 Professional S tru tng ha d liu Lp trnh hng i tng
2.2 i tng (object)
Cc i tng l cha kha hiu c k thut hng i tng. Bn c th nhn xung quanh v thy c nhiu i tng trong th gii thc nh: con ch, ci bn, quyn v, cy vit, tivi, xe hi ...Trong mt h thng hng i tng, mi th u l i tng. Mt bng tnh, mt trong bng tnh, mt biu , mt bng bo co, mt con s hay mt s in thoi, mt tp tin, mt th mc, mt my in, mt cu hoc mt t, thm ch mt k t, tt c chng l nhng v d ca mt i tng. R rng chng ta vit mt chng trnh hng i tng cng c ngha l chng ta ang xy dng mt m hnh ca mt vi b phn trong th gii thc. Tuy nhin cc i tng ny c th c biu din hay m hnh trn my tnh.
Mt i tng th gii thc l mt thc th c th m thng thng bn c th s, nhn thy hay cm nhn c. Tt c cc i tng trong th gii thc u c trng thi (state) v hnh ng (behaviour). V d: Trng thi Tn Mu Con ch Ging Vui sng Bnh rng Bn p Xe p Dy xch Bnh xe Hnh ng Sa Vy tai Chy n Tng tc Gim tc Chuyn bnh rng
Cc i tng phn mm (software object) c th c dng biu din cc i tng th gii thc. Chng c m hnh sau khi cc i tng th gii thc c c trng thi v hnh ng. Ging nh cc i tng th gii thc, cc i tng phn mm cng c th c trng thi v hnh ng. Mt i tng phn mm c bin (variable) hay trng thi (state) m thng c gi l thuc tnh (attribute; property) duy tr trng thi ca n v phng thc (method) thc hin cc hnh ng ca n. Thuc tnh l mt hng mc d liu c t tn bi mt nh danh (identifier) trong khi phng thc l mt 65
FlashCS4 Professional chc nng c kt hp vi i tng cha n.
OOP thng s dng hai thut ng m sau ny Java cng s dng l thuc tnh (attribute) v phng thc (method) c t tng ng cho trng thi (state) hay bin (variable) v hnh ng (behavior). Tuy nhin C++ li s dng hai thut ng d liu thnh vin (member data) v hm thnh vin (member function) thay cho cc thut ng ny.
Xt mt cch c bit, ch mt i tng ring r th chnh n khng hu dng. Mt chng trnh hng i tng thng gm c hai hay nhiu hn cc i tng phn mm tng tc ln nhau nh l s tng tc ca cc i tng trong trong th gii thc. Khi nim 2
i tng (Object) l mt thc th mm bao bc cc thuc tnh v cc phng thc lin quan
K t y, trong gio trnh ny chng ta s dng thut ng i tng (object) ch mt i tng phn mm. Hnh 3.1 l mt minh ha ca mt i tng phn mm:
Hnh 3.1
Mt i tng phn mm
Mi th m i tng phn mm bit (trng thi) v c th lm (hnh ng) c th hin qua cc thuc tnh v cc phng thc. Mt i tng phn mm m phng cho chic xe p s c cc thuc tnh xc nh cc trng thi ca chic xe p nh: tc ca n l 10 km trn gi, nhp bn p l 90 vng trn pht, v bnh rng hin ti l bnh rng th 5. Cc thuc tnh ny thng thng c xem nh thuc tnh th hin (instance attribute) bi v chng cha ng cc trng thi cho mt i tng xe p c th. Trong k thut hng i tng th mt i tng c th c gi l mt th hin (instance). Khi nim 3 66
Mt i tng c th gi l mt th hin ( instance)
Hnh 3.2 minh ha mt xe p c m hnh nh mt i tng phn mm: Hnh 3.2 i tng phn mm xe p
i tng xe p phn mm cng c cc phng thc thng li, tng nhp p hay l chuyn i bnh rng. N khng c phng thc thay i tc v tc ca xe p c th tnh ra t hai yu t s vng quay v bnh rng hin ti. Nhng phng thc ny thng thng c bit nh l cc phng thc th hin (instance method) bi v chng tc ng hay thay i trng thi ca mt i tng c th.
2.3 Lp (Class) Trong th gii thc thng thng c nhiu loi i tng cng loi. Chng hn chic xe p ca bn ch l mt trong hng t chic xe p trn th gii. Tng t, trong mt chng trnh hng i tng c th c nhiu i tng cng loi v chia s nhng c im chung. S dng thut ng hng i tng, chng ta c th ni rng chic xe p ca bn l mt th hin ca lp xe p. Cc xe p c mt vi trng thi chung (bnh rng hin ti, s vng quay hin ti, hai bnh xe) v cc hnh ng (chuyn bnh rng, gim tc). Tuy nhin, trng thi ca mi xe p l c lp v c th khc vi cc trng thi ca cc xe p khc. Trc khi to ra cc xe p, cc nh sn xut thng thit lp mt bng thit k (blueprint) m t cc c im v cc yu t c bn ca xe p. Sau hng lot xe p s c to ra t bn thit k ny. Khng hiu qu nu nh to ra mt bn thit k mi cho mi xe p c sn xut.
Trong phn mm hng i tng cng c th c nhiu i tng cng loi chia s nhng c im chung nh l: cc hnh ch nht, cc mu tin nhn vin, cc on phim, Ging nh l cc nh sn xut xe p, bn c th to ra mt bng thit k cho cc i tng ny. Mt bng thit k phn mm cho cc i tng c gi l lp (class).
67
FlashCS4 Professional Khi nim 4
Lp (class) l mt thit k (blueprint) hay mt mu ban u (prototype) nh ngha cc thuc tnh v cc phng thc chung cho tt c cc i tng ca cng mt loi no
Mt i tng l mt th hin c th ca mt lp. Tr li v d v xe p chng ta thy rng mt lp Xedap l mt bng thit k cho hng lot cc i tng xe p c to ra. Mi i tng xe p l mt th hin ca lp Xedap v trng thi ca n c th khc vi cc i tng xe p khc. V d mt xe p hin ti c th l bnh rng th 5 trong khi mt chic khc c th l bnh rng th 3. Lp Xedap s khai bo cc thuc tnh th hin cn thit cha ng bnh rng hin ti, s vng quay hin ti, .. cho mi i tng xe p. Lp Xedap cng khai bo v cung cp nhng thi cng cho cc phng thc th hin cho php ngi i xe p chuyn i bnh rng, phanh li, chuyn i s vng quay, .. nh Hnh 3.3. Hnh 3.3 Khai bo cho lp Xedap
Sau khi bn to ra lp xe p, bn c th to ra bt k i tng xe p no t lp ny. Khi bn to ra mt th hin ca lp, h thng cp pht b nh cho i tng v tt c cc thuc tnh th hin ca n. Mi th hin s c vng nh ring cho cc thuc tnh th hin ca n. Hnh 3.4 minh ha hai i tng xe p khc nhau c to ra t cng lp Xedap:
Hnh 3.4
Hai i tng ca lp Xedap
68
Ngoi cc thuc tnh th hin, cc lp c th nh ngha cc thuc tnh lp (class attribute). Mt thuc tnh lp cha ng cc thng tin m c chia s bi tt c cc th hin ca lp. V d, tt c xe p c cng s lng bnh rng. Trong trng hp ny, nh ngha mt thuc tnh th hin gi s lng bnh rng l khng hiu qu bi v tt c cc vng nh ca cc thuc tnh th hin ny u gi cng mt gi tr. Trong nhng trng hp nh th bn c th nh ngha mt thuc tnh lp cha ng s lng bnh rng ca xe p.Tt c cc th hin ca lp Xedap s chia thuc tnh ny. Mt lp cng c th khai bo cc phng thc lp (class methods). Bn c th triu gi mt phng thc lp trc tip t lp nhng ngc li bn phi triu gi cc phng thc th hin t mt th hin c th no . Hnh 3.5 Lp v th hin ca lp
Khi nim 5 Thuc tnh lp (class attribute) l mt hng mc d liu lin kt vi mt lp c th m khng lin kt vi cc th hin ca lp. N c nh ngha bn trong nh ngha lp v c chia s bi tt c cc th hin ca lp. Phng thc lp (class method) l mt phng thc c triu gi m khng tham kho ti bt k mt i tng no. Tt c cc phng thc lp nh hng n ton b lp ch khng nh hng n mt lp ring r no.
69
FlashCS4 Professional 2.4 Thuc tnh (Attribute) Cc thuc tnh trnh by trng thi ca i tng. Cc thuc tnh nm gi cc gi tr d liu trong mt i tng, chng nh ngha mt i tng c th. Khi nim 6
Thuc tnh (attribute) l d liu trnh by cc c im v mt i tng. Mt thuc tnh c th c gn mt gi tr ch sau khi mt i tng da trn lp y c to ra. Mt khi cc thuc tnh c gn gi tr chng m t mt i tng. Mi i tng ca mt lp phi c cng cc thuc tnh nhng gi tr ca cc thuc tnh th c th khc nhau. Mt thuc tnh ca i tng c th nhn cc gi tr khc nhau ti nhng thi im khc nhau. 2.5 Phng thc (Method) Cc phng thc thc thi cc hot ng ca i tng. Cc phng thc l nhn t lm thay i cc thuc tnh ca i tng. Khi nim 7
Phng thc (method) c lin quan ti nhng th m i tng c th lm. Mt phng thc p ng mt chc nng tc ng ln d liu ca i tng (thuc tnh). Cc phng thc xc nh cch thc hot ng ca mt i tng v c thc thi khi i tng c th c to ra.V d, cc hot ng chung ca mt i tng thuc lp Ch l sa, vy tai, chy, v n. Tuy nhin, ch khi mt i tng c th thuc lp Ch c to ra th cc phng thc sa, vy tai, chy, v n mi c thc thi. Cc phng thc mang li mt cch nhn khc v i tng. Khi bn nhn vo i tng Ca ra vo bn trong mi trng ca bn (mi trng th gii thc), mt cch n gin bn c th thy n l mt i tng bt ng khng c kh nng suy ngh. Trong tip cn hng i tng cho pht trin h thng, Ca ra vo c th c lin kt ti phng thc c gi s l c th c thc hin. V d, Ca ra vo c th m, n c th ng, n c th kha, hoc n c th m kha. Tt c cc phng thc ny gn kt vi i tng Ca ra vo v c thc hin bi Ca ra vo ch khng phi mt i tng no khc. V d
package { import flash.display.Sprite; public class Xedap extends Sprite {
70
public function Xedap() { var maxspeed; var xich; } public function start() : void { } public function end() : void { } } }
L p Xedap co thuc tin h la cac thong so maxspeed , xich va phng th c start, end
2.6 Thng ip (Message) Mt chng trnh hay ng dng ln thng cha nhiu i tng khc nhau. Cc i tng phn mm tng tc v giao tip vi nhau bng cch gi cc thng ip (message). Khi i tng A mun i tng B thc hin cc phng thc ca i tng B th i tng A gi mt thng ip ti i tng B. V d i tng ngi i xe p mun i tng xe p thc hin phng thc chuyn i bnh rng ca n th i tng ngi i xe p cn phi gi mt thng ip ti i tng xe p. i khi i tng nhn cn thng tin nhiu hn bit chnh xc thc hin cng vic g. V d khi bn chuyn bnh rng trn chic xe p ca bn th bn phi ch r bnh rng no m bn mun chuyn. Cc thng tin ny c truyn km theo thng ip v c gi l cc tham s (parameter). Mt thng ip gm c: i tng nhn thng ip Tn ca phng thc thc hin Cc tham s m phng thc cn 71
FlashCS4 Professional Khi nim 8
Mt thng ip (message) l mt li yu cu mt hot ng. Mt thng ip c truyn khi mt i tng triu gi mt hay nhiu phng thc ca i tng khc yu cu thng tin.
Khi mt i tng nhn c mt thng ip, n thc hin mt phng thc tng ng. V d i tng xe p nhn c thng ip l chuyn i bnh rng n s thc hin vic tm kim phng thc chuyn i bnh rng tng ng v thc hin theo yu cu ca thng ip m n nhn c. 2.7 Tnh bao gi (Encapsulation) Trong i tng xe p, gi tr ca cc thuc tnh c chuyn i bi cc phng thc. Phng thc changeGear() chuyn i gi tr ca thuc tnh currentGear. Thuc tnh speed c chuyn i bi phng thc changeGear() hoc changRpm(). Trong OOP th cc thuc tnh l trung tm, l ht nhn ca i tng. Cc phng thc bao quanh v che giu i ht nhn ca i tng t cc i tng khc trong chng trnh.Vic bao gi cc thuc tnh ca mt i tng bn trong s che ch ca cc phng thc ca n c gi l s ng gi (encapsulation) hay l ng gi d liu.
c tnh ng gi d liu l tng ca cc nh thit cc h thng hng i tng. Tuy nhin, vic p dng trong thc t th c th khng hon ton nh th. V nhng l do thc t m cc i tng i khi cn phi phi by ra mt vi thuc tnh ny v che giu i mt vi phng thc kia. Ty thuc vo cc ngn ng lp trnh hng i tng khc nhau, chng ta c cc iu khin cc truy xut d liu khc nhau. Khi nim 9 ng gi (encapsulation) l tin trnh che giu vic thc thi chi tit ca mt i tng. Mt i tng c mt giao din chung cho cc i tng khc s dng giao tip vi n. Do c tnh ng gi m cc chi tit nh: cc trng thi c lu tr nh th no hay cc hnh ng c thi cng ra sao c th c che giu i t cc i tng khc. iu ny c ngha l cc chi tit ring ca i tng c th c chuyn i m hon ton khng nh hng ti cc i tng khc c lin h vi n. V d, mt ngi i xe p khng cn bit chnh xc c ch chuyn bnh rng trn xe p thc s lm vic nh th no nhng vn c th s dng n. iu ny c gi l che giu thng tin. Khi nim 10 Che giu thng tin (information hiding) l vic n i cc chi tit ca thit k hay thi cng t cc i tng kh 72
2.8 Tnh tha k (Inheritance) H thng hng i tng cho php cc lp c nh ngha k tha t cc lp khc. V d, lp xe p leo ni v xe p ua l nhng lp con (subclass) ca lp xe p. Nh vy ta c th ni lp xe p l lp cha (superclass) ca lp xe p leo ni v xe p ua.
Khi nim 11 Tha k (inheritance) ngha l cc hnh ng (phng thc) v cc thuc tnh c nh ngha trong mt lp c th c tha k hoc c s dng li bi lp khc.
Khi nim 12 Lp cha (superclass) l lp c cc thuc tnh hay hnh ng c tha hng bi mt hay nhiu lp khc.
Lp con (subclass) l lp tha hng mt vi c tnh chung ca lp cha v thm vo nhng c tnh ring khc. Cc lp con tha k thuc tnh v hnh ng t lp cha ca chng. V d, mt xe p leo ni khng nhng c bnh rng, s vng quay trn pht v tc ging nh mi xe p khc m cn c thm mt vi loi bnh rng v th m n cn thm mt thuc tnh l gearRange (loi bnh rng). Cc lp con c th nh ngha li cc phng thc c tha k cung cp cc thi cng ring bit cho cc phng thc ny. V d, mt xe p leo ni s cn mt phng thc c bit chuyn i bnh rng. Cc lp con cung cp cc phin bn c bit ca cc lp cha m khng cn phi nh ngha li cc lp mi hon ton. y, m lp cha c th c s dng li nhiu ln. V d: mc trn ta c lp Xedap, trong vi du nay ta tao mt l p xe XedapDiaHinh k th a t l p xe ap, ta vi t 2 class nay trong cung package mc inh:
Package { Import flash.display.Sprite;
public class XedapDiaHinh extends Xedap{ public function leodoc():void{
73
} } }
L p XedapDiaHinh co u cac thuc tinh maxspeed , xich nh l p Xedap, c cc phng th c start , end ngoa i ra no co n co phng th c leodoc la phng th c ring chi l p con XedapDiaHinh co m lp cha khng co 2.9 Tnh a hnh (Polymorphism) Mt khi nim quan trng khc c lin quan mt thit vi truyn thng ip l a hnh (polymorphism). Vi a hnh, nu cng mt hnh ng (phng thc) ng dng cho cc i tng thuc cc lp khc nhau th c th a n nhng kt qu khc nhau.
Khi nim 13
a hnh (polymorphism) ngha l nhiu hnh thc, hnh ng cng tn c th c thc hin khc nhau i vi cc i tng cc lp khc nhau.
Chng ta hy xem xt cc i tng Ca S v Ca Ci. C hai i tng c mt hnh ng chung c th thc hin l ng. Nhng mt i tng Ca Ci thc hin hnh ng c th khc vi cch m mt i tng Ca S thc hin hnh ng . Ca Ci khp cnh ca li trong khi Ca S h cc thanh ca xung. Tht vy, hnh ng ng c th thc hin mt trong hai hnh thc khc nhau. Mt v d khc l hnh ng hin th. Ty thuc vo i tng tc ng, hnh ng y c th hin th mt chui, hoc v mt ng thng, hoc l hin th mt hnh.
a hnh c s lin quan ti vic truyn thng ip. i tng yu cu cn bit hnh ng no yu cu v yu cu t i tng no. Tuy nhin i tng yu cu khng cn lo lng v mt hnh ng c hon thnh nh th no.
V d: Ta co mt class Nguoi co phng th c: public function hocdixedap(xd:Xedap):void { xd.start(); 74
FlashCS4 Professional } Phng th c trn c truy n vao mt i t ng ki u Xedap , nhng do tin h a hin h . Mt i t ng ki u XedapDiaHinh cung la mt i tng ki u Xedap , nn ta co th c cch dng phng thc hocdixedap nh sau: Gi s ta c i tng ng kiu Nguoi
var xd : XedapDiaHinh = new XedapDiaHinh(); Ng.hocdixedap(xd);

.
75
Bi 3:
S KIN
Mc tiu bi hc: 1. 2. 3. nh ngha s kin. C ch lm vic ca s kin trong Flash. p dng s kin trong Flash
Nh ni v flash v as3, nu flash ph bin vi kh nng tr gip ngi dng trong thit k th sc mnh gip ngi dng c th tng tc vi chng trnh l AS. R rng, khi ngi dng mun thc hin mt vic no th h phi tc ng ln mt i tng ca chng trnh. Mi tc ng ca ngi dng (thng qua bn phm , chut, webcam, mic...) s to ra mt s kin trong dng s kin ca h thng. My o flash player s tm kim v xc nh s kin c thuc tnh nh th no v chuyn n hm x l s kin tng ng. Nh vy, c th thy, mun to ra mt chng trnh flash c tng tc th khng th khng bit ti Event. Trong bi ny chng ta s ni r v Event
3.1: S kin l g? Event l lp nm ngay di lp Object, l lp cha ca tt c cc lp khc. N l lp c bn to ra cc i tng Event, l bin truyn vo trong cc hm lng nghe s kin khi mt Event xy ra. Cc thuc tnh ca lp Event mang theo nhng thng tin c bn v mt Event, nh l kiu s kin hoc hnh ng mc nh ca s kin c th b hy b hay khng. Trong phn ln Event, nhng thng tin c bn ny l rt qua n trng. Mt vi loi s kin khc c th mang theo nhiu thng tin hn, v d: Mt s kin c pht ra khi click chut, n c th mang theo tham chiu ti i tng c click, v tr click (ta x v y)... Thm mt iu quan trng na, l mt i tng ch c th lng nghe s kin khi s kin do chnh n pht ra. Bn c th hi nh vy th s dng th no, phn tip theo s ni ti iu ny. 3.2: S dng s kin nh th no? Nh ni, mt i tng ch c th lng nghe mt s kin nu s kin do chnh n pht ra. iu ny m bo cho dng s kin khng b ri lan khi my o flash player tm kim i tng lng nghe. Hy xem mt v d n gin: to mt i tng bt k trong stage chnh ca chng trnh, t tn cho n l button, vit trong timeline ca n on code nh sau:
76
button.addEventListener(MouseEvent.CLICK, onClickHandler); function onClickHandler(e: MouseEvent): void { trace(bn va click vo button); }
Khi chy chng trnh, mi khi bn click vo i tng v th ti mn hnh output s xut hin dng ch bn va click vo button. Trong an code trn, chng ta s dng hm addEventListener(), hm ny c nh ngha trong class EventDispatcher, l anh em ca lp Event, class ny nh ngha ra cc quy tc mt s kin c pht ra. Hm addEventListener() nhn vo 2 tham s chnh l kiu Event, y l MouseEvent.CLICK v tham s th hai l hm c gi khi s kin sy ra, y, hm l onClickHandler(). Hm onClickHandler() nhn tham s lun lun l kiu s kin m t n c gi, trong v d trn, hm c gi khi s kin mouse click xy ra nn tham s m n nhn vo thuc kiu MouseClick. Dng y ca hm addEventListener :
public function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
Trc khi ni ti 3 tham s cn li, cn phi hiu qu trnh mt Event c x l. Khi c mt s kin xy ra, n tri qua 3 qu trnh ca lung s kin:
1. Giai on nm bt: s kin chuyn t pha trn cng ca danh sch th bc ti node ch trc node mc tiu. 2. Giai on mc tiu: y, i tng lng nghe s kin c xc nh, v cc gi tr m s kin mang theo c kho st 3. Giai on ni bt. Ti 3 qu trnh ny, tt c thuc tnh ca s kin c kho st v a vo lung s kin h thng, ng thi c gi ti hm x l n. Quay tr li cc tham s cn li trong hm addEventListener:
77
FlashCS4 Professional 1. useCapture: gi tr, mc inh l fasle, nu n l true, s kin s c x l ngay trong qu trnh nm bt ca lung s kin. Hy nh rng, ti giai on nm bt, node mc tiu cha c x l nn hm bt s kin s khng c gi. 2. priority: mc nh l 0, n cho bit u tin ca 1 s kin nu cng mt lc xy ra nhiu s kin, nu tham s ny cng ln th s kin c u tin cng cao 3. useWeakReference: tham s ny quyt nh nhng tham chiu ti vic lng nghe s kin ny l mnh hay yu, mc nh l false, c Ngha l mnh. Nu useWeakReference = false, n s ngn nga vic cc tham chiu b xa b bi b dn rc. Trong thc t, 3 tham s trn khng thng c s dng nn cc bn cng ch cn quan tm ti 2 tham s bt buc l type v listener m thi.
Ti y, bn c th t cu hi, c th khi to mt i tng n lng nghe mt s kin th c th hy b iu khng, cu tr li l c, s dng hm removeEventListener lm vic ny, vi cc tham s ging vi nhng g bn s dng trong hm addEventListener().
3.3: Cn ch nhng g khi lm vic vi Event? Nhng cu hi thng gp nht bn u c th c gii quyt khi c help ca flash. Tuy th ti xin a ra y mt s ch quan trng: 1. Mi i tng ch c th nghe c mt s loi Event (khng k nhng loi do ngi dng t nh ngha), tt c u c lit k trong c t ca lp m i tng thuc v. Nn c k nhng c t ny trc khi lm vic. 2. Mt i tng pht ra c Event no th c th v ch c th nghe c Event . Thm ch, nu 2 i tng thuc cng 1 class cng khng th nghe c s kin do i tng kia pht ra 3. Nh removeEventListener() sau khi s dng, gim b nh m chng trnh chim dng. 4. Khng nn mt i tng lng nghe qu nhiu Event nu bn cha thc s hiu r v chng. S tht, iu ny lm chng trnh ca bn chy khng n nh. 5. Hy t to cho mnh nhng Event ring, iu ny rt tt v nh vy bn c th kt hp nhiu Event c sn to c 1 Event ring, n gii quyt c vn m mc 4 nu ra. 3.4: Bn vn cn thc mc ch? Ti y chc bn phn no hiu c v Event. Ti xin c a ra mt v d c th cho cc ch nu trn Bc 1: To mt file flash mi t tn l EventExample.fla, lu li. Chng ta khng cn v g trong file ny c, tm ti mn hnh properties ca stage chnh, vit tn document class l Main.
78
FlashCS4 Professional Bc 2: To mt file mi c tn Main.as, lu vo cng th mc vi file to trong bc 1. Gi tr li vi file EventExample.fla, ta m ca s properties ra, click vo hnh cy bt ch cnh nhp tn document class, file Main.as s c m ra trong 1 tab mi. Chng ta cha lm g vi vi file ny Bc 3: To mt file mi c tn NewEvent.as t trong cng th mc vi 2 file to trn, m file ny ra v vit code cho n nh sau:
package { import flash.events.*; public class NewEvent extends Event { public static var NEW_EVENT : String = "new event"; public var index: Number = new Number(); public function NewEvent(type:String,index:int, bubbles:Boolean=false, cancelable:Boolean=false) { super(type, bubbles, cancelable); this.index = index; } override public function clone():Event { return new NewEvent(type, this.index, bubbles, cancelable); } } }
on code trn m t mt class c tha k t Event, n c mt thuc tnh l NEW_EVENT thuc kiu string v c dng static. iu ny c ngha l chng ta c th truy nhp vo thuc tnh ny m khng cn khi to mt i tng mi thuc kiu NewEvent, v thuc tnh ny s tr thnh mt Event thuc kiu NewEvent, n ging vi cc t kha khi ta s dng kiu MouseEvent l CLICK hay MOUSE_UP... Bin th 2 l index c kiu Number (kiu s tng qut), bin ny lu mt gi tr m Event phi mang theo khi n c pht ra. Constructor ca class ny truyn vo 4 tham s:
1. Tham s th nht l type, c th thy trong MouseEvent, chng ta c cc kiu nh: CLICK, DOUBLE_CLICK, MOUSE_OUT, MOUSE_OVER..... l nhng kiu event c khai bo l cc hng static (cc bin kiu static c th s dng m khng cn khai bo i tng, trong on code trn kiu c khai bo l public static var NEW_EVENT : String = "new event";) 2. Tham s th 2 l index, nh ni trn, y l gi tr m Event s mang theo khi n c pht ra, m trc khi c pht ra th n phi c khi to v truyn vo mt index. 79
3. Tham s th 3 l bubbles, nh ni, khi mt Event xy ra, n tri qua 3 giai on, nu mt Event khng cn ti giai on Bubbles th thuc tnh bubbles ca n s c gi tr false, thng thng, tham s ny l mc nh false, ta khng cn phi quan tm 4. Tham s cui cng l cancelable, sau khi c khi to, n tr thnh thuc tnh read only, n cho bit rng mt Event xy ra c th hy b c nhng hnh ng mc nh ca n khng. V d, khi ta nhp k t vo mt text, s kin TextEvent.TEXT_INPUT xy ra mi ln ta n phm, hnh ng mc nh ca n l hin th phm ta va n (nu c). Ta hon ton c th s dng hm preventDefault() thay i s kin mc nh do s kin TextEvent.TEXT_INPUT c thuc tnh cancelable l true. Sau khi nhn 4 tham s trn, constructor gi hm khi to ca cha n l Event, ri gn gi tr index c truyn vo cho thuc tnh index ca n. Sau khi khi to mt Event, pht ra c Event th chng ta cn gi ti hm dispatchEvent(e: Event), hm ny lm nhim v a mt Event vo lung s kin ca h thng. Mt khc n cng gi ti mt hm c nh ngha trong Class Event, l clone(). Hm ny tr v mt i tng Event. Thng thng chng ta thng mun tr v chnh xc kiu Event chng ta to ra nn hm clone() c vit li (nh trn)
Bc 4: To ra mt file mi lm i tng pht ra Event ti th mc lu chng trnh. File mi c tn l Rect.as, code ca n nh sau:
package { import flash.display.MovieClip; import flash.display.Sprite; import flash.events.*; public class Rect extends MovieClip { private var index: int = new int(); private var mySprite: Sprite = new Sprite(); public function Rect(ind: int): void { this.index = ind; this.addEventListener(MouseEvent.CLICK, onClickHandler); mySprite.graphics.beginFill(0x001177, 1); mySprite.graphics.drawRect(0, 0, 50, 50); mySprite.graphics.endFill(); this.addChild(mySprite); }
80
private function onClickHandler(e: MouseEvent): void { var evt: NewEvent = new NewEvent(NewEvent.NEW_EVENT, this.index, false, false); dispatchEvent(evt); } } }
Class ny nhm to ra mt i tng hnh vung, c thuc tnh l indexri cho n lng nghe s kin click, mi khi s gi ra hm onClickHandler(e: MouseEvent). Hm ny lm nhim v sinh ra mt i tng Event thuc kiu NewEvent m ta to ra trong bc 3 ri pht n ra, mang theo thuc tnh index ca bn thn, bn nn nh thuc tnh ny l private v cng khng c hm set/get no khc, v l thuyt khng th ly c gi tr ny ca mi i tng Rect.
Bc 5: Quay tr li hm class Main to ra trong bc 2, ta vit code cho n nh sau:
package { import import import import
flash.display.Sprite; flash.geom.Rectangle; flash.text.TextField; flash.text.TextFormat;
public class Main extends Sprite { private var txt: TextField = new TextField(); private var arr: Array = new Array(); public function Main(): void { this.addChild(txt); txt.x = 100; txt.y = 100; txt.width = 400; var i:int = new int(); for (i = 1; i <= 10; i++) { var rect: Rect = new Rect(i); arr.push(rect); } for (i = 0; i < arr.length; i++) { Rect(arr[i]).addEventListener(NewEvent.NEW_EVENT, displayIndex); this.addChild(arr[i]); this.arr[i].x = (i * 80); }
81
} private function displayIndex (e: NewEvent): void { var format: TextFormat = new TextFormat("Tahoma", 20, 0xff1111); this.txt.text = "Bn click vo hnh vung th " + (e.index).toString(); this.txt.setTextFormat(format); } } }
Hm ny lm nhim v khi sinh ra 10 i tng Rect, c index chy t 1 => 10, add n ln mn hnh. ng thi to ra mt text field hin th. Bn hy ch lnh
Rect(arr[i]).addEventListener(NewEvent.NEW_EVENT, displayIndex);
Lnh ny khai ng k mi i tng thuc kiu Rect lng nghe s kin

NewEvent.NEW_EVENT. Hm c gi khi s kin ny xy ra l displayIndex(e: NewEvent), c danh sch bin ging vi vic bn s dng nhng Event thng thng khc. Mt ln na ch ti lnh this.txt.text = "Bn click vo hnh vung th " + (e.index).toString();
Hm ny s a dng ch bn click vo hnh vung th i vi i = (e.index).toString(); y e l bin thuc kiu NewEvent, n chnh l i tng c pht ra t hm dispatchEvent() trong class Rect. D thy, mi ln bn click vo mt hnh vung, mt s kin NewEvent c pht ra, khi text field s hin th index ca i tng c click. Di y l nhng g bn s thy:
82
Ti click vo hnh vung th 3 v dng ch Bn click vo hnh vung th 3 xut hin. Vy l, tuy thuc tnh index ca mi i tng thuc kiu Rect l private, nhng chng ta vn c th ly c n t class Main.
Ti y, bn c l s thy, v d ny cha p ng c nhng g nu ra trong mc 3.3, vy th hy th thay i mt s th coi. u tin thay dng
Rect(arr[i]).addEventListener(NewEvent.NEW_EVENT, displayIndex);
Bng:
if(i<arr.length-1) Rect(arr[i]).addEventListener(NewEvent.NEW_EVENT, displayIndex);
C ngha l hinh vung th 10 khng lng nghe s kin nh cc hnh khc. Nhng bn than n vn t nghe s kin click v pht ra s kin NewEvent.NEW_EVENT. Vn l khng h c dng ch no hin ra c. Cu hi t ra: ti sao tt c 9 i tng cn li u lng nghe NewEvent.NEW_EVENT, i tng th 10 pht ra s kin ny nhng khng t nghe, ti sao cc i tng khc khng nghe v hin th thng tin index ca i tng s 10 kia. Cu tr li ng nh nhng g mc 3.3.1 v 3.3.2 nu ra. Tip na, gi s mi i tng Rect khng ch phi nghe s kin click m cn phi nghe mt vi s kin khc. R rang rng nu x l iu hm Main th s rt tn cng. Thay v th ta x l vic kim tra cc s kin khc xy ra cha, nu ri th pht ra Event hm Main nhn v x l. iu ny gii quyt nhng g m mc 3.3.3 v 3.3.5 a ra. Vic removeEventListener khng c nu ra v d trong trng hp ny, tuy th y l mt ch khng km phn quan trng. Cc bn hy tham kho bi 1 chng 4 v code trn timeline, trong c s dng ti hm , hy c k v th thay i khng s dng lnh na, bn s thy mt s bt n. Trc khi kt thc, cm n v bn theo di ti y.
83
Chng 4: GII THIU V FLEX FRAMEWORK
Gii Thiu: ng nh tn gi Flex l mt Framework (khung lp trnh) h tr lp trnh vin vit cc ng dng da trn SWF (SWF-Based Application), cc ng dng ny chy trn Flash Player t phin bn 9 tr ln, hin ti phin bn mi nht l phin bn 10. Cng nh .NET Framework v Java, Flex Framework tch hp sn cc Component (nh Button, Panel, Container, List, Link Button, Box,..) vit ng dng. Cc ng dng mi ny c tn l RIA (Rich Internet Applicaton) , l xu th mi nht v vit ng dng hay vit phn mm, trong khun kh bi vit ti s ch ni s qua RIA l g. Mt cc d hiu , RIA l cc ng dng chy trn Internet nhng li mang y sc mnh ca cc ng dng chy trn Desktop truyn thng. c th l cc ng dng son tho vn bn , to slide , chnh sa v chia s nh trc tuyn. Cc ng dng ny c 2 trng thi lm vic, mt l offline v online. Ni n y c th cc bn c th cn kh m h v RIA, hy bt u bng vic truy cp vo trang Acobat.com hay PhotoshopExpress.com , SlideRocket.com th dng cc ng dng ny c c hnh dung v RIA. Sau hy cng ti tm hiu v Flex hc cch vit cc ng dng RIA. tng v s ra i ca Flex l do, mi trng ca Flash h tr rt km cho vic code, khin cc Developer nhng ngi khng c kin thc v Design gp rt nhiu kh khn trong vic vit ng dng cng nh to cc Animation Script trn nn Flash (Flash Platform).Vi nhc im ny ca Flash, Adobe tung ra Adobe Flex, vi mc ch h tr tt hn cho cc Developer, gip h vit c cc ng dng mt cch nhanh nht , to cc Animation hon ton bng code. ng thi vi phin bn mi nht hin s pht hnh vo cui nm 2009 , Adobe Flex 4 (tn m l Gumbo) ha hn s to ra mt mi trng pht trin ng dng hon ha cho c Designer v Developer. Bn hy hnh dung mt bi cnh nh sau, cc Designer s thit k bng Adobe Photoshop hay iLLustrator hay FireWork hay Flash, tt c cc nt v ca h s c gi nguyn khi bn import vo Adobe Flex 4.V nhim v ca chng ta, nhng ngi Developer s to cc chc nng, x l , kt ni d liu, hiu ng, v hin thc ha tng ca cc Designer trong ng dng . Trong chng ny chng ta s hc c cc cch sau: Ci t Flex Builder 3 for Window, MAC. 1. 2. 3. 4. Lm quen mi giao din s dng ca Flex Builder. S dng MXML + AS3 c bn trong Flex Builder 3. Nhng c im ng ch ca MXML. Lm quen vi cc Component c bn ca Flex Framework.
84
Bi 1:
CI T FLEX BUILDER 3
Mc tiu bi hc: 1. 2. Gii thiu Flex Builder 3. Ci t Flex Builder 3
Nu mt trong s cc bn tng vit Java, lc bt u h s dy cch chy cc don code java bng lnh trong Command Promp (Start->Run, g cmd r Enter). son code java bn c th dng Notepad (Start->Run, g Notepad, Enter) son tho.Mun dch mt file java bn phi g lnh, gi s ti c mt file tn l Hello.java trog th mc D:/Java, mun dch file ny chy ti g lnh C:/javac D:/Java/Hello.java . B Java SDK (Software Development Kit) s t ng dch file ny, tuy nhin nu chng trnh bn c li, s rt kh c th tm ra li (debug) ca on code u. May mn thay, nh c cc trnh son tha v bin dch (IDE Intergrated Development Environment) hin i, s gip ta son tho, dch cng nh sa li chng trnh d dng v thun tin hn rt nhiu.
Tng t Flex cng vy, bn c th dng Notepad son tho v dng lnh trong Command Promp dch, hoc dng Flex Builder 3 l mt IDE gip bn son code nhanh chng v d dng. Adobe Flex Builder 3 vit trn nn Eclipse IDE l mt IDE m m vit bng Java, Adobe thng mi ha Flex Builder 3, n c 2 phin bn l Stand Alone (chy c lp) v Plug-in cho Eclipse. Bn dng bn no cng c , tuy nhin cc v d s c dng bng Flex Builder 3. Flex Builder l bn thng mi nhng nu cc bn l sinh vin th c th ng k vi Adobe nhn c key ginh cho sinh vin, hon ton min ph.(cung cp link). Vi kin c nhn ti khuyn bn nn dng Flex Builder 3 trc, sau dng Plug-in cho Eclipse sau.
Mt tin mng na l Flex SDK v ang hng ti Open-Source (m ngun m) , iu ny rt c ch v cc bn c th kim c cc on code qu v hay, gip nng cao kh nng code ca mnh.Cc bn c th vo trang opensource.adobe.com hoc labs.adobe.com tm nhng d n m m mi nht do Adobe cung cp. tm cc v d (sample) v Flex bn c th vo trang Adobe.com/devnet/flex chn tab Sample, cc samples ny u cung cp code cho bn. chy c n cc bn phi ci Flash Player m cht na ti s hng dn bn ci t. ly c code ca cc v d, khi ang chy bn n chut phi ri chn ViewSource.
85
No, trc tin hy download Flex Builder 3. u tin bn vo trang http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexbuilder3 ,
Chn h iu hnh m bn s dng. Bn thng mi hin ti ch c cho Window v MAC. Nu bn dng Linux th vo y down http://labs.adobe.com/technologies/flex/flexbuilder_linux/ .
86
Bn cho Linux l bn free nn n b lc b mt s tnh nng nh ko h tr mn hnh design giao din, v bn ny l bn Plug-in nn bn phi down Elipse-IDE ( bt buc phi l phin bn Elipse 3.3.x) . Bi hng dn tri tit ci Flex trong Linux s cui ti liu.
Sau khi download Flex Builder 3 v, bn ci t nh bnh thng
87
Chn OK
Next
88
Accept the terms,ri n Next
Chn ng dn ri n Next
89
Chn ht cc la chn ri n Next
n install bt u ci t. Khi bn khi ng ln u tin , Flex Builder s hi bn chn Workspace (khng gian lm vc) n hot ng, bn c th nhn OK lun chn mc nh, hoc chn bt k mt Folder trong my ca bn lm Workspace ri nhn OK.
90
V y l mn hnh ca Flex Builder 3 khi bn chy ln u tin.
Tips : Mc nh Flash Player m Flex Builder 3 ci l phin bn 9.x.x, v cha ci Flash Player Debug Version, bn phi vo trang ch Adobe.com down bn Flash Player mi nht (bn 10.x.x). Down v ri ci nh bnh thng.
91
Ri vo y download bn Debug (gip pht hin li khi chy chng trnh). http://www.adobe.com/support/flashplayer/downloads.html
Download bn dnh cho IE (Internet Explorer) v Firefox ( hoc Netscape). Download v ci t nh bnh thng. Ch l bn Flash Player 10 - Debugger Version.
92
Bi 2:
S DNG FLEX BUILDER 3

Mc tiu bi hc: 1. 2. Thit k giao din trong Flex Builder 3. S dng Flex Builder 3 vit code.
I.Lm quen vi giao din ca Flex Builder 3
1.Source View
Trn cng l cc menu iu khin. Khung c t mu l khung cha cu trc cc Folder trong Project ca bn. Khung t mu xanh l khung Outline, tc l n s tm tt cho bn bit on code bn ang vit c nhng Component no, iu ny rt c li khi bn c code ca ai m mun c ci nhn tng quan v code ca h. 93
Khung t mu hng l mn hnh Editor bn son code , mt cht khi nhn ln trn cng bn tri ca mn hnh Editor bn thy n 2 ch l Source v Design. Khi bn vit code th bn chuyn sang ch code, khi mun Design giao din th bn chuyn sang mn hnh Design.-Khung da cam trn cng l ni bn chn cc ch lm vic ca Flex Builder 3, c 3 ch lm vic cho bn khi pht trin ng dng. +Flex Development : Ch mc nh ca Flex Builder, l ch bn vit code, design giao din, hiu ng. +Flex Debugging : Ch Debug( d li) , vit xong nu chy thy c li, bn s c hi c mun chuyn sang ch Debug hay khng, tm li ca ng dng. khi ng ch ny bn chn Run Debug. +Flex Profiling : Ch qun l b nh ca ng dng, khi trong ch ny bn s bit ng dng m mnh bit dng ht bao nhiu b nh ca my tnh. khi ng ch ny bn chn Run Profile 2.Design View -Khi bn nhn va tab Design trong mn hnh Editor, Flex Builder s chuyn sang ch Design, l ni bn ko th cc Componet nh Button, Panel, Text Area,.. va ng dng ca mnh s dng, khi ko th th Flex Builder s t sinh code thm cc component khi bn chuyn li sang c Source View.
94
FlashCS4 Professional Khung mu hng l ca s cha cc Component m Flex Builder h tr. Khung mu xanh l l mn hnh Design chnh. Khung mu xanh m l khung cha cc thuc tnh (Properties) ca Component m bn va ko th vo.Cc thuc tnh ny c th l Tn, ID,kch thc, to ,.. Khung mu hng l ca s State, cho php bn Design cc trng thi (state) ca ng dng, phn s dng state s c ni r cc bi sau. 3.Vit chng trnh Hello World. Vic u tin khi bn vit mt ng dng bng Flex Builder hay bt c trnh son tho hin i no l to mt Project mi. Vo File New Flex Project.
Trong Project nam t tn cho Project ca bn, ti t tn l HelloWorld. Trong phn Project Location, bn chn ni Project ca bn, bn c th chn mc nh theo Flex Builder hoc l link n bt k mt Folder no trong my bn, v d D:/Flex Working/ HelloWorld. Trong phn Application Type chn Web Application (runs in Flash Player), phn Desktop Application s ni cc bi sau. 95
FlashCS4 Professional Trong phn Application server type chn none, ri Click Next.
Output Folder l ni cc file c Flex Builder dch t code ca bn ra s c a vo y, tuy nhin cc file ny vn cha cc thng tin Flex Builder debug n cha phi l file chy hon ton. Mc nh c a n th mc bin-debug, bn s thy th mc ny trong Project ca bn. Click Next.
96
FlashCS4 Professional Trong Main Application File, tc l file chnh ca ng dng ca bn, file ny s c dch u tin khi Flex Builder bt u dch ng dng m bn vit. Bn c th i tn thnh Main.mxml hoc mc nh theo Project. Trng hp ca ti ti s i li thnh Main.mxml. Click Finish hon tt.
Sau khi Finish , mn hnh ca Flex Builder s hin th nh sau: Nhn vo cu trc cc Folder trong Project ca bn bn c th thy, th mc bin-debug c t ng thm va, v file chnh Main.mxml trong Folder src m ny ti i tn t HelloWorld.mxml thnh Main.mxml. Mc nh Flex ang ch Source View , bn phi l mn hnh son tho code, bn nhp on code sau vo. Bn cha cn phi hiu cu trc code nh no, ti s ni vi bn ngay trong bi sau thi.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Label x="176" y="126" text="Hello World" fontSize="20"/> </mx:Application>
n Ctrl+S save li ri vo Run Run Main chy ng dng. Hoc nhn nt
97
98
Bi 2: MXML v Action Script 3.0 trong Flex Builder 3

Mc tiu bi hc: 1. 2. MXML trong Flex Buider 3.0 Action Script 3.0 trong Flex Builder 3.0
I.Vai Tr ca MXML v ActionScript 3.0
Hai thnh phn c bn ca Flex Framework l MXML (Magic eXtensible Markup Language , ch M cng c th l Macromedia hoc Maximum) v ActionScript 3.0 . MXML c gii thiu ln u tin do cng ty Macromedia m nay l Adobe vo thng 3 nm 2002. MXML l mt ngn ng da trn c php ca XML (XML-Based Vocabulary) , n cho php cc Developers c th trnh by c giao din ngi dng (GUI Graphic User Interface) mt cch d dng, ng thi cng cho php cc Designer nhng ngi khng c kin thc v lp trnh cng c th hiu c cc giao din ny. MXML gm cc th (Tags) hay cc thnh phn (elements) tng ng vi ActionScript 3.0 Class. Cc Tags ny s c dch thnh m ActionScript khi m mt file SWF c to. Cc thuc tnh (attributes) trong Tags tng ng vi cc thuc tnh (properties) v cc phng thc (methods) ca ActionScript Class.
MXML din t mi th trong chng trnh ca bn, t cc thnh phn ca GUI (Graphic User Interface) , n cc Visual Layout (nh Panel, Vertical-Box, Horizontal-Box), Effect (hiu ng), Data Connection (kt ni d liu). Ngi lp trnh c th a cc thnh phn ny ln ng dng ca mnh bng cch khai bo trong MXML hoc ActionScript hoc MXML + ActionScript (cch ny hay dng nht) . Ngoi vic khai bo lp trnh vin c th ko th cc thnh phn ny trong mn hnh Design View a Flex Builder.
1.Hiu r v MXML
Vi tr ca MXML trong mt Flex Application cng ging nh vai tr ca HTML hay XHTML trong mt trang Web. C hai u l ngn ng nh giu (Markup Language) din t giao din ngi dng (GUI) .V MXML da trn c php ca XML nn n phi tun theo lut ca XML . Mt ti liu MXML phi l mt dng chun (Well-Formed) ca XML, gm cc yu cu sau: 99
+Mt ti liu MXML c th cha mt hay nhiu tags hay l node +Mt ti liu MXML ch c th cha mt th gc (root tag), thng l <mx:Application> hoc l <mx:WindowApplication> , cc th khc c khai bo nm trong th ny. +Mi node phi c th ng v th m <sample> </sample> hoc <sample/> +Cc node con phi nm gia th m v th ng ca node cha. +Gi tr cc thuc tnh phi c cha trong du nhy n ( ' ' ) hoc l nhy kp ( ).
Tt c cc ti liu MXML u bt u bng on khai bo sau :

<?xml version=1.0 encoding=UTF-8 ?>
Node gc ca mt ti liu thng l <mx:Application>, bn c th s dng cc thnh phn khc lm node gc v d <mx:Panel>, s khc bit y l , ti liu MXML no cha th <mx:Application> s c dch u tin khi bn dch mt ng dng. c im ca node gc l n miu t thnh phn l ci cha (container) cc thnh phn cn li, v d:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel/> <mx:Button/> </mx:Application>
Hoc
<?xml version="1.0" encoding="utf-8"?> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Label text=Hello/>
100
<mx:Button label=Click Me!/> </mx:Panel>
Bn c th thy mi node gc u cha mt tham chiu n namespace xmlns:mx="http://www.adobe.com/2006/mxml" . (ch l xmlns vit tt ca XML Namespace). Namespace tham chiu n mt URI (Uniform Resource Identifier) , ch khng phi l tham chiu n trang web ti a tr hay URL. Thay v , ta s dng mt URI c nht cung cp s tham chiu , tham chiu ny ni rng tt c cc tags m cng s dng mt tin t (trong trng hp ny l mx:) n t cng mt XML Vocabulary. hiu r ngha ca namespace bn nn tham kho cc ti liuTing Anh hoc tra Wiki, bi din t n bng Ting Vit rt kh.
S tng tc gia MXML vi ActionScript kh l d hiu, ta s tm hiu qua on code sau y:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Button id=myBtn label=Click Me!/> </mx:Application>
on MXML trn to ra mt giao din kh n gin, ch c mt Button, on code s to ra mt i tng ca Button ActionScript 3.0 Class qua th <mx:Button> ng thi cng to ra id v label ca i tng Button. Khi dch , Flex s sinh tng ng cc th vi cc ActionScript 3.0 Class, sau trnh Compiler s dch cc ActionScript 3.0 Class ny thnh bytes code c cha trong file SWF. 2.ActionScript 3.0 trong Flex Framework Cc bn c lm quen vi ngn ng ActionScript 3.0 trong Flash , tuy nhin mt s Class c vit li trong Flex Framework s khng th s dng trong Flash. Flex Framework k tha cc thnh phn c trong Flash v vit thm cc thnh phn khc , l nguyn nhn Flash ko dng c cc thnh phn c trong Flex. Cn Flex th dng c ton b nhng thnh phn c trong Flash, tuy nhin l thuyt l th , cn thc hin s tch hp Flash vo Flex s phi cu hnh thm mt vi thnh phn , v ti s ginh hn mt bi ni v vn ny.
3.S dng ActionScript 3.0 v MXML trong Flex Builder 3 101
Sau y chng ta s vit mt vi v d s dng MXML v ActionScript 3.0 .
To mt Project mi v t tn l ASWithMXML , chn Web Application (Run on Flash Player) , click Finish.
Thm on code sau vo :
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Button id="myButton" label="Click Me!" click="clickHandler(event)"/> <mx:TextArea id="outPut"/> </mx:Application>
102
FlashCS4 Professional Lu thay i thuc tnh layout=vertical , iu ny c ngha chng trnh s layout (trnh by) cc Componet gia mn hnh v theo chiu t trn xung. Tip theo ta to ra mt Button, t id c th s dng trong ActionScript v label l Click Me! , khi click vo button th ta s gi hm clickHandler tham s truyn cho hm ny l mt event (s kin), hm ny s c vit v X l trong ActionScript. Tip theo ta to mt TextArea hin th text ra ngoi mn hnh, t id l outPut . C th bn s thc mc id c tc dng g trang cc th ny , th Button ta t id l myButton , iu ny tng ng vi on code sau trong ActionScript :
public var myButton : Button = new Button().
c im khi t tn cho id l tn ny phi l duy nht. Tip theo ta thm th <mx:Script> ngay di th gc <mx:Application> , Flex Builder c mt b gi rt tt , khi bn g <mx:Script , ri g thm du > vo , b gi (code hint) s t ng sinh ra on m sau cho bn , nu khng thy xut hin bn n t hp phm Ctrl + Space. Kt qu nh sau:
<mx:Script> <![CDATA[
]]> </mx:Script>
Sau ta s vit hm clickHandler() x l s kin click vo Button.

<mx:Script> <![CDATA[ private function clickHandler(e:MouseEvent):void { outPut.text += " My Button is Clicked!" +"\n"; } ]]> </mx:Script>
on code trn s x l khi click vo Button, ta s gi hm clickHandler , trong hm ny ta s gn cho thuc tnh text ca TextArea (c id l outPut) gi tr nh trn. Vi ch l \n l k t xung dng. Tham s truyn vo l e c kiu l MouseEvent
103
FlashCS4 Professional Sau y l ton b code ca v d va ri.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Script> <![CDATA[ private function clickHandler(e:MouseEvent):void { outPut.text += " My Button is Clicked!" +"\n"; } ]]> </mx:Script> <mx:Button id="myButton" label="Click Me!" click="clickHandler(event)"/> <mx:TextArea id="outPut" width="400" height="300"/> </mx:Application>
Lu l ti thm thuc tnh width v height cho TextArea. Chn Run Run ASWithMXML, mn hnh ca bn s nh sau:
104
Bi 4: MXML nng cao

Mc tiu bi hc: 1. 2. Qun l d liu trong MXML Qun l s kin trong MXML
Data Binding
y l mt tnh nng mi trong cc ngn ng hin i hin nay. Bn hy tm hiu k hiu r tnh nng mi ny, v n s rt hay c s dng khi bn vit ng dng. Data Binding cho php bn bind mt thuc tnh ca mt component n mt thuc tnh ca mt component khc, vi ch l 2 thuc tnh ny phi cng kiu.Hiu mt cch n gin Data Binding cho php ta to ra mt mi quan h gia 2 thuc tnh ca 2 component , mt component gi l source, mt component gi l destination v 2 thuc tnh phi c cng kiu , bt c khi no thuc tnh ca source thay i th thuc tnh m ta bind cho destination cng ngay lp tc thay i theo. Ly v d n gin nh sau, mt giao din c mt TextInput ( nhp liu) v mt TextArea ( hin th text), ta s code khi ngi dng nh vo TextInput th ni dung TextArea cng s hin th theo. nh n u hin th n y.
Ta mt Project mi t tn l DataBinding, nhp on code sau va :
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:TextInput id="input"/> <mx:TextArea id="output" text="{input.text}"/> </mx:Application>
Bn thy ti bind thuc tnh text ca TextInput (c id l input) cho thuc tnh text ca TextArea (c id l output) , 2 thuc tnh ny u c cng kiu l String nn Flex Builder s ko bo li. 105
FlashCS4 Professional Ta bind bng 2 du { v } , y l cch bind n gin nht trong Flex. Chy ng dng kim tra.Bn nhp text vo TextInput, ni dung bn va g s ngay lp tc c hin th TextArea.
Ti xin nhc li cch hiu DataBinding n gin nht l, khi thuc tnh ca source thay i th thuc tnh c bind ca destination ngay lp tc thay i theo. Vi ch 2 thuc tnh bind cho nhau phi cng kiu. Sau y l mt vi tricks khi lm vic vi dataBinding, s dng cch n gin nht l 2 du { v }. S dng php ton trong dataBinding
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:TextInput id="source"/> <mx:TextArea id="destination" text="{Number(source.text)*100}"/> </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:TextInput id="source"/>
106
<mx:TextArea id="destination" text="source's text you've entered is {source.text}"/> </mx:Application>
Cc php iu kin
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:CheckBox id="source" label="Tick me!"/> <mx:TextArea id="destination" text="{(source.selected) ? 'bn Tick' : 'bn cha Tick'}"/> </mx:Application>
S dng hm ca
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Script> <![CDATA[ private function xemdiem(truong:String):String { if (truong=="Bch Khoa H Ni") return "24"; else if(truong=="Kinh T Quc Dn") return "25"; else if (truong=="M Thut Cng Nghip") return "22"; return "cha cp nht"; } ]]> </mx:Script>
107
<mx:ComboBox id="source"> <mx:dataProvider> <mx:String>Bch Khoa H Ni</mx:String> <mx:String>Kinh T Quc Dn</mx:String> <mx:String>M Thut Cng Nghip</mx:String> </mx:dataProvider> </mx:ComboBox> <mx:TextArea id="destination" text="{xemdiem(String(source.selectedItem))}"/> </mx:Application>
Lu trong cc v d ny bn cha cn quan tm n ngha ca mt vi dng code, chng ta s tm hiu n cc bi sau.
Sau y l cch th 2 s dng DataBinding, l s dng th <mx:Binding> , cch s dng kh n gin nh cch u. C php nh sau
<mx:Binding source=src.property destination=dest.property/>
Tng t ta c th thm cc php thon, iu kin , hm AS3 bo trong th ny.
Php Ton
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:TextInput id="source"/> <mx:TextArea id="destination"/> <mx:Binding source="Number(source.text)*100" destination="destination.text"/> </mx:Application>
iu Kin 108
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:CheckBox id="source" label="Tick me!"/> <mx:TextArea id="destination"/> <mx:Binding source="(source.selected) ? 'Bn tick':'Bn chatick'" destination="destination.text"/> </mx:Application>
Dng hm AS3
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Script> <![CDATA[ private function xemdiem(truong:String):String { if (truong=="Bch Khoa H Ni") return "24"; else if(truong=="Kinh T Quc Dn") return "25"; else if (truong=="M Thut Cng Nghip") return "22"; return "cha cp nht"; } ]]> </mx:Script> <mx:Label text=Xem im ca trng: /> <mx:ComboBox id="source"> <mx:dataProvider>
109
<mx:String>Bch Khoa H Ni</mx:String> <mx:String>Kinh T Quc Dn</mx:String> <mx:String>M Thut Cng Nghip</mx:String> </mx:dataProvider> </mx:ComboBox> <mx:TextArea id="destination"/> <mx:Binding source="xemdiem(String(source.selectedItem))" destination="destination.text"/> </mx:Application>
Trong tt c cc v d trn ti u cho thuc tnh layout ca th <mx:Application> l vertical. Mc nh cc i tng c tao ra bng MXML u c kh nng bind, khai bo mt bin c kh nng bind trong AS3 ta phi vit th [Bindable] trn tn bin .
<mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var collection:Array;
[Bindable] public var dataProvider:ArrayCollection; ]]> </mx:Script>
Th [Bindable] gi l th MetaData, ch c tc dng vi mt bin. Mun bao nhiu bin c kh nng bind th phi c by nhiu th [Bindable] , v phi vit theo lut nh trn.
C th [Bindable] cho c mt Class. Bng cch nh sau:

package
110
{ [Bindable] public class BindMe { public function BindMe() { }
} }
iu c ngha tt c cc thuc tnh trong Class BindMe u c kh nng bind. Mt ch nh na l bind ch p dng cho thuc tnh (property), ko p dng cho phng thc (Method).
Events trong MXML Trong cc chng trc chng ta c tm hiu v x l qua v cc s kin (events) trong AS3 , nh s kin Click , Double Click, Mouse_Over , Vic x l cc events trong MXML kh l n gin hn trong AS3 , v thng th ta kt hp c AS3 v MXML x l s kin, vic kt hp ny lm cho s lng dng code gim i rt nhiu.
Sau y ta tm hiu qua cch x l events vi MXML + AS3
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Button click="output.text += 'Button is Clicked \n'"
111
mouseOver="output.text += 'Mouse Over Button \n' "
mouseOut="output.text += 'Mouse Out Button \n' "
mouseUp="output.text += 'Mouse Up Button \n' "/>
<mx:TextArea id="output" width="200" height="300"/> </mx:Application>
y l cch x l event hon ton bng MXML, bn c th thy no rt ngn gn. Ch rng vit mt String trong du ( ) ta dng du ( ' ' ). Chy chng trnh ta c kt qu sau:
Gi s ta c rt nhiu Button cng lng nghe cc s kin ny, y l lc ta dng n AS3 x l, nu ch dng MXML th code s li di hn.
Sa code trn thnh nh sau:

<?xml version="1.0" encoding="utf-8"?>
112
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Button
id="btn1" label="Button 1" click="clickHandler(event)"
mouseOver="overHandler(event)"
mouseOut="outHandler(event)"
mouseUp="upHandler(event)"/>
<mx:Button
<mx:Button
113
By h khi cc even xy ra ta s gi cc hm tng ng x l, truyn vo cc hm ny tham s l event , bt buc phi vit event ko c vit evt hay e,..
Tip theo ta thm th <mx:Script> di th <mx:Application> , vit cc hm x l cc s kin .
Sau y l code y ca v d va ri :
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Script> <![CDATA[ private function clickHandler(e:MouseEvent):void { var result:String = "";
switch(e.currentTarget) { case btn1 : result = "Button 1"; break; case btn2 : result = "Button 2"; break; case btn3 : result = "Button 3";break; }
output.text = result + " is Clicked"; }
114
private function overHandler(e:MouseEvent):void { var result:String = "";
output.text = result + " is Over"; }
private function outHandler(e:MouseEvent):void { var result:String = "";
output.text = result + " is Out"; }
private function upHandler(e:MouseEvent):void {
115
var result:String = "";
output.text = result + " is Up"; } ]]> </mx:Script> <mx:Button id="btn1" label="Button 1" click="clickHandler(event)"
<mx:Button
116
<mx:Button
Ch thuc tnh currentTarget ca bin e . currentTarget y chinh l i tng lng nghe v nhn c s kin . y c 3 i tng l btn1 , btn2 , btn3 cng lng nghe cc lung s kin ging nhau, xc nh chnh xc i tng no va nhn c event th ta dng thuc tnh currentTarget ca MouseEvent (bin e c kiu MouseEvent) . Qua y ta c th thy s kt hp MXML + AS3 lm cho cc dng code tr nn sng sa hn rt nhiu , nhng ngi Design hay mt ngi cha h bit v MXML cng c th hiu c ngay. Cc Component ca Flex c rt nhiu event, ti ko th lit k ht ra c, cch dng ch yu da vo kinh nghim. tham kho bn c th vo Help Help Content , g vo mt Component bn mun xem , v d TextInput tham kho. Lu khi bn s dng Help ln u tin, Flex Builder s mt thi gian index cc file,bn phi i cho Flex Builder index xong nn ln khi ng u s rt lu, ty vo cu hnh ca my bn. ln th 2 th s nhanh hn.
117
Vi Help Engine bn c th tra cc thuc tnh (Properties), phng thc (Methods) , s kin (events) , Styles , hiu ng (Effects) ca cc Component c sn trong Flex Builder 3. Ch , ngha ca cc events c vit bng ting Anh ngay bn cnh, nn bn phi dch ra bit cc events xy ra khi no.
118
Bi 5:
Component trong Flex Framework

Mc tiu bi hc: 1. 2. 3. 4. 5. Layout Container. HBox. Panel Form ControlBar Navigator Container ViewStack Container Accordion Container TabNavigator Container Flex v XML Repeater Component Flex v CSS
6. 7. 8. 9. 10. 11. 12.
Layout Container
Trc tin ta lm quen vi mt vi Layout rt hay dng trong Flex. 1.VBox (Vertical Box) Cc component c cha trong Vbox s c layout (sp xp, b cc) t trn xung di. Ch rng n ging thuc tnh Layout ca th <mx:Application> , layout=vertical
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:VBox>
119
<mx:Button label="Click Me!"/> <mx:Panel width="160" height="90" title="My Panel"/> <mx:TextArea/> </mx:VBox> </mx:Application>
2.HBox (Horizontal-Box) Cc Component cha trong Hbox s c layout theo chiu t tri sang phi.Tng ng vi trng hp thuc tnh layout ca th <mx:Application> l layout=horizontal.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:HBox> <mx:Button label="Click Me!"/> <mx:Panel width="160" height="90" title="My Panel"/> <mx:TextArea/> </mx:HBox> </mx:Application>
120
FlashCS4 Professional 3.Panel Trong th <mx:Panel> c thuc tnh layout ging vi ca th <mx:Application>. S c 3 gi tr cho thuc tnh layout l vertical, horizontal,absolute.
4.Form
Vo cc forum hay trang Web no bt ng k , ta thng thy cc Form nhp liu ng nhp, v y l cch to ra Form trong Flex .
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Panel title="Login"> <mx:Form> <mx:FormItem label="Name"> <mx:TextInput/> </mx:FormItem>
<mx:FormItem label="Age">
121
<mx:TextInput/> </mx:FormItem>
<mx:FormItem label="School"> <mx:TextInput/> </mx:FormItem> </mx:Form> </mx:Panel>
</mx:Application>
5.ControlBar
Component ny thng i theo Panel, s dng nh sau:

<mx:Panel title="Login">
122
<mx:Form> <mx:FormItem label="Name"> <mx:TextInput/> </mx:FormItem>
<mx:FormItem label="Age"> <mx:TextInput/> </mx:FormItem>
<mx:FormItem label="School"> <mx:TextInput/> </mx:FormItem> </mx:Form>
<mx:ControlBar> <mx:Button label="Login" width="100%"/> <mx:Button label="Register" width="100%"/> </mx:ControlBar> </mx:Panel> </mx:Application>
123
bit thm cc Layout Container na h tr trong Flex, bn chuyn sang ch Design View, tm trong Panel Component.
Navigator Container
Thnh phn c bn nht ca cc Navigator Container ny l ViewStack Container, ta s tm hiu ViewStack Container trc. 124
FlashCS4 Professional ViewStack Container Dng ViewStack trong trng hp no. Gi s by h ta c 4 panel : Tin Tc , S Kin, Th Thao, Thi Tit. Gi ta mun cho n vo mt Container v c nt iu khin chuyn sang cc Panel khc. y l lc cn dng ViewStack, cho php cha nhiu View vo mt ci Stack qun l.
To mt Project mi, t tn l NavigatorContainer. Nhp on code sau vo.
<mx:ViewStack id="vs" width="310" height="220"> <mx:Panel title="Tin Tc"/> <mx:Panel title="S Kin"/> <mx:Panel title="Th Thao"/> <mx:Panel title="Thi Tit"/> </mx:ViewStack> </mx:Application>
Khi chy chng trnh bn s ch thy Panel Tin Tc, v cha c nt iu khin chuyn sang cc Panel khc. Thm th sau va trn th <mx:ViewStack>
<mx:ButtonBar dataProvider="{vs}" width="310" height="35"/>
Bn ch n thuc tnh dataProvider , c th hiu l ci cung cp d liu cho ButtonBar y l ViewStack (id l vs). S dng du { } bind d liu. Sau y l code y :
125
<mx:ViewStack id="vs" width="310" height="220"> <mx:Panel title="Tin Tc" label="Tin Tc"/> <mx:Panel title="S Kin" label="S Kin"/> <mx:Panel title="Th Thao" label="Th Thao"/> <mx:Panel title="Thi Tit" label="Thi Tit"/> </mx:ViewStack> </mx:Application>
Ch ti thm thuc tnh label cho cc Panel , ButtonBar s ly cc label lm label cho cc Button ca mnh.
Chy ng dng, kt qu nh sau:
n y c th cc bn hiu phn no v cc Navigator Container
Bn c th thay th :
126
Thnh :
<mx:LinkBar dataProvider="{vs}" width="310" height="35"/>
hoc
<mx:TabBar dataProvider="{vs}" width="310" height="35"/>
hoc
<mx:ToggleButtonBar dataProvider="{vs}" width="310" height="35"/>
Chy ng dng v tm thy tri nghim cho ring mnh. Accordion Container y l mt Container kh hay, c th bn nhn thy nhiu trang Web. To Project mi v thm on code y vo.
<mx:Accordion width="310" height="220"> <mx:Canvas label="Tin Tc"/> <mx:Canvas label="S Kin"/> <mx:Canvas label="Th Thao"/> <mx:Canvas label="Thi Tit"> <mx:Label text="Thi tit cc vng trong c nc"/> </mx:Canvas> </mx:Accordion> </mx:Application>
127
FlashCS4 Professional Canvas l mt Container hay dng, v l Container n gin nht, ch n thun c mt vng hin th v ko c layout. Chy ng dng , kt qu nh sau:
TabNavigator Container
Sa on code sau ca Project trn.
<mx:Accordion width="310" height="220"> <mx:Canvas label="Tin Tc"/> <mx:Canvas label="S Kin"/> <mx:Canvas label="Th Thao"/> <mx:Canvas label="Thi Tit"> <mx:Label text="Thi tit cc vng trong c nc"/> </mx:Canvas>
</mx:Accordion> 128
Thnh
<mx:TabNavigator width="310" height="220" tabHeight="30"> <mx:Canvas label="Tin Tc"/> <mx:Canvas label="S Kin"/> <mx:Canvas label="Th Thao"/> <mx:Canvas label="Thi Tit"> <mx:Label text="Thi tit cc vng trong c nc"/> </mx:Canvas> </mx:TabNavigator>
Chy v tri nghim
Ch phn Container. Cc bn c th thy cc Container c kh nng cha (contain) cc Component khc trong n, nh Label, Button, TextArea. Cn cc Label, Button,TextArea,.. ko phi l cc Container nn n khng c kh nng cha cc Component khc trong n. khai bo mt Component nm trong mt Container bng MXML ta s dng nh sau:
<mx:Canvas label="Thi Tit"> <mx:Label text="Thi tit cc vng trong c nc"/>
</mx:Canvas>
Khia bo trn c ngha l c mt Component l Label nm trong mt Container l Canvas. N tng ng vi cu lnh addChild trong AS3. du / ca th <mx:Canvas> v du / ca th <mx:Label> , du / gi l du ng th, khi khai bo mt th trong MXML th phi c du / bo hiu kt thc mt th. C 2 cch khai bo khi no ng th, mt l <mx:Label /> , hoc <mx:Label> </ mx:Lable> . Khi mt th nm gia th ng v th m ca mt th khc th n l con ca th , hay b cha bi th . bit l Container hay Component ta c th tra Help
129
Canvas l con ca lp Container trong FlexFramework, do theo quy lut cha con trong hng i tng, Canvas s c kh nng cha cc Component khc trong n. Bn thn Canvas cng c th cha mt Canvas khc trong n.
Flex v XML
Nu mt trong s cc bn tng lp trnh C hay Java hay C# , phn c file, cc bn thng lu file c ui .dat lu d liu trong . Trong file .dat cc bn t lu tr d liu ca mnh thnh tng dng, cch nhau bi mt k t no do bn quy nh. n khi c d liu bn cng phi thit lp mt quy trnh ring c file .y l cch lu d liu truyn thng v ngi bt u thng gp kh khn. Internet ra i i hi phi c mt nh dng file chun giao tip. V XML ra i theo mc ch , vi cu trc n gin, d hiu, d x l hn cch lu tr truyn thng vo cc file. Lc u ti cng gii thiu MXML l mt ngn ng nh du da theo XML (XML-based) , nn qua cc v d trc v MXML c th bn cng hiu qua v cu trc ca file XML. N l ngn ng nh du, gm mt th gc (root) v nhiu th con bn trong. C th hiu trc quan th root nh mt ci hp bao ngoi cng, bn trong ci hp ny li cha cc hp con khc, trong cc hp con cng c th cha cc hp con khc na. vt bn trong cc hp con chnh l d liu ca m chng ta cn. ly c ni dung trong cc hp con ta phi bit a tr hay v tr ca ci hp so vi hp gc ly. XML khc HTML , MXML , XHTML ch , trong HTML , MXML, XHTML nh ngha sn cc th, v ta buc phi hiu r chc nng ca th dng. Trong XML cho ta t n ngha cc th, min sao bn thy d hiu nht cho mnh cng nh cho ngi c. Na hy xem qua mt file XML n gin.
<?xml version="1.0" encoding="UTF-8"?> <members> <member> <name>Nguyen Thach Duong</name>
130
<age>21</age> <location>Ha Noi</location> <email>abc@gmail.com</email> <user>thachduong</user> <password>123456</password> </member>
<member> <name>Nguyen Thach Duong</name> <age>21</age> <location>Ha Noi</location> <email>abc@gmail.com</email> <user>thachduong</user> <password>123456</password> </member>
<member> <name>Bui Trung Hieu</name> <age>21</age> <location>Ha Noi</location> <email>abc@gmail.com</email> <user>trunghieubui</user> <password>123456</password> </member>
<member> <name>Nguyen Hoang Bach</name> <age>21</age> <location>Ha Noi</location> <email>abc@gmail.com</email>
131
<user>hoangbach</user> <password>123456</password> </member>
<member> <name>Nguyen Thanh Linh</name> <age>21</age> <location>Ha Noi</location> <email>abc@gmail.com</email> <user>thanhlinh</user> <password>123456</password> </member> </members>
Ta thy hp bao ngoi cng hay th gc ca file XML trn l <members> </members> (lu l c th m v th ng), bn trong n c 4 hp con l <member> </member> trong mi hp ny li c cc hp con l <name> </name> , <age> </age> , <location> </location> , Ni dung ca cc hp con ny chnh l d liu , ni dung ca th <name> l tn ngi, <age> l tui, Khi Flex c file XML ny, cc th s c chuyn thnh cc Object s dng trong MXML hoc AS3. By h ta s dng Flex c file XML ny , ri hin th ln mt DataGrid. Bt Notepad bng cch vo Start Run g Notepad n Enter. Copy ni dung file xml trn vo ri save li vi tn members.xml. To mt Project mi t tn l FlexAndXML , trong th mc src, nht chut phi new Folder, t tn folder mi l assets.
132
Chut phi va th mc assets va to , chn New Folder, t tn l xml . Copy file members.xml bn va to ri Paste va th mc xml mi to ny.
133
FlashCS4 Professional Trong file FlexAndXML.mxml , thm th sau di th <mx:Application> <mx:HTTPService id=memData url=assets/xml/members.xml /> i tng HTTPService chuyn dng c cc d liu bn ngoi, nu bn tng lm AJAX th n ging i tng XMLHttpRequest. Cp cho i tng HTTPService id s dng trong ActionScript , ri cp ng dn url n file cn c , url c th l ng dn n mt file xml trn mng, trng hp ny ta phi nhp http://www.yourhost.com/yourfile.xml. Tip theo trong th <mx:Application> thm s kin creationComplete.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="memData.send()">
Ch ti thng xuyn layout=vertical.
hin th d liu ta dng mt DataGrid, khai bo mt i tng DataGrid v x l thuc tnh dataProvider cho n.
<mx:DataGrid dataProvider="{memData.lastResult.members.member}"/>
Lu thuc tnh dataProvider c kiu l mt mng cc d liu, c th l Array, ArrayCollection, hay XMLList. Cu lnh memData.lastResult cho ra i tng file XML, memData.lastResult.members.member cho ta mt mng cc Object member . Chy chng trnh , kt qu nh sau:
C v kh n , nhng trng hp bn ang qun tr mt Forum v mun du Password cng nh Location ca ngi dng. ng thi cng mun sp xp li th t cc ct trong DataGrid. Ta phi thay i mt cht code thnh nh sau:
134
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="memData.send()"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.collections.ArrayCollection; [Bindable] private var collection:ArrayCollection;
private function resultHandler(e:ResultEvent):void { collection = e.result.members.member; }
private function faultHandler(e:FaultEvent):void { Alert.show(e.fault.faultDetail); } ]]> </mx:Script> <mx:HTTPService id="memData" url="assets/xml/members.xml" result="resultHandler(event)" fault="faultHandler(event)"/>
<mx:DataGrid dataProvider="{collection}"> <mx:columns>
135
<mx:DataGridColumn headerText="User" dataField="user"/> <mx:DataGridColumn headerText="Full Name" dataField="name"/> <mx:DataGridColumn headerText="Age" dataField="age"/> <mx:DataGridColumn headerText="Email" dataField="email"/> </mx:columns> </mx:DataGrid>
</mx:Application>
S thay i u tin l ta khai bo mt bin collection c kiu ArrayCollection (kiu d liu tp hp) , bn thy ngay trn n c mt th l [Bindable] , tc l c th binding cho Component khc Ta bind collection cho thuc tnh dataProvider ca DataGrid. Tc l bt c khi no d liu ca collection thay i th d liu ca dataProvider ca DataGrid thay i theo ngay lp tc. Tip theo ta s l 2 s kin thng dng ca lp HTTPService l result v fault. Khi c result ta s gi hm resultHandler x l. Nu c li (fault) th hm faultHandler s c gi. Trong hm resultHandler(e:ResultEvent), ta gn cho collection tp hp cc member trong file members.xml. Khi collection cp nht xong , lp tc dataProvider ca DataGrid c cp nht theo. Nu c li, ta s hin mt Alert cho ngi dng bit li. Ch cc dng Import:
import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
Trong th DataGrid ta khai bo mt mng cc columns. Trong columns c cc DataGridColumn , ta gn cho n mt headerText , v dataField. Ch rng dataField chnh l tn cc th con ca th member trong file members.xml. Chy chn trnh , kt qu nh sau:
136
Repeater Component
hiu ngha ca Repeater Component ta s tm hiu qua v d sau. Ta s m phng mt chng trnh trc nghim kin thc. D liu c lu trong file questions.xml. Ni dung file ny nh sau:
<?xml version="1.0" encoding="UTF-8"?> <questions> <question> <id>1</id> <name>Con g tm cng 2 cng, mt mai 2 mt b ngang trn b</name> <dapanA>Cua</dapanA> <dapanB>G</dapanB> <dapanC>H</dapanC> <dapanD>Bo</dapanD> <dapan>Cua</dapan> </question>
<question> <id>2</id> <name>1+1=?</name>
137
<dapanA>2</dapanA> <dapanB>10</dapanB> <dapanC>5</dapanC> <dapanD>7</dapanD> <dapan>10</dapan> </question>
<question> <id>3</id> <name>Nhm Rock no sng tc bi Khm Ph</name> <dapanA>Bc Tng</dapanA> <dapanB>Thy Triu </dapanB> <dapanC>Microway</dapanC> <dapanD>Thnh Gi </dapanD> <dapan>Bc Tng</dapan> </question>
<question> <id>4</id> <name>Ngn ng no thun hng i tng u tin</name> <dapanA>Java</dapanA> <dapanB>C Sharp</dapanB> <dapanC>C++</dapanC> <dapanD>Action Script 3.0</dapanD> <dapan>Java</dapan> </question> </questions>
138
FlashCS4 Professional Ta thy th gc l <questions>, trong th ny gm mt tp hp (Collection) cc th <question> trong mi th <question> li c cc th <name>,<id>,... Phn giao din , ta mun hin th mi phn gm 1 hng l cu hi, 1 hng l cc p n. D nhn thy s c 4 phn nh vy v c 4 th <question>, v phn no cng ging nhau v giao din. y l lc ta dng n Repeater Component. To Project mi tn l Repeater, ta th mc assets/xml trong th mc src. Ta file questions.xml c ni dung nh trn ri cho copy/paste vo th mc xml. Tng t nh phn c XML bng Flex ta nhp on code sau:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="questionData.send()" > <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.collections.ArrayCollection;
[Bindable] private var collection:ArrayCollection;
private function resultHandler(e:ResultEvent):void { trace("ok"); collection = e.result.questions.question; trace(collection.length); }
139
private function faultHandler(e:FaultEvent):void { Alert.show(e.fault.faultDetail,"ERROR"); }
]]> </mx:Script>
<mx:HTTPService id="questionData" url="assets/xml/questions.xml" result="resultHandler(event)" fault="faultHandler(event)"/> </mx:Application>
Bin collection s lu tr mt tp hp cc Object question , v ta s lm dataProvider cho Repeater Component ca chng ta. Khai bo mt Repeater Object nh sau
<mx:Repeater id="rpt" dataProvider="{collection}">
</mx:Repeater>
Tip theo ta thm mt Label trong Repeater hin th cu hi, v 4 RadioButton hin th cc p n. Ta a 4 RadioButton ny vo mt Hbox layout theo chiu t tri sang phi. Ch rng layout ca <mx:Application> l vertical nn Label v Hbox s li c <mx:Application> layout theo chiu t trn xung. Nhp tip on code sau
<mx:Repeater id="rpt" dataProvider="{collection}"> <mx:Label text="{rpt.currentItem.name}"/> <mx:HBox> <mx:RadioButton label="{rpt.currentItem.dapanA}" groupName="{rpt.currentItem.id}"/>
140
<mx:RadioButton label="{rpt.currentItem.dapanB}" groupName="{rpt.currentItem.id}"/> <mx:RadioButton label="{rpt.currentItem.dapanC}" groupName="{rpt.currentItem.id}"/> <mx:RadioButton label="{rpt.currentItem.dapanD}" groupName="{rpt.currentItem.id}"/> </mx:HBox> <mx:Spacer height="10"/> </mx:Repeater>
Tabind thuc tnh text ca Label v thuc tnh label ca RaidoButton cho rpt.currentItem. Lu rpt.currentItem chnh l mt i tng question load t XML ra. Mi i tng question li cha cc i tng id,name,dapanA... v ly gi tr ca cc object ny ta dng ton t . ly. Rpt.currentItem.name cho ra name ca question, gi tr ging vi gi tr ca th <name> trong th <question> Ta cc RadioButton theo tng Group cho ngi dng ch chn c mt la chn. Group cc RadioButton ca cc cu hi li phi khc nhau, nn ta t groupName theo id ca tng cu hi. Chy ng dng , kt qu s nh sau:
141
State V Transition
Trong Flex khng c Timeline nhng c state ta nh ngha cc trng thi (state) ca mt chng trnh , ng thi cng cho php to cc animation chuyn (transition) gia cc state . Lm cho kh nng tng tc ca ng dng tr nn hp dn hn
To Project mi, t tn l StateTransition. Chuyn sang Design View. Ko th 2 Panel v 2 Button vo , b tr nh hnh v. Nhp p vo thanh Title ca Panel t tn hoc vo khung Properties thit lp cc thuc tnh
142
t id v title cho Panel nh trn. t label cho 2 button l Next v Prev Chuyn sang mn hnh Source, Flex Builder s t ng sinh m nh sau:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel x="88.5" y="100" width="250" height="200" layout="absolute" title="Panel 1" id="panel1"> </mx:Panel> <mx:Panel x="240" y="10" width="177" height="82" layout="absolute" title="Panel2" id="panel2"> </mx:Panel> <mx:Button x="10" y="278" label="Prev"/> <mx:Button x="352" y="278" label="Next"/> </mx:Application>
Chuyn li sang mn hnh Desing , lm tip nh sau:
Vo khung State , chut phi vo <Base State> ri chn New State. Khung New State hin ra , bn in tip nh sau:
143
t tn state mi l result v Based on: <Base state>, trong state mi, ta iu chnh li v tr cng nh kch thc ca cc panel nh hnh sau.
Bn rng ta ang trong state result . Click vo Based state , ri va result thy s thay i mn hnh Design. By gi ta s to ra transition chuyn gia 2 state ny . Nhp on code sau vo:
<mx:transitions> <mx:Transition fromState="*" toState="*" effect="{changeTheState}"/> </mx:transitions>
<mx:Parallel id="changeTheState"> <mx:Move targets="{[panel1,panel2]}"/>
144
<mx:Resize targets="{[panel1,panel2]}"/> </mx:Parallel>
Thuc tnh fromState=* v toState=* bo hiu rng khi chuyn bt k t state no sang state no th u chy mt effect l changeTheState. ChangeTheState l id ca mt Parallel, trong Parallel cha 2 effect l Move v Resize. Cung cp cho 2 effect ny targets, targets y l mng cc i tng ch s tc ng ca 2 effect ny. Trong trng hp ny l panel1 v panel2. Lu l panel1 v panel2 l 2 id ca i tng Panel. 2 Effect ny t trong th <mx:Parallel> c ngha l chng cng chy song song vi nhau, Move v Resize cng chy ng thi. Ngoi th <mx:Parallel> cn c th <mx:Sequence>, ngha l chy tun t tng effect mt. Gi ta cn mt s kin no pht ra chuyn gia 2 state ny. Thm s kin click cho 2 Button, v x l nh sau:
<mx:Button x="10" y="278" label="Prev" click="currentState='' "/> <mx:Button x="352" y="278" label="Next" click="currentState='result' "/>
currentState=' ' tc l quay v Base state. CurrentState= ' result ' tc l chuyn sang state result . Toan b Code ca chng trnh s nh sau:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:states> <mx:State name="result"> <mx:SetProperty target="{panel1}" name="x" value="10"/> <mx:SetProperty target="{panel1}" name="y" value="10"/> <mx:SetProperty target="{panel1}" name="width" value="201"/> <mx:SetProperty target="{panel1}" name="height" value="82"/> <mx:SetProperty target="{panel2}" name="x" value="93.5"/> <mx:SetProperty target="{panel2}" name="y" value="100"/> <mx:SetProperty target="{panel2}" name="width" value="240"/> <mx:SetProperty target="{panel2}" name="height" value="200"/> </mx:State> </mx:states>
145
<mx:Panel x="88.5" y="100" width="250" height="200" layout="absolute" title="Panel 1" id="panel1"> </mx:Panel> <mx:Panel x="240" y="10" width="177" height="82" layout="absolute" title="Panel2" id="panel2"> </mx:Panel> <mx:Button x="10" y="278" label="Prev" click="currentState='' "/> <mx:Button x="352" y="278" label="Next" click="currentState='result' "/>
<mx:transitions> <mx:Transition fromState="*" toState="*" effect="{changeTheState}"/> </mx:transitions>
<mx:Parallel id="changeTheState"> <mx:Move targets="{[panel1,panel2]}"/> <mx:Resize targets="{[panel1,panel2]}"/> </mx:Parallel> </mx:Application>
Vi ch , <mx:Application layout=absolute> . Chy ng dng. 146
FlashCS4 Professional CSS With Flex Nu bn no tng lm Web chc chn s ko th ko bit ti CSS, n gip cho ta ng b ha giao din mt cch nhanh chng. Sau y ta s tm hiu cch s dng CSS mt cch c bn trong Flex. To Project mi t tn l CSSWithFlex. Chut phi vo folder src chn New CSS File , t tn l main.css. Truy cp vo a tr sau, http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html#
Bn chn phn Button , ri lm mt vi tinh chnh nh , panel CSS s hin ra ngay cc code CSS , bn copy n ri paste vo file main.css.
Trong fiel CSSWithFlex.mxml . Bn nhp on code sau: 147
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Style source="main.css"/> <mx:Button x="133.5" y="106" label="Button Skined With CSS"/> </mx:Application>
Trong th Style, bn cp ng dn n file main.css. Flex s t ng nhng file css vo file SWF. Bn c th ty bin Panel, hoc cc Component khc trong trang ny ti va cp, ri paste vo file main.css.
/* CSS file */ Button { cornerRadius: 20; textIndent: 0; highlightAlphas: 0.4, 0.48; fillColors: #000000, #666666, #006699, #eeeeee; color: #ffffff; textRollOverColor: #0b333c; themeColor: #666666; }
Panel { borderColor: #000000; borderAlpha: 0.52; roundedBottomCorners: true; cornerRadius: 8; titleStyleName: "mypanelTitle"; }
.mypanelTitle { color: #ffffff;
148
textAlign: center; } <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Style source="main.css"/> <mx:Button x="133.5" y="36" label="Button Skined With CSS"/> <mx:Panel title="My Custom Skin Panel" x="104.5" y="87" width="218" height="189"/> </mx:Application>
149

Huong Dan Su Dung Adobe Flash Professional CS4

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Huong Dan Su Dung Adobe Flash Professional CS4

Diunggah oleh

Hak Cipta:

Format Tersedia

I HC BCH KHOA H NI KHOA CNG NGH THNG TIN B MN CNG NGH PHN MM

FlashCS4 Professional Mc lc:

Chng 1: Gii thiu v ci t Flash CS4

Chng 2: Thit k hoch hnh vi Flash

Chng 3: Gii thiu v Action Script 3.0

Chng 4: Action Script nng cao

Chng 5: Gii thiu v Flex

Chng 1 : Gii thiu Flash v Hng dn ci t

1. Gii thiu Flash:

Nhp m ng k, hoc la chn ci t dng th sn phm, ri chn Next.

FlashCS4 Professional - Chn ngn ng s dng, ng dn ci t, v cc ng dng i km ri click Install bt u qu trnh ci t.

ng k thng tin c nhn:

Click Exit hon tt vic ci t Adobe Flash. 13

nh du vo Remove Application Preferences nu mun xa mi ci t. 14

Click Exit hon tt vic g b Adobe Flash.

Chng 2: THIT K HOT HNH VI FLASH

Bi 1: Lm quen vi Flash CS4

1. Giao din ca Flash Professional CS4:

FlashCS4 Professional Do mc ch ca chng ny nn ta chn kiu lm vic Designer.

C mt s vng lm vic quan trng c hin thi: 1. Timeline:

Khi bn to 1 file Flash mi (Flash Document), chng trnh s to sn trong 1 23

Bi 2 S dng cng c v trong Flash CS4

Chnh sa mt cht ta s c hnh nh sau

T vin theo cc mu ta li c hnh trn

Sau ta t mu nhn vt theo hnh gc v c kt qu nh trn

Lm tng t vi chic vn ta s c hnh nh trn

Thng s bn chnh sa u tin khi s dng brush tool l mm ca nt v (smoothing

C hng lot ty chnh cho pht bn t c hnh v nh mong mun

FlashCS4 Professional Kt qu cui cng l 1 bn v mang m phong cch hot hnh

Mun chuyn mu v dng en trng, hy chuyn S ca mu v 0, bn s t c kt qu nh di y

Chuyn tan b mu ca thit k v cng mt gi tr H cng s to ra mt hiu ng rt c bit v th v

Bi 3 S dng cng c v nng cao trong Flash CS4

mu cho u robot, ta c kt qua:

t mu to cm gic tht cho vt c hnh ng, ta dng loi mu Linear

Cch dng tng t nh vi Gradient

Lm tng t vi phn mt, ta c:

Chnh mt cht v ta c kt qu nh sau:

Chun b trc nh lm ha tit, nh nn nh c th xut file flash ln web

Chn Paint Bucket Tool, sau chnh ch mu sang Bitmap

Chn nh bitmap tng ng sau t mu nh bnh thng, ta c kt qu nh sau

Vi thong s nh trn, ta thu c kt qu nh sau

S dng cng c Subselection Tool, ta thy bc nh c vector ha hon ton

gim kch c ca file, ta vo Modify > Shape > Optimize

Bi 4 To hot hnh vi Flash CS4

V qu bng hnh r nh hnh bn di

Chuyn qu bng sang symbol

Click chut phi vo frame th 15, chn Insert Keyframe.

n Enter xem kt qu, hoc chn Control > Test Movie.

To mt symbol mi, t tn l ufo

To 2 key frame, v v trong 2 frame nh sau

Ta c 1 ufo t quay xung quanh trc

Ko ufo t panel Library vo stage, to 1 frame mi frame th 60

Chn frame 60, di chuyn v tr vt th.

To 1 file Flash. Trong frame u tin, v 1 ng cong

To 1 key frame ti frame s 20 Chnh hnh cong cho di ra 1 cht

Nh vy l ta c 1 shape tween n gin.

Chn bone tool Chn c chn

n vo phn trn cng bp i, gi chut, ko n u ng ng ri th ra.

Li n chut t phn u ng ng ti phn bn chn ri th ra.

Li tip tc n chut phn u bn chn, ti cui th th ra.

S dng mask trong Flash:

Copy, xoay v dn n bn cnh hnh c, ta c

Click chut phi vo layer ny, chn Mask