Doar Tutoriale

Moving towards the mouse

A few words: Well, as a bit of background, I saw a Flash ad on the net a while ago, which had an object that not only changed its rotation according to the mouse angle, but actually followed the mouse around the screen. Which got me wondering how they did it. It's actually not as hard as you might think. All it took me was about an hour of trial and error to get it working.

1. The first step you need to do is to create a simple movie clip which has an identifying mark so you can tell its rotation. I made a circle with another circle inside it, sort of like an eyeball (like this one bellow). Place it somewhere on the stage, just occupying the first frame of the timeline.

2. The second thing is that on this clip, you put the following code on the movie clip:

onClipEvent (enterFrame){
myRadians = Math . atan2 ( _root . _ymouse - this . _y , _root . _xmouse - this . _x ); myDegrees = Math . round ((myRadians*180/ Math . PI ));
_root .yChange = Math . round ( _root . _ymouse - this . _y );
_root .xChange = Math . round ( _root . _xmouse - this . _x );
_root .yMove = Math . round ( _root .yChange/20);
_root .xMove = Math . round ( _root .xChange/20);
this . _y += _root .yMove; this . _x += _root .xMove;
this . _rotation = myDegrees+90; }

3. I'll explain what this code means, because without understanding it you're really not much better off.

- The first line gets the distance between the movie clip on the stage and the mouse position, both x and y, and then calculates the angle of the imaginary line between the movie clip registration point and the mouse position (this detail's in other tutorials on here as well, so check on them if you're not sure about this) This will be useful in making the movie clip rotate.

- The problem with this first line is that it converts the angle into radians, an alternative form of angle measurement to degrees. We need to convert it into degrees if we're going to be able to make the movie clip rotate. That's what the second line of code does.

- The next part measures the distance between a) the movie clip registration point and the x position of the mouse, and b) the movie clip registration point and the y position of the mouse, telling us how far away the mouse is from the movie clip.

- The next 2 lines take those distances we just worked out, and turn them into fractions of their former selves, because we don't want the movie clip moving quite so fast. We only want it to move about 5 pixels per second as a maximum. Dividing it by 20 is a fair speed, although you can mess with this if you like.

- The last lines just add the movement speed variables onto the movie clip's position, so it moves. Otherwise it doesn't move. It also adds the myDegrees rotation variable we spent precious keystrokes gathering and makes the movie clip rotate to match the position of the mouse. Enjoy! If anyone has any expansions or ideas for this feel free to email me – hithere54@hotmail.com


The full clip

Download the .fla file

Download the .swf file