Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

THIEÁT KEÁ BANNER FLASH CHO TRANG WEB

VÔÙI KOOLMOVES 4.6.5

Ñoïc tôø baùo naøy, haún baïn laø ngöôøi yeâu thích maùy tính cuõng nhö coâng ngheä thoâng tin vaø trong soá
caùc baïn ñang ñoïc ñaây, coù leõ cuõng coù moät soá baïn, gioáng nhö toâi, ñang thöû töï thieát keá cho mình moät trang
web caù nhaân.Laø nhöõng ngöôøi “chung chí höôùng vôùi nhau”, toâi xin chia seû vôùi caùc baïn moät tí kinh nghieäm (vaø
cuõng laø ñeå kieám chuùt boài döôõng buø laïi thôøi gian maø toâi ñaõ boû ra ñeå taäp taønh thieát keá ☺ ). Nhö caùc baïn ñaõ
bieát, trang web naøo maø chaúng coù banner, tröø nhöõng trang web vì tieát kieäm baêng thoâng neân giaûm bôùt hình
aûnh. Toâi thì toâi thích banner flash vì noù … nhaáp nhaùy, vui maét. Banner “nhaáp nhaùy” thì nhöõng phaàn meàm
chænh söûa hình aûnh nhö Photoshop, GIMP cuõng laøm ñöôïc nhöng toâi laïi chöa raønh caùch söû duïng (Toâi duøng
GIMP nhöng chæ môùi bieát gheùp aûnh thoâi haø). Ñeå thieát keá banner flash, toâi duøng KoolMoves v.4.6.5. Toâi khoâng
duøng Flash (cuûa Macromedia) vì maùy yeáu vôùi laïi toâi thích duøng nhöõng phaàn meàm naøo laø laï cô. KoolMoves khaù
nheï (taäp tin caøi ñaët cuûa v.4.6.5 chæ 2,3 MB, cuûa v.4.7.2 coøn nheï hôn, coù ñieàu toâi chæ coù baûn ñaày ñuû cuûa
v.4.6.5, anh keá cuûa v.4.7.2), ñôn giaûn maø vaãn ñuû chöùc naêng ñeå laøm phim hoaït hình, khoâng chæ laøm banner thoâi
ñaâu.
Chuù yù: Neáu vieäc laøm hoaït hình ñöôïc thöïc hieän treân maùy khoâng noái maïng
Internet thì coù theå trình duyeät treân maùy tính bò thieáu plug-in Macromedia Flash
Player (nhö maùy maø toâi ñang duøng), khi ñoù baïn seõ khoâng theå xem ñöôïc flash cuûa
mình.Caùch giaûi quyeát nhö sau: Neáu baïn duøng firefox, haõy vaøo trang
www.mozilla.org, nhaäp “Flash Player” vaøo oâ Search ñeå tìm Flash Player cho
Firefox, taûi taäp tin caøi ñaët Flash Player veà roài cheùp sang maùy cuûa baïn vaø caøi ñaët.
Coøn vôùi IE thì hôi phöùc taïp vì theo caùch thoâng thöôøng, maùy cuûa baïn phaûi vöøa noái
maïng vöøa caøi ñaët. Tuy nhieân baïn coù theå duøng Google ñeå tìm ôû ñaâu ñoù taäp tin caøi
ñaët offline (khoâng caàn phaûi noái maïng) hay vaøo thaúng trang hongquan.uni.cc (> Taûi
phaàn meàm > Nghe nhìn) ñeå taûi veà flashplayer.rar. Trong goùi neùn naøy coù Flash
Player v.7 vaø v.8 (môùi nhaát). Tröôùc tieân haõy caøi FlashPlayer 7, sau ñoù caøi
FlashPlayer 8 neáu muoán.

Tìm KoolMoves ôû ñaâu ?

1
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

Ñeå coù KoolMoves (KM), baïn coù theå taûi ôû http://hongquan.uni.cc ( > Taûi phaàn
meàm > Thieát keá ) hay
http://www.quannho.5gigs.com/downloads/KoolMoves_v465.rar (nhôù vieát chöõ hoa
ñuùng nheù, vì taäp tin naøy ñöôïc löu treân maùy duøng HÑH Llinux, coù phaân bieät chöõ
hoa, chöõ thöôøng, coù ñieàu ñaùng phaøn naøn laø ñòa chæ naøy khoâng ñöôïc oån ñònh cho
laém) hay göûi email cho toâi, toâi seõ göûi laïi noù cho baïn. Tröôùc khi taûi, haõy chaéc chaén
laø baïn coù winrar ñeå giaûi neùn nhöõng taäp tin *.RAR. Neáu khoâng haõy taûi ôû
www.rarlab.com nheù, mieãn phí maø laïi nheï nöõa.
Goùi KoolMoves_v465.rar taûi veà naëng khoaûng 5MB vì ngoaøi kmsetup.exe ñeå
caøi ñaët coøn coù km_libraries.exe (taäp tin neùn töï bung) laø thö vieän cho KM, baïn coù
theå caøi hay khoâng cuõng ñöôïc.
Khi baïn laøm vieäc baèng KM thì quaù trình laøm vieäc cuûa baïn ñöôïc löu laïi döôùi
daïng taäp tin *.FUN (nghe laø thaáy vui, thaáy coù höùng roài, phaûi khoâng ☺ ). Töø taäp tin
FUN naøy, baïn seõ xuaát (export) ra flash (taäp tin *.SWF), luùc ñoù môùi tröng baøy treân
web ñöôïc.
Haún caùc baïn ñaõ bieát vieäc chieáu phim thöïc ra laø söï trình chieáu lieân tuïc moät
loaït hình aûnh vôùi toác ñoä cao (thöôøng 24 hình/ giaây). Flash cuõng gaàn nhö vaäy, noù taïo
ra nhieàu khung hình (frame) ñeå trình chieáu nhöng soá khung hình ít hôn vaø coù söï
öùng duïng cuûa laäp trình neân coù theå coù chuyeån ñoäng treân moät khung hình vaø ngöôøi
xem coù theå taùc ñoäng vaøo söï trình chieáu. Flash coù 2 loaïi khung hình: khung choát
(key frame) laø nôi baïn seõ veõ hình leân ñoù vaø caùc khung trung gian (tween frame)
naèm xen giöõa. Khung trung gian ñöôïc KM xöû lyù töï ñoäng nhaèm laøm cho söï thay ñoåi
giöõa 2 khung choát keá tieáp nhau nhòp nhaøng hôn, nhôø ñoù ta thaáy chuyeån ñoäng treân
phim uyeån chuyeån, gioáng thaät hôn. Kyõ thuaät naøy ñöôïc goïi laø “smoothing”- “laøm
trôn”, KM goïi laø “morphing”. Soá khung trung gian laø do baïn quy ñònh, neáu baèng 0
thì chaúng coù “morphing” naøo xaûy ra heát.
Baây giôø chuùng ta cuøng laøm quen vôùi giao dieän cuûa KM (hôi ñôn
giaûn).

