MEMBUAT MENU UNTUK BERPINDAH KE/ANTAR FRAME DENGAN

ACTION SCRIPT 3/CODE SNIPPETS

1. Buat project dengan Action Script 3, dengan ukuran stage default saja (550 x 400 px).
2. Ganti layer 1 dengan nama background, kemudian masukkan kotak (Rectangle Tool (R)) sesuai
ukuran stage. Bisa anda lakukan melalui dengan menu Modify-Align,lihat gambar di bawah

3
2
1

Buat stage seperti di bawah ini :

3. Tambahkan 3 layer dan ganti namanya dengan Home, Materi & Kontak. Kemudian buatkan tiga
kotak dengan berisi tulisan dan posisikan di samping kiri stage. Lihat gambar di bawah :
4. Buatlah ke-3 kotak tersebut menjadi tombol.
Seleksi kotak dan tulisannya klik kananConvert to Symbol. Beri nama symbol (contoh :
tb_kontak) dan beri nama Instance Name di properties dengan nama yang sama sesuai nama
symbol. Ikuti cara di atas untuk 2 kotak lainnya yaitu tb_materi dan tb_home.

5. Insert Keyframe di frame 25 pada 3 layer (Home, Materi, Kontak) dan tempatkan 3 kotak di bawah
tulisan MENU UTAMA. Sedangkan pada layer background, insert frame di frame 25.
6. Buatkan Classic Tween pada ke-3 layer (Blok Klik kanan Create Classic Tween)

7. Berikan action script pada frame 25 pada layer paling atas (layer kontak), dengan kode berikut ini :
Stop();
 Simpan dahulu project anda dan test hasilnya (tekan Ctrl + Enter). Lihat hasilnya di situ akan ada
animasi kotak masuk ke dalam stage menempati di bawah tulisan MENU UTAMA.

8. Tambah layer baru, ganti namanya dengan HalHome, lalu insert Keyframe pada frame 30. Beri
keterangan untuk halaman home anda, lihat seperti di bawah ini :

Tambah layer baru, ganti namanya dengan HalMateri, lalu insert Keyframe pada frame 35. Beri
keterangan untuk halaman materi anda, lihat seperti di bawah ini :

Tambah layer baru, ganti namanya dengan HalKontak, lalu insert Keyframe pada frame 40. Beri
keterangan untuk halaman kontak anda, lihat seperti di bawah ini :
9. Insert frame untuk layer background, Home, Materi dan Kontak.

10. Berikan kode action script pada tiap tombol, kita gunakan panel Code Snippet. Untuk memunculkan
panel Code Snippets bisa anda lakukan ke menu Windows  Code Snippets.
Kemudian klik frame 25 yang berisi tombol. Klik tombol Home pilih Time Navigation Klik 2 kali
pada Click to Go to Frame and Stop
 Ganti 5 dengan 30 pada gotoAndStop.

TUGAS ANDA

11. Berikan Code Snippets pada tombol yang lainnya supaya berfungsi sesuai harapan.
12. Test movie hasil anda dengan Ctrl + Enter dan lihat hasilnya.

Silahkan tambahkan suara untuk tombol dan lainnya supaya lebih kelihatan hidup dan menarik
 MEMBUAT MENU UNTUK BERPINDAH KE/ANTAR SCENE DENGAN
ACTION SCRIPT 3/CODE SNIPPETS
1. Buat project dengan Action Script 3, dengan ukuran stage 300 x 400 px.
2. Ganti layer 1 dengan nama background, kemudian masukkan kotak (Rectangle Tool (R)) sesuai
ukuran stage. Bisa anda lakukan melalui dengan menu Modify-Align,lihat gambar di bawah

3
2
1

Buat stage seperti di bawah ini :

3. Tambahkan 3 Layer dan ganti namanya dengan Materi, Evaluasi, Kontak. Kemudian tambahkan 3
buah kotak (Rectangle Tool) berisi tulisan menu yang anda inginkan, contohnya seperti gambar dan
posisikan sebelah kiri luar stage. Layer Materi berisi Kotak dan teks Materi, layer Evaluasi berisi
kotak dan teks Evaluasi, sedangkan layer Kontak berisi kotak dan teks Kontak.
4. Buatkan ke-3 kotak di layer Menu Utama menjadi tombol.
Seleksi kotak dan tulisannya klik kananConvert to Symbol. Beri nama symbol (contoh :
tb_materi) dan beri nama Instance Name di properties dengan nama yang sama sesuai nama
symbol. Ikuti cara di atas untuk 2 kotak lainnya yaitu tb_evaluasi dan tb_kontak.

Apabila setelah kotak dikonversi menjadi tombol dan tulisannya hilang, sebenarnya tidak hilang
tapi ada dibelakang tombol. Untuk memunculkan tulisannya,
klik tombol itu klik kananArrangeSend to Back

5. Insert Keyframe di frame 25 untuk layer Materi, layer Evaluasi dan layer Kontak. Sedangkan layer
Background dikasih Insert Frame. Kemudian posisikan semua tombol di bawah tulisan MENU
UTAMA.
6. Berikan Classic Tween pada ke-3 layer (Blok Klik kanan Create Classic Tween)

7. Berikan action script pada frame 25 layer kontak dengan kode stop();
8. Simpan project anda dan silahkan test movie dengan Ctrl + Enter. Lihat hasilnya akan ada animasi
tombol masuk ke tengah dari sebelah kiri stage.
9. Pindahkan frame 1 layer Materi ke frame 10, frame 1 layer Evaluasi ke frame 5. Silahkan test lagi
dengan Ctrl + Enter dan lihat hasilnya.

10. Klik frame yang berisi tween, berikan ease dengan 100 untuk menghaluskan pergerakan animasi.
Silahkan tekan Ctrl + Enter lagi, kemudian simpan kembali project anda.

11. Ganti nama Scene dengan menuUtama.

Tambah
Scene

Untuk memunculkan Scene, anda bisa klik menu Windows  Other panels  Scene

12. Tambahkan 3 buah Scene dan ganti namanya sesuai dengan gambar berikut ini :
13. Klik Scene materi dan berikan keterangan seperti contoh di bawah ini

Berikan juga keterangan untuk 2 scene lainnya seperti di bawah ini

14. Kembali ke MENU UTAMA dengan klik scene menuUtama, kemudian klik pada tombol MATERI dan
masuk ke panel Code Snippets.
 Ternyata setelah klik tombol MATERI, bukan merupakan tombol seperti terlihat di properties, yaitu
sebagai Graphic. Silahkan anda ubah menjadi Button dan beri nama Instance Name dengan
tb_materi1. Ubah juga untuk yang lainnya dengan Instance name tb_evaluasi1 dan tb_kontak1.

Setelah diubah kembali ke tombol, sehingga kita bisa beri kode snippets. Klik Time Navigation 
klik 2 kali pada click to Go to Scene and Play.

15. Silahkan test movie dengan Ctrl + Enter dan lihat hasilnya. Ternyata tidak sesuai harapan, karena di
Scene materi belum diberikan action script stop();. Silahkan anda klik Scene materi dan berikan
kode action script yaitu stop();. Silahkan test movie lagi.
 TUGAS ANDA :

16. Berikan Code Snippets pada tombol lainnya dan berikan stop(); pada tiap scene.
17. Buatkan tombol di Scene materi, evaluasi dan kontak untuk bisa kembali ke scene menuUtama.
Lihat gambar.
18. Berikan suara untuk lebih hidup dan menarik.
19.SEMOGA BERHASIL