| Shape tweening is useful for morphing shapes between endpoints. Flash can shape-tween only shapes , not groups, symbols, or editable text. If you want to tween a group , symbol, or editable text, you must first break it up completely (choose Modify > Break Apart until everything has been turned into a shape). You can shape-tween multiple shapes in a layer, but for the sake of organization, putting each shape in its own layer is easier. -
Choose Insert > New Symbol. In the Symbol Properties dialog box, set the Name to Shape Animation and the Behavior to Movie Clip, and click OK.  You are going to create another movie clip. This time the movie clip won't have anything in it at first. Any time you want to create a new, empty symbol, choose Insert > New Symbol. When you choose Insert > New Symbol, a dialog box appears. The dialog box is titled Create New Symbol, but we're going to call it the Symbol Properties dialog box. It's almost identical to the dialog box you used to create symbols earlier in this lesson and in Lesson 3. When you create a new symbol, initially you don't need to worry about the Registration since you will add all the content to the symbol after it has been created. The symbol is initially empty. TIP As you use Flash more, you might find it useful to use shortcut keys to perform commands found in the menu. The shortcut key for the New Symbol command is Ctrl+F8 (Windows) or Command+F8 (Macintosh). When you click OK, Flash switches to symbol-editing mode for the new Shape Animation movie clip. The movie clip is completely empty, and you're going to add some content to it. -
Name the default layer (Layer 1) Shapes. Use the rectangle tool to draw a 25-by-25pixel rectangle on the stage, and then use the Align panel to center the rectangle horizontally and vertically on the stage.  This new, empty symbol starts out with a single layer and a blank keyframe. Double-click the name of the symbol to edit it, and name it Shapes. It's time to get back to those drawing skills you used in Lesson 2. The rectangle can look however you want, as long as it's 25 pixels wide and 25 pixels high. The one in the figures and source files on the CD-ROM has no outline, and its fill color is #FF6600 (orange). Both the outline and fill color can be set in the Property inspector once the rectangle tool is selected. The rectangle also has a Corner Radius of 0, so its corners are nice and sharp. TIP If you hold down the Shift key as you draw the rectangle, Flash will constrain the shape to a perfect square. Once you've drawn the rectangle, use the arrow tool to select it. Then click the To Stage button in the Align panel. Finally, click the Align Horizontal Center and Align Vertical Center buttons to align the rectangle to the center of the stage. TIP You might find it easier to simply draw a rectangle, select it with the arrow tool, and then use the Property inspector to set its Width and Height to 25, and X and Y to 12.5. As with many things in Flash, there are a number of ways to achieve the same effect, using different commands and tools, so use the combination that is most effective for you. -
Insert a blank keyframe in frame 12. Select that frame, and use the oval tool to draw a 25-by-25 oval on the stage. Center the oval horizontally and vertically on the stage.  Be sure to insert a blank keyframe, not keyframe. You want a blank keyframe because you want to place an oval in this frame. Select frame 12, and choose Insert > Blank Keyframe or press F7. As with the rectangle, you can make the oval look however you want, as long as it's 25 pixels wide and 25 pixels high. The oval used in the figures and the source files that accompany this book has no outline and has a fill color of #FF6600. Once you've drawn the oval, you can use the Property inspector to set its Height and Width to 25 each. Then use the Align panel or Property inspector to place it in the center of the stage. TIP If you hold down the Shift key as you draw the oval, Flash will constrain it to a perfect circle. -
Insert another blank keyframe in frame 24, and use the drawing tools to draw a 25-by-25 triangle on the stage, centering it horizontally and vertically on the stage.  Once again, you need to make sure to add a blank keyframe so you don't duplicate the contents of the previous keyframe in frame 24. Select frame 24, and choose Insert > Blank Keyframe or press F7. Drawing a triangle might be a little more complicated than drawing an oval or rectangle. Flash does not have a triangle tool, but don't let that bother youit's still pretty easy to do. Just use the tools that are available to create a triangle like the one in the figure above. Let's take a quick look at a few methods . The triangle in the figures and source files was drawn using the pen tool. Select the pen tool from the toolbox, and set the Fill Color in the Property inspector to the color you'd like (#FF6600 in the source files). You can set the color to anythingyou're going to delete it from the stage, so the color doesn't matter, though it is much easier to draw the triangle if you make the stroke color very different from the fill color. Once you have selected a fill color and a stroke color, click about 15 pixels above the center of the stage. Hold down Shift and click again about 15 pixels below and to the left of the center. Still holding down the Shift key, click a third time about 15 pixels below and to the right of the stage's center. Then click once more on your starting point. Flash should close the shape, creating a triangle that has the fill color you selected. Now you can delete the outline of the triangle by switching to the arrow tool, double-clicking the stroke that creates the outline, and pressing the Delete or Backspace key.  TIP Holding down the Shift key as you draw straight lines with the pen tool will constrain those lines to 45-degree angles. Another way to draw the triangle is by using the line or pencil tool. Use one of these tools to draw the shape, and then use the paint bucket tool to add the fill color inside the shape. Finally, use the arrow tool to select and delete the outline. TIP If you use the pencil tool to draw a triangle, make sure that Pencil Mode, in the Options section of the toolbox, is set to Straighten. You may also find it useful to select the Recognize Lines drawing setting, in the Editing panel of the Preferences dialog box, to Tolerant. Then if you draw something that merely resembles a triangle, Flash will do a good job of turning it into a triangle. You can also use the rectangle tool, with a little help from the line tool, to draw a triangle. Select the rectangle tool, set the Fill Color to the color you want, and turn off the Stroke. Then draw a rectangle on the stage, holding down the Shift key as you draw to constrain it to a perfect square. Next , switch to the line tool, and draw a line that goes from the rectangle's top-left corner to the bottom-right corner. Select the top-right side of the rectangle, and press Delete or Backspace to remove it from the stage. Then select the stroke you added to create the remaining rectangle, and delete it as well. Finally, select the remaining rectangle, and use the free transform tool to rotate it so that it looks like the triangle in the figure at the start of this step. TIP If you only want to rotate an element using the free transform tool, you can click the Rotate and Skew button in the Options section of the toolbox. You can also constrain the rotation of a selected element to 45-degree angles by holding down the Shift key as you rotate the element. Once you've drawn the triangle, use the Property inspector to set its width and height to 25 pixels each. Then use the Align panel or Property inspector to center the triangle on the stage. -
Select frame 1. Hold down Alt (Windows) or Option (Macintosh) and drag frame 1 to frame 36.  This step can be a little tricky, so be careful. First click frame 1 and release the mouse button. Then hold down the Alt key (Windows) or Option key (Macintosh), and click and drag to frame 36. If you release the Alt or Option key, Flash doesn't copy the frame to the new location but moves it instead. That's not what you want. Alt-dragging (Windows) or Option-dragging (Macintosh) a keyframe is much like using the Copy Frames and Paste Frames commands. It's just a bit faster. -
Insert keyframes in frames 6, 18, and 30. Select each of the keyframes one at a time and set the tween to shape, and set the Tween to Shape in the Property inspector.  Select frames 6, 18, and 30, and press F6 to insert keyframes. Be sure to insert keyframes, not blank keyframes.  After you insert each keyframe, make sure you still have a keyframe selected, and choose Shape from the Tween drop-down menu in the Property inspector. Notice that two additional settings appear in the Property inspector. The Ease setting allows you to modify the rate of change between tweened frames. The rate can be set to any number between 100 and 100. Negative values simulate acceleration, and positive values simulate deceleration. By default, Ease is set to 0, so the rate of the animation will be constant. Blend, a third setting, can be set to either Distributive or Angular. Distributive smooths the more irregular intermediate shapes, while Angular preserves corners and straight lines in the intermediate shapes. You should only use Angular if the shapes you're tweening between have sharp corners and straight lines; otherwise Flash automatically reverts to Distributive. Feel free to play around with these settings to see how they modify the shape tween. NOTE Don't select the Motion option from the Tween drop-down menu. If you do accidentally select it, Flash turns the shape in the selected frame into a symbol, which you absolutely do not want. Remember, you can only shape tween shapes. After you set Tween to Shape, the frames between the selected frame and the next keyframe should be shaded green, and an arrow should appear between the keyframes. This indicates that you have added a shape tween. -
Choose Control > Loop Playback, and then choose Control > Play. Save the movie as zoo19.fla.  As the animation plays, you should see that Flash created intermediate shapes to tween from one shape to the next. Because you chose Control > Loop Playback, Flash will play the animation repeatedly. Pay special attention to the transition between the triangle and rectangle near the end of the animationright now it's a little chaotic , but you'll add some shape hints in the next exercise to make it look a little smoother. You can stop the animation by choosing Control > Stop, or by pressing the Enter (Windows) or Return (Macintosh) key. |