2
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

KM coù 4 kieåu giao dieän töông öùng vôùi 4 möùc kó naêng: wizards, basic, advanced,
cartooning, maëc ñònh laø Advanced. Baïn coù theå choïn giao dieän töø phía phaûi cuûa
thanh coâng cuï chuaån hay töø File  Preferences  User interface style.

Thanh coâng cuï chuaån :

1): Xuaát ra flash, goàm xuaát ra chæ taäp tin SWF hay vöøa SWF vöøa HTML (duøng ñeå
xem flash)
2): Goïi baûng Properties ñeå xem tính chaát cuûa hình veõ hay ñoái töôïng ñaõ choïn treân
khung.
3) Hieän baûng Score/Timeline.
4) Xem baûng Movie Overview (xem moät caùch toång quaùt veà phim nhö: caùc khung
choát, caùc hình veõ, caùc haønh ñoäng, aâm thanh… ).
5): Pan, duøng ñeå “xeâ xích” baûn veõ ñeán nôi mình muoán.
6): Zoom, ñeå soi lôùn/nhoû baûn veõ.
7): Xem trôï giuùp.

3
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

8): Choïn giao dieän.

Baûng Score/Timeline: Xem caùc khung choát vaø caùc hình aûnh, ñoái töôïng cuøng
caùc hieäu öùng, haønh ñoäng (taét nhaïc, chôi nhaïc, daãn ñeán moät trang web v.v…) treân
ñoù.

I - Score/Timeline: Xem soá khung choát (treân thöôùc 4) vaø choïn caùc ñoái töôïng treân
khung (choïn baèng caùch nhaáp chuoät vaøo caùc chaám treân baûng). Copy hình ñaõ choïn
vaøo khung keá tieáp.
1) Ñaåy hình ñaõ choïn sang khung keá traùi hay phaûi.
2) Taêng chieàu daøi cuûa phim.
Nhöõng baûng nhö theá naøy thöôøng coù daáu tam giaùc beân döôùi nuùt Close (X), khi
baïn nhaán vaøo nuùt naøy, baûng seõ thu nhoû laïi.
II- Effects: Caùc hieäu öùng treân hình. Seõ xuaát hieän nuùt coù daáu + ñeå baïn theâm hieäu
öùng cho hình ñaõ choïn.
III- Sounds & Actions: Caùc haønh ñoäng, aâm thanh ñöôïc nhuùng vaøo phim.
IV – Story Board: Xem dieãn bieán caâu chuyeän cuûa phim qua caùc khung hình choát.

Baûng List of Shapes (ñöôïc goïi ra baèng View > List of Shapes) :

Xem, choïn vaø chænh söûa (ñoåi teân, xoùa, sao cheùp, khoaù …)
caùc ñoái töôïng trong khung. Haõy chuù yù vò trí töông ñoái giöõa
caùc ñoái töôïng, nhöõng ñoái töôïng naèm treân coù theå che khuaát
nhöõng ñoái töôïng naèm döôùi. Baïn coù theå giaûi quyeát vaán ñeà ñoù
treân baûng naøy, baèng caùch choïn ñoái töôïng roài nhaán vaøo nuùt
muõi teân treân baûng ñeå ñöa leân treân hay xuoáng döôùi sao cho
hôïp lyù.

4
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

ÔÛ ñaây, baïn coøn coù theå choïn cuøng luùc nhieàu hình (vöøa nhaán Ctrl vöøa choïn hay nhaán
vaøo “Shapes” ñeå choïn toaøn boä) ñeå nhoùm caùc hình thaønh moät nhoùm (group). Nhoùm
hình ñöôïc theå hieän treân baûng vôùi chöõ G ñaäm phía traùi. Vieäc khoùa (lock) hình coù
taùc duïng traùnh nhöõng thay ñoåi xaûy ra moät caùch voâ tình ñoái vôùi hình ñöôïc khoaù khi
ta ñang thay ñoåi treân hình khaùc.

Thanh coâng cuï ñöùng:

1) Choïn/di chuyeån hình. Hình veõ treân khung ñöôïc taïo thaønh töø söï noái lieàn caùc
ñieåm. Khi baïn nhaán chuoät (ñang ôû nuùt 1) leân hình
thì caùc ñieåm naøy seõ hieän ra, trong ñoù caùc ñieåm
vuoâng laø ñieåm noái. Ñieåm troøn naèm giöõa 2 ñieåm
vuoâng thì laøm cong ñöôøng thaúng noái 2 ñieåm aáy.

2) Choïn/di chuyeån ñieåm. Baèng caùch di chuyeån ñieåm,

