Saturday, November 17, 2012

Membuat Animasi Kumbang Mengikuti Mouse

Membuat 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
    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 :wink: ).
    convert to symbol
    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
    properties kumbang
  • Sekarang kita beralih ke Actionscript nih, siap2 ya.. :lol:
  • Buka Panel Actions dengan menekan F9 pada keyboard, jika yang muncul adalah PanelActions â€" MovieClip, berarti kita harus meng-klik Layer 1 frame 1 agar Panelnya menjadi Actions â€" Frame.
    actions - frame
    actions - frame
  • Kemudian ketikkan script berikut :
    01_root.onEnterFrame=function(){
    02//mencari selisih dari koordinat
    03var deltaX = _xmouse - kumbang_mc._x;
    04var deltaY = _ymouse - kumbang_mc._y;
    05//menggerakkan kumbang ke kursor sebesar 1/10 dari jarak ke kursor
    06kumbang_mc._x += deltaX / 10;
    07kumbang_mc._y += deltaY / 10;
    08//kumbang menghadap ke mouse
    09kumbang_mc._rotation = -Math.atan2(-deltaX,-deltaY)*180/Math.PI;
    10}

No comments:

Post a Comment