Animated Cursor

membuat sebuah animasi gelembung pada kursor. Hampir sama pada tutorial mouse trail pada tutorial sebelumnya tapi dalam versi yang berbeda.

Step 1

Pertama buat sebuah flash document (.fla) kemudian beri background dengan warna biru.

Step 2

Buat lingkaran kecil dengan menggunakan oval tool dan letakkan agak di bawah pada stage seperti berikut. Gunakan warna biru muda untuk stroke color dan non aktifkan fill color, kemudian ubah stroke style menjadi hairline.

kido_xseven

Step 3

Seleksi objek lingkaran tersebut kemudian tekan F8 dan beri nama gelembung. Pilih sebagai movie clip lalu tekan ok.

kido_xseven

Step 4

Klik dua kali pada movie “gelembung” tadi. Setelah masuk pada movie clip, maka seleksi objek lingkaran yang ada pada stage kemudian tekan F8 lagi dan beri nama gelembung-inner lalu pilih movie clip.

kido_xseven

Step 5

Klik pada frame 12 kemudian tekan F6 (insert keyframe). Ubah posisi objek lingkaran tadi (movie clip gelembung-inner) agak ke atas di frame 12. Setelah itu klik kanan di antara frame 1 sampai 12 lalu pilih create motion tween. Pada frame 8 tekan F6, setelah itu pada frame 12 seleksi movie clipnya lalu pada panel properties di bawah ubah alpha menjadi 0%.

kido_xseven

Step 6

Buat sebuah layer baru. Kemudian tekan F6 pada frame 12 layer tersebut. Tekan F9 untuk memunculkan action panel lalu tuliskan stop (); dan lock semua layer.

Step 7

Kembali ke stage utama (scene 1) lalu hapus movie clip yang ada pada stage tersebut. Pada library, klik kanan pada movie clip “gelembung” lalu pilih linkage. Kemudian pada linkage properties yang muncul centang export for actionscript lalu tekan ok.

kido_xseven

Step 8

Klik pada frame 1 kemudian tekan F9 (actionscript). Ketikkan script di bawah ini.

var i:Number = 0;
this.createEmptyMovieClip(“canvas_mc”,50);
var myListener:Object = new Object();
Mouse.addListener(myListener);
myListener.onMouseMove = function(){
var t:MovieClip = canvas_mc.attachMovie(“gelembung”,”gelembung”+i,canvas_mc.getNextHighestDepth())
i++;
t._x = _xmouse;
t._y = _ymouse;
t._xscale = t._yscale = (Math.random()*80)+20;
}

Note : pada var i:Number = 0 berikan toggle breakpoint (klik kanan pada baris script tersebut lalu pilih toggle breakpoint.