baïn coù theå laøm hình veõ bò meùo moù, bieán daïng tuyø
thích, gioáng nhö naën ñaát seùt aáy maø.
3) Cheøn hình aûnh hoaëc moät ñoaïn flash töø ngoaøi vaøo.
Löu yù khi baïn cheøn flash thì treân baûn veõ baïn seõ
khoâng thaáy noù maø chæ thaáy hình chöõ nhaät ñaïi dieän.
Khi xuaát phim cuûa baïn ra thaønh flash thì baïn seõ
thaáy thoâi.
Haõy chuù yù daáu tam giaùc maøu ñen ôû goùc döôùi cuûa nuùt, noù cho bieát nuùt naøy
coù phuï choïn. Nhöõng phuï choïn naøy hieän ra khi baïn nhaán vaøo daáu ta giaùc hay
nhaán vaø giöõ nuùt laâu moät chuùt.
4) Theâm chöõ (text) vaøo phim. Coù 1 ñieàu toâi raát vöøa yù laø KoolMoves khoâng
nhöõng hoã trôï Unicode maø caû font VNI nöõa, maø caùc baïn laïi bieát raèng font VNI

5
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

coù raát nhieàu font ñeïp nhö Thö phaùp, VNI-Maria, VNI-Linus v.v…

5) Theâm movieclip (ñoaïn phim hoaït hình con) vaøo phim chính.
6) Theâm text vôùi hieäu öùng maãu, theâm maãu laáy töø thö vieän (neáu baïn coù caøi ☺ ).
7) Theâm nhöõng ñoái töôïng nhö thanh cuoán, danh saùch choïn, nuùt nhaán, oâ ñaùnh
daáu (nhö treân caùc trang web hay coù aáy maø).
Sau ñaây laø nhöõng duïng cuï veõ:
8) Veõ nhöõng hình ñôn giaûn nhö hình troøn, vuoâng, chöõ nhaät, eâlip (coù 5 phuï
choïn).
9) Veõ hình theo kieåu ñieåm noái ñieåm. Sau khi choïn nuùt 9, baïn ñaùnh daáu leân
khung ñeå taïo ñieåm, khi ñoù giöõa 2 ñieåm keá nhau seõ coù ñöôøng noái. Taïi ñieåm
cuoái cuøng, baïn nhaáp keùp chuoät ñeå keát thuùc, ñöôøng bieân cuûa hình ñöôïc taïo
thaønh. Nuùt naøy coù 2 phuï choïn: ñöôøng bieân kín hay hôû. Tính chaát kín hay hôû
coù theå thay ñoåi sau khi veõ baèng caùch choïn hình roài goïi baûng Properties ra,
sau ñoù choïn giaù trò Yes/No cho caâu hoûi “Is closed ?”. Treân baûng naøy baïn coøn
coù theå laøm cho mieàn trong cuûa hình ñöôïc laáp ñaày hay khoâng taïi caâu hoûi “Is
filled ?”.

6
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

10) Veõ hình/ñöôøng theo kieåu caàm buùt (2 phuï choïn).

11) Veõ ñöôøng theo kieåu ñieåm noái ñieåm, cuõng nhaáp keùp taïi ñieåm cuoái cuøng.
Khi choïn caùc nuùt treân, baïn coù theå choïn theâm moät soá tính chaát nhö maøu saéc, ñoä
daøy neùt cho coâng cuï veõ taïi vuøng 17)
12) Theâm ñieåm troøn vaøo giöõa 2 ñieåm vuoâng (ñeå laøm cong ñöôøng thaúng noái 2
ñieåm vuoâng). Ñieåm troøn seõ naèm ôû choã maø baïn chaám chuoät vaøo.
13)/14) Theâm/bôùt ñieåm vuoâng.
15) Nuùt naøy coù tôùi 7 phuï choïn nhö sau:

1/Thay ñoåi to nhoû.

2/Xoay theo truïc vuoâng goùc vôùi maët phaúng hình
veõ.
3/Laät ngang
4/Laät leân xuoáng.
5/Ñaåy moät ñaàu trong khi ñaàu kia coá ñònh.
6/Ñeø beïp
7/Xoay theo moät truïc naèm treân maët phaúng hình veõ.

7
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

16)Laáp ñaày mieàn trong cuûa hình baèng maøu hay hình aûnh, toâ maøu cho chöõ.

Baïn coù theå choïn hình cuøng luùc treân nhieàu

khung: 2)treân taát caû caùc khung, 3)treân khung
hieän taïi cuøng taát caû caùc khung tröôùc noù, 4)treân
khung hieän taïi cuøng taát caû caùc khung sau noù.

Duøng caùc coâng cuï cuûa KoolMoves nhö theá naøo?

Sau khi ñaõ laøm quen vôùi KoolMoves, baây giôø chuùng ta haõy baét ñaàu vaøo vieäc. Toâi
ñang thieát keá banner flash cho www.photojerk.com, moät host löu tröõ hình aûnh
mieãn phí (toâi ñaõ duøng dòch vuï naøy ñeå löu nhöõng baøi nhaïc flash maø toâi söu taàm
ñöôïc vaø raát vöøa yù veà toác ñoä taûi cuûa noù). YÙ töôûng veà banner naøy nhö sau: Toâi seõ
veõ chöõ Photojerk loàng trong moät böùc aûnh moät röøng caây. Röøng caây raäm raïp bieåu
töôïng cho söùc chöùa cuûa host, treân böùc aûnh aáy toâi veõ theâm moät doøng chaûy taïo
thaønh töø nhöõng taám aûnh nhoû, yù noùi söï maïnh meõ cuûa host Photojerk.

Baây giôø toâi seõ ñònh kích thöôùc cho banner laø 756 x 160 pixels trong Movie > Movie
Width/Height.

8
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

Ñeå caên hình cho chính xaùc, baïn neân phuû löôùi toïa ñoä leân baûn veõ baèng caùch vaøo
Options > Grid.
Chuùng ta neân veõ rieâng töøng thaønh phaàn nhö chöõ, phoâng neàn, sau ñoù duøng
leänh File > Import ñeå nhaäp noù vaøo laøm moät. Trong quaù trình laøm, chuùng ta neân
soi lôùn vaø duøng coâng cuï hình baøn tay ñeå di chuyeån baûn veõ ñeå nhìn cho roõ raøng.
Tröôùc tieân toâi veõ chöõ P. Ñeå veõ chaân chöõ P, toâi veõ hình chöõ nhaät ñöùng tröôùc
roài duøng caùc coâng cuï nhö theâm ñieåm, bôùt ñieåm, di chuyeån ñieåm ñeå chænh söûa laïi
hình daïng nhö yù muoán. Ñoái vôùi löng chöõ P toâi cuõng laøm töông töï, nhöng baét ñaàu
baèng veõ theo kieåu ñieåm noái ñieåm.
Baïn ñöøng queân ñaët teân cho töøng hình ñeå deã nhaän
bieát sau naøy.
Sau khi veõ vaø xeáp ñaët xong, toâi keùo chuoät ñeå choïn caû
2 hình.

