Flash Tutorial, Cara Membuat Mata Karakter Mengikuti Cursor

Bagi yang pengen bikin mata karaternya mengikuti pergerakan mouse atau cursor pada project Flashnya disinilah saya akan menjelaskan carannya. Langsung aja deh.

1. Pertama-tama kalian harus menggambar mata seperti contoh yang ada dibawah. Convert gambar mata menjadi Movie Clip dengan cara “Klik kanan pada mata => pilih Convert to Symbol… ” atau bisa dengan Hotkey “F8”. Ubah instance name mata menjadi eye1 dan buat satu mata lagi dengan cara yang sama dan beri nama eye2. Lalu drag eye1 dan eye2 ke tubuh karakter yang kalian buat.

Mata yang sudah di Convert jadi MovieClip

Ubah Instance mata menjadi "eye1" dan "eye2"

Drag kedua mata ke bagian wajah karakter

2.Sekarang kita sudah punya mata selanjutnya mari kita buat supaya pupil mata bisa mengikuti mouse. Ide dari step ini adalah untuk memutar pupil mata sesuai posisi mouse. Untuk melakukan itu kita harus menentukan sudut dari pupil mata ke posisi mouse dan memutarnya. Untuk mendapatkan sudutnya kita akan menggunakan fungsi atan2 pada Flash. Dengan itu kita akan mendapatkan posisi Y dan X pada mouse.

radians1 = Math.atan2(a1, b1);

3.Sudut yang didapatkan melalui Fungsi atan2 masih berupa Radian. Untuk mengubahnya ke Sudut Derajat kita menggunakan Kode ini :

degrees1 = radians1 / (Math.PI / 180);

4.Sekarang untuk membuat pupil mata berputar dengan sudut derajat yang sudah didapatkan :

eye1.rotation = degrees1;

5.kalau ingin mengganti tampilan mouse atau cursor bisa menggunakan kode ini:

Mouse.hide();
cookie.x = mouseX;
cookie.y = mouseY;

6.malas ngetik kode? tenang disini saya udah script lengkapnya :

stage.addEventListener("mouseMove", eyesFollow);

kue.visible = false;

//Script Untuk Rotate Mata
function eyesFollow(e:MouseEvent):void {

 var a1 = mouseY - eye1.y; //"eye1" merupakan mata kiri
 var b1 = mouseX - eye1.x;
 var radians1 = Math.atan2(a1,b1); //mencari posisi cursor
 var degrees1 = radians1 / (Math.PI / 180); //mengubah Radian ke Derajat
 eye1.rotation = degrees1; //membuat mata berputar mengikuti mouse
 
 var a2 = mouseY - eye2.y; //"eye2" merupakan mata kanan
 var b2 = mouseX - eye2.x;
 var radians2 = Math.atan2(a2,b2);
 var degrees2 = radians2 / (Math.PI / 180);
 eye2.rotation = degrees2;
 

 //Script Untuk Cursor
 
 Mouse.hide(); //untuk menyembunyikan cursor asli
 kue.visible = true; //"kue" merupakan gambar yang mau dijadikan cursor
 kue.x = mouseX;
 kue.y = mouseY;
}

Selamat berkreasi dan jika ada pertanyaan seputar tutorial ini kalian bisa sampaikan di komentar dibawah ini.

Related Posts:

Tweet