Tombol Navigasi antar Frame

Tutorial sederhana untuk membuat tombol navigasi antar frame pada Adobe Flash CS5<dengan ActionScript 3.0. Sama seperti kita menggunakannya pada Flash ActionSctipt 2.0, bedanya terdapat pada cara pemanggilan tombolnya jika pada ActionScript 3.0. Oke, tidak usah terlalu banyak basa-basi lagi, langsung saja ke pokok bahasannya. Ikuti langkat sederhana berikut ini:

Langkah pertama kita perlu menyiapkan setidaknya ada 4 buah frame yang kemudian pada tiap frame terdapat satu halaman informasi. Buka Flash CS5-nya (pilih yang ActionScript 3.0), lalu pilih Rectangle Tool (R) pada Toolbox. Buat objek persegi pada Frame 1, dengan pengaturan pada properties seperti gambar berikut:

Atur posisi objek persegi pada Stage seperti gambar dibawah ini.

Kemudian klik di Frame 2, klik kanan pilih Insert Keyframe (F6). Lakukan Insert Keyframe juga pada Frame 3 dan Frame 4. Sekarang kita sudah mempunyai empat buah Frame pada Timeline.

Langkah berikutnya adalah, klik di Frame 1. Kemudian pilih Text Tool (T), lalu buat tulisan “SELAMAT DATANG” seperti gambar berikut ini.

Selanjutnya klik di Frame 2 lalu dengan Text Tool tuliskan “HALAMAN PROFIL”, begitu juga dengan Frame 3 dan 4. Frame 3 tuliskan “HALAMAN GALERI”, Frame 4 tuliskan “HALAMAN KONTAK”.

Sekarang kita sudah mempunyai empat buah halaman yang nantinya akan kita hubungkan satu dengan lainnya dengan menggunakan tombol sebagai navigatornya. Buat Layer baru terlebih dahulu dengan cara pilih menu Insert > Timeline > Layer. Buatlah empat buah tombol, yaitu: Tombol “HOME”, “PROFIL”, “GALERI”, dan “KONTAK” (untuk cara membuat tombolnya tidak akan dibahas disini, karena saya anggap itu sudah mengerti dan dasar). Tombol sudah siap untuk kita operasikan, berikut adalah contoh ke empat buah tombolnya. Posisikan seperti gambar berikut.

Tombol sudah selesai kita buat. Langkah selanjutnya adalah memberikan Action pada tombol-tombol tersebut. Pilih/klik tombol HOME, lalu pada Properties pada bagianInstance Name tuliskan dengan “tombol_home”.

Lakukan hal yang sama untuk pemberian Instance Name pada tombol yang lain:
Tombol “PROFIL” Instance Name = tombol_profil
Tombol “GALERI” Instance Name = tombol_galeri
Tombol “KONTAK” Instanca Name = tombol_kontak

Langkah selanjutnya adalah pemberian Action pada keempat tombol tersebut. Tambahkan Layer baru dengan cara pilih menu Insert > Timeline > Layer. Klik di Frame 1 lalu buka Action dengan cara menekan tombol F9 pada keyboard. Maka akan muncul panel Action, tuliskan script berikut ini pada panel Action:

import flash.events.MouseEvent;
stop();
tombol_home.addEventListener(MouseEvent.CLICK, home);
function home(event:MouseEvent):void{
gotoAndStop(1);
}
tombol_profil.addEventListener(MouseEvent.CLICK, profil);
function profil(event:MouseEvent):void{
gotoAndStop(2);
}
tombol_galeri.addEventListener(MouseEvent.CLICK, galeri);
function galeri(event:MouseEvent):void{
gotoAndStop(3);
}
tombol_kontak.addEventListener(MouseEvent.CLICK, kontak);
function kontak(event:MouseEvent):void{
gotoAndStop(4)
}

Tekan CTRL+ENTER untuk melihat hasilnya.
Selamat mencoba, terima kasih