Animasi Kumbang Mengikuti Mouse

Kali ini saya akan membuat sebuah objek yang bergerak seakan-akan mengikuti mouse. Yang ini beda sama yang mengganti kursor lho. Kalo bingung, langsung aja deh lanjut..

Seperti biasa, kita buat sebuah dokumen baru. Sekarang yang mengikuti kursor adalah kepik, atau kumbang, gambar yang bagus ya..

kumbang

Setelah kita gambar kumbang yang bagus, kemudian seleksi kumbang tersebut atau tekan Ctrl + A (Seleksi semua). Kemudian kita klik kanan pada kumbang tersebut dan pilih Convert To Symbol, lalu pilih MovieClip (Setting seperti di gambar ya ).

convert to symbol

Oke, sekarang Kumbang kita jadi sebuah MovieClip.

Terlebih dahulu kita klik kumbangnya dulu terus kita pergi ke panel properties (caranya tekan Ctrl + F3) dan ubah instance name-nya menjadi kumbang_mc.

properties kumbang

Sekarang kita beralih ke Actionscript nih, siap2 ya.. :lol: Buka Panel Actions dengan menekan F9 pada keyboard, jika yang muncul adalah Panel Actions MovieClip, berarti kita harus meng-klik Layer 1 frame 1 agar Panelnya menjadi Actions Frame.

actions - frame

Kemudian ketikkan script berikut :

01 02 03 04 05 06 07 08 09 10 _root.onEnterFrame=function(){ //mencari selisih dari koordinat var deltaX = _xmouse - kumbang_mc._x; var deltaY = _ymouse - kumbang_mc._y; //menggerakkan kumbang ke kursor sebesar 1/10 dari jarak ke kursor kumbang_mc._x += deltaX / 10; kumbang_mc._y += deltaY / 10; //kumbang menghadap ke mouse kumbang_mc._rotation = -Math.atan2(-deltaX,-deltaY)*180/Math.PI; }

Kita tes movienya :D

membuat MovieClip
Sebelum kita bermain-main dengan pembuatan game, alangkah baiknya kita mengenal cara membuat movieclip. Langsung aja deh ^_^

Seperti biasa, jika kita belum membuat dokumen, buat sebuah dokumen baru. Buat sebuah shape/gambar yang ingin dijadikan MovieClip, misal sebuah bulatan. Kemudian seleksi / blok gambar yang ingin dijadikan MovieClip, jika shape-nya banyak, maka kita seleksi dengan menekan tombol SHIFT. Jika ingin menseleksi beserta garisnya lakukan dobel klik pada shape tersebut.

sambil menekan shift, klik pada shape yang diinginkan

Setelah itu kita klik kanan pada shape yang dipilih. Kemudian pilih Convert To Symbol. Jika dengan cara cepat, cukup menekan F8.

klik kanan > convert to symbol

Jika sudah, kemudian pilih MovieClip jika ingin menggunakan sebagai MovieClip, jika ingin menggunakannya sebagai Button, maka kita memilih Button.

convert to symbol dialog

Untuk menampilkan agar lebih detail, Silakan klik Tombol Advance agar bisa menjadi seperti di atas. Jika kita mencentang Export for ActionScript, maka kita bisa memasukkan Identifier yang nantinya akan dikenali oleh ActionScript.

export for actionscript

Kirakira begitulah untuk dasarnya. ^_^

Kursor pada Flash

Mungkin kita sangat bosan dengan keberadaan kursor yang sekarang. Kita dapat mengganti kursor di flash dengan kursor buatan kita sendiri, dan tentunya lebih menarik. Cekidot.. ^_^

Buat sebuah dokumen baru tentunya Kali ini kita kasih warna backgroundnya jadi kuning biar menarik :whistle: caranya ke panel properties (tekan Ctrl + F3 pada keyboard) ganti warnanya.

warna background (klik untuk memperbesar)

Kita gambar bentuk mouse di stage dengan gambar sesuka kita, misal kursor dengan gambar bola nih :whistle:

gambar bola

Kemudian kita seleksi bola tadi, kemudian klik kanan bola tersebut dan pilih Convert to Symbol, maka akan tampil kotak Convert to Symbol. Nah, itu pilih seperti di gambar ini :

convert to symbol

Klik OK, maka bola akan menjadi suatu yang disebut MovieClip. Sekarang kita edit instance name menjadi bola_mc, instance name ada di panel properties (Ctrl+F3). Caranya yaitu pertama klik bola tadi, kemudian tekan Ctrl+F3 untuk menampilkan panel properties, kemudian ketik pada kotak instance name-nya menjadi bola_mc.

instance name

Selanjutnya klik pada frame 1 pada Layer 1, kemudian buka panel Actions dengan cara menekan F9, pastikan tulisan dari panel Actions adalah action frame. Apabila yang tampil adalah actions movieclip, berarti anda salah. :whistle:

panel actions frame

Sekarang kita beralih ke scripting alias actionscript :love: Ketikkan perintah berikut pada panel Actions :
1 _root.onMouseMove=function(){ 2 bola_mc._x = _xmouse; 3 bola_mc._y = _ymouse; 4 Mouse.hide(); 5}

Test movie dan lihat hasilnya

Penjelasan Actionscript : 1. Maksud dari _root.onMouseMove adalah event / kejadian ketika _root (stage) diklik. Nah, ketika itu _root memanggil sebuah function(). 2. Isi dari function tersebut adalah kode untuk mengambil posisi mouse baik posisi x (_xmouse) maupun posisi y (_ymouse). Satu koordinat tersebut dimasukkan ke dalam bola_mc. 3. Fungsi dari Mouse.hide() adalah menyembunyikan kursor asli saat kursor tersebut masuk ke movie flash. Download source : SINI