| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



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

11.05.2020

Game RPG dengan HTML Canvas (Javascript)

Pengembangan game RPG dengan teknik tiling menggunakan HTML canvas


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D Games

Membuat Navigasi Interaktif Multimedia Sederhana dengan Flash AS3

Pendahuluan

Dalam tutorial Membuat Interaktif Multimedia dijelaskan bahwa untuk membuat sistem navigasi sebuah aplikasi interaktif adalah dengan memindah halaman aktif dengan fungsi gotoAndStop(). Teknik tersebut mudah untuk dipraktekkan, akan tetapi kurang fleksibel dalam menghandle jumlah halaman yang banyak, dan optimasi penggunaan memori (terlebih jika target aplikasi adalah untuk platform mobile. Untuk itu diperlukan sebuah metode yang lebih sederhana

Salah satu teknik yang bisa diaplikasikan dalam membuat sistem navigasi sederhana adalah dengan menggunakan teknik linkage dan getDefinitionByName. Dengan teknik ini masing-masing halaman IMM dibuat secara independen dalam sebuah MovieClip, sehingga proses pengaturannya akan lebih mudah, karena tidak akan mengganggu halaman lainnya. Untuk lebih jelasnya perhatikan langkah-langkah berikut :


Persiapan Aset Visual

Pada teknik ini, masing-masing halaman IMM dibuat dalam sebuah MovieClip yang memiliki linkage, sehingga dapat diakses oleh kode Actionscript dengan mudah. Untuk mempersiapkan aset visual, lakukanlah langkah-langkah berikut :

  1. Buatlah sebuah file baru, atur properties file untuk keperluan mobile, yaitu dengan resolusi 800 x 480 pixel dan 30 fps. Perhatikan gambar :
    tutorial membuat interaktif multimedia by wandah_w
  2. Selanjutnya buatlah sebuah tampilan dan konten untuk halaman HOME. Sebagai contoh pada masing-masing halaman nantinya akan terdapat 4 buah tombol navigasi, yaitu untuk halaman HOME, ABOUT, PROFILE dan GALLERY. Buatlah konten tersebut dan convert masing-masing objek sebagai mana fungsinya (terdapat 4 buah tombol dan beberapa konten) . Perhatikan gambar :
    tutorial membuat interaktif multimedia by wandah_w
  3. Agar dapat diakses oleh kode Actionscript, tambahkan instance name pada tiap-tiap tombol. Sebagai contoh pada tutorial ini terdapat 4 buah instance name untuk tombol yaitu home_btn, about_btn, profile_btn dan galery_btn. Perhatikan gambar :
    tutorial membuat interaktif multimedia by wandah_w
  4. Seleksi seluruh konten yang ada di Stage, selanjutnya Convert to Symbol (F8) menjadi Movieclip dengan nama home_btn registrasi point berada di pojok kiri atas tekan opsi advanced dan centang opsi Export for Actionscript, lalu tekan OK. (note : jika ada dialog yang menyatakan tentang opsi class, cukup anda tekan OK). Perhatikan gambar :
    tutorial membuat interaktif multimedia by wandah_w
  5. Hapus movievlip home_mc tersebut dari Stage (karena pada tutorial ini digunakan metode pemanggilan seluruh asset menggunakan kode, sehingga tidak perlu ada objek apapun pada stage). Movieclip home_mc yang telah dibuat pada langkah selanjutnya akan kita pergunakan sebagai "template" untuk membuat halaman lain.
  6. Buka panel Library (Ctrl + L), selanjutnya seleksi movieclip home_mc, klik kanan dan pilih opsi Duplicate. Opsi bermaksud untuk menduplikasi sebuah simbol. Perhatikan gambar :
    tutorial membuat interaktif multimedia by wandah_w
  7. Pada panel Duplicate Symbol ubah nama menjadi about_mc, selanjutnya pada mode advanced centang opsi Export for Actionscript, lalu tekan OK. Perhatikan gambar :
    tutorial membuat interaktif multimedia by wandah_w
  8. Pada panel Library dobel klik movieclip about_mc, lalu edit konten movieclip tersebut. dalam contoh ini, pengeditan dilakukan terhadap warna background dan static text menjadi "halaman about". Perhatikan gambar :
    tutorial membuat interaktif multimedia by wandah_w
  9. Dengan cara yang sama, lakukan Duplicate symbol beberapa kali, sehingga dihasilkan 4 buah movieclip yaitu home_mc, about_mc, profile_mc dan galery_mc. Pastikan masing-masing moviclip memiliki linkage. Perhatikan gambar :
    tutorial membuat interaktif multimedia by wandah_w




Penambahan Kode Actionscript 3.0 untuk navigasi sederhana

Tahapan selanjutnya adalah penambahan kode. Pastikan pada frame 1 tidak terdapat objek apapun. Selanjutnya klik frame 1 layer 1, dan ketikan kode berikut :

var halaman:MovieClip;
var nama_halaman:String;
function tambah_halaman(nama:String):void{
	//ambil nama linkage dari library
	var mc_link:Class = getDefinitionByName(nama) as Class;
	//buat movieclip baru sesuai dengan nama linkage
	halaman = new mc_link();	
	//listener mouse click
	halaman.home_btn.addEventListener(MouseEvent.CLICK, atur_tombol);
	halaman.about_btn.addEventListener(MouseEvent.CLICK, atur_tombol);
	halaman.profile_btn.addEventListener(MouseEvent.CLICK, atur_tombol);
	halaman.galery_btn.addEventListener(MouseEvent.CLICK, atur_tombol);
	//tambahkan halaman ke layar
	addChild(halaman);
}
function hapus_halaman():void{
	//hapus listener mouse click
	halaman.home_btn.removeEventListener(MouseEvent.CLICK, atur_tombol);
	halaman.about_btn.removeEventListener(MouseEvent.CLICK, atur_tombol);
	halaman.profile_btn.removeEventListener(MouseEvent.CLICK, atur_tombol);
	halaman.galery_btn.removeEventListener(MouseEvent.CLICK, atur_tombol);
	//hapus halaman dari layar
	removeChild(halaman);
}
function atur_tombol(e:MouseEvent):void{
	var nama_tombol:String = e.currentTarget.name;
	hapus_halaman();
	if (nama_tombol == "home_btn") nama_halaman = "home_mc";
	if (nama_tombol == "about_btn") nama_halaman = "about_mc";
	if (nama_tombol == "profile_btn") nama_halaman = "profile_mc";
	if (nama_tombol == "galery_btn") nama_halaman = "galery_mc";
	tambah_halaman(nama_halaman);
}
tambah_halaman("home_mc");

Jalankan aplikasi dengan menekan tombol Ctrl+Enter, maka hasil dari tutorial ini adalah sebagai berikut:


Get Adobe Flash player

Langkah Selanjutnya

Untuk selanjutnya dapat dilakukan penambahan konten halaman. Contoh konten halaman antara lain adalah deskripsi teks dalam format static text maupun dynamic text, penambahan sub halaman, penambahan galery foto, penambahan video dan sebagainya.

Untuk penambahan galeri foto silahkan klik Menambah Foto Gallery ke dalam Interaktif Multimedia

File Sumber


download navigasi IMM sederhana


Share ( Ayo Berbagi )

Leave me a comment

untuk pertanyaan lebih baik di email langsung ke wandah [at] wandah [dot] com agar cepat direspon