Flash Tutorial - Membuat Tombol Navigasi 2009-11-26 06:17:58 - by : admin
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:
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?.................