|
|
|
|
|
|
Bouncing Ball |
|
|
|
Written by Rawpulse
|
|
Friday, 07 April 2006 |
|
Learn how to create a bouncing ball with easing!
Today we're going to make a simple bouncing ball using tweening and easing. It's a great beginner effect which can be completed in moments. For this tutorial you should have your frame rate set to 25. To change it, go to the Properties menu and change the Frame Rate number from the default 12. To view an example of what we will be making, click here.
Start off by selecting the Oval Tool. Draw a circle on the stage, near the top, in the middle. You can keep the circle perfectly round by holding shift while you drag the mouse. Once you are happy with the size and color of your ball, hopefully it will look something like this.
If you want, rename the layer from Layer 1, to "Ball". It's not paticularly important because we only need one layer, but nevertheless, it's good practice. Now go back to your ball, and select it with the selection tool. Make sure you select the stroke around the edge of it, if you have one. Once you have it selected, right click and select "Convert to Symbol..." or press the hotkey F8. Make sure you have movie clip selected, and name the movie clip "ball_mc" (mc meaning movie clip).
The next thing to do is plan where we want the keyframes. We already have one on frame 1, but we need a keyframe where the ball will be at the bottom, and another for when it bounces back up to the top. So add two new keyframes, to frames 15 and 30.
Now click on keyframe 15. The ball should be selected, but if not, use the selection tool to select it. Then press the down key on your keyboard. If you hold shift while pressing an arrow key, it will move the object faster. At frame 15, your stage should look like this.
If you go to keyframe 30, you will notice that the ball is still at the top, which is what we want. Right click on a frame between 1 and 15 (the first and second keyframes), and select "Create Motion Tween"
Once you do this you will see the frames turn blue, and an arrow passes through them. This indicated a motion tween. Do the same between the second and third keyframe. If you test your movie at this stage, the ball will move up and down. However, it doesn't look very realistic, so we will add easing.
We need to add the easing twice, one for the first tween, and one for the second. Click on your first motion tween (where the frames are blue between keyframes 1 and 15). Your Properties menu should change. You should see an Ease box. The value will be set to 0 as default. The blue arrow to the right opens a sliding bar. If you slide it down, the frames will ease in (which means they will begin slow, and finish faster). If you slide it up, the frames will ease out, which does the opposite. We need to ease it in, so slide it downwards all the way to -100.
Now do the same for the motion tween in between keyframes 15 and 30, except this time, make the tween ease out. Do this by sliding it upwards all the way to 100. Congratulations, you're finished. Test your movie by pressing Control + Enter. If you enjoyed this tutorial, or had a problem with it, tell us about it on the KnowFlash forum.
|
|
