Physics Inertia Mouse Trailer Effect - Page 2

What I call a standard easing out, is a cyclic algorithm that works in the following way:

1) Calculate the distance between the object and its destination
2) Move the object a fixed percentage of the distance closer to the object

If you desk step this algorithm you will find the object moves quickly at first but then as the distance becomes smaller so does the movement. The result of this is therefore to ease out.

This can be accomplished in code as:

percentage = 0.2;
distanceX = (destinationX - _x);
distanceY = (destinationY - _y);
_x += distanceX * percentage;
_y += distanceY * percentage;

To see this in action start a new flash movie, draw some kind of shape and turn it into a movie clip. Call the instance of this clip myTrailer_mc.

Create an actions layer and type the following code in to frame 1 of the main timeline:

myTrailer_mc.onEnterFrame = function (){
 with(this){
   distX = (_root._xmouse - _x);
   distY = (_root._ymouse - _y);
   _x += distX*0.2;
   _y += distY*0.2;
 }
}

Here we are assuming our destination is the mouse pointer but it could in theory be any point on the movie screen. We are also assuming that our percentage remains fixed at 20%. Run the movie. You should see the object appear to constantly ease closer to the mouse pointer as you move the mouse.

Many of you will have seen this in other tutes before. The thing we now need to do is to implement some inertia. Now I’m no physics guru but I thought I’d just talk a little about what the word inertia means. For those of you who aren’t sure, inertia is the force that attempts to continue an objects motion once it’s motion changes. If I impede a moving object’s motion the object will attempt to continue moving past the impedance due to inertia. (PS if anyone has the correct scientific definition of inertia, please email me and I will try to edit this!) Now if you have a think about how inertia is manifested you will notice that the way the object is travelling has an effect on how much follow through is present once it has been impeded. Therefore we must add a force in the current direction of motion related to the velocity of motion present during past or more specifically during the last cycle. Thus by simply adding a percentage of the distance travelled during the last frame we develop our final simple but very effective inertial motion algorithm:

myTrailer_mc.onEnterFrame = function (){
  with(this){
   distX = (_root._xmouse - _x) + distX*0.8;
   distY = (_root._ymouse - _y) + distY*0.8;
   _x += distX*0.2;
   _y += distY*0.2;
 }
}

The result is the springy ball thing in the above swf

So there you have it! If you like this tutorial, please rate it. If I get enough encouragement I may be able to find the time do more tutes. =)

Rudest*