Giáo trình hướng dẫn Flash CS 5

Giáo trình hướng dẫn Flash CS 5

Đ NG NG C HOÀNG THÀNH

SCRIPT VÀ KĨ THU T HO T HÌNH

(Giáo trình gi ng d y trên Flash CS5 và ActionScript 3.0)

Blank Page

L I NÓI Đ U

dobe Flash là m t ph n m m chuyên nghi p đ t o c|c th c phim

ho t hình c|c trò ch i thi t k giao di n web (RIA Rich Internet Application) Flash có m t ng d ng to l n trong th gi i Internet nói chung và trong công ngh gi i trí nói riêng Dù r ng nhi u công ngh m i ra đ i đang c g ng c nh tranh v i Flash nh ng Flash v n chi m th ph n cao h n h n Có khá nhi u giáo trình v Flash đ c biên so n,

nh ng đ i đa s đ u d a trên phiên b n MacroMedia Flash MX t ng đ i

cũ V i phiên b n CS Adobe đ~ b sung vào nh ng tính năng m i giúp ng i dùng thi t k và l p trình đ n gi n h n Cu n giáo trình này g m có ba ph n:

Ph n 1 Thi t k dành riêng cho nh ng đ c gi không chuyên mu n tìm

hi u cách s d ng công c v và t o ho t hình b ng các công c có s n c a Flash

Ph n này bao g m c|c ch ng ch ng ch ng ch ng

Ph n 2 G m ch ng Dành cho các đ c gi mu n tìm hi u v ActionScript 3.0 m t ngôn ng l p trình có c u trúc g n gi ng v i Java đ c s

d ng đ tăng c ng s c m nh cho Flash

Ph n 3 Mang tính ch t t ng h p G m c|c ch ng v{ 7 Ph n này giúp

b n đ c hoàn thi n c|c th c phim ho t hình b ng c|c kĩ thu t nâng cao Chúng tôi còn cung c p cho b n các ki n th c đ làm vi c v i hình nh, âm thanh và video Đ ng th i, chúng tôi còn gi i thi u đ n các b n gói th vi n m PaperVision3D đ làm vi c v i đ h a 3D trong Flash m t đi u mà h u nh

Blank Page

PH L C

L ) NÓ) Đ U 2

C( NG G) I THI U V FLASH 9

1.1 S l c v đ h a vector và l ch s ra đ i c a Flash 9

1.2 So sánh Flash v i Silverlight và JavaFx 12