Sau ñoù nhaán Ctrl + G ñeå nhoùm chuùng laøm moät vaø löu
laïi thaønh taäp tin p.fun. ÔÛ böôùc naøy baïn coù theå toâ maøu cho chöõ P nhöng toâi seõ ñeå
sau.

Baây giôø baïn môû moät taäp tin môùi ñeå baét ñaàu veõ chöõ h. Chöõ h thì toâi khoâng caàn
caàu kyø nhö chöõ P neân toâi seõ baét chöôùc font chöõ saün coù.
Toâi duøng coâng cuï Text ñeå cheøn moät chöõ h vaøo (côõ chöõ bao nhieâu thì baïn töï
tính toaùn nheù).

9
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

Tieáp theo toâi duøng caùch veõ ñieåm noái ñieåm ñeå veõ moät
chöõ h khaùc choàng leân chöõ h ñaõ cheøn (baïn neân toâ maøu
chöõ h naøy nhaït moät tí cho deã nhìn khi veõ choàng leân).

Coù leõ baïn seõ thaéc maéc vì sao toâi khoâng duøng luoân chöõ h (text) maø phaûi veõ laïi
laøm gì cho maát coâng? AÁy laø toâi coù yù ñònh toâ maøu cho chöõ h baèng maøu doác
(gradient) - baïn seõ thaáy maøu ñoù nhö theá naøo sau, ñöøng noân noùng – maø chöõ h
(text) laïi khoâng cho pheùp toâ maøu kieåu naøy.
Veõ xong baïn keùo chöõ h veõ sau sang moät beân, luùc naøy baïn ñaõ coù
theå xoùa chöõ h cuõ ñöôïc roài. Baây giôø toâi toâ maøu cho chöõ h baèng caùch
choïn noù roài nhaáp vaøo coâng cuï Shape Fill (laø coâng cuï soá 16 ñaõ noùi ôû
treân). Trong hoäp thoaïi Shape Fill, toâi choïn Gradient Color ñeå toâ
maøu doác. Vì trang www.photokerk.com coù 3 maøu chuû ñaïo laø naâu,
vaøng, traéng neân toâi seõ choïn 3 maøu naøy ñeå toâ cho chöõ h. Haõy nhìn thanh tröôït maøu
coù caùc nuùt ñònh maøu. Baïn theâm bôùt caùc nuùt naøy baèng daáu +/- keá beân.

Neáu baïn muoán giöõ maøu naøy laïi ñeå toâ tieáp cho nhöõng hình sau, haõy nhaán vaøo
Sample roài nhaán Add ñeå giöõ maøu ñoù laïi.

10
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

Nhö vaäy, sau naøy muoán toâ cho hình khaùc baèng maøu naøy, baïn choïn caùc maøu
ñaõ löu trong Sample roài nhaán Select > OK.
Neáu baïn muoán toâ baèng maøu ñaëc thì choïn Solid Color, muoán laáp ñaày hình
baèng moät hình aûnh naøo ñoù thì choïn Image (trong hoäp thoaïi keá tieáp nhaán vaøo bieåu
töôïng thö muïc ñeå tìm choïn hình aûnh trong maùy maø baïn caàn, nhaán vaøo caây buùt keá
beân ñeå ñöa hình aûnh vaøo moät phaàn meàm chænh söûa aûnh naøo ñoù nhö Photoshop hay
Gimp, PhotoFiltre. Nhöõng phaàn meàm naøy baïn quy ñònh tröôùc trong File >
Preferences > Images Editors).
Xin noùi qua veà caùc nuùt trong hoäp thoaïi Shape Fill:
1) Xoay maøu, hình aûnh; 2) Ñieàu chænh kích thöôùc daûi maøu hay hình aûnh; 4) Laøm
leäch maøu, hình aûnh theo höôùng ngang (horizontally) hay doïc (vertically).

11
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

Neáu baïn cho giaù trò döông, maøu hay hình aûnh seõ leäch sang phaûi hay leân treân
vaø ngöôïc laïi neáu baïn cho giaù trò aâm. Theo kinh nghieäm cuûa toâi, ñoái vôùi maøu doác
baïn leân cho giaù trò trong khoaûng (0;1) coøn ñoái vôùi hình aûnh neân cho giaù trò lôùn
hôn 1.
5) Ñieàu chænh caùc thuoäc tính khaùc cuûa maøu nhö RGB (Red – Green – Blue),
Hue (maøu caàu voàng), Ñoä thaãm (Saturation), ñoä saùng (Lightness) baèng thanh
tröôït.
6) Laáy maøu töø hình khaùc, coù ích khi maøu baïn muoán khoâng coù saün trong baûng
maøu cuûa hoäp thoaïi. Ví duï maøu baïn muoán naèm trong moät hình aûnh naøo ñoù, baïn
chæ caàn nhaäp (import) aûnh ñoù vaøo baûn veõ roài duøng coâng cuï naøy chaám leân choã coù
maøu baïn öng yù treân hình. Khi xong vieäc baïn chæ caàn xoùa hình aûnh ñoù ñi.
7) Ñoä trong suoát cuûa hình.
Neáu baïn muoán daûi maøu doác coù daïng hình troøn thì ñaùnh daáu vaøo “Radial”.
Nhö vaäy laø baïn ñaõ hoaøn thaønh chöõ h, baïn seõ löu laïi thaønh taäp tin h.fun. Caùc
chöõ khaùc baïn cuõng laøm töông töï. Rieâng chöõ o, baïn xem nheù:

