Dalam latihan berikut kita akan kupas tuntas cara membuat menu geser/sliding. Dalam latihan berikut, saya lampirkan file fla yang akan kita bahas, dengan harapan Anda dapat memahami fungsi tool dalam terapannya.
Down load file Menu Slide.
VIDEO TUTORIAL TERKAIT:
Betapa pentingnya keberadaan sebuah menu dalam sebuah aplikasi. UI (user interface) baik secara fungsi alir (flow chart) maupun seni(art) banyak ditentukan oleh bagaimana Anda menempatkan dan mendesain sebuah menu. Selain kemudahan untuk menjelajahi konten, kemudahan serta keindahan sangat mempengaruhi sebuah aplikasi.
Sebelum memulai latihan, sebaiknya Anda jalankan file swf yang telampir agar dapat memahami apa yang akan dikerjakan. Jika Anda tertarik, ikuti langkah-langkah berikut:
- Buka file adobe Flash yang terlampir.
File ini berisi 15 frame, 4 buah layer, dan beberapa movie clip dan button didalamnya. Dalam latihan ini, kita hanya membahas 2 frame saja.
Tombol 3 garis (slide) adalah movie clip, yang berisi tombol slide, tombol back, dan beberapa tombol menu.
- Klik ganda tombol Slide untuk beralih ke jendela movie clip
Coba geser slider animasi. Pada frame 26 menu slide menutup objek tujuan, lalu bergerak ke arah frame 50. Dalam aplikasi, karena tidak perintah berhenti pada frame 50, maka slider sesunggahnya akan berhenti di frame1.
Bagi yang belum paham cara membuat animasi, buka postingan terkait.
- Tempatkan tombol slide pada frame 1 layer 2.
- Tempatkan tombol Back pada frame 16 layer 2.
Selanjutnya menempatkan koding didalam frame dan objek tombol.
- Klik frame 1 layer Actions.
- Pda menu Window > pilih Code Snippets.
- Klik ganda pada Stop at this Frame.
- Pastikan kode masuk dijendela Actions (F9)
Koding Pada frame 16.
- Klik frame 16 layer Actons > klik ganda Stop at this Frame
- Klik objek tombol Back.
- Pada panel Code Sippets > klik ganda Go to Frame and Play
- Klik tombol Scene 1.
- Klik Control > pilih Test Scene.
Sekian latihan membuat tombol menu geser. Konten dasar untuk pelajaran ini adalah movie clip dan cara membuat tombol yang cantik akan dibahas selanjutnya.
Semoga sukses.
0 Komentar