Create animation that follow the mouse cursor .

[You must be registered and logged in to see this image.]


In this tutorial i will show you how to make an animated object and make it follow the mouse cursor .
You might need to make this for your website intro while it's loading for example .
There's what i am talking about . Click Here




This was done using Flash Actionscript . I like to use Toon boom to animate , so what i did i made this simple animate in it and export it as *swf . if you are comfortable with flash you can make your animation there and start the Actionscript from there .

Let's get start :

As i said if you are working in toon boom go and export your animation as *swf .

[You must be registered and logged in to see this image.]

Then in flash go to File>Import>Import to Library ,Browse to the swf file you exported from toon boom

[You must be registered and logged in to see this image.]

Then drag the file to your scene . from the library , if you can't see the library use the keyboard short-cut F11

[You must be registered and logged in to see this image.]

Select the whole thing in the scene and hit the F8 button to converter it into a symbol . Make sure it's a Movie clip type

[You must be registered and logged in to see this image.]

With the selection tool (keyboard shot-cut V) click on the animated object and hit the F9 key on your keyboard , this will bring the Actions window
Paste this code :

onClipEvent (load) {
_x = 0;
_y = 0;
speed = 5;
}
onClipEvent (enterFrame) {
endX = _root._xmouse;
endY = _root._ymouse;
_x += (endX-_x)/speed;
_y += (endY-_y)/speed;
}

To change the speed of the object following the curser change the 4th line's number of 5 , to make it faster put a small number like 2 or three , slower put a big number like 10 or 15 .

This code will make the animated bee follow the mouse cursor .

[You must be registered and logged in to see this image.]

To test the movie and see if it's is working Go to control>test movie . or CTL+ENTER .

No to make the bee flip horizontal direction of moving mouse we need another code :

Go to the timeline and select the first frame . and open the Actions window (F9).

Paste this code :
checkX = function (dx, oldVal, newVal) {
if (oldVal < newVal) {
trace("moving right");
bee._xscale = 100; // this line changed
} else if (oldVal > newVal) {
trace("moving left");
bee._xscale = -100; // this line changed
}
return newVal;
};
this.watch("xdir", checkX);
this.watch("ydir", checkY);
this.onMouseMove = function() {
xdir = _xmouse;
ydir = _ymouse;
};


If you test the movie now you'll notice that the bee does not filp yet . this is because flash does not know it's there yet . that's why we need to give it an instance name , the Instance name i gave it is "bee"
To do so ,click on the animated object on your scene and go to the properties window . (CTL+F3).

[You must be registered and logged in to see this image.]

Give it he instance name "bee" as explained in the picture .

If you give it a different name then you have to put the same name in the code
[You must be registered and logged in to see this image.]


Hope this will be helpful .

Thanks

very good tutorials!thanks!

You're welcome loong

Where do i get ToonBoom or di have to buy it or something?

Power_Mikey wrote:Where do i get ToonBoom or di have to buy it or something?

unfortunately Toon boom isn't a free application , Unless you want illegal .
It just illegal software aren't allowed here .
if you want only to learn the program , there is a free version they give for free in their website , but you export with a watermark .
It's for learning purposes only .
I hope this helped .