Neáu chöõ o maø baïn veõ baèng hai voøng troøn loàng vaøo
nhau thì noù seõ che khuaát maát hình aûnh ñaèng sau, vì vaäy
toâi phaûi veõ noù nhö hình beân, coi nhö laø chöõ o ñöôïc caùch
ñieäu ☺.

Baây giôø chuùng ta seõ taïo moät taäp tin môùi, ñaët teân laø
photojerk.fun. Sau ñoù chuùng ta vaøo File > Insert

12
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

KoolMoves Movie ñeå cheøn caùc chöõ ñaõ veõ vaøo . Nhaán vaøo bieåu töôïng thö muïc ñeå tìm
thö muïc chöùa caùc taäp tin FUN maø baïn ñaõ löu.

Ñöøng queân taïo löôùi toïa ñoä cho baûn veõ vì baây giôø baïn chuaån bò xeâ dòch caùc chöõ neân
caàn coù moác ñeå caên chænh cho chính xaùc. AØ, ñeå taïo boùng cho hình, caùc baïn choïn taát
caû roài nhaán Ctrl + G ñeå nhoùm laøm moät, sau ñoù vaøo Effects > Drop Shadow, choïn
kieåu ñoå boùng roài nhaán OK. Cuoái cuøng nhaán Shift+Ctrl+G ñeå thoâi nhoùm hình.

13
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

Caùc baïn haõy veõ quyõ ñaïo chuyeån ñoäng cho töøng chöõ, sau naøy ta seõ xoùa nhöõng quyõ
ñaïo naøy ñi. Vì soá hình treân baûn veõ hôi nhieàu neân chuùng ta neân ñaët teân cho chuùng
sao cho deã phaân bieät (ñaët teân treân baûng List of shapes hay Score/Timeline).

Toâi khoâng veõ quyõ ñaïo cho chöõ j, r, k vì toâi muoán duøng noù laøm maãu ñeã giôùi thieäu
caùc hieäu öùng khaùc. Baây giôø baïn haõy taïo theâm nhieàu khung choát nöõa baèng caùch
copy nhieàu laàn khung choát ñaõ coù leân. Ñaây laø thao taùc raát cô baûn khi laøm phim hoaït
hình ñaáy baïn. Haõy nhaán vaøo nuùt coù daáu coäng naèm phía döôùi cuøng vaø choïn Add
Copy of Frame .

Baïn haõy tính toaùn soá khung choát caàn theâm nheù. ÔÛ ñaây yù
cuûa toâi laø cho töøng chöõ laàn löôït di chuyeån töø ngoaøi vaøo
ñuùng choã cuûa noù, theo thöù töï chöõ e vaøo choã tröôùc roài ñeán
chöõ o, t, o, h, P, cho neân soá khung toâi laáy laø 15, trong ñoù
12 khung cho chuyeån ñoäng, 3 khung sau cho caùc chöõ naèm
yeân ñeå noù xuaát hieän tröôùc maét ngöôøi xem laâu laâu moät tí.
Neáu baïn coù laáy dö khung choát cuõng chaúng sao, baïn coù theå duøng baûng
Score/Timeline ñeå choïn moät khung naøo ñoù roái nhaán vaøo nuùt coù daáu tröø ñeå xoùa
noù ñi.
Töø baûng Score/Timeline, baïn haõy ñeán khung choát 11, cho luøi chöõ P veà moät
böôùc treân quyõ ñaïo cuûa noù; ôû khung 10, cho luøi chöõ P veà 2 böôùc, chöõ h 1 böôùc; ôû

14
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

khung 9, cho chöõ P luøi 3 böôùc, chöõ h 2 böôùc, chöõ o thöù nhaát 1 böôùc vaø cöù tieáp
tuïc nhö theá. ÔÛ khung naøo maø khoâng coøn choã cho chöõ luøi nöõa thì baïn haõy xoùa noù
ñi. ÔÛ ñaây yù töôûng cuûa toâi laø cho chöõ P vöøa ñi vöøa xoay vöøa thay ñoåi kích thöôùc
neân toâi seõ duøng caùc phuï choïn cuûa coâng cuï soá 15 treân baûng Tool ñeå bieán ñoåi treân
töøng khung choát.

Ñoái vôùi chöõ j, toâi seõ theâm hieäu öùng toû daàn cho noù. Caùc baïn haõy trôû veà khung
choát ñaàu tieân, choïn chöõ j roài vaøo Effect > Fade/size > Choïn Initial fade in roài
nhaán vaøo baøn tay keá beân ñeå ñieàn soá khung choát maø hieäu öùng xaûy ra > OK > OK.

Ñoái vôùi chöõ r vaø k, toâi theâm hieäu öùng chuyeån ñoäng nhö sau: Choïn moät trong hai
chöõ r, k roài vaøo Effects > Motion Script

15
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

Ñeå hieäu öùng laëp laïi, toâi choïn giaù trò Yes cho Loop, quy ñònh khoaûng döøng
giöõa caùc laàn laëp (Pause between loops (msec)) laø 3600 (miligiaây) vaø caùc giaù trò
khaùc nhö trong hình).
Cuoái cuøng baïn xoùa caùc quyõ ñaïo ñi. Ñeå xem laïi ñoaïn phim ñaõ vöøa loøng chöa,
baïn nhaán vaøo nuùt coù muõi teân maøu hoàng (Play). Moät menu seõ hieän leân nhö sau:

Play in Web Browser: Xem trong trình duyeät. Theo

maëc ñònh, KoolMoves seõ duøng Internet Explorer ñeå
xem. Neáu baïn thích xem baèng Firefox, haõy choïn noù laøm
trình duyeät maëc ñònh roài vaøo File > Preferences…Trong
Web Browser, choïn Default Browser > OK.
Play Portion of Movie: Xem moät phaàn phim hoaït
hình treân nhöõng khung choát naøo ñoù (maø baïn seõ
quy ñònh).

