| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



06.07.2022

MPI Component

Library untuk pengembangan multimedia interaktif dengan Flash/Animate

23.10.2020

Virtual Lab Flash

Library untuk pengembangan laboratorium virtual dengan Flash/Animate

06.10.2020

Game Among Us

Membuat gerakan karakter seperti pada game Among Us

05.10.2020

Multimedia Interaktif Tata Surya

Membuat Multimedia Pembelajaran Interaktif tentang tata surya

04.10.2020

Animasi Rotasi Bumi 3D

Membuat animasi bumi berotasi dengan grafik 3 Dimensi

01.10.2020

Membuat Kuis Essay

Mengecek jawaban kuis essay pada aplikasi pembelajaran interaktif

12.09.2020

Membuat Game Ular Tangga

Membuat game ular tangga dengan Adobe Flash/Animate AS3

10.09.2020

Membuat Pengacak Dadu

Membuat acak dadu untuk game ular tangga/monopoly

13.07.2020

Membuat Game Onet

Membuat game mencari gambar yang sama (onet) dengan JS/HTML5

11.06.2020

Membuat Kuis CBT

Membuat kuis CBT, menyimpan nilai ke server dengan PHP dan XML


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D Games

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:


  1. Edit movieclip konten. Kita akan menambahkan 1 buah subhalaman yang memiliki 3 buah tombol menu.
  2. Buatlah sebuah layer baru di atas layer halaman isi. Ubah nama layer tersebut menjadi layer subhalaman
  3. 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.

    interactive multi media by wandah_w
  4. 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.

    interactive multi media by wandah_w
  5. 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.
  6. 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();
  7. 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.

    interactive multi media by wandah_w
  8. 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".
  9. 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");
    	}
    }
    					
  10. 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