Hasilnya adalah seperti berikut :
Langkah 1:
Buat file baru dengan ukuran 400x400 px (optional, anda bisa membuat lebih besar maupun lebih kecil)
Ganti warna menjadi hijau (sesuai selera anda).
Langkah 2:
Ganti nama Layer 1 menjadi 'Content' dan buat sebuah layer lagi di atas layer 1 dan ganti namanya menjadi 'Navigator'. Buat sebuah teks (di sini saya membuat teks dengan nama 'Gambar 1') di layer Content dan Ubah menjadi symbol dengan nama 'Content_sym'. Kemudian beri nama instance 'Contents'.
Langkah 3:
Masuk ke Content_sym dengan cara klik 2x. Buat Keyframe baru di frame 2 dan 3. Ganti teks di frame 2 dan 3. Di sini saya mengganti nama di frame 2 menjadi 'Gambar2' dan di frame 3 menjadi 'Gambar3'. Ubah masing2 teks di frame 1,2 dan 3 menjadi symbol. Pada teks di frame 1 saya memberi nama symbol 'Gambar1_mc' dengan type movie clip. Langkah yang sama sampai teks Gambar3.
Langkah 4:
masuk ke Gambar1_mc, lalu buat layer baru. Beri nama layer1 dengan teks dan layer 2 dengan gambar. Import gambar (cmd+r) ke dalam stage pada layer gambar. Masih pada layer gambar klik frame 15 lalu insert kan sebuah keyframe. Klik kanan pada frame 1 lalu berikan classic motion tween. Klik gambar dan ubah nilai alpha menjadi '0'. lalu pada layer teks klik frame 15 dan berikan sebuah frame (F5). Beri action 'stop();' pada frame 15. Lakukan langkah yang sama pada Gambar2_mc dan Gambar3_mc.
Kembali pada Content_sym, beri actin 'stop();' di masing2 frame.
Langkah 6:
Klik scene1. Sekarang kita akan membuat navigator dari gambar2 content tadi. Klik layer Navigator, buat sebuah objek kotak (atau kalo anda sudah punya gambar tombol silakan di import) dan copykan objek tersebut sperti pada gambar di bwah. O ya pada tutorial sebelumnya saya sudah menjelaskna tentang bagaimana membuat rollover/rollout button dan sekerang kita akan mengaplikasikannya.
Langkah 7:
Beri nama Picture 1, Picture 2 , Picture 3 (teserah anda) dari masing2 objek kotak yang sudah kita buat tadi. Lalu ubah menjadi symbol dengan type 'Button'. Beri nama 'Pic1_btn' 'Pic2_btn' 'Pic3_btn'. Kemudian lakukan langkah seperti pada tutorial sebelumnya untuk membuat rollover/rollout tombol. (optional, disini saya tidak melakukan langkah tersebut)
Langkah 8:
Pastekan script berikut di actions masing2 button di layer navigation.
untuk Pic1_btn :
on(release) {
contents.gotoAndStop(1);
}
untuk Pic2_btn :
on(release) {
contents.gotoAndStop(2);
}
untuk Pic3_btn :
on(release) {
contents.gotoAndStop(3);
}
Lakukan pengetesan (cmd+return / ctrl+enter)
Anda bisa mengembangkannya tidak hanya menggunakan gambar, tapi bisa juga dengan teks ataupun video. Selamat mencoba dan semoga bermanfaat :)
Tidak ada komentar:
Posting Komentar