Membuat Rollover/Rollout Button/Tombol pada Flash

Membuat Rollover/Rollout Button/Tombol pada Flash

Pada tutorial berikut saya akan mencoba untuk membuat Rollover/Rollout Button/Tombol pada Flash. Flash yg saya gunakan disini adalah adobe flash cs4. Oke langsung saja kita mulai dengan beberapa langkah mudah. Hasilnya seperti ini :



Langkah 1 - Membuat Rollover/Rollout Button/Tombol pada Flash:

Siapkan Button/tombol yang akan anda gunakan. Untuk mempermudahnya saya sudah menyiapkan tombolnya, silakan diunduh kalo perlu.

Rollover Button Flash (Base Image)

Langkah 2 - Membuat Rollover/Rollout Button/Tombol pada Flash:

Buat File baru dengan action script 2.0 dengan ukuran 300px x 150px

Langkah 3 - Membuat Rollover/Rollout Button/Tombol pada Flash:

Import file gambar yg akan dijadikan tombol/button. Kemudian ubah menjadi 'symbol' dengan nama 'Tombol'. Caranya pilih 'Modify'--->'Convert to Symbol'--->'pilih Button'

Langkah 4 - Membuat Rollover/Rollout Button/Tombol pada Flash:

Klik 2x pada button untuk masuk ke symbol tsb. Kemuadian akan terdapat tampilan seperti berikut :

Buat 'keyframe' di 'Over' dan frame di 'Down' seperti pada gambar di atas. Kemudian Ubah Keyframe di up menjadi symbol dengan type 'movie klip' dengan nama 'tombol1' pada Up dan di over dengan nama 'tombol2'. Masuk ke Movie Klip pada Up dengan klik 2x

Langkah 5 - Membuat Rollover/Rollout Button/Tombol pada Flash:

Buat Layer diatas Layer1. Lalu klik 'Reactangle Tool' dan buat sebuah objek kotak tepat diatas button sehinnga menutupi button. Pada layer1 klik di frame '10' dan 'insert frame'. Pada Layer2, buat keyframe di frame '10'. Lalu buat sebuah tween. Pada adobe flash cs4 klik kanan lalu pilih create 'classic motion tween', Pada flash 8 pilih 'motion tween'.  Kemudian pada frame1 layer2 masuk ke kotak 'properties' dan ubah nilai 'Alpha' menjadi '49%'.

Masih pada layer2 frame 10 ubah nilai alphanya menjadi 0%

Kemudian buat layer diatas layer2. Buat Blank keyframe di frame 10 lalu klik kanan pilih 'Actions'. Ketikkan : stop();

Tujuannya agar mvc tidak looping trs menerus.

Langkah 6 - Membuat Rollover/Rollout Button/Tombol pada Flash:

Masuk ke Frame Over. Buat Layer diatas Layer1. Lalu klik 'Reactangle Tool' dan buat sebuah objek kotak tepat diatas button sehinnga menutupi button. Pada layer1 klik di frame '10' dan 'insert frame'. Pada Layer2, buat keyframe di frame '10'. Lalu buat sebuah tween. Pada adobe flash cs4 klik kanan lalu pilih create 'classic motion tween', Pada flash 8 pilih 'motion tween'. Kemudian pada frame1 layer2 masuk ke kotak 'properties' dan ubah nilai 'Alpha' menjadi '0%'. Masih pada layer2 frame 10 ubah nilai alphanya menjadi 49%. (Kebalikan dari frame Up)

Kemudian buat layer diatas layer2. Buat Blank keyframe di frame 10 lalu klik kanan pilih 'Actions'. Ketikkan : stop();

Kalau langkah2 nya benar akan terlihat di frame seperti gambar diatas.

Langkah 7 - Membuat Rollover/Rollout Button/Tombol pada Flash:

Langkah berikut merupakan langkah terakhir. Kembali pada 'scene1', Klik pada button, kemudian properties. Beri nama Instance nya terserah anda (disini saya memberi nama = 'tombol_link')

Lalu pilih actions dan ketikkan sricpt berikut :

tombol_link.onRelease=function(){

getURL("http://wayanfrombali.blogspot.com", "_blank");

}

Pada saat tombol di klik akan mengarah ke 'http://wayanfrombali.blogspot.com'. Temen2 bisa mengkreasikan dengan tombol2 yg lain.

Mudahkan membuat tombolnya? Kalo yg masih bingung saya kasi source nya tinggal diunduh saja. Selamat Mencoba dan semoga bermanfaat. :)

Bingung ato mau nanya2 email aj ke : adisthana.wijaya@gmail.com ato post comment disini :)

Source :

Unduh - adis-button.fla