Tweening is used in animation when you know what the first frame should look like, when you know what the last frame should look like, but you don't want to manually draw all the frames in the middle. Tweening will draw what it believes to be the frames be-"tween"the first and last keyframe. There are two types of tweening: Shape Tweening and Motion Tweening. We will be going over only Shape Tweening in this chapter, but the next chapter covers Motion Tweening.
As you learned from the last chapter, you can also draw raw shapes as Drawing Objects. This will not affect the shape tween, and in some cases may assist in creating it.
Your First Tween
Although the waving hand would be a good example to show the benefits of tweening, we will use a simpler animation so that we can go over all the tweening options.
In this example, we will move a circle from one side of the stage to the other. It is an easy task for frame-by-frame animation, but even easier using a tween:
Create a new Flash movie by going to File, New and select Flash Document. Save the file as moveCircle.fla.
Rename Layer 1 circle.
In the first frame of circle, draw a small circle on the left side of the stage about 75x75 pixels with a black fill color, as shown in Figure 4.9.
Figure 4.9. Shape tweens can be used to speed up the process of animating.
Select frame 20 of circle and choose Insert, Timeline, Keyframe (PCF6).
In frame 20, move the circle to the right side of the stage.
Now select frame 1 again, and in the Properties Inspector under the tween drop-down, choose Shape. (Your Properties Inspector should now look similar to Figure 4.10). Also notice that the frames between 1 and 20 are now green and have an arrow pointing to frame 20. This means that the tween was successful. If the tween had not been successful, you would have seen a dashed line there instead.
Figure 4.10. The Properties Inspector for a Shape tween.
You can now test the movie (Control, Test Movie, or Ctrl+Enter), and you will see the circle move from left to right over and over. The next step is to make the circle slow down as it reaches its destination point using easing.
Close the test movie screen and select frame 1 again.
In the Properties Inspector, set the Ease field to 100.
Easing set at positive numbers is easing out (at the end of the tween). Easing set to negative numbers is easing in (at the beginning of the tween).
Test the movie again, and this time you will see that as the circle moves from the left of the screen to the right of the screen, it begins to slow down. This is another great example of why sometimes tweening is better than frame-by-frame animation, because changes can be made quickly.
But shape tweens can do a lot more than simply move a shape around on the stage; it can also morph the shape into another shape, as you will see in the next few steps:
Close the test movie screen again, and select frame 20.
Delete the circle in this keyframe. The tween will go from an arrow to a dashed line, like Figure 4.11, because the tween is no longer valid.
Figure 4.11. A dashed line in a tween means that the tween will not work.
Approximately where the circle was, draw a square with 100x100 pixels with a fill color of red. At that point, the tween should be valid again, and the arrow will have reappeared.
Test the movie one more time, and this time you will see that shape tweens not only can change position of a shape, but the shape itself as well as color.
Although you can change the fill color, and the tween will fade to it, gradients don't work as well. You cannot fade to a gradient, however, if the shape in the last keyframe has a gradient fill; the tween will move through the gradient itself. For instance, if you have a radial gradient set, the shape will move into it, and the gradient itself never moves.
That tween was not too difficult, but sometimes, when changing shapes in the tween, it does not act exactly as you would expect. In come shape hints.
Shape hints are how you override Flash's tweening algorithms for better control. When you add shape hints (as you will in the next example), a small circle with a letter in it is created in the first frame of the tween. You place it at any point on the shape you like. Then in the final frame of the tween, there will be another circle with the same letter that you place where you want that point to end up.
Shape hints are easier to understand when you use them, so in this example you will create a morphing shape tween that inherently will not do exactly what you want, until you add shape hints.
Create a new Flash document and save it as shapeHint1.fla.
Rename Layer 1 as xMorph.
In the first frame of xMorph, select the text tool and create an uppercase "X" on the stage.
Now you want to convert the letter to a shape by using the Arrow tool to first select this X; then choose Modify, Break Apart (Ctrl+B).
Now that the X is a shape on the stage, select it with the Free Transform tool and stretch it to about 100x100 pixels so that it looks like Figure 4.12.
Figure 4.12. Create an X on the stage; then break it apart and size it to 100x100.
Select frame 20 and insert a blank keyframe by going to Insert, Timeline, Blank Keyframe (Ctrl+F7).
Draw a rectangle on the stage about 100x100 in frame 20.
Select frame 1 again, and in the Properties Inspector, set the tween to Shape.
Now you can test the movie here and see that as the X morphs into the square, it rotates. In general, that might not be bad, but for this example, we do not want it to rotate.
After closing the test movie screen, select frame 1 again and choose Modify, Shape, Add Shape Hint (Ctrl+Shift+H), and a little red circle with the letter "a" will appear on the stage.
Add three more shape hints.
Place the letter "a" shape hint on the inner side of the top-left part of the X.
The "b" goes on the bottom left, the "c" on the top right, and the "d" on the bottom right. Just make sure they are on the inside shape corner, as shown in Figure 4.13.
Figure 4.13. Place the shape hints on the inside corners of the X.
Now select frame 20 and you will see yellow versions of the same circles. (They will probably be stacked on top of one another, with "d" being on top.)
Put the associated letters in the corners matching the X, as in Figure 4.14.
Figure 4.14. Place the shape hints in their associated corners to match the X.
Test the movie again, and you will see that this time, as the morph progresses, it does not rotate.
So you can see how to use shape hints to better control your tween, but there is still no substitute for control that is stronger than frame-by-frame.
If you want to quickly make an animation, but still use frame-by-frame, create a normal tween animation, then highlight all the frames in the tween and select Insert, Timeline, Keyframe, and they will all be converted to keyframes. Just remember to turn each frames tween option back to None.