|
|
|
|
|
|
Bouncing Text |
|
|
|
Written by Rawpulse
|
|
Friday, 03 March 2006 |
|
Learn how to create a cool bouncing text effect
We're going to look at a very nice looking text effect. We'll be using a black font on a white background, nothing too fancy. The text will bounce up and down once we have finished. Like the effect? Let's make it. For this tutorial I assume you have some knowledge of Flash; the basics about keyframes, layers and such.
Example
Start off by preparing your movie. Set the frame rate to 35. Type your text on the stage using the text tool. Now break it apart by pressing Control + B. Now each of the letters will be seperate, so you can edit them individually. Now, you need to put each letter on its own layer, by right clicking with every letter selected, and clicking distribute to layers.
You now need to convert each letter into a movie clip. Do this by selecting your letter and pressing F8. Make sure movie clip is selected.
Once you have done that you can delete layer 1, as we no longer need it. Now is the time consuming part. I will show you how to animate three layers, then simply continue the pattern with all your letters. Go to your top layer, which will be your first letter. There will be a keyframe on frame 1. Leave it there, and insert a second keyframe on frame 5. The animation will begin at frame 5, but we still want the letter visible before. Add four more keyframes on frames 10, 15, 20 and 25. Frame 5 is the letter in its original position, frame 10 will be the letter raised upwards. Frame 15 will be the letter in the normal position again. Then frame 20 will have your letter moved downwards, and finally frame 25 will have the letter in the original place once more. Sounds a little complicated? It's really not.
So, go to frame 10, the first frame in which your letter needs moving. Select the letter, and hold the shift button. Then tap the up button on your keyboard twice. Holding shift makes it move it greater increments. It's also easier to move the other letters to the same place later on, if you hold shift. Now go to frame 20. Use the same method to move the letter again, only press down twice, while holding shift. Now, create four motion tweens between frames 5-10, 10-15, 25-20, 20-25. At this stage your first layer should look like this.
If you test your movie, you will see your first letter appear as though it bounces. The effect doesn't look as good with only one letter. So lets move on to layer 2 - your second letter. Remember to leave the keyframe on frame 1 alone, we don't need to change it ever. This time, begin your animation at frame 10, so you have a keyframe on frames 10, 15, 20, 25 and 30. Now move your letter upwards on your third keyframe (frame 15) and move it down on frame 25. Add your motion tweens again in between the keyframes. Now your timeline should look like this.
Now, do the same with layer 3, except start a further five frames ahead. The reason we distort the timing is to make the effect look better. Otherwise each letter would move up and down at the same time, and it wouldn't be as much of a bouncing effect. After you have arranged your letter on layer 3 and added the motion tween, it should look like this.
Hopefully by now you can see the pattern, and can continue doing the same with all your layers. Eventually your timeline should look like this.
Now, once you have done this for every letter on every layer, test your movie. You will notice that once the letter has completes its bounce, it will disappear. This is because we have no frames inserted after the bounce cycle. Go to your bottom layer, and find the last frame where the keyframe is. Now, go to the next frame which will be empty, click on it and drag upwards.
Press F5 to fill the empty spaces with frames.
Now if you test your movie you will see the letters bounce over and over in a really cool way. There are many ways that you can experiment with this method, so don't be afraid to try wacky ideas. If you tried to follow this tutorial and got stuck, tell us about it on the forum and we'll help you out.
|
|
Tutorials 