GIAÙO TRÌNH THIEÁT KEÁ WEB : PHAÀN BAØI TAÄP – TÖÏ HOÏC MACROMEDIA FLASH 5.0 BAÈNG HÌNH AÛNH CHÖÔNG 15
TAÏO XE TAÛI CHUYEÅN ÑOÄNG
Trong phaàn baøi taäp tieáp theo naøy laø moät trong nhöõng phaàn baøi taäp thieát keá nhöõng maãu
aûnh nhoû ñeå hoã trôï cho trang Web cuûa baïn theâm phaàn sinh ñoäng. Trong phaàn naøy baïn seõ taïo ra
moät chieác xe taûi chôû caùt chuyeån ñoäng vaø ñoå caùt vaøo moät vuøng naøo ñoù.
Trong phaàn thöïc haønh naøy baïn phaûi duøng ba giai ñoaïn gheùp aûnh ñeå taïo thaønh moät ñoái
töôïng chuyeån ñoäng hoaøn chænh. Giai ñoaïn ñaàu tieân laø baïn taïo ra chieác xe taûi chuyeån ñoäng, keá
tieáp taïo ra chieác xe taûi ñöùng yeân thöïc hieän coâng vieäc ñoå haøng vaø giai ñoaïn cuoái cuøng laø sau khi
ñoå haøng thì chaïy trôû laïi vò trí xuaát phaùt luùc ban ñaàu.
Caùch thöïc hieän töøng giai ñoaïn nhö sau:
1. Baûo ñaûm raèng baïn ñang ôû chöông trình Flash 5.0. Sau ñoù môû file môùi vaø ñaët teân laø
“Xe Tai”. Kích thöôùc file baïn coù theå choïn tuøy thích.
2. Choïn treân trình ñôn Insert > New Symbol vaø nhaäp vaøo muïc Name laø Banh Xe vaø
muïc Behavior laø Graphic. Sau ñoù choïn OK.
3. Taïi Layer 1 maëc ñònh baïn ñaët teân laïi laø Banh Xe.
Sau ñoù duøng coâng cuï Oval Tool trong hoäp coâng cuï
vaø veõ voøng troøn vaø gaén theâm caùc raêng phuï xung
quanh baùnh xe nhö hình beân caïnh.
Chuù yù : Voøng troøn treân baùnh xe coù ba lôùp maøu khaùc nhau.
Baïn coù theå veõ ba voøng troøn khaùc nhau sau ñoù gheùp choàng vaøo
nhau.
TUÛ SAÙCH STK – THEÁ GIÔÙI ÑOÀ HOÏA BIEÂN SOAÏN : KS PHAÏM QUANG HUY
321
GIAÙO TRÌNH THIEÁT KEÁ WEB : PHAÀN BAØI TAÄP – TÖÏ HOÏC MACROMEDIA FLASH 5.0 BAÈNG HÌNH AÛNH CHÖÔNG 15
4. Duøng coâng cuï Arrow Tool ñeå choïn taát caû caùc ñoái töôïng treân baùnh xe vaø choïn tieáp treân
trình ñôn Modify > Group (hay nhaán phím Ctrl + G) ñeå nhoùm caùc ñoái töôïng treân
baùnh xe hôïp nhaát thaønh moät.
5. Choïn treân trình ñôn Insert > New Symbol vaø nhaäp vaøo muïc Name laø Graphic Banh
Xe vaø muïc Behavior laø Graphic. Sau ñoù choïn OK.
6. Choïn treân trình ñôn Window > Library ñeå môû cöûa soå thö vieän xuaát hieän. Sau ñoù nhaáp
chuoät vaøo muïc teân Banh Xe vaø keùo bieåu töôïng baùnh xe hieån thò taïi cöûa soå vaøo trong
vuøng laøm vieäc.
7. Baûo ñaûm raèng ñoái töôïng baùnh xe ñang ñöôïc choïn, nhaáp chuoät taïi keyframe thöù 20
treân thanh thöôùc. Sau ñoù nhaán phím F6 ñeå taïo chuyeån ñoäng cho baùnh xe.
8. Choïn trôû laïi keyframe thöù nhaát treân Layer Banh Xe vaø nhaáp phaûi chuoät choïn leänh
Create Motion Tween trong trình ñôn Context.
TUÛ SAÙCH STK – THEÁ GIÔÙI ÑOÀ HOÏA BIEÂN SOAÏN : KS PHAÏM QUANG HUY
322
GIAÙO TRÌNH THIEÁT KEÁ WEB : PHAÀN BAØI TAÄP – TÖÏ HOÏC MACROMEDIA FLASH 5.0 BAÈNG HÌNH AÛNH CHÖÔNG 15
Choïn leänh Create Motion Tween cho ñoái töôïng
9. Sau ñoù baïn chia chuoãi frame naøy thaønh 4 keyframe khaùc nhau nhö sau: Nhaáp chuoät taïi
keyframe thöù 5 vaø nhaán phím F6. Vaãn ñeå chuoät choïn keyframe thöù 5 naøy vaø choïn
coâng cuï Arrow Tool vaø choïn taïi vuøng coâng cuï boå sung coâng cuï Rotate vaø xoay ñoái
töôïng baùnh xe moät goùc 900 theo chieàu kim ñoàng hoà.
10. Tieáp ñeán baïn laëp laïi böôùc 9 ôû treân cho keyframe thöù 10, 15 vaø 20. Sau khi taïo chuyeån
ñoäng cho keyframe treân Layer1 naøy, baïn coù theå xem chuùng dieãn hoaït baèng caùch nhaán
phím Enter.
Caùc keyframe treân Layer Banh Xe
11. Laëp laïi töø böôùc 5 cho ñeán böôùc 10 ñeå taïo ra theâm moät baùnh xe nöõa nhöng ñaët teân cho
baùnh xe naøy laø Graphic Banh Xe Nguoc, taïo baùnh xe xoay ngöôïc chieàu kim ñoàng hoà.
12. Baây giôø baïn taïo môùi moät Symbol nöõa baèng caùch choïn treân trình ñôn Insert > New
Symbol vaø ñaët teân cho muïc Name trong hoäp thoaïi Symbol Properties laø Hai Banh Xe
Xoay, muïc Behavior choïn laø Graphic. Sau ñoù choïn OK.
TUÛ SAÙCH STK – THEÁ GIÔÙI ÑOÀ HOÏA BIEÂN SOAÏN : KS PHAÏM QUANG HUY
323
GIAÙO TRÌNH THIEÁT KEÁ WEB : PHAÀN BAØI TAÄP – TÖÏ HOÏC MACROMEDIA FLASH 5.0 BAÈNG HÌNH AÛNH CHÖÔNG 15
13. Baûo ñaûm raèng cöûa soå thö vieän vaãn coøn xuaát hieän trong vuøng laøm vieäc. Choïn muïc
Graphic Banh Xe vaø keùo bieåu töôïng baùnh xe xoay vaøo trong vuøng laøm vieäc taïi
Layer1.
14. Choïn treân trình ñôn Insert > Layer ñeå taïo môùi tieáp cho Layer2. Baïn cuõng keùo baùnh
xe xoay taïi cöûa soå thö vieän nhö ñaõ noùi trong böôùc 12 ôû treân vaøo trong Layer2 naøy vaø
saép ñaët trong vuøng laøm vieäc sao cho hai baùnh xe naøy coù khoaûng caùch coá ñònh.
15. Taïo môùi tieáp moät Layer thöù 3 vaø duøng coâng cuï Rectangle Tool trong hoäp coâng cuï,
sau ñoù veõ treân Layer naøy moät thanh vuoâng ngang noái lieàn baùnh xe tröôùc vaø baùnh xe
sau nhö hình sau.
16. Nhaáp chuoät taïi keyframe thöù 30 treân Layer3 (Layer coù thanh ngang) vaø nhaán phím F6.
Sau ñoù trôû laïi keyframe thöù nhaát treân Layer naøy vaø nhaáp phaûi chuoät choïn leänh Create
Motion Tween coù trong trình ñôn Context xuaát hieän sau ñoù taïi thanh thöôùc Timeline.
17. Baïn cuõng laäp laïi böôùc 16 cho Layer1 vaø Layer2. Sau ñoù nhaáp chuoät taïi keyframe cuoái
cuøng (keyframe thöù 30) treân Layer1 vaø nhaán giöõ phím Shift trong khi ñoù nhaáp chuoät
vaøo keyframe cuoái cuøng treân Layer2 vaø Layer3.
TUÛ SAÙCH STK – THEÁ GIÔÙI ÑOÀ HOÏA BIEÂN SOAÏN : KS PHAÏM QUANG HUY
324
GIAÙO TRÌNH THIEÁT KEÁ WEB : PHAÀN BAØI TAÄP – TÖÏ HOÏC MACROMEDIA FLASH 5.0 BAÈNG HÌNH AÛNH CHÖÔNG 15
Nhaáp chuoät di chuyeån ba ñoái töôïng choïn naøy vaø di chuyeån treân moät ñöôøng thaúng
höôùng sang phaûi moät khoaûng caùch ngaén naøo ñoù tuøy thích.
18. Nhaán phím Enter sau khi hoaøn taát coâng vieäc taïo chuyeån ñoäng cho caùc ñoái töôïng trong
Graphic Symbol naøy ñeå xem chuùng dieãn hoaït. Sau ñoù baïn coù theå chænh söûa laïi chuùng.
Theá laø baïn vöøa taïo xong 2 baùnh xe chuyeån ñoäng.
19. Baïn choïn treân trình ñôn Insert > New Symbol ñeå taïo ra ñoái töôïng laø 2 baùnh xe ñöùng
yeân. Trong muïc Name taïi hoäp thoaïi Symbol Properties nhaäp vaøo laø Hai Banh Xe
Dung Yen, muïc Behavior choïn laø Graphic.
20. Sau ñoù baïn keùo hai baùnh xe trong muïc Hai
Banh Xe Xoay taïi cöûa soå thö vieän vaøo trong
Symbol Hai Banh Xe Dung Yen naøy. Luùc naøy
baïn seõ coù ñöôïc 2 baùnh xe ñöùng yeân.
21. Choïn tieáp trình ñôn Insert > New Symbol nöõa vaø choïn caùc muïc trong hoäp thoaïi
Symbol Properties nhö sau:
22. Nhaáp chuoät taïi Layer1 vaø ñaët teân laïi laø Layer ThungXe. Sau ñoù choïn coâng cuï
Rectangle Tool vaø coâng cuï Line Tool trong hoäp coâng cuï beân traùi giao dieän vaø veõ vaøo
trong vuøng laøm vieäc khung xe taûi vaø duøng coâng cuï Text Tool nhaäp kyù töï vaøo vaø ñaët
treân thaân xe nhö hình sau.
TUÛ SAÙCH STK – THEÁ GIÔÙI ÑOÀ HOÏA BIEÂN SOAÏN : KS PHAÏM QUANG HUY
325