Tombol Menu Animatif Kreasi Sendiri Dengan Flash

Dalam membuat sebuah program aplikasi berupa media pembelajaran berbasis komputer, terkadang diperlukan berbagai pariasi-pariasi tampilan, apakah dari segi background warna, gambar, animasi-animasi baik animasi pada tulisan maupun animasi pada tombol, semua itu memberikan daya tarik tersendiri bagi pengguna media pembelajaran ini. Ada mungkin orang yang mementingkan isi materi daripada tampilan, ini tidak salah, tapi alangkah baiknya isi materi yang bagus plus tampilan program yang wah. Sehingga pengguna media pembelajaran tidak merasa bosan dikarenakan pemandangan yang ditampilkan monoton, kaku, sehingga tujuan dari pembuatan media pembelajaran ini tidak tercapai.

Untuk pembahasan kali ini, saya akan mencoba memberikan tips trik bagaimana membuat sebuah tombol menu yang animatif.

A. Tombol naik saat kursor berada di atas tombol

Langkah pembuatan :

1. Buka program Macromedia Flash
2. Klik menu Flash Document.
3. Anda sekarang telah berada di area kosong Macromedia Flash.
4. Buat kotak (dengan rectangle tool) untuk menu di stage.
5. Copy kotak yang telah dibuat dengan cara, pilih kotak tersebut dengan menu ‘selection tools’, tekan dan tahan tombol ‘ctrl’ lalu geret (drag) kotak tersebut ke kanan. Ulangi proses drag ini sampai didapatkan beberapa buah tombol sesuai kebutuhan.
6. Ketik menu 1, menu 2, menu 3, dan seterusnya pada kotak yang dibuat.
7. Pilih 1 kotak menu yang dibuat, kemudian rubah menjadi symbol button, dengan menekan F8, pilih type ‘Button’, pada ‘Name’ ketik menu 1 (atau apa sajalah terserah)
8. Masuk ke area symbol button
9. Insert keyframe pada frame ‘over’, caranya klik kanan pada frame ‘over’, pilih Insert Keyframe.
10. Ulangi langkah yang sama untuk insert keyframe pada frame ‘Down’ dan ‘Hit’
11. Kembali ke frame ‘Over’
12. Setelah itu pilih kotak menu 1, kemudian tekan panah atas 10x
13. Coba lihat hasilnya dengan menekan ‘Ctrl+Enter’
14. Ulangi cara yang sama untuk tombol menu 2, 3, 4, dst….
15. Kita juga bisa kreasikan tombol ini, apabila kursor berada di atas tombol, disamping tombol naik, juga akan keluar tulisan berisi keterangan dari menu ini.
16. Untuk langkah 15 caranya, pilih frame ‘Over’, pilih tombol ‘Text Tool’(tombol dengan tulisan A), ketik tulisan “Ini tombol menu 1” (Tulisan terserah anda) di pojok kanan tombol.

B. Saat tombol menu diklik akan muncul sub menu lain

1. Gunakan tombol-tombol menu yang sudah dibuat tadi, untuk kreasi selanjutnya.
2. Insert layer, dengan mengklik tombol insert layer (seperti gambar di bawah)
3. Pindah frame 1 ke layer 2, dengan cara klik tanda titik hitam pada frame 1, kemudian drag ke frame 1 layer 2.
4. Pada frame 5 layer 1 insert frame, dengan cara klik kanan pada frame 5 layer 1, pilih insert frame.
5. Pada frame 2 layer 2 buat kotak menu di bawah tombol menu 1, dengan tulisan sub menu 1.1, sub menu 1.2, dan sub menu 1.3.
6. Ulangi langkah yang sama untuk membuat tombol sub menu pada tombol-tombol menu lainnya.
7. Pada frame 1, 2, 3, 4, dan 5 berikan action script stop() (ditandai dengan huruf a di atas titik frame.
8. Oh ya…lupa dijelaskan action script itu adalah bahasa pemrograman pada Macromedia Flash, yang digunakan untuk mengontrol, atau memerintah aksi yang akan terjadi pada program yang dibuat. Untuk menampilkan area action script tekan tombol F9, maka akan terlihat tampilan seperti di bawah ini.
9. Sekarang tiba saatnya untuk memberikan actionscript pada tombol, apa maksudnya ? Maksudnya supaya saat diklik, atau saat kursor berada di atas tombol, akan terjadi suatu aksi atau kejadian.
10. Pilih tombol menu 1
11. Tekan F9 untuk membuka area actionscript
12. Ketikkan script berikut (jangan ditambah atau dikurangi) :
    

    on (release) {

    gotoAndPlay(2);

    }
13. Kalau diterjemahkan dalam bahasa kita, arti dari script di atas adalah ketika tombol diklik (misal : menu 1), maka program memerintahkan pergi ke frame 2 dan akan muncul sub menu 1.1, sub menu 1.2, sub menu 1.3 sebagaimana yang telah dibuat seperti pada langkah 5.
14. Keterangan : perintah gotoAndPlay(2), angka 2 di dalam kurang bisa dirubah sesuai keinginan, apakah mau pergi ke frame 3, frame 4, atau frame berapa saja. Misalnya untuk tombol menu 2 berikan perintah actionscript gotoAndPlay(3), untuk tombol menu 3 berikan perintah actionscript gotoAndPlay(4), untuk tombol menu 4 berikan perintah actionscript gotoAndPlay(5). Ingat yang dirubah hanya gotoAndPlay bukan on (release) atau tanda kurung kurawal.
15. Kalau semua sudah selesai coba sekarang lihat hasilnya dengan menekan Ctrl+Enter.

Itu dulu trik dari saya, untuk selanjutnya anda bisa berkreasi sendiri dengan banyak latihan-latihan dengan mencontoh beberapa kreasi orang lain, untuk dicoba bagaimana cara pembuatannya sesuai dengan logika berfikir kita. Hasil boleh sama tapi cara pembuatan bisa saja berbeda. Selamat berkarya, sukses buat anda semua !!!