Mengontrol Movieclip (objek), memahami hubungan parent dan child

Konsep dasar

Ketika belajar actionscript, berdasarkan pengalaman saya sekian tahun yang lalu - mempelajari konsep parent-child adalah sesuatu yang membingungkan. Disisi lain, bingung adalah sesuatu yang harus dihindari ketika belajar apapun. Untuk itu melalui tutorial sederhana ini kita akan berusaha memahami cara mengakses sebuah movieclip dan elemen-elemen yang ada di dalamnya (disebut sebagai child). Pada contoh ini kita akan membuat sebuah movieclip mobil dimana di dalamnya terdapat elemen-elemen seperti roda, body, lampu dan sopir. Dengan menggunakan kode kita dapat mengakses masing-masing elemen tersebut. Untuk lebih jelasnya ikuti langkah-langkah berikut :

Membuat movieclip mobil

1. Pada file aplikasi Flash, buatlah sebuah gambar roda, kemudian convert menjadi movieclip roda. Seleksi movieclip roda tersebut kemudian convert menjadi movieclip animasi roda. Double klik movieclip animasi roda, selanjutnya klik kanan frame 20 dan pilih Insert Key Frame. Klik kanan frame 10 kemudian pilih create classic tween (CS3 :create motion tween).



2. Untuk menambahkan animasi roda berputar, klik frame 10, kemudian buka panel properties. Pilih CCW pada opsi rotate:. CCW berarti berlawanan dengan arah jarum jam - berkebalikan dengan CW. Selanjutnya kembali ke scene utama dengan menekan Ctrl + E.



3. Copy paste movieclip animasi roda, sehingga terdapat 2 buah roda. Selanjutnya buatlah gambar sebuah body mobil, dan convert menjadi movieclip body. Double klik movieclip body kemudian buatlah sebuah gambar seorang supir, dan convert gambar tersebut menjadi movieclip supir. Kembali ke scene
4. Buatlah sebuah efek sinar lampu (gunakan warna linear gradient dan sedikit alpha) kemudian convert menjadi movieclip lampu.
5. Seleksi semua objek di layar (2 animasi roda, 1 body, dan lampu) kemudian convert menjadi movieclip mobil. Selanjutnya agar masing-masing objek dapat diakses menggunakan kode, tambahkan instance name seperti pada gambar berikut : nama symbol dan nama instance

Membuat tombol pengendali movieclip

6. Untuk mengendalikan movieclip mobil buatlah 6 buah tombol, yaitu tombol mobil, tombol roda_d,tombol roda_b,tombol lampu,tombol body,dan tombol supir. Tambahkan instance name pada masing-masing tombol tersebut :



7. Selanjutnya buatlah sebuah layer baru yaitu layer kode, klik frame 1 layer kode, kemudian ketikkan kode berikut

import flash.events.MouseEvent;

var roda_d_bergerak:Boolean = true;
var roda_b_bergerak:Boolean = true;

tombol_mobil.addEventListener(MouseEvent.CLICK, atur_tombol);
tombol_roda_d.addEventListener(MouseEvent.CLICK, atur_tombol);
tombol_roda_b.addEventListener(MouseEvent.CLICK, atur_tombol);
tombol_lampu.addEventListener(MouseEvent.CLICK, atur_tombol);
tombol_body.addEventListener(MouseEvent.CLICK, atur_tombol);
tombol_supir.addEventListener(MouseEvent.CLICK, atur_tombol);

function atur_tombol(e:MouseEvent):void{
	var nama_tombol:String = e.currentTarget.name;
	if (nama_tombol == "tombol_mobil"){
		if (mobil.visible){
			mobil.visible = false;
		}else{
			mobil.visible = true;
		}
	}
	if (nama_tombol == "tombol_roda_d"){
		if (roda_d_bergerak){
			mobil.roda_depan.stop();
			roda_d_bergerak = false;
		}else{
			mobil.roda_depan.play();
			roda_d_bergerak = true;
		}
	}
	if (nama_tombol == "tombol_roda_b"){
		if (roda_b_bergerak){
			mobil.roda_belakang.stop();
			roda_b_bergerak = false;
		}else{
			mobil.roda_belakang.play();
			roda_b_bergerak = true;
		}
	}
	if (nama_tombol == "tombol_lampu"){
		if (mobil.lampu.visible){
			mobil.lampu.visible = false;
		}else{
			mobil.lampu.visible = true;
		}
	}
	if (nama_tombol == "tombol_body"){
		if (mobil.body.visible){
			mobil.body.visible = false;
		}else{
			mobil.body.visible = true;
		}
	}
	if (nama_tombol == "tombol_supir"){
		if (mobil.body.supir.visible){
			mobil.body.supir.visible = false;
		}else{
			mobil.body.supir.visible = true;
		}
	}
	
}




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





Dalam sebuah susunan hirarki parent-child prinsip dasar yang harus dipahami adalah apabila kita akan mengakses child dari sebuah objek, kita harus menyebutkan nama dari object parent nya. Sebagai contoh ketika anda akan mengakses mc supir, anda harus menyebutkan parent dari mc supir, yaitu mc body, dan karena mc body berada di dalam mc mobil, maka anda juga harus menyebutkan mobil terlebih dahulu, sehingga kode untuk memanggil mc supir adalah mobil.body.supir.

Sebaliknya apabila anda ingin mengakses mc mobil dari dalam mc supir (dalam artian, kode nya di letakkan di dalam mc supir, maka kode yang dibutuhkan harus menyertakan kata parent, sehingga menjadi supir.parent.parent. Kata parent dituliskan 2 kali, karena mc supir berada di kedalaman 2 level atau merupakan "cucu" dari mc mobil. Apabila anda masih bingung dengan penjelasan tersebut, anda buka file sumber dan anda pelajari strukturnya.

File Sumber


download




Share ( Ayo Berbagi )

Leave me a comment

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