| 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

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

  4. interactive multi media by wandah_w
  5. 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
  6. Buatlah sebuah efek sinar lampu (gunakan warna linear gradient dan sedikit alpha) kemudian convert menjadi movieclip lampu.
  7. 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

  8. interactive multi media by wandah_w


Membuat tombol pengendali movieclip

  1. 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 :

  2. interactive multi media by wandah_w
  3. Selanjutnya buatlah sebuah layer baru yaitu layer kode, klik frame 1 layer kode, kemudian ketikkan kode berikut
  4. 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:


    Get Adobe Flash player

    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