The previous tutorial in this Flash fundamentals series covered the differences between Shape Tweens and Motion Tweens in Flash animation, and presented two hands-on exercises to demonstrate how each type of Tween is used in a very basic sense.
Flash provides some aides to make Tweens more powerful than they are by default. The two animation aides that will be covered in this tutorial are Shape Hints and Easing.
Shape Hints apply only to Shape Tweens, while Easing applies to both Shape Tweens and Motion Tweens.
Shape Hints: Precise Control over Shape Morphing
The main, or most obvious anyway, purpose for the Shape Tween in Flash is to dynamically generate animations of objects morphing from one shape to another. Try not to think of this in simple terms, such as a circle turning into a square. Instead, think about this capability as it would apply to something you would really animate, such as a snowflake melting when it lands on the ground, or the focus of a spotlight bending around the contour of buildings and cars as it moves.
When we create an animation of an object changing shape, Flash generally does a good job of generating the Tween Frames on its own. Sometimes, however, we need more precise control over those Tween Frames to make the Shape Tween look more natural.
Flash provides an animation aide that gives us precisely the control we need - Shape Hints.
Exercise 1: Let's Make a F-L-A-S-H Animation
Terrible puns aside, this is a good exercise in which we're going to place the letter 'F' in the center of the Stage, and animate it morphing into an 'L', then 'A', 'S', and finally 'H'. By default, the results that Flash will produce automatically cause this animation to look like a huge mess. However, by applying some Shape Hints to the four Shape Tweens involved in this animation, we can make it look very slick.
To get started, open your Flash authoring tool and create a new, blank Flash document. Select the Text Tool from the Tools menu on the left.
In the Properties Inspector, choose an obnoxiously thick font, such as Impact, and slide the size all the way up to 96. Also make sure that the Text Field type is set to Static Text.
Now head up to the Timeline, and create new Blank Keyframes on frames 10, 20, 30, and 40 by clicking on each frame and hitting F7. These will be the Keyframes that house the transition points in this animation.
To begin placing the letters, select Keyframe 1. Now click anywhere on the Stage with the Text Tool, and type the letter 'F'.
At this point, you're seeing the light blue outline surrounding the letter. As you'll recall from the "Shape Tweens vs. Motion Tweens: How to Use Them Both," tutorial, this blue box is indicative of a Grouped Object or Symbol Instance. We'll convert these letters into raw shape data in a later step. For now, we just need to place them in the center of the Stage on their respective Keyframes.
To center this letter on the Stage, open the Align Panel. Ensure that the To Stage button is pressed, and then use the Align Horizontal Center and Align Vertical Center buttons to center this letter on the Stage.
Repeat this process for the remaining letters. Place the 'L' on Keyframe 10, the 'A' on Keyframe 20, the 'S' on Keyframe 30, and the 'H' on Keyframe 40. Remember to center every letter on the Stage as you place them on the Keyframes. At this point, the Keyframes are no longer blank, so the Timeline is shaded in gray to indicate that it is "filled in."
Before we can apply Shape Tweens to Text objects, we need to convert them from Grouped Objects to raw Shape Data. The way to do this is with a menu command called Break Apart. Click on Keyframe 1, and then click on the letter on the Stage to select it. With the Text Object selected, select Modify > Break Apart from the top menu.
After you press Break Apart, the blue outline around the Text Object will disappear, and the letter will be highlighted as raw Shape Data on the Stage.
Repeat the Modify > Break Apart process for the remaining four letters, and then click on frame 1 of the Timeline so that you're looking at the 'F' again.
Now it's time to activate the Shape Tweens. Just like in the previous tutorial where we introduced Shape Tweens, select one Tween Frame between each pair of Keyframes and set the Tween type to Shape in the Properties Inspector.
When that is complete, the Timeline will display four sections that are shaded in pale green and accented with arrows. These four sections of the Timeline are the visual representations of the four Shape Tweens that you just created.
At this point, you can click on frame 1 of the Timeline and press Enter or select Control > Play to preview the animation. The animation that Flash produces by default gets the job done in a mathematical sense, but it is not very smooth or fluid, and the chaotic nature of the Shape Tweens makes it difficult to even tell what is happening other than the 'F' at the beginning and the 'H' at the end.
At this point, the setup for this animation is complete. Now it is time to start using Shape Hints to improve the Shape Tweens in this animation and give it a more natural flow from letter to letter.
Click on frame 1 of the Timeline, and click on the 'F' to select it. With the 'F' selected, choose Modify > Shape > Add Shape Hint from the top menu.
When you press Add Shape Hint, a small red icon with an 'a' in the center will appear in the middle of the 'F' shape on the Stage. Drag that small icon to the top-left corner of the 'F', where it will snap in place. Now click on Keyframe 10 of the Timeline, and you will see that same small icon on the 'L' shape.
Drag that icon to the top-left corner of the 'L', where it will snap in place and turn green. When the Shape Hint icon is green, that means that Flash has successfully related the coordinate on the first Keyframe with the coordinate on the second Keyframe, and the Shape Hint will function.
While you're still on Keyframe 10 looking at the 'L', choose Modify > Shape > Add Shape Hint again. Now you will see another small Shape Hint icon, which also has a small 'a' on it. This Shape Hint will relate a point on the 'L' shape to a point on the 'A' shape on Keyframe 20.
Drag this Shape Hint icon to the bottom-left corner of the 'L' shape. Then click on Keyframe 20 so that you're looking at the 'A' shape. Drag the Shape Hint icon on this frame to the bottom left corner of the 'A' shape. When that is complete, the icon turns green, indicating that the bottom-left corner of the 'L' on Keyframe 10 has successfully been related to the bottom-left corner of the 'A' shape on Keyframe 20.
NOTE: When two Shape Hints have successfully been related to each other, the hint icon on the first Keyframe in the sequence will turn yellow, which indicates that it has a matching counterpoint on the next Keyframe in the Timeline.
If you'd like to get a feel for how these Shape Hints are improving this animation, grab the Playhead on top of the Timeline and scrub it back and forth from Keyframe 1 to Keyframe 20.
As you do that, you'll be able to see how the Shape Hints tell Flash to take a specific corner or curve point on one Keyframe, and move it directly to a given corner or curve point on the next Keyframe. When you're done, click on Keyframe 20 to continue.
On Keyframe 20, choose Modify > Shape > Add Shape Hint to create another hint. Just like what happened on Keyframe 10, this new Shape Hint will also have an 'a' in its icon. Drag this hint icon to the top-right corner of the 'A' shape.
Click on Keyframe 30 so that you're looking at the 'S', and move this icon to the top-right "corner" of the upper-right curve of the 'S' shape.
Now click on Keyframe 20 so that you're looking at the 'A' again. Choose Modify > Shape > Add Shape Hint again. The icon for this new Shape Hint will have a 'b' in its icon. Drag this icon to the bottom-right corner of the 'A' shape.
OK, now back to Keyframe 30. On this Keyframe, drag the little 'b' icon to the bottom-right "corner" of the lower-right curve of the 'S' shape. Please use the below screenshot as a reference.
So far so good. Now there is only one Shape Tween left. The 'S' shape on Keyframe 30 already has two Shape Hints on it, but there is still plenty of shape data to use for more hints.
This tutorial has been very step-by-step thus far, so now it's time for a change of pace. A great way to learn a niche skill like this is to cut loose and work with it freely for a few minutes.
For this last Shape Tween, I want you to apply the skills you've learned so far in this tutorial and add five Shape Hints to the 'S' shape on Keyframe 30 and the 'H' shape on Keyframe 40, using the below screenshot as a reference:
Just take your time and keep these two points in mind: 1) Shape Hints will snap in place on a corner or curve point; 2) the hint isn't set until the icon on the second Keyframe in the sequence turns green.
When that is complete, be sure to save your work and then choose Control > Test Movie or press CTRL + Enter to take a look at your newer, better F-L-A-S-H animation.
That is a significant improvement over the animation that Flash automatically generated without any Shape Hints. This animation is rather simplistic, but it covers the process of using Shape Hints rather well. You can use many, many hints to create very fluid transitions between shapes that are completely dissimilar.
It is really a matter of your creativity and your eye for good placement of the Shape Hints. Another great exercise for using Shape Hints is to use them to simulate plant growth, starting from a long Oval. If you can make that look good, then you've definitely got the... (I can't resist) hint.
Part Two: Easing
The other topic we'll cover in this tutorial is the Flash animation aide called Easing. What Easing does is control the rate of acceleration or deceleration of a Tween. There are two "directions" that Easing can go: Ease In or Ease Out.
With Ease In, the Tween will start out slow and accelerate toward the end. With Ease Out, the Tween will start out fast and decelerate toward the end.
See below for a quick demonstration of Ease Out vs. Ease In.
The example movie above is actually a neat little optical illusion. Both of the ovals reach the right side of the Stage at the exact same time, even though it looks like the Ease Out oval gets there first. The only way to be able to see that they stop moving at the exact same time is to focus on the area of white immediately to the right of where the Ease Out oval stops, and let your eyes go out of focus. Then click the Play button over and over until you can see it.
OK, now stop clicking Play. I know it's fun, but we have a little more work to do here.
Exercise 2: The Easing Slider
In your Flash authoring tool, create a new, blank Flash document. Select one of the Drawing Tools from the Tools Menu; it would be best to go with Oval or Rectangle so that you can draw a filled shape to work with.
Draw a shape in the bottom-left corner of the Stage. Then create a new Keyframe about 25-30 frames later in the Timeline. On that new Keyframe, move the shape you drew to the top-right corner of the Stage.
Since you drew this Shape directly on the Stage, it is raw Shape Data, so the type of Tween we're going to activate is a Shape Tween. A key note to remember is that Easing works exactly the same way for Motion Tweens as it does for Shape Tweens.
By now, you know the drill with creating new Keyframes and differentiating those from the Tween Frames. Now go ahead and activate a Shape Tween for this span of the Timeline. I just went with a 30-frame-long animation for the example here.
While you still have a Tween Frame selected, take another look at the Properties Inspector. The Ease drop-down box is directly below the Tween drop-down box. Drag the slider up for Ease Out, and drag it down for Ease In.
This tutorial is over and done with at this point. Easing really is that easy. (I'm sorry, I had to.) The Ease slider goes from 1 to 100 in both directions, which provides plenty of flexibility to control the degree of easing.
In Flash 8 Professional, you can create custom Easing curves by using a new tool called the Custom Ease In / Ease Out Dialog Box. That feature is not available in any previous version of Flash, and I certainly wouldn't label it as fundamental knowledge, so it's a topic that will be addressed in a different tutorial at a later time.
discuss this topic to forum