1.3 C{i đ t Adobe Flash CS5 13

1.4 Gi i thi u v Adobe Flash CS5 16

1.4.1 Các ch đ tùy bi n giao di n 18

1.4.2 T o m i d án cho desktop và mobile 19

1.4.3 Layer, Frame, Scene và Movie 21

1.4.4 Vùng thanh công c Tools 23

1.4.5 Vùng thu c tính Properties 24

1.4.6 Vùng so n th o ActionScript 25

1.4.7 Các vùng ch c năng kh|c 26

T ng k t ch ng 34

C( NG CÁC CÔNG C V C B N 36

2.1 Các công c Pencil, Brush và Erase 36

2.2 Công c v hình c b n 38

2.3 Công c Text 47

2.4 Công c ch n Selection và Lasso 49

2.5 Các công c đ màu Paint Bucket, Ink Bottle và b t màu EyeDropper 50

2.6 Công c Free Transform và Gradient Transform 52

2.7 Các công c làm vi c v i đ ng Bezier 55

2.8 Làm vi c v i c|c đ i t ng 58

T ng k t ch ng 61

C( NG CÁC BI U T NG TRONG FLASH 63

3.1 Bi u t ng Graphic 63

3.2 Bi u t ng Button 65

3.3 Bi u t ng MovieClip 67

3.4 Làm vi c v i Library 68

T ng k t ch ng 69

C( NG T O HO T C NH 71

4.1 Tìm hi u v TimeLine 71

4.2 Classic Tween 78

4.3 Shape Tween 80

4.4 Motion Tween 82

4.5 Công c Bone và Bind 87

4.6 Công c Deco 91

4.7 Công c 3D Translation và 3D Rotation 103

T ng k t ch ng 106

C( NG L P TRÌNH V I ACTIONSCRIPT 108

5.1 Các ki u d li u 110

5.2 Bi n và H ng 111

5.3 Toán t và Bi u th c 112

5.4 Các c u trúc l nh đi u khi n 120

5.4.1 Câu l nh if 120

5.4.2 Câu l nh switch 121

5.4.3 Các câu l nh l p for while v{ do while 122

5.4.4 Các l nh continue, break và return 125

5.5 Hàm 126

5.6 L p v{ Đ i t ng 129

5.6.1 Xây d ng l p 129

5.6.2 Làm vi c v i đ i t ng 133

5.6.3 S ki n chu t 136

5.6.4 S ki n bàn phím 137

5.7 Đ a m t đ i t ng vào ActionScript 138

5.8 Làm vi c v i XML 140

5.9 Vùng ch c năng Code Snippets 142

T ng k t ch ng 148

C( NG CÁC () U CH NH NÂNG CAO 150

6.1 X lý âm thanh, hình nh và video 150

6.2 T o kĩ x o đi n nh v i Flash 155

6.3 T o th c phim Flash t a 3D 160

6.4 Ghép n i nhi u ho t c nh 166

6.5 Kĩ thu t m t n mask 166

6.6 T o các nút nh n đi u khi n 174

6.7 Xu t b n m t Movie 176

T ng k t ch ng 177

C( NG T( V) N PAPERVISION3D 179

7.1 Gi i thi u v PaperVision3D và Adobe Flex Builder 179

7.2 C u hình v{ c{i đ t PaperVision3D cho Adobe Flex Buider 183

7.3 Ch ng trình (ello PaperVision3D ! 186

7.4 C|c đ i t ng trong PaperVision3D 190

C|c đ i t ng hình th 190

Đ i t ng Material - Ph i màu cho hình th 198

Đ i t ng Lights - Hi u ng ánh sáng 202

Đ i t ng Shader - Hi u ng đ bóng 203

Đ i t ng ShadedMaterial 203

7.4.6 Đ i t ng CompositeMaterial 204

7.4.7 Đ i t ng MaterialsList 204

7.5 Import m t mô hình 3D 204

T ng k t ch ng 206

BÀI T P TH C HÀNH 208

BÀI TH C HÀNH S 1 208

BÀI TH C HÀNH S 2 209

BÀI TH C HÀNH S 3 210

BÀI TH C HÀNH S 4 210

BÀI TH C HÀNH S 5 212

BÀI TH C HÀNH S 6 213

DANH SÁCH HÌNH 215

TÀI LI U THAM KH O THÊM 221

Blank Page

CH NG GI I THI U V FLASH

1.1 S l c v đ h a vector và l ch s ra đ i c a Flash

S l c v đ h a vector

Đ h a m|y tính đ c chia làm ba d ng c b n:

Đ h a đi m c s c a nó l{ c|c đi m nh (pixel) M i b c nh c a đ h a đi m

là m t ma tr n đi m, mà m i đi m nh đ c x|c đ nh b i m t m u màu theo chu n ph bi n là RGB (Red-Green-Blue) M i tham s m{u đ c phân b t 0 cho đ n 2n -1 ( nh d ng n bit màu) Khi phóng to b c nh c a đ h a đi m, b n s

th y rõ t ng đi m nh B n có th quan sát ví d đ i v i b c nh sau

Hình 1 Đ h a đi m

Đ h a Fractal: s d ng thu t toán đ quy B n có th tham kh o thêm v d ng

đ h a này trong các tài li u liên quan đ n đ h a Fractal hay hình h c Fractal

Hình 2 Đ h a Fractal

Đ h a vector c s c a nó l{ c|c đ ng cong Bezier Nó có nhi u u đi m so

v i đ h a đi m M t trong nh ng u đi m l n nh t c a nó là không b v h t khi phóng to b c nh C|c ch ng trình đ h a vector n i ti ng bao g m Adobe )llustrator Corel Draw M t đ h a vector bao gi cũng m n m{ng h n so v i đ

h a đi m

V i đ h a đi m, không ph i m i đ nh d ng đ u h tr ch đ transparent (hay

ch đ màu alpha) Nh ng v i đ h a vector, thì nh ng tính năng n{y đ c h

tr m t cách hoàn h o V i đ h a vector c|c ch ng trình so n th o luôn h tr

ch đ l p Layer nh ng v i đ h a đi m, ch có m t v{i đ nh d ng m i h tr l p Layer n{y nh psd c a photoshop) B n có th quan sát m t s đ i t ng đ h a

đ c t o b i Adobe )llustrator sau đ}y

Hình 3 Đ h a vector

Đ nh d ng Flash mà chúng ta s làm quen đ}y cũng thu c v{o đ h a vector

Nh ng nó k t h p v i hi u ng đ ng Xét m t ph m trù n{o đó nó có nhi u

đi m t ng đ ng v i kĩ thu t t o video kĩ thu t 24 hình/giây) Nh ng nó có u

đi m là phim đ c t o b i Flash không b v h t khi phóng to (tr tr ng h p phim có ch a c|c đ i t ng đ h a đi m) V{ đ c bi t kích th c phim t o b i Flash r t nh g n so v i c|c đ nh d ng phim khác

L ch s ra đ i c a Flash

Flash là m t kĩ thu t t o các hi u ng đ ng c|c th c phim ho t hình Flash

đ c gi i thi u đ u tiên b i công ty MacroMedia v{o năm Đ n năm

công ty n{y đ~ đ c Adobe mua l i v i giá 3.4 t đôla T khi ra đ i cho đ n này, Flash đ~ có r t nhi u b c phát tri n đ|ng chú ý Nhi u tính năng m i đ~ liên t c

đ c c p nh p trong các phiên b n c a nó, k t các phiên b n Macromedia Flash cho đ n Adobe Flash hi n nay

V i phiên b n Adobe Flash CS công ty Adobe đ~ b sung vào cho Flash nh ng tính năng m nh m : h tr nhi u đ nh d ng import d li u; b sung các công c

t o ho t hình m nh m nh Bone Bind D Translation D Rotation

Phiên b n m i nh t c a Flash l{ CS cho đ n năm Hi n nay Adobe cũng đ~ t o ra m t n b n mã ngu n m cho Flash đó l{ công ngh Flex M t trong

nh ng công ngh ra đ i s m nh t h tr t o giao di n web RIA Flex là m t công ngh h a h n đem l i nhi u l i nhu n cho Adobe (nh vào trình phát tri n Adobe Flex Buider) Nó là m t đ i th đ|ng g m v i Silverlight c a Microsoft và JavaFx c a Sun (nay đ c mua l i b i Oracle)

1.2 So sánh Flash v i Silverlight và JavaFx

Ngày nay, xu th th ng m i đi n t hóa đang ng{y c{ng len l i vào các ngóc ngách xã h i C|c website l{ n i cung c p thông tin trao đ i v{ t v n Do đó giao

di n website đ p m t, thi t k thu n ti n là m t l i th Chính vì l đó r t nhi u nhà phát tri n chú ý đ n đi u này Các hãng ph n m m l n nh Microsoft Adobe Sun cũng lao v{o Tính v tu i đ i phát tri n c a các công ngh h tr RIA, Adobe t ra l{ ng i tiên phong

Flash/Flex c a Adobe, Silverlight c a Microsoft và JavaFx c a Sun là nh ng công ngh đ|ng chú ý nh t M i trong s chúng đ u có u đi m c a nó M t u đi m chung c a chúng l{ đ h a r t đ p và chuy n đ ng r t m m m i

Flash/Flex có tu i đ i khá cao, v i l ng ng i dùng đông đ o, h u h t các nhà phát tri n đ~ qu| quen thu c v i Flash Flash cũng h tr l p trình h ng đ i

t ng Nó cũng t ng thích v i h u h t các ngôn ng l p trình web hi n nay Flash h tr h u h t trên các h đi u hành: Windows, Linux, MacOS và r t nhi u

m u Mobile c a nhi u hãng khác nhau Đ phát tri n m t ng d ng Flash, các nhà phát tri n có th s d ng trình biên t p Adobe Flash Trình biên t p này ho t

đ ng t t trên đa s h đi u hành: Windows và MacOS M t yêu c u đ trình khách

có th ch y đ c Flash là c n c{i đ t m t Plugin Flash nh g n (không quá 2 Mb)

ho c h tr m t phiên b n Flash Lite cho c|c dòng đi n tho i)

Silverlight m c d u ra đ i sau Flash nh ng v i s h u thu n c a m t t p đo{n

l n nh Microsoft nó cũng đang d n có m t v th đ|ng k Ngoài ra, Silverlight

đ c phát tri n trên n n NET, các l p trình viên có th s d ng VB.NET ho c C# -

m t ngôn ng l p trình m nh m - đ phát tri n Nh c đi m c a nó là ch t ng thích trên Windows, MacOS và các m u đi n tho i Windows Mobile Đ phát tri n

ng d ng trên Silverlight, các nhà phát tri n ch có th s d ng Visual Studio v n

ch dành cho h đi u hành Windows Trình khách mu n ch y đ c Silverlight c n c{i đ t Plugin Silverlight (kho ng 5 Mb)

JavaFx ra đ i sau cùng nh ng nó có nhi u u đi m: mã ngu n m , h tr nhi u

h đi u hành Windows, Linux, MacOS và h a h n ho t đ ng t t trên nhi u m u Mobile, trình khách không c n c{i đ t Plugin h tr Đ so n th o JavaFx ng i dùng có th s d ng Eclipse ho c NetBean C hai trình biên dch n{y đ u ho t

đ ng t t trên Windows, Linux và MacOS Nh ng m t đi u đ|ng ti c là JavaFx l i

c a Flash, Silverlight và JavaFx Dù sau này, v th trong vi c phát tri n RIA cho

web có thay đ i, thì nh ng đ nh h ng còn l i c a Flash v n là nh ng đ nh h ng phát tri n quan tr ng, đ m b o s tr ng t n cho công ngh này

1.3 C{i đ t Adobe Flash CS5

Yêu c u c u hình cài đ t: h đi u hành Windows XP Pack 3 ho c cao h n

(MacOS X ho c cao h n Gb Ram ho c cao h n Pentium )V ho c cao h n

M c d u m c đích chính c a chúng ta là s d ng ch ng trình Adobe Flash Professional CS5, tuy nhiên các b n có th s d ng thêm m t s ch ng trình đính kèm nh Photoshop dùng đ hi u ch nh nh, Dreamweaver thi t k giao

di n web đ ng th i chèn các phim Flash vào, so n th o ActionScript chuyên nghi p h n v i Flash Buider 4, hi u ch nh }m thanh video Chính vì lý do này, chúng tôi đ ngh b n nên ch n b tr n gói Adobe Master CS5

B n có th t i tr c ti p t Adobe, b n có ng{y đ dùng th Sau khi t i v , b n hãy ti n hành gi i nén t p tin b n s thu đ c m t th m c chính

N u b n s d ng m t đĩa c{i đ t DVD, thì b n h~y đ a đĩa DVD v{o đĩa DVD trên máy tính c a b n B n có th s d ng ch đ AutoRun c a nó, ho c m đĩa DVD này ra

Trong c hai tr ng h p nêu trên th m c chính s có th m c con và m t t p Set-up.exe B n có th quan sát c u trúc c a nó nh sau:

Hình 4 C u trúc th m c bên trong đĩa DVD c{i đ t Flash CS5

B n hãy nh p đôi chu t vào t p tin Set-up exe khi đó s có m t c a s sau đ}y

hi n ra

Hình 5 M{n hình ch{o đón khi c{i đ t Adobe Master CS5

B n h~y đ c qua c|c đi u kho n s d ng ph n m m, n u b n đ ng ý thì b n ch

vi c nh p Accept Ng c l i, b n hãy ch n Quit đ h y b vi c c{i đ t

Sau khi nh p vào Accept, c a s sau đ}y s xu t hi n Trong c a s này, b n có

th đi n serial vào t ng ng v i Provide a serial number (n u b n có m t s

serial ng c l i, b n có th ch n Install this product as a trial(n u b n mu n s

d ng th 30 ngày) B n cũng có th ch n ngôn ng hi n th cho nó Sau đó b n

nh p Next

Hình 6 C a s Serial Number

C a s Adobe )D sau đ}y s hi n ra

Hình 7 C a s Adobe ID

Trong c a s này, b n hãy ch n l a các ph n m m mà b n c n c{i đ t b ng cách đ|nh d u tích vào các ph n m m t ng ng N u b n s d ng Flash CS5 b n hãy

ch n Flash Professional Ngoài ra, tôi khuy n ngh b n ch n thêm các ph n

m m sau: Photoshop, Flash Buider, SoundBooth

m c Location bên d i, b n hãy ch n v trí mà b n s c{i đ t Theo m c đ nh,

nó s c{i đ t v{o th m c C:\Program Files\Adobe B n cũng c n l u ý dung

l ng đĩa d{nh cho vi c c{i đ t B n c n luôn đ m b o r ng dung l ng đ cài

đ t Total install ph i luôn nh h n dung l ng đĩa còn tr ng Available Sau đó b n nh p vào nút Install và ch đ i cho qu| trình c{i đ t hoàn t t Sau đó

b n nh p v{o nút Finish đ đóng c a s c{i đ t

1.4 Gi i thi u v Adobe Flash CS5

Kh i đ ng Adobe Flash Professional CS5: đ kh i đ ng Adobe Flash

Professional CS5, b n có th b m ch n bi u t ng c a nó trên màn hình Desktop,

ho c b n ti n h{nh c|c b c sau:

- Vào Start > All Programs

- Ch n Adobe Master Collection CS5

- Ch n Adobe Flash Professional

Hình 8 Kh i đ ng Adobe Flash Professional CS5 Khi đó m{n hình Splash m{n hình ch{o đón c a Adobe Flash Professional CS5 sau đ}y s hi n ra

Hình 9 M{nh hình ch{o đón c a Adobe Flash Professional CS5

Sau khi quá trình kh i đ ng hoàn t t, b n s th y giao di n sau đ}y

Hình 10 C a s ban đ u c a Flash Professional CS5

Phiên b n Adobe Flash CS5 xu t x ng năm 10 So v i các phiên b n tr c đó CS5 có nhi u thay đ i v c giao di n ch ng trình l n c|c tính năng c a nó

V giao di n: phiên b n CS5 dành cho Windows đ~ tuy t giao v i giao di n Window, s d ng m t giao di n đ c l p v i h đi u hành

V tính năng: b sung thêm nhi u công c m i làm cho công vi c sáng tác tr

nên đ n gi n h n nh c|c công c Bone, Bind, 3D Translation, 3D Rotation

1.4.1 Các ch đ tùy bi n giao di n

Trong giao di n t ng th Essential c a Flash CS5, có th chia làm 5 vùng chính:

- Vùng h th ng menu phía trên cùng

- Vùng thanh công c bên ph i

- Vùng thu c tính v{ th vi n bên c nh thanh công c

- Vùng sáng tác trung tâm

- Vùng TimeLine và Layer phía bên d i

Hình 11 Giao di n Adobe Flash CS5

Flash CS5 cho phép b n làm vi c theo ch đ Tab Trên vùng thanh menu, góc

bên ph i m c Essentials cho phép ta chuy n đ i qua l i gi a các cách b trí giao

di n Có 6 ch đ b trí giao di n: Animator, Classic, Debug, Designer, Developer

và Essentials Tùy vào c m quan c a b n, b n hãy ch n l y m t cách b trí giao

di n nào mà b n cho là phù h p và ti n l i cho b n nh t Riêng tôi, tôi ch n ch

đ Essentials

Đ phóng to hay thu nh khung sáng tác, ta ch c n s d ng phím t t l{ Ctrl đ

phóng to và Ctrl+- đ thu nh Ho c b n có th ch n ch đ hi n th % bên

d i thanh menu

1.4.2 T o m i d án cho desktop và mobile

Đ t o m i m t d án, b n kích chu t vào File, ch n New (phím t t là Ctrl+N)

H p tho i sau đ}y s hi n ra

Hình 12 T o m i m t d án đ}y chúng ta quan t}m đ n m t vài ki u d án

- Flash File (ActionScript 3.0, ActionScript 2.0): t o d án Flash v i ActionScript 3.0 ho c 2.0 B n cũng l u ý r ng trong gi|o trình n{y chúng ta đang th o lu n v ActionScript 3.0 Phiên b n này là phiên b n m i nh t c a ActionScript cho đ n

th i đi m này

- Flash File (Adobe Air 2): t o d án Flash cho Desktop ch y trên Adobe Air Adobe Air là m t d án m i c a Adobe nh m t o ra môi tr ng cho các nhà phát tri n nh ng ng d ng d a vào công ngh Flash có th ch y đ c l p trên các h

đi u hành Nó có nhi u đi m t ng đ ng v i công ngh Java c a Sun hay NET c a Microsoft Đ phát tri n m t trình ng d ng trên Adobe Air, b n hoàn toàn có th

s d ng trình so n th o Adobe Flash ho c Adobe Flex Builder

- Flash File (Mobile iphone OS, Flash Lite 4, Device Central): t o d án Flash cho Mobile Khi ch n ki u d án này, Adobe Flash CS5 s t đ ng g i đ n Adobe Device Central CS5 Đ}y l{ ti n ích qu n lý các thông tin v Flash Lite h tr trên c|c dòng đi n tho i B n ch c n tìm ki m lo i đi n tho i mà b n c n t o d ng d

|n sau đó b m vào Create

Hình 13 Adobe Device Central

- Ngoài ra, n u b n mu n t o c|c Action đ c l p, b n có th t o riêng chúng b ng cách ch n ActionScript File Vi c t o c|c ActionScript đ c l p và s d ng chúng trong các d án Flash s đ c th o lu n kĩ h n khi chúng ta l{m quen v i l p trình v i ActionScript ch ng 5

Remarks: B n cũng c n l u ý đ n m t v{i đ nh d ng trong các d án c a Flash

Đ nh d ng Flash s có ph n m r ng l{ fla Đ nh d ng ActionScript File có đ nh

d ng l{ as Đ nh d ng t p tin cu i cùng c a flash là swf

1.4.3 Layer, Frame, Scene và Movie

Trong kĩ thu t t o c|c th c phim kĩ thu t đ c s d ng ph bi n đ t o chuy n

đ ng trong c|c đo n phim l{ kĩ thu t 24 hình/ giây Trong kĩ thu t này, các hình

nh có nhi u đi m t ng đ ng s đ c ghép n i l i m t cách liên ti p C|c đ i

t ng c n t o chuy n đ ng s có chút thay đ i trên m i khung hình Khi các khung hình thay th cho nhau t c đ mà m t ng i không nh n ra s thay đ i này, chúng ta s c m th y đ i t ng chuy n đ ng Kĩ thu t t o ho t hình trong Flash cũng ho{n to{n t ng t Tr c khi tìm hi u kĩ v các cách th c t o chuy n

đ ng trong Flash, chúng ta cùng nhau tìm hi u qua các khái ni m: L p Layer, Khung hình Frame, C nh quay Scence Th c phim Movie

- Layer: là các l p đ c dùng trong vi c sáng tác M i m t khung hình có th

ch a nhi u layer khác nhau M i m t đ i t ng th ng đ c xây d ng trên m i layer Kĩ thu t layer đ c s d ng r ng r~i trong đ h a máy tính, bao g m c đ

h a đi m nh photoshop corel photopaint hay đ h a vector nh illustrator coreldraw

Hình 14 T o m i Layer

Nhóm bi u t ng bi u t ng xóa và t o layer : bi u t ng th nh t t

trái sang là t o m i layer, bi u t ng th hai là t o m i m t th m c đ ch a

layer và bi u t ng cu i cùng là xóa layer ho c th m c ch a layer

Nhóm bi u t ng hi u ch nh layer : bi u t ng th nh t t trái sang là

cho phép n hay hi n layer đó bi u t ng th hai là khóa không cho phép

ch nh s a đ i t ng trên layer và bi u t ng cu i cùng l{ cho phép đ i t ng

trên layer hi n th đ ng vi n và màu n n hay ch đ ng vi n

- Frame l{ khung hình dùng trong kĩ thu t t o chuy n đ ng V t th chuy n đ ng

đ c là nh v{o kĩ thu t thay th các khung hình Nh tôi đ~ trình b{y trên, m t

ng i ch có th l u đ c không quá 24 hình nh trong m t giây, n u t c đ chuy n đ i các khung hình l n, m t chúng ta không th nh n th y đ c s thay

đ i này mà c m gi|c nh l{ hình nh đang chuy n đ ng V i Flash, s khung hình không nh t thi t ph i l n nh trong kĩ thu t t o video, nó gi m đi m t c|ch đ|ng

k nh vào công ngh đ c s d ng trong Flash Đi u n{y cũng giúp l{m gi m kích th c c a t p tin Flash

- Scene: đ c hi u nh l{ c|c c nh quay trong Flash M t c nh quay là t p h p

c a các khung hình k ti p nhau đ t o ra chuy n đ ng Đ chèn thêm scene, ta

vào Insert, ch n Insert Scene Nh vào các c nh quay này, chúng ta có th t o các

th c phim dài, mà không ph i qu n lý các l p m t cách quá ph c t p khi s

l ng đ i t ng trên c nh quay đó tr nên quá l n M t c nh quay trong Flash cũng gi ng m t c nh quay trong phim truy n hình v y Khi c n t o m t th c phim hoàn ch nh, chúng ta s ghép n i nhi u c nh quay l i v i nhau B n cũng

l u ý r ng, các c nh quay s đ c ghép t đ ng theo th t mà b n s p x p Do

đó n u mu n thay đ i th t c nh quay, b n ch vi c thay đ i th t s p x p c a

nó Đ làm xu t hi n c a s qu n lý các c nh quay, b n vào Windows > Other Panels > Scene (ho c phím t t Shift+F2)

Hình 15 C a s qu n lý c nh quay

Trong c a s này, b n ch c n s p x p l i th t trình bày c a các Scence b ng thao tác kéo th đ n gi n Th t các c nh quay s di n ra theo th t t trên

xu ng d i Khi xây d ng các c nh quay đ c l p, b n có th ki m tra t ng c nh quay này b ng cách vào Control > Test Scene (ho c t h p phím Ctrl+Alt+Enter)

- Movie: là m t th c phim hoàn ch nh M t movie có th ch a m t ho c nhi u

c nh quay Đ chuy n đ i qua l i gi a các c nh quay trong m t movie, ta b m vào

bi u t ng và ch n tên c a scene Đ ki m tra m t b phim hoàn ch nh, b n

ch n Control > Test Movie (ho c t h p Ctrl+Enter) B n cũng l u ý r ng, n u b n xây d ng m t th c phim ch a nhi u đ i t ng đ h a và có nhi u c nh quay, thì vi c ki m tra s ho t đ ng c a t ng c nh quay l{ đi u c n thi t B n ch nên

ki m tra s ho t đ ng c a toàn b phim khi các c nh quay đ~ ho t đ ng t t S dĩ

nh v y là vì, quá trình biên d ch m t b phim hoàn ch nh bao gi cũng ch m

h n chi m nhi u tài nguyên b nh h n so v i biên d ch t ng c nh quay riêng l

Đi u n{y đ c bi t h u ích v i nh ng máy có c u hình không quá cao

Remarks: B n cũng c n l u ý r ng Flash cũng h tr ch đ ki m tra tr c ti p trong khung s|ng t|c Đ th c hi n ch c năng n{y b n có th ch n m t trong hai

ch đ : ch đ ki m tra b ng tay, ch đ ki m tra t đ ng Đ i v i ch đ ki m tra

b ng tay, b n s d ng thanh đ|nh d u Frame hi n t i sau đó kéo tr t nó trên thanh TimeLine V i ch đ ki m tra t đ ng, b n ch c n nh n phím Enter N u phim c a b n n m trên TimeLine quá dài và b n đang th c hi n ch c năng ki m tra t đ ng, b n mu n d ng ch đ này ngay l p t c Khi đó b n hãy nh n phím Enter thêm l n n a Ch đ ki m tra t đ ng s d ng ngay l p t c

1.4.4 Vùng thanh công c Tools

Vùng thanh công c ch a các công c đ t o hình, hi u ch nh và t o các hi u ng cho c|c đ i t ng B n có th thu g n thay công c b ng cách b m vào bi u t ng thu nh bên ph i trên cùng, th hai t ph i sang Ho c t t nó đi b ng cách b m vào bi u t ng còn l i

Hình 16 Thanh công c

B n có th di chuy n nó, kéo th nó vào m t v trí n{o đó trong giao di n c a Flash B n có th làm xu t hi n ho c n nó đi b ng cách vào menu Window, ch n Tools

1.4.5 Vùng thu c tính Properties

M i m t đ i t ng đ u có các thu c tính riêng nh m{u vi n, lo i vi n, màu n n Vùng qu n lý các thu c tính này đ c b trí trong vùng thu c tính Properties Đ

hi n th các thu c tính c a m t đ i t ng, b n ch vi c nh p ch n đ i t ng đó Khi đó trong b ng thu c tính Properties này s hi n th các thông s liên quan

đ n các thu c tính c a đ i t ng Đ thay đ i các thông s thu c tính c a đ i

t ng đó b n ch vi c thay đ i các thông s trong b ng thu c tính Properties này

Hình 17 Vùng thu c tính Properties

Bi u t ng nh góc trên bên ph i cho phép thu nh ho c đóng l i vùng thu c tính Properties T ng t chúng ta cũng có th làm xu t hi n ho c đóng vùng thu c tính này l i b ng cách vào Windows, ch n Properties

Thu c tính c a vùng so n th o:

Publish: g m Player (cho phép phim trình chi u có th ho t đ ng t t trên phiên

b n Flash Player nào), Script (phiên b n ActionScript m{ đo n phim đang s

d ng), Class (b n ch vi c nh p tên L p th hi n vào, l p t c Flash s kh i t o cho

b n m t cú pháp khai báo c a l p n i t i m c đ nh là l p th a k t MovieClip), Profile (qu n lý c|c thông tin liên quan đ n vi c xu t b n d án Flash), AIR Settings (các c u hình thi t l p cho d án Flash ch y trên Adobe Air)

Properties: ch a FPS (t c đ ch i đo b ng s frame trên m i giây Frames Per Second Size kích th c c a khung trình chi u đo b ng pixel), Stage (qu n lý màu n n c a khung so n th o)

(2) Tìm ki m và thay th

(3) Chèn target path Ch c năng n{y th ng s d ng khi làm vi c v i l p

- Nhóm Align: canh ch nh v trí c a c|c đ i t ng theo th t các bi u t ng

t trái sang ph i là canh trái, canh gi a theo chi u ngang, canh ph i, canh trên, canh gi a theo chi u d c v{ canh d i N u đ|nh d u ki m vào tùy

ch n Align to Stage thì nó s canh ch nh theo khung so n th o ng c l i,

nó s can ch nh theo v trí t ng đ i c a c|c đ i t ng

- Nhóm Distribute: canh ch nh theo tr c t ng đ i c a c|c đ i t ng Theo

th t các bi u t ng t trái sang ph i là: canh ch nh theo tr c phía mép trên, theo tr c đ i x ng ngang, theo tr c phía mép d i, theo tr c phía mép trái, theo tr c đ i x ng d c và theo tr c phía mép ph i

- Nhóm Match Size: hi u ch nh cùng kích th c c a đ i t ng theo chi u ngang, chi u d c, ho c theo c chi u ngang và chi u d c N u ch n tùy

ch n Align to Stage, nó s canh chnh kích th c đ i t ng theo khung

so n th o

- Nhóm Space: hi u ch nh kho ng cách gi a c|c đ i t ng theo chi u d c và ngang

o Vùng Transform (Ctrl+T): hi u ch nh góc c nh cho đ i t ng Vi c hi u ch nh góc c nh này bao g m:

Hình 20 Vùng Transform

- Nhóm đ u tiên: kéo giãn chi u dài và chi u r ng (tính theo t l %), n u b n

nh p ch n tùy ch n cu i cùng trong nhóm này (bi u t ng m c xích b ph}n đôi) thì đ kéo giãn c a đ i t ng theo chi u ngang và chi u d c s

di n ra đ ng th i ng c l i vi c hi u ch nh kích th c theo chi u dài và chi u r ng l{ đ c l p

- Nhóm th hai: Rotate (hi u ch nh góc quay), Skew (hi u ch nh góc d ch

chuy n xiêng hay đ kéo tr t theo hai phía)

- Nhóm th 3 liên quan đ n t a đ D v{ đi m tr ng tâm 3D Ch c năng n{y

ch ho t đ ng đ i v i bi u t ng MovieClip Chúng tôi s trình b{y kĩ h n

v bi u t ng n{y trong ch ng

o Vùng History (Ctrl+F10): qu n lý l ch s các thao tác c a b n khi sáng tác

Hình 21 Vùng History

B n ch vi c ch n th i đi m đ c ch đ nh trong vùng (istory n{y đ ph c h i các thao t|c đ c đ|nh d u t i th i đi m đó

o Vùng Color: qu n lý màu s c B n có th hi u ch nh tr c ti p màu s c cho đ i

t ng (ch n đ i t ng sau đó b m vào b ng màu) ho c có th k t h p v i công c đ màu mà ta s tìm hi u trong ch ng ti p theo

Hình 22 B ng màu chu n Trong b ng màu chu n này, ta có th ch n m u màu RGB thông d ng, m u màu HSL b ng cách b m chu t vào bi u t ng qu c u phía trên bên ph i Ho c ch n không màu b ng cách b m vào bi u t ng hình vuông g ch chéo B n cũng có th

ch n ch đ Transparent b ng c|ch đi u ch nh thông s Alpha B ng màu chu n còn cung c p cho chúng ta m t s m u màu Gradient có s n N u nhu c u s d ng

màu trong b ng màu chu n không đ|p ng đ , b n có th s d ng b ng màu nâng cao (t h p phím Alt+Shift+F9)

Trong b ng màu nâng cao này, n u b n mu n hi u ch nh màu cho vi n thì b m

ch n stroke, n u mu n hi u ch nh cho màu n n thì ch n fill Trong h p tho i th

xu ng, có các ch đ m{u sau đ}y

+ None: không ch n màu

+ Solid Color: ch n m{u đ n hay m{u đ c) B n có th ch n m u màu theo ch

đ RGB ho c HSL Có th hi u ch nh thu c tính Alpha c a nó Nói chung, ch đ Solid hoàn toàn gi ng v i b ng màu chu n trên

+ Linear Gradient: pha tr n màu theo d ng c u v ng v i các c u v ng phân b theo đ ng th ng

Hình 23 Ch đ màu Solid Color Hình 24 Ch đ màu Linear Gradient Khác v i solid, ch đ Linear Gradient cho ta các hi u ch nh màu s c h p d n h n

v i d ng th c c u v ng B n có th hi u ch nh thu c tính Flow là m t d i màu

bi n thiên theo thang m{u bên d i (Extend color) ho c ch đ màu ph n x (Reflect) ho c ch đ màu l p (Repeat) N u b n mu n thay đ i màu trong thang Gradient, b n ch vi c b m ch n nút đ|nh d u m i màu trong thang màu bên

d i sau đó ch n l i màu m i (ho c kích đ i chu t vào nút này, r i ch n l i màu

m i) N u b n mu n b sung thêm m t màu trong thang màu Gradient, b n ch

vi c b m ch n vào m t v trí b t kì trên thang m{u bên d i Ng c l i, n u b n

mu n lo i b m t màu ra kh i thang màu Gradient, b n ch vi c kéo th nó ra

kh i thang màu này B n th y đ y, vi c s d ng màu Gradient r t đ n gi n

Radial Gradient ho{n to{n t ng t Linear Gradient, ch có duy nh t m t s khác bi t là Radial Gradient t o màu c u v ng theo d ng xoáy tròn khác v i Linear Gradient theo d ng đ ng th ng

+ Fill Bitmap: v i ch c năng n{y b n có th đ m{u cho đ i t ng b ng các b c

nh Đ}y l{ m t cách t o hi u ng màu khá thú v , r t h u d ng trong nhi u tình

hu ng

o Vùng Common Library (Buttons, Classes và Sounds): qu n lý các d ng button, các l p th vi n và âm thanh

o Vùng Component (Ctrl+F7): qu n lý các thành ph n GUI trong Flash B n có

th s d ng c|c đ i t ng n{y đ t o m t giao di n web, m t trình ng d ng

o Vùng Library (Ctrl+L): qu n lý c|c đ i t ng đ c import và convert Chúng

ta s đi v{o chi ti t v vùng n{y trong c|c ch ng sau

o Vùng Motion Presets: vùng cung c p các ch đ t o ho t hình có s n c a Flash

B n ch vi c ch n đ i t ng sau đó ch n hi u ng và nh p Apply L p t c b n

s có m t hi u ng ho t hình nh mong đ i

o Vùng Code Snippets t ng t nh Motion Presets đ}y l{ vùng t o ActionScript có s n c a Flash Ta ch vi c ch n đ i t ng sau đó nh p vào

ch c năng t ng ng, l p t c m t đo n mã ActionScript s đ c phát sinh

t ng ng v i đ i t ng đ c ch n theo ch c năng m{ b n đ~ ch n

Ch c năng n{y cũng r t h u ích cho nh ng ng i dùng ph thông, mu n t o c|c ActionScript đ đi u khi n đ i t ng nh ng l i ng i tìm hi u v ngôn ng

l p trình này b i nhi u lý do khách quan l n ch quan Tuy nhiên, b n cũng

c n l u ý r ng, ch c năng n{y ch cung c p m t v{i tính năng ch c không ph i

là t t c , b i v y, n u b n mu n t o m t th c phim chuyên nghi p, b n c n

có s hi u bi t t ng đ i đ y đ v ngôn ng l p trình ActionScript m nh m này đ c tích h p trong Flash

Hình 26 Vùng Code Snippets Chúng ta s tìm hi u v vùng ch c năng n{y sau khi tìm hi u v ngôn ng l p trình ActionScript Trong vùng ch c năng Code Snippets có các nhóm hi u ng Action sau đ}y

- Actions: t o s n các hi u ng liên quan đ n c|c h{nh đ ng c a đ i t ng

- Timeline Navigation đi u khi n qu| trình ch i phim Nó cũng t ng t

nh thanh PlayBack khi đi u khi n m t th c phim Trong giáo trình này, chúng ta s th o lu n vi c t o m t thanh PlayBack b ng ActionScript mà không c n s d ng ch c năng Code Snippets Chi ti t chúng ta s tìm hi u trong ch ng Sau khi tìm hi u v cách t o thanh PlayBack không c n

dùng đ n ch c năng Code Snippets tôi đ ngh b n hãy s d ng ch c năng n{y đ t o thanh PlayBack

- Animation: t o các hi u ng đ ng cho c|c đ i t ng MovieClip

- Audio and Video: các ch c năng c a thanh PlayBack đ đi u khi n video và audio khi c|c đ i t ng n{y đ c s d ng trong Flash

- Load and Unload: t o m t m{n hình Splash khi phim đ c t i T i và h y

t i các b c nh đo n phim trong phim Flash đ c t o

- Event Handlers: qu n lý vi c th c thi các Event Event là các s ki n t ng

ng v i m t h{nh đ ng n{o đó c a đ i t ng Nó có th l{ h{nh đ ng khi phim đ c t i (On_Enter), h{nh đ ng t ng ng v i s ki n c a chu t, c a bàn phím Các Event s đ c qu n lý b i các l p t ng ng Các l p này cung c p các ch c năng đ l ng nghe các Event di n ra trên m i đ i t ng Khi có m t Event n{o đó x y ra t ng ng v i c|c h{m đ c tri u g i, nó

s th c thi các ch c năng t ng ng

Chi ti t v các nhóm ch c năng n{y, ta s tìm hi u thêm trong ch ng ActionScript

o Vùng String: cho phép b n tùy ch n ngôn ng cho th c phim c a mình N u

b n mu n phim c a b n hi n th đúng ngôn ng trên các máy tính khác nhau,

b n hãy hi u ch nh trong vùng String này

o Thay đ i phím t t trong Adobe Flash: vào Insert > KeyBoard Shortcuts

Hình 27 H p tho i qu n lý phím t t

N u mu n thay đ i phím t t t ng ng v i m t ch c năng n{o đó b n hãy ch n

ch c năng t ng ng trên vùng Commands sau đó m c ShortCuts, b n b sung

T ng k t ch ng

Trong ch ng n{y chúng ta đ~ làm quen v i m t s khái ni m c b n v đ h a, cái khái ni m v Flash Chúng ta cũng tìm hi u v m t s vùng ch c năng c a Flash Các vùng ch c năng n{y đ c b trí trong menu Windows

Chúng tôi hi v ng, sau khi k t thúc ch ng n{y b n không còn ng ngàng tr c giao di n c a Flash B n s tùy bi n giao di n cho phù h p v i chính b n

M t đi u giúp b n tr nên chuyên nghi p h n l{ b n nên nh các phím t t khi thao tác N u các phím t t đ c b trí không thu n ti n, b n có th thay đ i nó

nh vào Keyboard Shortcuts

Blank Page

Cũng t ng t công c Pencil Brush cũng đ c dùng đ v Ch có m t khác bi t

là nét v c a Brush không bao g m vi n ch có màu n n, còn Pencil thì ng c l i

ch có màu vi n không có màu n n Các thu c tính c a Brush bao g m:

- Fill color: ch n màu cho nét v brush

- Smoothing đ m m d o cho nét v

Hình 29 Công c Brush

Công c Spray Brush

Khi b n b m vào bi u t ng tam giác nh trên bi u t ng Brush, thì s xu t

mà không th o lu n thêm v nó

Đ t o m t ki u phun m{u nh trong hình minh h a, b n ph i l{m theo c|c b c sau đ}y

B c 1: Đ nh nghĩa m t m u màu B n hãy v m t hình đ i di n Ví d trong

tr ng h p c a tôi, tôi s d ng hình ngôi sao 10 cánh có chi u dài c a các cánh xen k nhau t c là cánh dài, cánh ng n liên ti p nhau

B c 2: Hi u chnh kích th c c a nó sao cho phù h p Kích chu t ph i vào nó,

ch n Convert to Symbol > MovieClips và nh p Ok

B c 3: B m ch n công c Spray Brush Trong b ng Properties, ch n m c

Symbol, ch n nút Edit, và ch n bi u t ng mà ta v a t o Sau đó b n hãy hi u

ch nh các thu c tính trên b ng Properties n{y nh đ kéo r ng c a bi u t ng khi phun scale width đ kéo dài c a bi u t ng khi phun scale height đ

r ng c a đ ng phun width đ cao c a đ ng phun (height), góc phun (Brush angle) Các ch đ t o m u ng u nhiên đ kéo giãn c a bi u t ng (random scaling), góc xoay c a bi u t ng (rotate symbol), góc phun (random rotation)

Hình 30 Công c Spray Brush

Công c Erase

Công c dùng đ t y xóa các nét v

2.2 Công c v hình c b n

Công c Line