Tutorial Membuat Button Back, Next & Home di Adobe Animate

Tutorial Membuat Tombol Kembali dan Tombol Home menggunakan Adobe Animate CC

     Kali ini saya akan berbagi mengenai cara membuat tombol back dan home di adobe animate, script dan caranya sama seperti pembuatan terjemahan bahasa inggris yaitu dengan menggunakan tehnik “Pergi ke Frame..” untuk lebih jelasnya bisa di lihat Disini terjemahan di adobe animate. Nah Kali ini kita akan membuat tombol asli yang mengarah ke suatu frame dimana hal ini hanya perpindahan frame saja.

     Kita langsung saja ke tutorial cara membuat button di adobe animate :

1. Buka adobe animate nya
2. Buatkan :
   – Frame 1 Untuk Home
   – Frame 2 Untuk Halaman 1
   – Frame 3 Untuk Halaman 2
   
3. Frame Pertama yaitu Home, Buatlah 1 tombol Untuk menuju ke Frame 2 yaitu “Hal 1” :
   – Buat Button, bisa dari gambar/text/Button default. Kali ini saya menggunakan Text sebagai Button (untuk contoh saja)
   – Buat Suatu Text, kemudian jadikan Button. Caranya Klik Kanan > convert to symbol (F8) > Type Button
   -Kemudian Isi Instance Name nya, Contohnya “kehal1”
   

   Kemudian Klik Kanan di Frame 1 > Actions dan Masukan Script berikut :

   stop()

   kehal1.addEventListener(MouseEvent.CLICK, hal1);

   function hal1(event:MouseEvent):void{

   gotoAndPlay(2);

   }

4. Lanjut ke Frame 2 yaitu “Hal 1” :
   – Buat 2 Button, Button 1 untuk pergi ke Home dan Button ke 2 Untuk Pergi ke Frame selanjutnya.
   – Buat Suatu Text (untuk contoh saja), kemudian jadikan Button. Caranya Klik Kanan > convert to symbol (F8) > Type Button
   – Kemudian Isi Instance Name dari kedua button tersebut. 
     Button Home Instance name nya “kehome”
     Button Next Instance Name nya “next1”
   

   Setelah selesai membuat button (jangan lupa memberi instance name nya sesuai langkah sebelumnya, kemudian klik kanan di Frame 2 > Actions dan masukan Script berikut :

   stop()

   kehome.addEventListener(MouseEvent.CLICK, home1);

   function home1(event:MouseEvent):void{

   gotoAndPlay(1);

   }

   next1.addEventListener(MouseEvent.CLICK, hal2);

   function hal2(event:MouseEvent):void{

   gotoAndPlay(3);

   }

5. Ok yang terakhir. Selanjutnya ke Frame 3 yaitu “Hal2” dan buatkan 2 Button.
      Button 1 Yaitu Tombol Home (caranya seperti langkah sebelumnya)
      Button 2 Yaitu Tombol Back (caranya seperti langkah sebelumnya)
   – Instance Name untuk Home di Frame 3 ini beri nama “home2”
   – Instance Name Untuk Back “back”
   

   Setelah semuanya siap, Klik kanan di frame 3 > Actions dan masukan Script berikut :

   stop()

   home2.addEventListener(MouseEvent.CLICK, homee2);

   function homee2(event:MouseEvent):void{

   gotoAndPlay(1);

   }

   back.addEventListener(MouseEvent.CLICK, hal3);

   function hal3(event:MouseEvent):void{

   gotoAndPlay(2);

   }

6. Selesai. Sekarang tinggal kalian Coba ……

Versi Videonya bisa dilihat disini : 

Baca juga : Membuat Animasi Sederhana Menggunakan Adobe Animate CC +Gambar