Rabu, 02 Oktober 2013

Membuat Menu Slide

pada tutorial ini kita akan membuat menu Movie Clip (MC) dengan Button sebagai kendali menggunakan actionscript 3 (AS3), dimana menu tersebut akan ditampilkan secara slide (motion) dan didalamnya terdapat pilihan yang ditampilkan secara alpha(motion), untuk jelasnya perhatikan gambar berikut
pertama buat dua buah layer dengan nama objek dan action, dimana layer objek berisi semua objek baik MC maupun Button dan layer action berisisi script pemrograman menggunakan AS3, untuk jelasnya perhatikan gambar berikut
 pada layer objek buatlah sebuah kotak
kemudian convert menjadi tombol dengan nama tombol_btn, kemudian beri nama instance name tombol_btn


buat new symbol baru dengan ctrl+f8, kemudian buat MC dengan nama menu_mc, dari sini kita akan menuju scene menu_mc, buatlah empat layer dengan nama masing masing action, preview, image dan latar, perhatikan gambar berikut

pada layer latar klik frame ke-2 dan tekan f6, kemudian buat kotak tinggi, convert kotak tinggi tersebut (f8) menjadi grapich dengan nama Tween 1, kemudian klik frame 15 dan tekan f6, masih pada layer latar pilih frame 2 dan kecilkan ukuran kotak tinggi tersebut menjadi pendek dari bawah keatas, kemudian klik kanan antara frame dua dengan frame lima belas dan pilih create motion tween, perhatikan gambar berikut
pindah ke frame image, klik layer 15 dan tekan f7, kemudian buat tiga buah kotak dan ubah masing masing kotak menjadi tombol denagn nama image1_btn, image2_btn dan image3_btn, kemudian berilah masing-masing tombol tersebut nama instance name sesuai dengan namanya yang ada library yaitu image1_btn, image2_btn dan image3_btn, perhatikan gambar berikut
pindah ke frame preview, klik layer 15 dan tekan f7, buat new symbol (ctrl+f8) dan pilih MC dengan nama preview_mc
dengan demikian kita berada pada scene preview_mc, atau lebih tepatnya scene1 > menu_mc > preview_mc, buat dua layer dengan nama action dan image, perhatikan gambar berikut
pada layet image klik frame dua dan tekan f6, buat kotak berwarna sesuaikan gambarnya dan konvert menjadi grapich dengan nama tween 2, kemudian klik f6 pada layer 19, kemudian klik kembali pada layer 2 dan ubahlah alpha kotak tersebut menjadi 0%, perhatikan gambar berikut

lakukan hal yang sama untuk dua kotak lainnya, berilah nama tween 2 dan tween 3 pada kotak berikutnya, buatlah motion tween untuk tiap-tiap frame antara kotak yang sama (perhatikan gambar tampilan layer diatas), kemudian pada layer action ketikkan script stop() pada layer 1, 19, 34, dan 50, kembalilah pada scene menu_mc dengan cara klik pada area scene, pada layer preview pada frame lima belas tekan f6 dan draglah preview_mc pada posisi meyesuaikan gambar, dan berilah instance name dengan nama preview_mc, dari sini pindahlah ke layer action dan pada frame satu tuliskan sciprt stop() kemudian pilih frame 15 dan klik f7, kemudian tuliskan script berikut
stop();
image1_btn.addEventListener(MouseEvent.CLICK,image1F);
image2_btn.addEventListener(MouseEvent.CLICK,image2F);
image3_btn.addEventListener(MouseEvent.CLICK,image3F);
function image1F(e:MouseEvent):void{
 preview_mc.gotoAndPlay(2);
}
function image2F(e:MouseEvent):void{
 preview_mc.gotoAndPlay(21);
}
function image3F(e:MouseEvent):void{
 preview_mc.gotoAndPlay(36);
}
setelah itu kembalilah pada scene 1, drag menu_mc dibawah posisi tombol_btn, sesuaikan dengan gambar, kemudian beri nama instance name menu_mc, pada layer action ketikkan script berikut
tombol_btn.addEventListener(MouseEvent.CLICK,jalanF);
function jalanF(e:MouseEvent):void{
 menu_mc.gotoAndPlay(2);
}
kemudian tekan ctrl+enter untuk test movie, maka setiap kita klik tombol menu maka akan muncul menu yang tambil secara slide, dan menu tersebut memiliki sub pilihan menu yang akan tambil bila diklik secara motion tween yang telah dialpha, anda bisa mendapatkan source tutorial ini disini dengan password wahanaflash.com

Tidak ada komentar:

Posting Komentar