|
Mouse Follow with Easing
by Shane Waldeck (aka lostinbeta)
Introduction
Easing is an important part of Actionscripted(AS) motion. It adds a realistic feel by speeding up and slowing down an object depending on its position to its final destination. This tutorial will teach you the basics of easing by moving an object to where the mouse is (aka mouse trailing/following). This is probably the simplest form of easing. You can download the partial .fla file
HERE, the partial .fla file does not contain any actions or key elements that make the effect work.
[ move mouse on movie above to see example ]
Steps to Create Animation
The following steps will help you to create the animation
you see above:
-
The first step is to create a new movie any size you would like.
-
The next step in creating this is by drawing a ball (for sake of simplicity) on the main stage.
-
Next up we want to make this ball a movie clip. Press F8 on your keyboard then choose "Movie Clip" from the list of radio buttons. Name this movie clip "ball" (naturally).
-
Ok, all we have to do now is add actions to the ball to make this puppy follow the mouse. Just remember this isn't your typical mouse follower, this uses easing to make it more realistic and flowing. To open the "Actions" window, right click on your movie clip and click on "Actions".
-
Apply these actions to your movie clip...
-
Now test your movie (CTRL+Enter) ... much more realistic than your typical follower don't you think?
-
You can download my final .fla file
HERE.
Explanation of Code:
The first thing to explain is of course what goes on in the onClipEvent(load).
What this does is moves your movie clip to the "x" and "y" coordinate of (0,0), this is the upper left hand corner. It also sets the speed of the effect to "5". To edit the speed, keep in mind that the higher the number, the slower the transition and the lower the number, the faster the transition.
The onClipEvent(enterFrame) is what makes the whole thing happen.
This sets the end target as the same (x, y) location as your mouse. Then it subtracts the current (x, y) location from the new one and divides it by the speed. Dividing it by the speed with slow down the time it takes to get to its destination. This will loop around and around until it finally reaches it's final
destination......your mouse.
-Shane Waldeck (aka lostinbeta)
-www.lostinbeta.com-
|
