First time here? First time here? Newsletter Signup Newsletter
651326 Members and growing! | Flash Jobs
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 (){
 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*

» 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!

Comments

  • 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: doc_chin7
» Description:

The flash's horizontal road drive was done in CS4 and was upgraded to CS6. The car responds to right/ left key and flash will auto-generate the movement of roads from left-right or right-left based on random number. Have fun driving in this virtual environment and avoid other cars... :) If you are creative, a road driving game can be created from it.

Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
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: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.