Tombol Back/Next untuk Multipages ActionScript 3.0

posted in: Tutorial | 0

Kali ini kita akan belajar untuk membuat tombol back/next alias tombol kembali/lanjut untuk multipages atau aplikasi yang memiliki banyak halaman.

Beberapa artikel tentang ActionScript 3.0 yang sudah saya tulis, semoga bisa membantu kalian dalam mengembangkan aplikasi ya.

Artikel tentang membuat banyak halaman atau multipages dengan ActionScript 3.0 juga sudah saya tulis sebagai pendahuluan sebelum artikel ini.

Cus aja deh ke langkah-langkahnya.

  1. Buka aplikasi Adobe Flash atau Animate kalian > pilih tipe dokumen ActionScript 3.0.
  2. Pastikan kalian sudah membuat multiple pages dengan susunan keyframe yang jamak. Jika belum, kalian bisa mempelajarinya di artikel Membuat Banyak Halaman atau Multiple Pages dengan ActionScript 3.0
  3. Tambahkan layer baru dengan nama navigasi back next (misal).
    Layer untuk navigasi back next
    Layer untuk navigasi back next

    Kalian tidak perlu memberi underscore jika membuat dengan Animate CC karena otomatis nama layer yang memiliki spasi akan dijadikan underscore oleh Animate CC ya.

  4. Setelah itu, buat objek tombol back dan next. Kali ini kita buat simpel saja misalkan dengan rectangle (kotak) yang kemudian dua sudutnya kita tarik ke tengah agar membentuk segitiga. Lakukan seperti langkah di animasi berikut.
    Membuat objek tombol back sederhana
    Membuat objek tombol back sederhana
  5. Setelah terbentuk objek segitiga, jadikanlah sebagai symbol yakni button. Saya harap untuk langkah menjadikan symbol kalian sudah bisa karena sudah sering saya sisipkan di antara artikel ActionScript 3.0 yang saya tulis.
  6. Setelah menjadi button, lakukan copy kemudian lepas seleksi button > klik kanan > Paste in Place. Fungsi Paste in Place ini akan menjadikan objek button segitiga tersebut ter-paste di posisi yang sama dengan objek aslinya tanpa bergeser sedikit pun.
  7. Setelah itu klik menu Modify > Transform > Flip Horizontal. Fungsi Flip Horizontal adalah untuk membalik objek segitiga yang ter-paste tadi agar berlawanan arah secara horisontal. So, nantinya kalian akan mempunyai tombol next tanpa harus membuat dari awal karena sudah copy paste dan flip dari tombol back 😀
    Melakukan Flip Horizontal
    Melakukan Flip Horizontal

    Jika posisi masih bertumpuk, geser salah satu button segitiga tersebut dan rapikan saja sesuai keinginan. Untuk menggeser kalian bisa menggunakan panah keyboard. Posisi akhirnya akan menjadi seperti berikut.
    Tombol back dan next sudah dibuat
    Tombol back dan next sudah dibuat
  8. Selanjutnya berikan instance name untuk masing-masing button back dan next. Kita mulai dari objek tombol back terlebih dahulu alias tombol yang segitiga menghadap ke kiri. Klik tombol back > perhatikan panel Properties > berikan instance name dengan nama tombol_back. Pastikan jangan lupa persyaratan khusus untuk instance name ya yang ada di artikel sebelumnya.
    Instance name untuk tombol back
    Instance name untuk tombol back
  9. Lakukan hal yang sama untuk tombol next. Berikan instance name dengan nama tombol_next agar mudah diingat.
  10. Nah, sekarang sesi pengkodingan dimulai 😀
    Klik kanan layer AS di frame pertama > pilih Actions > masukkan kode berikut di bawah kode stop(); yang sudah kalian miliki.
//untuk fungsi tombol back

tombol_back.addEventListener(MouseEvent.CLICK, klik_back);
function klik_back(e:MouseEvent):void
{
	prevFrame();
}

//untuk fungsi tombol next
tombol_next.addEventListener(MouseEvent.CLICK, klik_next);
function klik_next(e:MouseEvent):void
{
	nextFrame();
}

Nah, penjelasannya adalah sebagai berikut.

  1. Untuk function tombol_back, yang digunakan adalah script prevFrame(); yang artinya previous frame alias menjalankan perintah untuk menuju ke frame sebelumnya (previous).
  2. Untuk function tombol_next, yang digunakan adalah script nextFrame(); yang artinya next frame alias menjalankan perintah untuk menuju ke frame selanjutnya (previous).

Dalam hal ini frame sebelumnya dan selanjutnya adalah hanya mundur atau maju satu frame saja ya. Jika kalian ingin menuju ke nomor frame tertentu berarti tidak menggunakan tombol back next dan langsung merujuk ke gotoAndStop nomor frame saja.

Jika masing bingung dan belum bisa berjalan, kalian bisa mendownload source code di sini.

Download Tombol Back Next dengan ActionScipt 3.0

Sekian. Jika ada yang ingin ditanyakan silahkan menuju ke kolom komentar. Maturnuwun dan happy coding 😀

 

Muhammad Faizin
Follow Faizin:

Writer and Developer

Dulu suka menulis kode dan sejenisnya sampe malem, sekarang juga masih. Kesukaan pada menulis cerita sedikit demi sedikit terpupuk, apalagi sebagai mantan anak sekolahan dengan cita-cita kuliah di luar negeri.