Play in Stand-Alone Player: Xem baèng Flash Player ñoäc laäp (moät phaàn
meàm chaïy rieâng, khoâng phaûi plug-in cuûa trình duyeät).

Khi ñaõ vöøa yù vôùi ñoaïn hoaït hình vöøa roài, baïn haõy xuaát noù ra (export) thaønh
photojerk.swf. Tieáp ñeán laø doøng chöõ “free image hosting” toâi chæ caàn duøng text vôùi
kích thöôùc baûn veõ nhoû thoâi vaø aùp duïng hieäu öùng chuyeån ñoäng (Motion script)
Sweeping Highlight roài cuõng cho laëp (loop: yes) sau ñoù toâi löu laïi thaønh
freeimagehosting.fun vaø xuaát ra freeimagehosting.swf.
Baây giôø toâi taïo moät taäp tin môùi teân laø banner.fun ñeå laøm ñeán khaâu cuoái cuøng.
Nhö toâi ñaõ noùi, banner cuûa toâi coù daïng böùc aûnh neân toâi seõ veõ khung ngoaøi, khung
trong roài cuoán goùc cho gioáng thaät. Baïn cöù maïnh daïn duøng coâng cuï veõ ñieåm noái
ñieåm (nuùt 9 treân baûng Tool) ñeå veõ hình chöõ nhaät, meùo cuõng ñöôïc, roài sau ñoù ta seõ

16
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

soi lôùn (zoom) böùc veõ leân vaø duøng coâng cuï choïn/di chuyeån ñieåm (nuùt 2),döïa vaøo
löôùi toïa ñoä ñeå chænh laïi cho ngay ngaén. Baïn nhôù laø haõy laøm vaùt ñi moät goùc döôùi cuûa
hình chöõ nhaät vì ta seõ theâm hình cuoán goùc vaøo. Sau khi chænh khung ngoaøi cho
ngay ngaén, ta copy noù thaønh khung thöù 2 roài thay ñoåi kích thöôùc cuûa noù ñeå laøm
thaønh khung trong.Baïn nhôù ñaët teân cho töøng ñoái töôïng ñaáy nheù vì chuùt nöõa baïn seõ
thaáy coù nhieàu hình choàng leân nhau neân khoâng theå choïn ñoái töôïng baèng caùch baám
chuoät treân baûn veõ ñöôïc maø phaûi choïn treân baûng List of Shapes
(nhaán F9 ñeå goïi ra). ÔÛ hình minh hoïa, toâi choïn 3 ñoái töôïng laø
khung trong, khung ngoaøi vaø goùc cuoán (treân baûng List of Shapes,
baïn vöøa nhaáp choïn vöøa giöõ phím Ctrl ñeå choïn cuøng luùc nhieàu
hình). Xin ñöøng thaéc maéc vì sao baïn thaáy coù veät maøu xanh (neáu
treân baùo hình naøy ñöôïc in maøu), ñoù laø do toâi chuïp laïi töø caùi hoaït
hình maø toâi ñaõ laøm xong tröôùc khi vieát baøi naøy.
Ñeå veõ goùc cuoán, baïn veõ moät tam giaùc coù moät ñaùy truøng vôùi choã vaùt cuûa khung
ngoaøi, roài theâm ñieåm troøn ñeå laøm cong caùc caïnh.Sau ñoù ta seõ toâ maøu doác (gradient
color) xaùm - traéng cho goùc cuoán vôùi kieåu linear naèm ngang. Baïn thaáy daûi maøu doác
naèm ngang nhö vaäy chaúng coù veû gì thaät, phaûi khoâng, baây giôø chuùng ta seõ xoay maøu
laïi cho phuø hôïp nheù. Ñaàu tieân, vaãn choïn hình goùc cuoán aáy, baïn vaøo Transform >
Rotate/Shift Gradient Fill, troû chuoät seõ bieán ñoåi nhö sau:

Khi ñoù baïn haõy vöøa nhaán chuoät vöøa keùo ñeå xoay laïi maøu, ñeå ñöa chuoät
veà laïi ban ñaàu chæ caàn nhaán vaøo nuùt 1 treân baûng Tool. AØ, baïn nhôù chænh laïi
khung trong sao cho goùc cuoán naøy ñuû che khuaát choã vaùt cuûa noù nheù.

17
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

Tieáp theo baïn veõ nhöõng böùc aûnh nhoû ñeå taïo ra moät doøng nhöõng böùc aûnh ôû beân
traùi. Haõy soi lôùn baûn veõ vaø veõ moät aûnh thoâi (ñoä daøy ñöôøng bieân laáy nhoû côõ 0,25
pixels), sau ñoù copy thaønh nhieàu caùi, thay ñoåi kích thöôùc, vò trí, xoay tôùi xoay
lui sao cho chuùng taïo thaønh moät doøng vaø cuoái cuøng nhoùm taát caû thaønh moät
nhoùm; neáu caån thaän, khoùa laïi chuùng (nhaán vaøo oå khoùa treân baûng List of
Shapes) cho chaéc aên roài ñeå ñoù, sau naøy seõ môû khoùa sau. Coøn khung trong, baïn
toâ maøu doác kieåu radial xanh nhaït - traéng roài laøm leäch noù sang phía traùi moät
chuùt.
Nhö toâi ñaõ noùi, banner cuûa toâi coøn coù cheøn böùc aûnh moät röøng caây. Neáu toâi
import aûnh theo caùch thoâng thöôøng thì hoaëc laø caùc khung seõ che khuaát aûnh hoaëc
laø ngöôïc laïi, vì vaäy toâi veõ toâi phaûi veõ theâm moät khung ñeø leân khung trong vaø coù
moät phaàn ñöôøng bieân naèm treân doøng caùc hình nhoû roài ñaët teân cho noù laø “nen”.

