AEN UI

I am porting this article and its 2nd part over from my old blog of an early experimental concept of how the classic easing+mouse-following movieclip can be made more organic (code is in AS2).

What’s a mouse-following movieclip? You can find examples of mouse-following movieclips at the Haze website I did and this Kirupa tutorial. Below is an example I did.

Wouldn’t it be better if the motion of the ball be controllable by the speed of the mouse movement? If you move the mouse faster, the ball catches up faster and vice versa. Have a look at the second example which accomplish just that.

You can feel that the movement of the ball has more character now, even though the movement isn’t exactly polished. The speed of mouse movement is measured in pixels per second.

It really is simple. All I had to do is continuously check the position of the mouse position every e.g. 100 milliseconds and get the position of the mouse now and 100ms prior. With the 2 positions I can get distance and then speed. The resulting speed is then used for the easing speed of the ball.

Next I’ll add another factor—mouse angle. Usually mouse angle is calculated with the current mouse position and an “origin”. In this demonstration, both the mouse position and origin are dynamic but are easily checked with the same update functions that check mouse speed. The end point would be the current and origin would be 50ms ago (configurable tracking speed). With basic trigonometry we get radians which are then converted into angles.

By varying mouse speed and detecting mouse angle, you get interaction that is more organic and natural. If you have used my code in a project, please let me know by posting a comment!