Menambah Foto Gallery pada Interaktif Multimedia Sederhana

Pendahuluan

Dalam tutorial Membuat Navigasi Interaktif Multimedia dijelaskan sebuah konsep sederhana dalam membuat sistem navigasi multimedia dengan metode penambahan masing-masing halaman interaktif ke-layar komputer sebagai Display Object secara terpisah.

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. Pada tutorial ini akan dijelaskan teknik penambahan foto Gallery sederhana pada salah satu halaman. Untuk lebih jelasnya perhatikan langkah-langkah berikut :

Persiapan Aset Visual

Pada teknik ini, beberapa foto yang akan ditampilkan sebagai galeri dimasukkan ke dalam sebuah MovieClip yang selanjutnya Movieclip tersebut dapat diatur perpindahan frame nya sehingga dapat menampilkan masing-masing foto ketika sebuah tombol ditekan, untuk membuatnya lakukanlah langkah-langkah berikut :

1. Buka kembali file Navigasi IMM yang telah anda buat pada tutorial sebelumnya, atau download di link ini
   
   
2. Selanjutnya siapkan beberapa foto yang akan ditampilkan dalam galery. Pada contoh ini digunakan 5 buah foto hasil screenshot dari IMM karya Palupi (Mahasiswa DKV Unnes). (NOTE : Untuk mempermudah proses IMPORT, berikan nama file yang berurutan pada foto tersebut, misal : foto_1.jpg, foto_2.jpg dan seterusnya) . Setelah gambar disiapkan, selanjutnya gambar di import ke dalam sebuah Movieclip. Untuk melakukannya, klik menu Insert > New Symbol dan pilih type Movieclip dengan nama foto_mc.
   Perhatikan gambar :
   
   
3. Untuk mengimport foto yang telah anda siapkan ke dalam movieclip foto mc, Klik menu File > Import > Import to Stage dan pilih file pertama yang anda import, tekan OK. Apabila anda memberi nama file secara berurutan, maka akan muncul sebuah dialog yang menanyakan apakah anda akan mengimport seluruh file atau satu file saja, pilih Yes maka foto akan disusun secara otomatis pada timeline, atau pilih No untuk menyusunnya secara manual frame by frame. Perhatikan gambar :
   
   
   
   
4. Setelah selesai menyiapkan movieclip foto_mc, keluar dari mode edit (kembali ke Scene utama). Selanjutnya buka Library dan dobel klik movieclip galery_mc. (note : file galery_mc diedit untuk ditambah dengan movieclip foto_mc yang dibuat pada langkah sebelumnya).
   Buatlah sebuah layer baru untuk mempermudah peletakan galery dan tombol-tombol (agar tidak mengganggu halaman yang sudah kita buat sebelumnya).
   Kemudian drag movieclip foto_mc dari library ke Stage, atur posisinya. Untuk melihat foto berikutnya, tentu saja diperlukan 2 buah tombol, untuk itu buatlah 2 buah objek bertipe Button dan atur posisinya sesuai dengan gambar berikut:
   
   
5. Agar masing-masing objek pada halaman galeri dapat diakses oleh kode, maka perlu ditambahkan instance name. Untuk itu klik movieclip foto_mc, buka panel properties dan ketikan foto_mc pada kolom instance name. Dengan cara yang sama tambahkan instance name pada 2 tombol tersebut, yaitu btn_next dan btn_prev. (Metode instance name pada dasarnya hampir mirip dengan linkage, keduanya digunakan untuk mengidentifikasi objek agar dapat diakses dengan menggunakan kode). Perhatikan gambar :
   
   
6. Keluar dari mode edit / kembali ke Scene utama (Ctrl+E), selanjutnya klik frame 1 layer 1
   

Penambahan Kode Actionscript 3.0 untuk sistem galeri

