Animations and Interaction - Tweening Imported Vector Graphics
(Page 5 of 11 )
The advantages of vector graphics should be incorporated whenever possible. However, given the limited tool set for creating vector graphics in Flash Pro, designers typically prefer to create vector graphics in a program such as Adobe Illustrator or Macromedia FreeHand. The designer can use any favored application to create images with vector graphics and then import these graphics into Flash easily using File, Import, Import to Stage (or import to a library) from the menu. However, once a vector graphic arrives in Flash Pro, the format is unlikely to be one for optimal use in a motion tween.
Making Motion Tweens Tween Correctly - In tweening changes, you'll find that the Free Transform tool and Transform panel are pretty safe to use in changing the size, rotation, or skew of the instance, type, or group. By the same token, the tools that created the instance, group, or type initially are usually not the tools to use when making changes in the target image you're tweening to. Unlike shape tweens, where the same tools are used to create the initial and changed images, the opposite is true with motion-tweened objects. Therefore, if a grouped object is initially created using the Paintbrush and Fill Bucket tools, if those same tools are used to change the image in a second keyframe, the changes won't tween but instead will be abrupt as the playhead moves to the second keyframe in a motion tween.
You may find thinking about motion tweens as movement rather than shapes helpful. For example, if you use the Transform panel to change a graphic symbol instance from 100% size to 400% size, the symbol appears to be moving closer to the viewer. That is, the effect is motion, not shape, even though the shape has indeed changed. Likewise, rotation is a movement change, even though the object looks different depending on its rotation angle.
Exceptions to this concept abound, however. You can use a motion tween to change an object's tint, color, and transparency level. For example, if you want to use a movie clip to act as a fade-in screen by tweening the alpha (transparency) level from 0% to 100%, the motion tween works fine, and there's absolutely no motion at all—just a change in its transparency. There's no movement or perception of movement. However, the changes in tint, color, or transparency are not made using tools from the Tool panel. Rather, you make such changes by selecting an object and changing its color, tint, or alpha setting in the Property Inspector.
Figure 4.13 shows an imported vector graphic on the Stage. The image consists of several blocks; instead of being a single image, it's actually several images. When Motion is selected in the Tween menu in the Property Inspector, a warning icon appears. The warning brings attention to the fact that only a single object can be tweened in a single layer.
Figure 4.13 - Imported vector graphic on Stage.
However, by selecting all the parts of the vector graphic and opening the Convert to Symbol dialog box (by pressing F8), you can maintain all the vectors in a single symbol. Figure 4.14 shows the conversion from a multipart vector image into a Graphic symbol.
Figure 4.14 - Transforming the multiple parts of a vector image into a Graphic symbol.
Then, when a size change is tweened, the entire image smoothly tweens from the original size to the large size. Using the file-size economy inherent in vector graphics, the SWF file, including the tweening, takes up only 2KB on the disk. Figure 4.15 shows the larger (220%) image that is tweened to.
Figure 4.15 - The instance at 220% in the second keyframe.
Using imported vector graphics created using another application such as Macromedia FreeHand or Adobe Illustrator or from clip art collections is an excellent way to take advantage of vector graphics. Other than using Flash's capability to transform the imported graphics into symbols, you can easily use them "as is" with little changes required.
Repositioning Center Points One of the key animation structures in Flash Pro is the ability to move center points to achieve realistic animation. The center point serves as a pivot point so that when an object is rotated, it rotates where you want it. For example, when you create animation of an arm moving, the pivot points need to be at the shoulder and elbow, not at the default positions in the middle of the graphic. Any symbol instance selected with the Free Transform tool can have its center repositioned to wherever needed.
A simple example illustrates how to move center points to achieve maximum realism in animation. The following example shows both how to move instances of a unified object to different layers and how to move the center point of each instance. This example began with a drawing of a palm tree on a desert island. The tree is broken up into three graphic symbol instances, all on the same layer, as shown in Figure 4.16.
Figure 4.16 - The initial figure broken into three instances.
Given the image shown in Figure 4.16 as the starting point, here's how you transform it into an animated movie using motion tween and pivot points:
Add two layers above the Tree layer, naming them Trunk and Leaves, as shown in Figure 4.17.
Click the top image (palm leaves) and cut the leaves. Click the first frame of the Leaves layer and select Edit, Paste in Place from the menu.
Don't move the center point in the Leaves instance; it's positioned where it needs to be. In the base object at the bottom on the tree, use the Free Transform tool to move the center point to the bottom of the base. Change the name of the Tree layer to Base.
At this point, the movie is ready for you to add motion tweens. After inserting keyframes at Frames 10, 20, and 30, you can rotate the tree's parts left and right in the keyframes so that the leaves, trunk, and base sway in a hefty breeze. Insert motion tweens in Frames 1, 10, and 20. Figure 4.18 shows the final movie with the sway to the left in Frame 10.
Figure 4.17 - Moving the center point.
Figure 4.18 - The palm tree's parts are rotated to the left.
In addition to rotation and moving the center point, the Free Transform tool can be used in skewing and resizing images.
 This chapter is from Macromedia Flash MX Professional 2004, by Bill Sanders (Sams, 2004, ISBN: 0672326051). Check it out at your favorite bookstore today.
Buy this book now. |
Next: Making and Using Guide Layers >>
More Flash Articles
More By Bill Sanders
