Flash CS4 Professional in 24 Hours- P7 docx

ptg Fine-Tuning a Motion Tween 171 Notice that, as time passes at the beginning, the graph is mainly horizon- tal—meaning it’s not completing much of its tween. Then, in the middle it’s nearly a vertical line—meaning it is doing most of its tween. Finally, it slows back down as it approaches the end. You can click anywhere between the two keyframes and press F5 many times to insert more frames. Also, you can crank up the frame rate to something relatively fast, like 50fps. (To change the frame rate, select Modify, Document, or press Ctrl+J.) Both edits should make the tween more obvious. You might have noticed the list of other preset eases under the plus sign menu next to the Eases section. Take a look at them now. Most have names that clearly describe what effect they have on the speed of your motion tween. Figure 8.13 shows the Spring easing effect graph. In the figure, we’ve applied it to our tween by selecting it from the drop-down list next to Basic Motion. Give it a try; it’s a really cool effect. The number to the right of the label Spring is currently set to 5; this means it seems to spring five times, lessening each time. You can change this number to increase or de- crease the springiness. Make an Animation Ease In and Ease Out TRY IT YOURSELF ▼ FIGURE 8.12 This S-curve graph makes a single tween that eases in and eases out. From the Library of Lee Bogdanoff ptg 172 HOUR 8: Using Motion Tweens to Animate Rotating in a Motion Tween In a motion tween, you can tell Flash to rotate a symbol a specific number of times. For example, you can use this option to make an animation of a boulder rolling down a hill as in Figure 8.14. In the Properties panel, when a frame with motion tweening is selected, you can set the Rotate Direction drop-down list to CW (for clockwise) or CCW (for counterclockwise). In the example, we’ve made the boulder rotate five times as it tumbles down the hill. Notice the Ease setting here as well. If we want our boulder to gain momentum as it rolls, we can give this a positive value. Because perfectly round symbols are not interesting when rotated, if you want to try rotating your yo-yo, consider drawing a logo or some other graphic off-center inside the master version of the yo-yo symbol. FIGURE 8.13 The Spring ease effect makes your animated symbol move as though it’s attached to a spring. CAUTION Less Is More Gratuitous animation is a fine example of having too much of a good thing. There’s no harm in playing with all the bells and whistles available in Flash. In fact, while you are learning Flash, you should play with everything. But when you create that Flash movie for your web- site, a little animation goes a long way. Too much can make your work look unprofessional. Remember the point of using Flash is to create animation. To effectively communicate an idea or tell a story, you should refrain from superfluous animation, which ultimately detracts from your message. For every effect you want to add, ask yourself, “Does this help clarify my mes- sage or not?” From the Library of Lee Bogdanoff ptg Fine-Tuning a Motion Tween 173 TIP Animating Multiple Symbols By now you know that if you want to animate a symbol, it needs to be the only symbol in the layer with the motion tween. What if you want to animate two things at the same time? To do this, you need to add a new layer to your movie and put the second symbol and its motion tween in that layer. Summary Congratulations! You’ve learned the fundamental skills of motion tweening and have explored the Motion Editor. It’s fun making Flash do the heavy lifting for you. Look back at what you’ve learned this hour, and you see that motion tweening is pretty easy: Set an ending frame, specify how you want Flash to tween, and you have a motion tween! Although motion tweening is simple, when you add easing, rotating, and all the ways you can modify a symbol instance (including scale, rotation, skew, position, color effect, and filter), you have numerous possibilities. Just because the tasks this hour were fairly simple doesn’t mean the motion tween is for simple effects. You should always consider motion tween be- fore you choose shape tweening, which you learn about in the next hour. Although some situations require a shape tween, motion tweens are more efficient, and, when used creatively, can be very effective and natural looking. FIGURE 8.14 By using the Properties panel while selecting a frame with motion tweening, you can make a symbol rotate an exact number of turns, ei- ther clockwise or counterclockwise. From the Library of Lee Bogdanoff ptg 174 HOUR 8: Using Motion Tweens to Animate Q&A Q. Why can’t I motion tween more than one symbol? A. You can have multiple shapes inside the symbol you’re tweening, but the rule is you can use only one symbol per layer. Q. When I use the Rotate setting in my tween, my symbol rotates around the visual center, despite the registration point I chose when I created the symbol. How do I rotate around something other than the visual center? A. The symbol rotates around the transform center point. Use the Free Transform tool to modify the axis of rotation for the instance. For more about this, review Hour 4. Q. Why doesn’t my motion tween follow a smooth path? A. Motion tweening can tween more than just position. When tweening a position, Flash moves directly from one keyframe to the next, finding the shortest path between two points. Wouldn’t it be cool if you could draw a cur ve and tell Flash to follow the path you drew? You can—just drag a point on the Motion Path that shows up whenever you create a motion tween. Q. I’m trying to use the Custom Ease In/Ease Out dialog box to make my animation go past the end of its motion—say, 120% of its tween. How can I do that? A. You can’t do it with only two keyframes. You can inser t a new keyframe somewhere before the ending and place your instance in a location past the destination. Although it might not be appropriate for your case, con- sider doing this in a frame-by-frame animation. Quite often, just a few strategically placed keyframes are more effective than a tween. Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers. From the Library of Lee Bogdanoff ptg 175 Workshop Quiz 1. According to the suggested process of creating a motion tween, what should you always do before inserting frames? A. Save the file, and take a deep breath because Flash might crash. B. Ensure the object in the first keyframe is an instance of a symbol. C. Use the Properties panel to tint the instance in the first keyframe. 2. When you want to edit the position of a symbol instance in a particular frame, what must you first ensure? A. That the red current-frame marker is in the frame you want to edit B. That you concentrate on the frame you intend to edit and then move the instance C. That the symbol isn’t red 3. A motion tween requires a beginning keyframe and an ending keyframe. When establishing you want a tween between those two keyframes, where do you make your tween settings? A. In the Properties panel, when the symbol instance in keyframe 1 is selected B. In the Properties panel, when the second frame is selected C. In the Properties panel, when the first keyframe is selected Quiz Answers 1. B. Saving is always a good idea, but it’s not necessary. You want to make sure the first keyframe contains a symbol because it is copied into the new keyframe Flash creates for you at the end of your mo- tion tween. 2. A. As surprising as it sounds, people often try option B (also known as the ESP method). This issue falls under a general suggestion we call “know where you are.” If you want to edit Frame 1, you need to make sure the red current-frame marker is in Frame 1. 3. A, B, and C. Sorry, trick question. You can set a motion tween any- where on the timeline or even if you have the symbol selected. From the Library of Lee Bogdanoff ptg 176 HOUR 8: Using Motion Tweens to Animate Exercises Most of the motion tweens you implemented in this hour tweened only po- sition. Try these exercises that use motion tween on other properties, such as scale and color effect. 1. Create a bouncing ball that squashes a little bit before bouncing back when it hits the ground. You need five keyframes. In addition to the first keyframe with the ball up high, you need a keyframe for when the ball reaches the ground and another keyframe for when the ball’s in a squashed position. Line up the bottom of the squashed ball with the bottom of the unsquashed ball. You need a keyframe in the down posi- tion but not squashed, and you need a keyframe at the end that corre- sponds to the initial position. Try using easing where you think it helps. Hint: Select the frame you want to change and modify your symbol properties. Flash puts a keyframe in the timeline for you. 2. Make a simple tween where text tweens from entirely transparent to its normal opaque or non-alpha state. Consider other ways to achieve this besides using the Alpha effect. Make a symbol from text before you add a motion tween, and make sure you are using the Static Text setting when you create your text. From the Library of Lee Bogdanoff ptg WHAT YOU’LL LEARN IN THIS HOUR: . How to make shape tweens . Available alternatives to shape tweening . How to apply shape hints for more control There are several ways to keep a Flash movie small and running swiftly. Recycling symbols from the Library and using motion tweening are two of the best ways. Unfortunately, the shape tween, as you’re about to learn, is one of the least efficient features in Flash because it causes file size to grow. However, shape tweening is pretty cool looking. There’s no other way to get the morph effect in Flash. So when appropriate, it’s perfectly acceptable to use shape tweens. A morph is a kind of animation that naturally changes one shape to another. Morph is a general term, but it’s the closest common term that describes how Flash’s shape tween works. Making a Shape Tween Shape tweens are fun because they look really cool, and they’re easy to cre- ate. In some ways they look more dynamic than motion tweens because every attribute of your object, including the shape, animates. Basically, you draw one or more shapes or Drawing Objects in two keyframes and set the tweening in the first keyframe to Shape. Unlike in a motion tween, you don’t want to turn your object or objects into a symbol. Let’s create one in the following task, and then we can analyze it. HOUR 9 Using Shape Tweens to Morph From the Library of Lee Bogdanoff ptg TRY IT YOURSELF ▼ Make a Simple Shape Tween In this task, you make a simple animation using shape tweening. Follow these steps: 1. In a new file, draw a circle on the Stage. Don’t group anything, and don’t convert anything to a symbol. 2. Insert a keyframe in Frame 30 by clicking in the Timeline at Frame 30, and selecting Insert, Timeline, Keyframe (or press F6). This is the end of the tween, and it matches the beginning. 3. Insert a keyframe in Frame 15. While the red current-frame marker is on Frame 15, pull the circle into a new shape by using the Selection tool. First, deselect the circle by clicking elsewhere on the stage off the circle, and then bring the pointer close to the edge until the cursor changes to a curved-tail pointer. Click and drag the edge of the circle in or out. Do this a few more times until you like the shape you’ve cre- ated. We made a boomerang shape, as shown in Figure 9.1. 178 HOUR 9: Using Shape Tweens to Morph FIGURE 9.1 You reshape the edges of the cir- cle in one of the keyframes. Flash does the tweening. 4. Set shape tweening for the two spans. To do this, click Frame 1, hold Shift, and then click Frame 30. This selects all the frames. Now choose Insert, Shape Tween, or right-click on the selected timeline, and choose Create Shape Tween. 5. Select Control, Test Movie (or press Ctrl+Enter) to see your shape morph. From the Library of Lee Bogdanoff ptg Making a Shape Tween 179 Following the Rules of a Shape Tween Flash is unforgiving when you don’t follow its rules. Luckily, the rules for a shape tween are very simple: no groups and no symbols. That’s it! Remem- ber these two things, and shape tweens are easy. Techniques and Tips Just because the rules for a shape tween are simple doesn’t mean that creat- ing a good-looking shape tween is easy. There are several techniques to make the process easier and the results better. Keep It Simple The most important tip we can give you is to keep it simple. There are very few rules for a shape tween—as long as you don’t group anything or use symbols, it works. However, when you have a million different shapes tweening to a million other shapes, the results look random. Clues that you aren’t keeping it simple enough are unexpected results and the checker- board effect you’re about to see. Consider these unexpected results. For example, you imagine your name morphing gradually into a circle shape, but despite breaking apart the text, you get a garbled mess or the checkerboard effect in the tweened areas, as shown in Figure 9.2. These are signs you’re likely creating something too complicated for Flash to cleanly morph. Flash is interpolating the in- CAUTION Turning Text into a Shape Recall from Hour 2, “Drawing and Painting Original Art in Flash,” that text acts as a group or a Drawing Object from the be- ginning. This means you can’t use text in a shape tween un- less you first break it apart by selecting Modify, Break Apart. If text contains more than one character, you have to break it apart twice—once to break the text into individual characters and another time to turn it into individual shapes. Keep in mind that after text becomes a shape, it’s no longer editable. FIGURE 9.2 The checkerboard effect is the com- mon result of an overly complex shape tween. From the Library of Lee Bogdanoff ptg 180 HOUR 9: Using Shape Tweens to Morph between frames accurately, but it can be difficult to go from one extreme, such as your name, to something simple, like a circle. Flash gets you from here to there, but the trip might look messy. The solution is to keep it simple. Do just one thing at a time. For example, try to tween just one letter of your name into a circle. You see later this hour in “Refining and Fine-Tuning a Shape Tween” that you can help Flash by using a feature called Shape Hints. However, the simpler the animation is the better. A simple animation is easier to create and becomes more like what you intended, and it probably results in a more effective movie and a smaller file. Don’t Mix Lines and Fills It’s best to avoid tweening between shapes that don’t have the same combi- nation of fills and lines because the results are unpredictable. Tweening a straight line into a bent line usually works fine. But if you try to tween from a line to a filled shape, you might get unpredictable results. As an analogy, consider bending a wire or reshaping clay. You could do each separately, but if you had to turn a wire into the same shape as the clay, it would be difficult or impossible. This analogy is similar to Flash tweening lines and fills. Flash can tween lines; Flash can tween fills; it can even tween a fill with a line. Flash has difficulty, however, when one keyframe has a line and the other has a fill or when one keyframe has both line and fill and the other only has one. Flash does what it can to interpolate the in-between frames when you mix them, but eventually something has to give. To avoid these problems, convert the lines to fills by using Modify, Shape, Convert Lines to Fills. Better yet, keep things simple by drawing in both keyframes of a tween with just lines, just fills, or both. Avoid Primitive Shapes Shape tweens on primitive ovals or primitive rectangles lead to unpre- dictable results. You usually get that checkerboard effect, like in Figure 9.2, or a mess similar to tweening shapes that contain fills and strokes. Ulti- mately, you have better results avoiding primitives in shape tweens; in- stead, you can convert them to symbols and use motion tween. Stay Out of Flash’s Territory When Flash is tweening a span of frames, it colors the tweened frames in the Timeline either blue (for motion tweening) or green (for shape tween- ing). These interpolated frames are Flash’s territory, as shown in Figure 9.3. From the Library of Lee Bogdanoff [...]... Hints In the preceding task, we told you where to place the hints However, figuring out logical positions for shape hints is usually pretty easy Think of it this way: You’re telling Flash, “This point in the starting shape goes with that point in the ending shape.” Notice after you add one shape hint, you can see how the point under the hint in the first keyframe moves to the corresponding point in. .. 183 Using Shape Hints A shape hint gives you a way to tell Flash exactly how to map one point in the beginning shape to another point at the end of the shape tween You want to use shape hints when Flash doesn’t create a shape tween that matches what you had in mind Points inside a shape are mapped during any tween Map refers to how one point in the starting shape corresponds to a specific point in the... point in the ending shape When Flash motion tweens a box from small to large, one corner of the small box is mapped to the same corner in the large box Every point is mapped Mapping points in a shape tween is more complex, so Shape Hints that enables you to control how Flash maps individual points In the following task, you learn how to use shape hints In this task, you use the Shape Hints feature to... Animation with Inverse Kinematics In this version of Flash, Adobe has introduced the Bone tool to give animators a way to automatically calculate Inverse Kinematics Don’t be put off by that phrase Inverse Kinematics (IK) simply means the calculations involved in figuring out how jointed objects move Flash handles the IK for you, so all you have to do is use the Bones tool to create the joints and let Flash. .. easily link several objects together to create a connected chain-like effect In this hour, you get a chance to create your own graphics connected with bones and to see how they move together Then, you animate and modify existing bones in your movie WHAT YOU’LL LEARN IN THIS HOUR: Placing bones in your Flash drawings Animating your boneconnected graphics Adding control points for better results Linking... these steps: 1 In a new file, select the Rectangle tool, and ensure Object Drawing in the options portion of the Tools is turned off Draw a perfect square by using the Rectangle tool by holding Shift while you drag TRY IT YOURSELF ▼ Use Shape Hints for a Better Shape Tween 2 In Frame 25 of the Timeline, insert a keyframe by clicking in the Timeline at Frame 25, and then select Insert, Timeline, Keyframe... the warnings, you still might have shape tweening results that are anything but what you expect Flash has a feature especially for shape tweening that helps you tell Flash what you really want It’s the Shape Hint feature, and it can make the difference between a shape tween that looks like a mess and one that looks like what you had in mind From the Library of Lee Bogdanoff Refining and Fine-Tuning a... later in the Timeline; add motion tweening; and use the Properties panel to set Color Effect to tint the circle instance in the last frame To do the same animation as a shape tween, you draw a circle and don’t convert it to a symbol; insert a keyframe later in the Timeline; fill the circle in the second keyframe with a new color (perhaps using the Paint Bucket tool); and set shape tweening in the first... still red, indicating you haven’t mapped this point to an end point yet FIGURE 9.6 Although you’ve added Shape Hint A in the first keyframe and attached it to the shape, it’s still red because you haven’t mapped this point in the ending keyframe 9 Go to Frame 25 and position Shape Hint A so it snaps to the middle of the left side of the triangle Notice the shape hint turns green, indicating it’s been... it a thin outline Copy or drag 12 more instances of the circle on the stage, and arrange them as shown in Figure 10.8 2 Select the Bone tool, and beginning with the head of your figure, draw bones connecting all the circles, as shown in 10.9 You are dragging two bones from one joint for the legs and three bones from one joint for the arms and torso Notice you now have a new layer in your timeline, Armature_1 . creating something too complicated for Flash to cleanly morph. Flash is interpolating the in- CAUTION Turning Text into a Shape Recall from Hour 2, “Drawing and Painting Original Art in Flash, ”. in mind. From the Library of Lee Bogdanoff ptg Refining and Fine-Tuning a Shape Tween 183 Using Shape Hints A shape hint gives you a way to tell Flash exactly how to map one point in the beginning. Insert a keyframe in Frame 30 by clicking in the Timeline at Frame 30, and selecting Insert, Timeline, Keyframe (or press F6). This is the end of the tween, and it matches the beginning. 3. Insert