Tahapan selanjutnya adalah penambahan kode. Perlu diketahui, pada tutorial sebelumnya, kode yang dipakai menggunakan metode getDefinitionByName, sehingga kode untuk memanggil masing-masing halaman dilakukan oleh 1 fungsi. Dengan teknik tersebut, kode menjadi ringkas dengan reskio penambahan elemen lain harus dilakukan dengan tepat. Untuk itu, bagi anda yang ingin menerapkan teknik ini, perhatikan penjelasan kode pada bagian bawah. Pada 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);
	//penambahan untuk halaman galery
	if (nama_halaman == "galery_mc"){
		halaman.foto_mc.stop();
		halaman.btn_next.addEventListener(MouseEvent.CLICK, atur_tombol_galery);
		halaman.btn_prev.addEventListener(MouseEvent.CLICK, atur_tombol_galery);
	}
}
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);
	//penambahan untuk halaman galery
	if (nama_halaman == "galery_mc"){
		halaman.btn_next.removeEventListener(MouseEvent.CLICK, atur_tombol_galery);
		halaman.btn_prev.removeEventListener(MouseEvent.CLICK, atur_tombol_galery);
	}
	//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);
}
function atur_tombol_galery(e:MouseEvent):void{
	var nama_tombol:String = e.currentTarget.name;
	if (nama_tombol == "btn_next") halaman.foto_mc.nextFrame();
	if (nama_tombol == "btn_prev") halaman.foto_mc.prevFrame();
}

tambah_halaman("home_mc");

Jalankan aplikasi dengan menekan tombol Ctrl+Enter, maka hasil dari tutorial ini adalah sebagai berikut (klik halaman galery, dan ujicoba tombol foto galerynya):

Penjelasan Kode

Perhatikan prinsip dasar penambahan gallery pada metode sederhana tersebut. Penambahan kode hanya dilakukan pada fungsi tambah_halaman dan fungsi hapus_halaman. Perhatikan baris 16 - 20 berikut :

	//penambahan untuk halaman galery
	if (nama_halaman == "galery_mc"){
		halaman.foto_mc.stop();
		halaman.btn_next.addEventListener(MouseEvent.CLICK, atur_tombol_galery);
		halaman.btn_prev.addEventListener(MouseEvent.CLICK, atur_tombol_galery);
	}

Penambahan halaman yang dilakukan dengan metode getDefinitionByName (baris 5), menggunakan variabel nama_halaman. Pada baris 16, dengan logika IF, ketika variabel nama_halaman bernilai "galery_mc", berarti movieclip galery_mc sedang ditambahkan ke layar. Di dalam movieclip galery_mc tersebut terdapat 3 buah instance name, yaitu foto_mc, btn_next dan btn_prev.
Pada baris 17, movieclip foto_mc distop() agar tidak bergerak secara looping, selanjutnya ditambahkan listener pada 2 tombol yang ada.
Penambahan listener atur_tombol_galery, mengharuskan kita menuliskan fungsi pada baris 45 - 49.

	//penambahan untuk halaman galery
	if (nama_halaman == "galery_mc"){
		halaman.btn_next.removeEventListener(MouseEvent.CLICK, atur_tombol_galery);
		halaman.btn_prev.removeEventListener(MouseEvent.CLICK, atur_tombol_galery);
	}

Dengan memahami proses penambahan objek dan listener pada fungsi tambah_halaman, maka untuk menghapus halaman juga perlu ditambahkan operasi removeEventListener pada kedua tombol di halaman galery. Pada baris 29, dengan logika IF, ketika variabel nama_halaman bernilai "galery_mc", berarti movieclip galery_mc akan dihapus dari layar, sehingga listener yang ada harus diremove untuk mengoptimalisasi kinerja aplikasi terkait memory yang dibutuhkan untuk bekerja.

function atur_tombol_galery(e:MouseEvent):void{
	var nama_tombol:String = e.currentTarget.name;
	if (nama_tombol == "btn_next") halaman.foto_mc.nextFrame();
	if (nama_tombol == "btn_prev") halaman.foto_mc.prevFrame();
}

Fungsi atur_tombol_galery, digunakan untuk mengatur posisi frame aktif movieclip foto_mc. Ketika tombol btn_next ditekan, maka movieclip foto_mc, dipindah ke frame selanjutnya, sehingga foto berikutnya akan muncul, begitu pula dengan tombol btn_prev.

Proses Selanjutnya

Selanjutnya kita dapat menambahkan efek transisi antar halaman

File Sumber

download IMM sederhana + sistem Gallery

Share ( Ayo Berbagi )

Leave me a comment

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