Singapore Web DesignerOrganic mouse-controlled movement in Actionscript » AEN—Designer & Consultant

In my previous post I mentioned that my plan for the redesign of the AEN website will include a more organic interface which reacts to mouse interactions better. I did an early experimental concept of how the classic easing mouse-following movieclip can be made more organic.

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 does 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 the mouse movement is measured in pixels per second.

It is really 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 before. With the 2 posiitons I can get distance and then speed. The resting speed is then used for the easing speed of the ball.

I need to get some sleep now!