Vì khung naøy ñöôïc veõ sau neân noù seõ che khuaát taát caû nhöõng caùi ñaõ veõ tröôùc, toâi
duøng List of Shapes ñeå chuyeån noù xuoáng naèm döôùi hình goùc cuoán vaø treân khung
trong, sau ñoù duøng coâng cuï Shape Fill ñeå laáp ñaày noù baèng hình aûnh moät röøng
caây (thay vì duøng coâng cuï naøy, baïn coù theå laøm treân baûng Properties taïi
“Color/Fill”.

18
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

Phaàn vieäc tieáp theo, baïn vaøo File > Insert KoolMoves Movie ñeå cheøn
freeimagehosting.fun vaøo baûn veõ, nhôù ñieàu chænh vò trí cuûa noù cho thích hôïp (gaàn
veà phía goùc phaûi beân döôùi). Taïi sao chuùng ta chöa cheøn photojerk.fun vaøo baûn veõ
luùc naøy? Ñoù laø vì banner cuûa chuùng ta luùc naøy môùi coù moät khung choát, trong khi
photojerk.fun coù tôùi 15 khung neân ta phaûi ñôïi ñeán khi banner taêng ñeán 15 khung
ñaõ.
Tröôùc khi copy haøng loaït khung choát cuûa banner.fun, chuùng ta laøm coâng vieäc
sau: Theâm caùc lieân keát sau vaøo banner:
HOME daãn ñeán http://www.photojerk.com/index.php
FORUM daãn ñeán http://www.liquidbanner.com/forums/index.php?act=SC&c=6
FAQ daãn ñeán http://www.photojerk.com/faq.php
SUPPORT daãn ñeán http://www.photojerk.com/support.php
Toâi muoán laøm cho nhöõng lieân keát naøy ñoåi maøu khi ñöa chuoät qua vaø khi nhaán
chuoät vaøo. Toâi seõ laøm nhö sau:
Choïn text HOME, môû baûng Properties ñeå xem tính chaát cuûa noù. Taïi “Is a button”
toâi cho “Yes” ñeå bieán chöõ HOME naøy thaønh nuùt (vì treân banner seõ phaûi nhaán vaøo
noù ñeå ñeán trang khaùc maø), sau ñoù treân baûng seõ hieän ra theâm “Has States”, toâi cho
“Yes”, ñeán luùc naøy thì phía treân cuøng cuûa baûng seõ hieän ra theâm 3 nuùt “Up, Over,
Down”. Xin giaûi thích: Up laø traïng thaùi ban ñaàu cuûa nuùt , Over laø traïng thaùi khi
chuoät troû ñeán, Down laø traïng thaùi khi nhaán vaøo.

19
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

Baây giôø baïn haõy nhaán vaøo Over, laäp töùc moät hoäp thoaïi hieän leân hoûi baïn
muoán taïo traïng thaùi over theá naøo, baïn choïn “copy up state” roài nhaán OK.

Luùc naøy treân baûn veõ, caùc ñoái töôïng khaùc ñeàu môø ñi, chæ coøn chöõ HOME noåi
roõ, baïn haõy toâ moät maøu khaùc cho noù. Treân thanh coâng cuï chuaån cuõng coù thay ñoåi,
noù xuaát hieän theâm caùc nuùt nhö trong hình, baïn haõy nhaán vaøo nuùt Down State , laøm
töông töï nhö vöøa roài (nhöng toâ maøu khaùc), sau ñoù nhaán “Main movie” ñeå trôû laïi
baûn veõ ban ñaàu.
Baây giôø toâi laïi muoán coù aâm thanh phaùt ra khi toâi troû chuoät ñeán vaø khi nhaán
chuoät vaøo chöõ HOME nöõa. Neáu baïn cuõng muoán theá thì haõy chuaån bò moät vaøi ñoaïn
aâm thanh ngaén (coù theå laáy töø caùc trang web khaùc hay caét ra töø nhöõng taäp tin nhaïc
naøo ñoù).
Toâi xin pheùp ñöôïc daønh moät ñoaïn nhoû ñeå höôùng daãn caùch caét nhaïc töø moät
taäp tin aâm thanh naøo ñoù. Toâi ñaõ chuaån bò ñöôïc sound004.mp3 (laáy töø moät taøi lieäu
daïng HTML) vaø chime.mid (laø tieáng chuoâng ñoàng hoà laáy töø phaàn meàm Klox). Baïn
haõy duøng moät phaàn meàm bieân taäp aâm thanh naøo ñoù nhö Audacity chaúng haïn, ñaây
laø phaàn meàm maõ nguoàn môû, mieãn phí vaø töông ñoái nheï, coù theå tìm nôi download
baèng Google.com (AØ queân, trong phaàn Help, muïc Audio Editor cuûa KoolMoves coù
giôùi thieäu vaøi phaàn meàm bieân taäp aâm thanh mieãn phí ñaáy).

20
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

Toâi seõ trình baøy caùch caét nhaïc töø chime.mid. Töø cöûa soå cuûa Audacity, baïn
vaøo Project > Import Audio ñeå nhaäp chime.mid vaøo. Toâi khoâng bieát maùy tính cuûa
baïn nhö theá naøo chöù maùy tính cuûa toâi thieáu caùi gì ñoù neân Audacity khoâng theå bieân
taäp nhaïc *.mid ñöôïc. Neáu baïn cuõng gaëp tröôøng hôïp nhö toâi, khoan haõy lo laéng vì
hình nhö maùy tính cuûa baïn coù caøi HEROSOFT phaûi khoâng? HEROSOFT raát phoå
bieán vì chuùng ta thöôøng duøng noù ñeå xem VCD (thoâng qua moät phaàn meàm cuûa noù laø
SthVCD). Thöïc ra Herosoft coøn nhieàu chöùc naêng khaùc nöõa, trong ñoù coù chöùc naêng
chuyeån ñoåi nhaïc thaønh ñònh daïng mp3. Baïn haõy tìm trong thö muïc HEROSOFT
moät taäp tin teân laø Mp3Maker.exe. Sau ñaây laø giao dieän cuûa Mp3Maker:

21
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

Baïn haõy nhaán vaøo nuùt add file ñeå choïn taäp tin chimes.mid . Nhaán vaøo Config
ñeå choïn nôi löu taäp tin chimes.mp3 taïo thaønh (maëc ñònh seõ löu ngoaøi desktop). Sau
ñoù nhaán Start Encode ñeå baét ñaàu chuyeån ñoåi:

Sau khi vieäc chuyeån ñoåi hoaøn thaønh, haõy ñoùng mp3maker laïi vaø môû Audacity leân.
Töø Audacity baïn haõy môû menu Project > Import Audio vaø tìm choïn
chimes.mp3.

22
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

Trong cöûa soå giao dieän cuûa Audacity baïn seõ thaáy ñoà thò soùng aâm cuûa taäp tin.
Haõy duøng chuoät ñeå choïn moät ñoaïn nhoû treân ñoà thò, sau ñoù nhaán nuùt Play treân
thanh coâng cuï chuaån ñeå nghe thöû.Khi ñaõ vöøa yù, baïn vaøo File > Export Selection
As WAV ñeå löu laïi vuøng ñaõ choïn vôùi teân laø bam.wav (Toâi ñaët teân laø “bam” vì toâi
choïn noù laøm aâm thanh phaùt ra khi nhaán vaøo lieân keát treân banner).Taïi sao toâi
khoâng löu noù thaønh daïng khaùc ngoaøi WAV? Vì KoolMoves chæ chaáp nhaän aâm
thanh daïng WAV vaø MP3, nhöng Audacity chæ coù theå xuaát ra mp3 neáu coù moät
taäp tin hoã trôï laø lame_enc.dll ñöôïc taûi rieâng vôùi Audacity (vì löôøi bieáng neân toâi
chöa ñi tìm caùi naøy veà), coøn mp3 chuyeån ñoåi baèng
Mp3Maker cuûa HEROSOFT thì treân maùy toâi,
KoolMoves laïi khoâng chaáp nhaän (chöù neáu khoâng toâi seõ
duøng HEROSOFT ñeå chuyeån bam.wav thaønh bam.mp3

23
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

cho noù nheï).

Vôùi sound004.mp3 toâi cuõng laøm töông töï ñeå xuaát ra luot.wav. Nhö vaäy laø
phaàn aâm thanh ñaõ chuaån bò xong, ta seõ quay laïi vôùi KoolMoves ñeå laøm noát coâng
vieäc coøn laïi.
Töø baûng Properties cuûa HOME, baïn nhaán vaøo Action sau ñoù nhaán vaøo nuùt (…)
. Moät hoäp thoaïi hieän leân (Button Actions and Sounds), baïn haõy nhaán vaøo nuùt
daáu coäng (theâm action – haønh ñoäng) > Choïn Go To URL trong menu hieän leân.

Trong hoäp thoaïi Get URL hieän leân sau ñoù, baïn ñieàn ñòa chæ trang maø lieân keát daãn
ñeán vaø choïn _self ôû oâ URL target. Tröôùc khi nhaán OK, chôù queân ñaùnh daáu vaøo
Press (nhaán), boû Release (buoâng) neáu khoâng ngay khi baïn ñöa chuoät ñeán chöõ
HOME treân banner thì ñaõ ñöôïc daãn ñeán trang khaùc roài, chaúng caàn chôø baïn nhaán
ñaâu.

Xin giôùi thieäu qua veà caùc nuùt treân tab Actions
cuûa hoäp thoaïi Button Actions and Sounds :
Nuùt (+): Theâm haønh ñoäng cho nuùt.
Nuùt coù hình baøn tay: Chænh söûa caùc chi tieát cuûa haønh
ñoäng ñöôïc choïn trong danh saùch beân döôùi.
Nuùt coù hình thuøng raùc: Xoùa haønh ñoäng ñöôïc choïn.

Baây giôø baïn haõy nhaán tab Over Sound, nhaán nuùt coù hình thö muïc ñeå choïn nhaïc maø
baïn muoán noù phaùt ra khi ñöa chuoät ñeán chöõ HOME. Nhöõng nuùt khaùc treân hoäp
thoaïi coù yù nghóa nhö sau:

24
Thiết kế banner flash dễ dàng với KoolMoves Nguyễn Hồng Quân

Nuùt 2: Goïi phaàn meàm bieân taäp aâm thanh (ñöôïc baïn quy ñònh trong File >
Preferences > Audio Editors).
Nuùt 3: Nghe thöû nhaïc. Nuùt 4: Xoùa nhaïc ñaõ choïn.
Sau ñoù baïn nhaán sang tab Down Sound vaø laøm töông töï.

Chöõ HOME nhö theá ñaõ laøm xong.Coøn caùc chöõ khaùc baïn cuõng laøm töông töï.
Caùc baïn coù hoài hoäp khoâng, chuùng ta ñang daàn caùn möùc ñeán roài ñaáy? Phaàn
vieäc tieáp theo nheï nhaøng voâ cuøng: copy lieân tieáp khung choát ban ñaàu ñeå coù 15
khung choát.

Vaø thao taùc cuoái cuøng : Quay trôû laïi khung choát ñaàu tieân roài cheøn
photojerk.fun (File > Insert KoolMoves Movie) vaøo banner cuûa chuùng ta roài löu
laïi. Ñeán ñaây baïn ñaõ coù theå xuaát (export) ra banner.swf ñeå chieâm ngöôõng thaønh
quaû lao ñoäng cuûa chuùng ta roài.
Nhö vaäy, ñeán luùc naøy toâi xin chuùc möøng laø coâng vieäc cuûa chuùng ta ñaõ xong.
Hi voïng laø nhöõng kinh nghieäm vöøa roài cuûa toâi coù ích cho caùc baïn, chöù neáu
khoâng töø naõy giôø toâi ñaõ noùi taàm phaøo sao? Neáu baïn khoâng duøng KoolMoves maø
duøng Flash thì coù theå laøm töông töï coøn neáu baïn coù moät chieác maùy tính hôi yeáu
nhöng vaãn thích laøm flash thì chuùng ta cuøng xaøi KM ha.

NGUYEÃN HOÀNG QUAÂN

(ng.hong.quan@gmail.com)

25