Flash Tutorial - Membuat Tombol Navigasi
Kali ini kita akan membuat tombol navigasi yang hasilnya seperti terlihat di bawah ini.
LAYOUTING
1. Buatlah halaman baru dengan ukuran 550 x 400 pixels, 12 fps.
2. Ubah nama “Layer1” menjadi “Location”
3. Buat segitiga berwarna merah dengan PolyStarTool
(klik polystartool >klik option pada tab properties >ubah (style: polygon; number of sides : 3))
4. Convert segitiga to symbol (F8) >beri nama “navigation” >pilih button
Membuat navigasi atas, bawah, kanan, kiri
5. Posisikan segitiga tadi menghadap atas
6. Buka library (Ctrl+L) >klik drag “navigation” ke dalam stage sebanyak 3x
7. Posisikan segitiga-segitiga itu menghadap kanan, kiri, bawah.
8. Klik segitiga yang menghadap atas, beri nama instance “bUp”
9. Klik segitiga yang menghadap bawah, beri nama instance “bDown”
10. Klik segitiga yang menghadap kanan, beri nama instance “bRight”
11. Klik segitiga yang menghadap kiri, beri nama instance “bLeft”
12. Buat layer baru, beri nama tNavigation >buat tulisan “Location” >posisikan seperti contoh
13. Buat layer baru, beri nama “scale”
14. Lakukan langkah 6-12, hanya saja
bUp diganti menjadi bPertinggi,
bDown menjadi bPerpendek,
bRight menjadi bPerbesar,
bLeft menjadi bPerkecil.
Teks “location” menjadi “Scale”
Membuat navigasi rotasi
15. Buat layer baru, beri nama “RR”
16. Buat lingkaran, orange, posisikan di samping kanan navigasi >F8 >beri nama “rr” >button
17. Beri nama instance lingkaran dengan nama “rr”
18. Lakukan langkah 12-14, dengan nama “rl”, posisikan di kiri navigasi
Membuat tombol reset
19. Buat layer baru, beri nama “bReset”
20. Buat kotak merah >F8 >beri nama “bReset” >pilih button
21. Beri nama instance “bReset”
22. Masuk ke dalam tombol reset >buat layer baru >buat tulisan “Reset” >keluar lagi
Membuat kotak korban
23. Buat layer baru, beri nama “kotak”
24. Buat persegi panjang, orange, posisikan di tengah >F8 >beri nama “kotak” >movie clip
25. Beri nama instance “kotak”
SCRIPTING
1. Buat layer baru di posisi teratas dari semua layer >beri nama “action”
2. Buka halaman actionscript
3. Tuliskan script berikut:
Script untuk……………………………………………
kotak._x=275;
kotak._y=200;
kotak._xscale=100;
kotak._yscale=100;
kotak._rotation=0;
4. Test movie, klik tombol up, apa yg ter jadi?................................
5. Untuk tombol up, Lanjutkan script berikut:
Script untuk…………………………………………..
bUp.onPress=function(){
kotak.onEnterFrame=function(){
kotak._y-=3;
}
}
6. Test movie, apa yg terjadi?....................................
7. Lanjutkan script berikut:
Script untuk………………………………………….
bUp.onRelease=function(){
delete kotak.onEnterFrame;
}
8. Test movie, apa yg terjadi?..................................
9. Coba letakkan script berikut di bawah script kotak._y-=3;
if(kotak._y<50){
kotak._y=50
}
10. Test, apa yang terjadi?.....................
11. Jadi script di atas, untuk……………………………………..
12. Lanjutkan untuk tombol bDown, bRight, bLeft dengan beberapa pergantian script sbb:
Nama tombol | Script “kotak._y-=3;” diganti menjadi: | Script “kotak._y<50” menjadi: |
bDown | kotak._y+=3; | kotak._y>350 |
bRight | kotak._x+=3; | kotak._x>500 |
bLeft | kotak._x-=3; | kotak._x<50 |
Tombol rotasi
19. Rotasi kanan:
rr.onPress=function(){
kotak.onEnterFrame=function(){
kotak._rotation+=3;
}
}
rr.onRelease=function(){
delete kotak.onEnterFrame;
}
20. Rotasi kiri = rotasi kanan hanya “rr” diganti “rl”, “+=3” diganti “-=3”
Tombol Scale
21. Tombol bPertinggi:
bPertinggi.onPress=function(){
kotak.onEnterFrame=function(){
kotak._yscale+=3;
}
}
bPertinggi.onRelease=function(){
delete kotak.onEnterFrame;
}
22. Lakukan hal yang sama untuk tombol bPerpendek, bPerbesar, bPerkecil hanya:
Nama tombol
Script “bPertinggi” diganti:
Script “kotak._yscale+=3;” diganti:
bPerpendek
bPerpendek
kotak._yscale-=3;
bPerbesar
bPerbesar
kotak._xscale+=3;
bPerkecil
bPerkecil
kotak._xscale-=3;
Tombol Reset
23. Tuliskan script berikut:
bReset.onRelease=function(){
kotak._x=275;
kotak._y=200;
kotak._xscale=100;
kotak._yscale=100;
kotak._rotation=0;
}
24. Test movie, sudah benarkah?........................
Apa yang bisa disimpulkan?...
Apa guna _x?.............
Apa guna _y?.............
Apa guna _xscale?...........
Apa guna _yscale?...........
Apa guna +=3?.................
In this world when life can be so tough
You must be strong
Just believe in yourself and dont you fear
So open up your mind and close your eyes
Take another look from the other side