Membuat Animasi Button di Adobe Flash

Button adalah symbol yang berfungsi sebagai tombol yang dapat diklik. Merupakan aset yang menunjukkan betapa interaktifnya Flash. Awalnya memang kelihatan sedikit rumit, tapi Symbol Button ini akan sangat mudah dikuasai dengan sedikit latihan.

Button adalah symbol yang berfungsi sebagai tombol yang dapat diklik. Merupakan aset yang menunjukkan betapa interaktifnya Flash. Awalnya memang kelihatan sedikit rumit, tapi Symbol Button ini akan sangat mudah dikuasai dengan sedikit latihan.

Dalam Symbol Button terdapat 4 State atau keadaan pada button yang bisa kita gunakan agar button lebih menarik. Kondisinya yakni sama, dengan layer kita bisa meletakkan lebih dari satu item pada button. State itu antara lain Up State, Over State, Down State, dan Hit State.

  • UP State
    Adalah kondisi button sepanjang movie, normal dan tidak mengalami perubahan apa-apa.
  • OVER State
    Adalah kondisi button saat mouse berada di atasnya, dapat berupa perubahan warna, suara dan lain-lain.
  • DOWN State
    Adalah kondisi button saat button diklik, tidak perlu selalu ada namun akan sangat manis jika ditambahkan agar button menjadi lebih interaktif.
  • HIT State
    Merupakan area klik dari tombol, katakanlah anda menginginkan hanya bagian tertentu dari button yang menimbulkan efek button. Bila pada HIT state anda berikan keyframe, maka pastikan bahwa area tersebut tidak kosong karena akan menyebabkan tombol anda tidak akan berfungsi.

Pada umumnya desain media interaktif memiliki banyak unsur animasi pada setiap elemennya, tidak terkecuali elemen tombol atau button.

Jika anda adalah seorang kreator di bidang pembuatan media interaktif, hal ini mungkin sudah menjadi kebiasaan anda, membuat button yang memiliki sebuah animasi.

Tapi, jika anda adalah seorang pemula yang sedang belajar membuat sebuah animasi media interaktif, animasi pada button layak anda pelajari. Karena banyak hal yang bisa anda kembangkan dan improve setalah anda menguasai cara membuat animasi button dengan Adobe Flash. Mulai dengan animasi paling mudah.

Nah, di tutorial ini, kita akan memanfaatkan state pada symbol Button dan menggunakan symbol Movie Clip sebagai animasinya.

Oke, kita langsung ke step by step saja..

Membuat Animasi Button di Adobe Flash

  • Buka aplikasi Adobe Flash.
  • Buatlah document baru dengan dimensi sesuai keinginan dan kebutuhan anda. Kali ini pilih Action Script 2.0 karena kita masih akan menggunakan Action Script 2.0.

# Membuat Objek Movie Clip

  • Buat sebuah objek (pada contoh ini kita akan menggunakan objek berbentuk persegi panjang).
  • Convert objek yang telah dibuat, menjadi symbol Movie Clip. Beri nama “mc_btn” dan Point Registration di Center.
  • Double klik objek movie clip “mc_btn” untuk masuk ke timelinenya. Perhatikan gambar.
  • Sekarang kita berada di timeline movie clip “mc_btn”.
  • Ubah nama Layer 1 menjadi “kotak_1”.
  • Kemudian Duplicate Layer “kotak_1”.
  • Setelah itu ubah nama layer hasil duplicate-nya menjadi “kotak_2”.
  • Ubah warna objek persegi panjang pada layer “kotak_2” (jangan sama dengan objek pada “kotak_1”).
  • Kemudian Insert Frame (F5) di frame 20 pada layer “kotak_1”.
    Dan Insert Keyframe (F6) di frame 10 dan 20 pada layer “kotak_2”.
    Lihat gambar berikut.
  • Klik frame 1 layer “kotak_2”, kemudian geser posisi objek ke atas, sehingga posisinya menjadi di atas objek persegi panjang “kotak_1”. Perhatikan gambar.
  • Sekarang klik frame 20 pada layer “kotak_2”, kemudian geser posisi objek ke bawah, sehingga posisinya menjadi di bawah objek persegi panjang “kotak_1”.

