First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Rudestar

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 (){
   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 (){
   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. =)


» Level Intermediate

Added: 2003-06-20
Rating: 7.94 Votes: 116
(10 being the highest)
» Author
Learning, learning always learning!
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!


  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.