Cara Pembuatan Advanced Button Pada Adobe Flash

(ICTF - Tutorial) Tutorial kali ini, ICTF akan menerangkan bagaimana membuat button yang lebih atraktif menggunakan Adobe Flash™. Apa itu advanced Button? Advanced Button adalah button yang dibuat melalui movie clip. Kelemahan instance button adalah animasinya yang terlalu simple. Flash hanya menyediakan 4 frame untuk animasi pada button standard. Frame pertama sebagai wajah saat button tersebut tidak disentuh, Frame kedua saat event mouse over terjadi, Frame ketiga saat button diklik, dan Frame ke empat setelah button di klik. Melalui Advanced Button, kita dapat menerapkan semua animasi kepada button.

Berikut ini langkah-langkah pembuatannya :

1. Buat dahulu static text menggunakan TEXT TOOL, saya menggunakan Calibri @ 35pt.
2. Untuk loading bar, buatlah menggunakan RECTANGLE TOOL dengan corner radius 5px dengan ukuran 160 x 12px.
3. Buatlah dynamic text menggunakan TEXT TOOL, set nama instancenya dengan “hasil”.
4. Buatlah sebuah kotak dengan warna fill putih dan tanpa outline, taruh di belakang tulisan click here, nantinya akan digunakan sebagai base button clicker.
5. 
   
   
   Pilih ketiga hal yang telah kita buat pada langkah ke-1, ke-2 dan ke-4, lalu jadikan MOVIE CLIP dengan menekan F8.
   
   
6. Namakan instance movie clip yang baru kita buat dengan nama “clicker”

Sekarang mari kita masuk kedalam instance movie clip yang telah kita buat dengan cara double klik movie clip yang telah dibuat. Tampilannya akan seperti ini :

Perhatikan bagian yang telah saya lingkari. Hal itu menandakan bahwa kita sudah benar berada pada instance symbol 1 yang tadi kita namai clicker. Selanjutnya, mari kita pisahkan antara tulisan dengan loading bar dibawahnya. Untuk melakukannya, double click pada loading barnya, select cut, buat layer baru dengan menekan icon Insert Layer, sorot layer yang telah dibuat, kemudian klik kanan pada area document, pilih Paste in Place. Selanjutnya, layer 2 akan tetap berisi loading bar, sedangkan layer 1 akan berisi tulisan “click here” dan kotak putih.

Sekarang kita tambahkan script pada frame 1. Sorot Frame 1 pada layer mana saja, lalu tekan F9 untuk mengaktifkan kotak dialog action, dan tuliskan stop();

Sekarang mari kita buat animasinya.

1. Buat Key Frame baru pada layer 2 dengan menekan tombol F6.
2. Buat perpanjangan keyframe tersebut dengan mengklik frame 20 dan tekan tombol F5.
3. Buat layer baru dengan menyorot layer 1 dan Tekan icon Insert Layer.
4. Abaikan Blank Key Frame pada frame 1, klik Frame 2 pada layer yang baru saja kita buat, lalu tekan F6 untuk membuat key frame yang baru.
5. Pada Key Frame ini, buat sebuah line dengan panjang 160px, berwarna merah. Tepat di tengah2 loading bar yang telah kita buat.
   Kalau Anda mengikuti persis, hasilnya akan nampak seperti ini :
   
   
   
   
6. Sekarang kita klik frame 10 pada Layer 3, dan klik F6, lalu klik frame 20 dan klik F6 juga untuk membuat key frame pada frame2 tersebut.
7. Blok frame 2 sampai frame 20 pada Layer 3, lalu klik kanan dan pilih Create Motion Tween
   Hasilnya akan nampak seperti ini :
    
   
   
   
8. 
   
   
   Nah, sekarang untuk animasinya, klik Frame 2 pada Layer 3, lalu geser garisnya sampai ke pinggir daerah loading bar
9. Ulangi langkah yang sama untuk Frame 20.
   Hasilnya akan nampak seperti ini :
   
   
   

Sudah hampir selesai, sekarang, kita klik frame 10, tambahkan action Stop(); lagi, seperti yang telah kita lakukan sebelumnya. Oh iya, untuk memperpanjang Frame pada Layer 1 juga jangan lupa dilakukan yah. Agar tulisan “Click Here” tetap ada selama animasi bermain.

Terakhir, untuk membuat semuanya berjalan, mari kita kembali ke Scene 1 (keluar dari instance symbol1). Sudah Ok, Klik frame 1, tekan F9 lalu tambahkan script seperti ini :

clicker.addEventListener(MouseEvent.MOUSE_OVER,clickerOver);

clicker.addEventListener(MouseEvent.MOUSE_OUT,clickerOut);

clicker.addEventListener(MouseEvent.CLICK,clickerClick);

function clickerOver(Event:MouseEvent):void {

this.clicker.gotoAndPlay(2);

}

function clickerOut(Event:MouseEvent):void {

this.clicker.gotoAndPlay(11);

}

function clickerClick(Event:MouseEvent):void {

hasil.text = "Button Telah Di Klik :)";

}

Ingat, symbol 1 kita beri nama clicker, kalau tidak, semuanya tidak akan bisa berjalan. Untuk sentuhan terakhir, dibawah script diatas, tambahkan

clicker.buttonMode = true;

Untuk menggunakan hand cursor saat mouse kita berada diatas (mouseover) Advanced Button yang telah kita buat.

Selamat. Anda telah memahami dasar dari Advanced Button!!