|
Easing on Mouse Click
by Shane Waldeck (aka lostinbeta)
Introduction
This is the second edition of tutorials on easing, if you missed the first one, it can be found
HERE. This tutorial will teach you the basics of easing by moving an object to where the mouse was clicked on the stage. Other than being an important part of AS motion, it just looks cool. 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.
[ click on the 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 example above is 300x200.
-
The next step in creating this is by drawing a ball (for sake of simplicity) on the main stage and then turning it into a movie clip.
-
To turn the ball into a movie clip press F8 on your keyboard then choose "Movie Clip" from the list of radio buttons. Name this movie clip "ball" (naturally...or you can name it whatever you would like).
-
Well, that was pretty easy right? Now all we need to do is apply actions to this movie clip. Right click on the movie clip and choose "Actions". This will of course open up the "Actions" window.
-
Apply these actions to your movie clip...
-
Now test your movie (CTRL+Enter), pretty cool eh?
-
You can download my final .fla file
HERE.
Explanation of Code:
The first thing to explain is of course the onClipEvent(load) functions, so here goes nothing.
What this does is movies 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". You can of course change the speed, the lower the number, the faster the effect.
The next thing to find out what this onClipEvent(mouseDown) code is for.
This creates an end location for your clip. When you click on the stage of your movie it will basically mark that spot for the clip to go to.
The last thing is the onClipEvent(enterFrame).
This is a loop that takes the current (x,y) coordinates and subtracts them from the endX and endY variables (the ones your mouse creates when you click on the stage). This value gets lower and lower and is repeatedly divided by the speed. This creates a faster movement as it is farther away from the target, and a slower movement when it is closer to the target.
-Shane Waldeck (aka lostinbeta)
-www.lostinbeta.com-
|
