wandah
| Tutorial Flash - HTML5 - Javascript - DKV
Latest Blog
05.10.2020
Multimedia Interaktif Tata Surya
Membuat Multimedia Pembelajaran Interaktif tentang tata surya
ALL BLOG
;
Menambahkan Sub Halaman / Photo Gallery
Untuk membuat sub halaman pada dasarnya sama dengan membuat MC konten. Sebagai contoh dalam IMM ini pada menu Portfolio terdapat 3 submenu yaitu Wedding, Outdoor dan Even. Untuk membuatnya lakukan proses sebagai berikut:
- Edit movieclip konten. Kita akan menambahkan 1 buah subhalaman yang memiliki 3 buah tombol menu.
- Buatlah sebuah layer baru di atas layer halaman isi. Ubah nama layer tersebut menjadi layer subhalaman
-
Klik kanan frame 20 layer sub halaman (frame yang memiliki sub halaman yaitu frame Portfolio / hal_3), kemudian pilih Insert Blank Keyframe. Kemudian kanan frame 30 layer sub halaman dan pilih Insert Blank Keyframe (langkah ini dimaksudkan agar tampilan sub halaman hanya muncul di bagian portfolio bukan di halaman yang lain. Sekarang susunan layer akan terlihat seperti pada gambar berikut.
-
Klik frame 20 layer sub halaman kemudian buatlah 3 buah tombol yaitu tombol Wedding, Outdoor dan tombol Even. Seleksi ke 3 tombol tersebut kemudian convert to symbol menjadi movieclip dengan nama subhalaman_portfolio.
- Double klik moviclip subhalaman_portfolio, untuk mengeditnya. Sama seperti halnya ketika kita membuat movieclip konten pada langkah 1 di atas, buatlah beberapa layer baru dan rename layer untuk mempermudah proses. Dalam kasus ini dibuat 4 buah layer yaitu layer action, layer label, layer tombol dan layer photo.
- Dengan cara yang sama seperti membuat movieclip konten, tambahkan foto-foto pada layer isi dan tambahkan label pada masing-masing frame (diambil kelipatan 10), dan pada frame 1 layer action ditambahkan actionscipt stop();
-
Seleksi masing-masing tombol dan berikan instance name pada masing-masing tombol sesuai dengan namanya, yaitu "tombol_wedding", "tombol_outdoor" dan "tombol_even". Sehingga susunan layer dari moviclip subhalaman_portfolio kurang lebih seperti pada gambar berikut.
- Keluar dari mode edit moviclip subhalaman_portfolio, sehingga kita berada pada mode edit movieclip konten. Klik movieclip subhalaman_portfolio kemudian buka panel properties dan tambahkan instance name "sub_portfolio".
-
Klik kanan frame 20 layer action kemudian pilih insert blank keyframe. Buka panel action dan ketikan script berikut :
sub_portfolio.tombol_wedding.addEventListener(MouseEvent.CLICK, perintah); sub_portfolio.tombol_outdoor.addEventListener(MouseEvent.CLICK, perintah); sub_portfolio.tombol_even.addEventListener(MouseEvent.CLICK, perintah); function perintah(e:MouseEvent){ var nama = e.currentTarget.name.substr(7); if (nama == "wedding"){ sub_portfolio.gotoAndStop("hal_1"); } if (nama == "outdoor"){ sub_portfolio.gotoAndStop("hal_2"); } if (nama == "even"){ sub_portfolio.gotoAndStop("hal_3"); } } - Jalankan movie dengan menekan tombol Ctrl+Enter. Jika proses yang anda lakukan benar, ketika anda menekan tombol Portfolio akan muncul subhalaman yang memiliki 3 tombol aktif yang masing-masing dapat diklik dan menampilkan konten yang berbeda
Dengan konsep yang sama anda dapat membuat sistem photo gallery atau subhalaman sebanyak mungkin. Yang terpenting adalah lakukan proses kerja sesimpel dan seefisien mungkin untuk menghemat waktu dan ukuran files.
Masih banyak materi yang bisa ditambahkan pada IMM anda seperti video, scrolling text ataupun bentuk multi media yang lain yang akan dijelaskan pada post selanjutnya.
Langkah selanjutnya