# Membuat pergerakan dan efek Masking pada Movie Clip

  • Klik pada nama layer “kotak_2”, kemudian klik kanan diantara frame yang terseleksi lalu plih Create Classic Tween.
  • Sekarang berikan Action Script stop();, di frame 1 dan 10 layer “kotak_2”.
  • Duplicate layer “kotak_1”, kemudian ubah nama layer hasil duplicate-nya menjadi “kotak_mask”, dan posisikan layer tersebut di posisi paling atas layer. Lihat gambar berikut.
  • Klik kanan pada layer “kotak_mask” – pilih Mask untuk memberikan efek masking pada layer tersebut.
  • Sekarang kembali ke Scene 1 dengan mengklik tombol Scene 1.

# Membuat Hidden Button

  • Buat symbol baru, klik Menu Insert – pilih New Symbol (F8).
  • Sekarang kita akan membuat sebuah hidden button, atau button tersembunyi. Pilih Type : Button dan beri nama “btn_hidden”.
  • Lalu, kita akan memasuki timeline state symbol button “btn_hidden”.
  • Kemudian klik kanan pada state Hit – pilih Insert Keyframe (F6).
  • Masih di state Hit, setelah memberi keyframe pada state Hit, buat sebuah objek baru berbentuk persegi panjang. Lihat gambar berikut.
  • Kembali ke Scene 1.
  • Beri Instance Name “tombol” di panel Properties pada objek movie clip mc_btn yang pertama kali kita buat.
  • Buka panel Library dengan cara klik Menu Window – pilih Align (Ctrl + L).
  • Setelah muncul panel Library, tarik symbol button “btn_hidden” ke Stage (di Drag and Drop).
  • Kemudian atur posisi button “btn_hidden” tepat diatas movie clip “mc_btn”, dan sesuaikan ukurannya sehingga ukurannya sama dengan movie clip “mc_btn”.
sebelum disesuaikan posisi dan ukurannya
setelah disesuaikan posisi dan ukurannya

# Memberi Action Script 2.0

  • Sekarang berikan Action Script pada button “btn_hidden” tersebut. Caranya klik kanan objek button “btn_hidden” – pilih Actions.
    Berikan Action Script berikut :
on(rollOver){
	tombol.gotoAndPlay(2);
}

on(rollOut){
	tombol.gotoAndPlay(11);
}
  • Berikan label teks pada button sesuai keinginan anda menggunakan Static Text.
  • Terakhir, simpan document (Save As) kemudian publish document dengan menekan tombol CTRL + Enter untuk melihat hasilnya.

Penjelasan Action Script :

  • stop(); : berfungsi untuk menghentikan laju animasi timeline pada frame yang diberikan script.
  • on(rollOver){ : digunakan untuk memberikan perintah pada kondisi atau keadaan saat kursor berada diatas area hit tombol. Perintah ini diawali dengan kurung kurawal buka “{“ dan diakhiri kurung kurawal tutup “}“.
  • on(rollOut){ : digunakan untuk memberikan perintah pada kondisi atau keadaan saat kursor keluar dari area hit tombol. Perintah ini diawali dengan kurung kurawal buka “{“ dan diakhiri kurung kurawal tutup “}“.
  • tombol.gotoAndPlay(2); : berfungsi memberi perintah ke timeline untuk pindah ke Frame “2” kemudian melanjutkan animasi timeline. “tombol” disini adalah nama Instance Name objek symbol yang dimaksudkan dalam perintah ini.
  • tombol.gotoAndPlay(11); : berfungsi memberi perintah ke timeline untuk pindah ke Frame “11” kemudian melanjutkan animasi. “tombol” disini adalah nama Instance Name objek symbol yang dimaksudkan dalam perintah ini.

Sekian tutorial Cara Membuat Animasi Button dengan Adobe Flash.
Semoga bermanfaat..

Indra Fadhilah
Founder & author di webgrafis.com. Menyukai pemrograman & desain grafis. Selalu ingin belajar hal baru tentang teknologi.