- Timelines and Frames
- Movement Tweening
- Shape Tweening
- Fading
- Recap
- Advanced Projects
This chapter is from the book
This chapter is from the book
This chapter is from the book
Shape Tweening
Shape tweening animation is used when you need to change or morph one shape into another. The shape and the color shifts gradually from the beginning graphic to the final one. As in motion tweening, Flash will interpolate the intermediate frames for you. Shape tweening is best used somewhat sparingly, as it increases the final size of the Flash movie much more than Motion tweening does.
In the Shelley Biotech page, only one object undergoes shape tweening. This is the semitransparent egg-shaped sphere underneath the address text. We will make it start out as a large S and morph into the sphere.
Creating the Beginning S Shape
Now, we need to create the starting S shape.
Select the Sphere layer and hide the other layers.
Click on the first keyframe of the Sphere layer.
Change to the Text Tool and open the Character panel. Set the font to Arial, the size to 72, the color black, and click on both the Bold and Italic buttons.
Click on the scene and type an uppercase S. Change to the Arrow Tool.
Select the oval shape in this keyframe and delete it with the Delete key.
Select the S and open the Info panel.
Resize the S to approximately 30 width by 155 height in pixels.
Choose Modify → Break Apart. This will allow us to apply a gradient fill to the S.
-
We should make the S have the same colors as the final sphere it will become. Change to the Paint Bucket. Click on the Palette button at the bottom of the Tools menu. Select the gradient fill from the bottom of the color palette that was used to fill the link circles. See Figure 2–22.
FIGURE 2–22 Gradient fill.
Click on the S shape with the Paint Bucket somewhere near the center.
-
Click on the Header Text layer to make it visible. Make sure the S is lined up with the first letter of the header, as shown in Figure 2–23, by selecting it, moving it, and using the Scale option with the Arrow.
FIGURE 2–23 S shape.
){kind=link}
){kind=link}
Now that we have our starting and ending shapes, we can perform shape tweening and let Flash fill in the frames between them.
Applying Shape Tweening to the S
Hide the Header Text layer and all other layers except for the Address Sphere layer.
Click on any frame between the starting and ending keyframes on the Address Sphere layer.
Open the Frame panel.
-
Choose Shape Tweening with the Blend of Distributive, and change the Easing to –100, as in Figure 2–24. Moving the Easing slider left makes the tweening start slowly and then speed up near the end.
FIGURE 2–24 Tweening tab of Frame Properties dialog box.
Press Enter to view the shape tweening.
){kind=link}
CHECKPOINT
This would be a good time to save your work. Choose File → Save As, and save this file in the directory of your choice as shelley.fla. Download the project at this point from http://www.phptr.com/essential/flash5 or view it directly at http://www.phptr.com/essential/flash5/shelley/shelley2-9.html.
Adding Shape Hints
Shape hints are markers you place on the beginning and ending shapes in a shape tweening to tell Flash how to proceed in the frames between the two keyframes. When you create a shape hint, Flash puts a small, labeled circle on the image at both the first and second keyframes. You can use the Arrow to move these markers. If you place the marker at the top of the image in the first keyframe, and at the bottom of the image in the second, the image will appear to turn itself inside out, with the top migrating toward the bottom during the animation.
Select the first keyframe in the Address Sphere layer.
Choose Modify → Transform → Add Shape Hint. A small red circle with a letter a in it appears. Use the Arrow to move it away from the S.
Add two more shape hints, b and c, and move them so all three are visible.
-
Move the letters to the locations shown in Figure 2–25.
FIGURE 2–25 Shape hints correctly placed on the S graphic.
-
Click on the last keyframe. Matching letters are stacked in the center of the oval. Move them to the locations shown in Figure 2–26. These will turn green when they are in valid locations.
FIGURE 2–26 Shape hints correctly placed on the transparent oval.
Press Enter to see the result of the shape hint influence on the shape tweening.
To hide the shape hints from the view, uncheck View → Show Shape Hints.
){kind=link}
){kind=link}
CHECKPOINT
This would be a good time to save your work. Choose File → Save As, and save this file in the directory of your choice as shelley.fla. Download the project at this point from http://www.phptr.com/essential/flash5 or view it directly at http://www.phptr.com/essential/flash5/shelley/shelley2-10.html.
If you make all the layers visible at this point and animate them, you'll notice that the page is rather cluttered. We will fix that in the next section.