Subhishine Area

Flash Tutorial - Membuat Tombol Navigasi

Kamis, 26 November 2009 06:17:58 - oleh : 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:

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

versi cetak

Artikel "Tutorials" Lainnya