| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



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

19.05.2020

Membuat Fitur Swipe Mobile

Membuat fitur swap / drag konten untuk mobile

12.05.2020

Membuat Grafik Fungsi Kuadrat dengan Flash

Membuat kurva fungsi kuadrat dengan kode actionscript 3 Flash

11.05.2020

Membuat Kordinat Kartesius dengan Flash

Membuat sistem kordinat kartesius dengan code AS3 full

16.03.2020

Game Edukasi RPG

Buku pengembangan game RPG bermuatan edukasi

31.07.2019

Perpustakaan Baru UNNES

Mengintip perpustakaan baru UNNES


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D Games

Mengubah kursor mouse

Pendahuluan

Dalam sebuah multimedia interaktif, bentuk mouse yang unik menjadi daya tarik tersendiri. Bahkan beberapa multimedia menggunakan teknik mouse trail atau objek mengikuti pergerakan mouse. Pada tutorial ini, akan ditunjukkan contoh mouse trail dimana beberapa ekor ikan akan bergerak mengikuti gerakan mouse. Untuk melakukannya perhatikan langkah berikut :


  1. Buatlah sebuah file baru AS3.
  2. Buatlah sebuah Movieclip yang akan dijadikan sebagai objek yang mengikuti mouse - dimana dalam contoh ini adalah seekor ikan, dengan cara memilih menu Insert > New Symbol. Pada menu New Symbolketikan nama animasi_ikan, pilih type Movieclip dan pada mode advanced, klik opsi Export for Actionscript. Lalu klik OK.

    tutorial flash membuat mouse trail by wandah_w

  3. Selanjutnya buatlah sebuah animasi ikan secara frame by frame. Anda dapat menggambar ikan secara manual menggunakan drawing tool, atau mengimport gambar eksternal. Perhatikan contoh berikut :

    tutorial flash membuat mouse trail by wandah_w

  4. Keluar dari mode edit dengan menekan Ctrl+E, Kemudian klik frame 1, kemudian buka panel Action (tekan F9) dan ketikkan kode berikut :
  5. function buat_ikan(ukuran:Number, ikut_mouse:Boolean, ikut:Object, ikut_x:int, ikut_y:int, kec:int):Object{
    	var ob:animasi_ikan = new animasi_ikan();
    	ob.ikut = ikut;
    	ob.f_x = ikut_x;
    	ob.f_y = ikut_y;
    	ob.kec = kec;
    	ob.ukuran = ukuran;
    	ob.scaleX = ukuran;
    	ob.scaleY = ukuran;
    	ob.ikut_mouse = ikut_mouse;
    	ob.gotoAndPlay(Math.round(Math.random()*30));
    	ob.addEventListener(Event.ENTER_FRAME, gerak_ikan);
    	addChild(ob);	
    	return ob;
    }
    
    function gerak_ikan(e:Event):void{
    	var ob:Object = e.currentTarget;
    	if (ob.ikut_mouse){
    		ob.x += (mouseX + ob.f_x - ob.x)/ob.kec;
    		ob.y += (mouseY + ob.f_y - ob.y)/ob.kec;
    		if (ob.x > mouseX) ob.scaleX = -ob.ukuran; else ob.scaleX = ob.ukuran;
    	}else{
    		ob.x += (ob.ikut.x + ob.f_x - ob.x)/ob.kec;
    		ob.y += (ob.ikut.y + ob.f_y - ob.y)/ob.kec;
    		if (ob.x > ob.ikut.x) ob.scaleX = -ob.ukuran; else ob.scaleX = ob.ukuran;
    	}
    }
    
    var ikan_1:Object = buat_ikan(1, true, null, 40, 20, 10);
    var ikan_2:Object = buat_ikan(0.5, false, ikan_1, 10, 20, 20);
    var ikan_3:Object = buat_ikan(0.8, false, ikan_2, 15, -40, 15);
    var ikan_4:Object = buat_ikan(1.2, false, ikan_3, 25, 50, 25);
    var ikan_5:Object = buat_ikan(0.7, false, ikan_2, -25, -50, 23);
    

  6. Jalankan aplikasi dengan menekan tombol Ctrl+Enter, dan akan dihasilkan output sebagai berikut :

Get Adobe Flash player

Penjelasan Kode

	function buat_ikan(ukuran:Number, ikut_mouse:Boolean, ikut:Object, ikut_x:int, ikut_y:int, kec:int):Object
		...

Fungsi tersebut digunakan untuk membuat Objek baru yang memiliki beberapa parameter/variabel sebagai berikut :

  • Variabel ukuran digunakan untuk mengatur besar kecilnya objek, sehingga akan ada variasi besaran ikan
  • Variabel ikut_mouse bernilai benar atau salah, digunakan agar objek nantinya mengikuti mouse
  • Variabel ikut digunakan untuk mengatur objek mana yang akan diikuti gerakkannya, sebagai contoh ikan_2 akan bergerak mengikuti gerakan ikan_1
  • Variabel ikut_x dan ikut_y digunakan untuk menggeser posisi objek agar tidak saling menumpuk dengan objek yang diikutinya
  • Variabel kec digunakan untuk mengatur kecepatan objek, yang dalam hal ini semakin tinggi nilainya, semakin lambat gerakannya.


function gerak_ikan(e:Event):void{
	...

Untuk menggerakkan ikan ditambahkan listener gerak_ikan, dimana posisi x dan y objek selalu ditambahkan dengan selisih antara kordinat objek dengan kordinat yang diikuti.

var ikan_1:Object = buat_ikan(1, true, null, 40, 20, 10);
var ikan_2:Object = buat_ikan(0.5, false, ikan_1, 10, 20, 20);

Untuk mengeksekusi fungsi buat_ikan, dibuat terlebih dahulu variabel bertipe Object, yang selanjutnya diatur variabel-variabel yang ada. Sebagai contoh ikan_1 diset mengikuti mouse, sedang ikan_2 diset mengikuti ikan_1.



Share ( Ayo Berbagi )

Leave me a comment

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