Text tweening like the Flash movie below is based on shape tweening. Remember that in order to shape tween, you need shapes. Groups and symbols won't work. We had to break apart the mouse to tween it into a red circle and a wedge of swiss cheese. The same is true when we want to tween text to other text or text to shapes. You can motion tween text from one location on the stage to another. You can even change its size and rotation. For more interesting text tweening effects, we have to break apart the text.
1. With the playback head in frame 1 of layer 1, select the type tool and type the words "Great Flash text FX" onto the stage. Try entering a larger font size - about 30-60 depending on your font choice. You can bold or italicize if you like. Type your name.
2. Add a keyframe at frame 20.
3. In frame 20 use the type tool to select the text that you typed and replace it with: "by:{your name}". Leave out the quotes and the curly braces and put your name between the curly braces. In frame 1, the text says "Great Flash text Fx" and in frame 20 the text says "by: {Your Name}".
4. With the playback head in frame 1, select the text block. Go to the Modify Menu - Modify>Break Apart or Control + B. Break the text apart again for a total of 2 times or until it's completely broken apart and no longer has any blue lines around it.
5. With the playback head in frame 20, select the text block. Go to the Modify Menu - Modify>Break Apart or control + B. Break the text apart again for a total of 2 times or until it's completely broken apart and no longer has any blue lines around it.
6. Select any frame between 1 and 19 and open the Frame Properties Panel. In the Tween: drop-down menu, select Shape.
7. Play your movie.
You can center the shapes at frame 1 and frame 20 like this:
...or you can position them on different locations on the stage like this and incorporate motion tweening in addition to shape tweening. Notice that shape tweening tweens the actual colors of the shapes.
What if you want to tween text to a shape that's not another text? For instance, the word m-o-u-s-e to the 'image cheese'? Luckily, I have my old wedge of cheese from the other movie. It was not turned into a symbol because I created it for shape tweening but I could have made it a symbol and broken apart the instance of the symbol. That way, I could have saved it in a library to reuse. Instead I'll have to find the movie's .fla version and copy and paste the shape into this movie. Flash lets you have more than one movie open at a time. I'm in luck!
INTERACTIVE Flash DEMO
Here's what the movie looks like at frame 5 as the shapes on the left are 'morphing' into the cheeses on the right. My computer is working hard to process the commands for shape tweening.
When you look at the animation of a shape tween, there doesn't seem to be any apparent reason for one part of one shape morphing into another part of another shape, does there? Shape tweening has several features to help us have more control over our tweens. Review the Ease: and Blend: drop-down menus in the Frame Properties Panel. Later, we'll look at how shape hints provide more control over shape tweening. Let's look at the Frame Properties Panel first.
Ease:
Drag the slider button up to Ease Out from 1 to 100.
Ease out makes your tween start quickly and slow down at the end.
Drag the slider button down to Ease In from -1 to -100.
Ease in makes your tween begin slowly and speed up.
Blend:
Select Distributive for and Angular for .
In some shape tweens you may not be able to see any difference between these two blend options.
Distributive smoothes out the in-between shapes. Angular preserves sharp corners and straight lines of the tween.
We already used the Easing slider to ease out or ease in with motion tweening. Remember that easing in (the positive numbers) will start out slowly and accelerate towards the end of the tween. Easing out (the negative numbers) will start out faster and slow down towards the end of the tween. Notice that the circles leave and arrive at exactly the same time.
The Blend options for shape tweening are either Distributive or Angular. This refers to the sharpness of lines in your tween. Distributive gives more smooth lines while Angular gives corners and straight lines if there are any. If a shape doesn't have corners, Flash uses a distributive blend. Experiment using both to see the results.
Please continue to the next section of this lesson.
