Flash CS4 Professional in 24 Hours- P6 doc

ptg HOUR 7 Understanding Animation HOUR 8 Using Motion Tweens to Animate HOUR 9 Using Shape Tweens to Morph HOUR 10 Advanced Animation with Inverse Kinematics HOUR 11 Simulating 3D Animation HOUR 12 Reusing Your Animations with Motion Presets HOUR 13 Including Sound in Animations HOUR 14 Nesting Animations in Movie Clip and Graphic Symbols HOUR 15 Creating Special Effects PART II Animating in Flash From the Library of Lee Bogdanoff ptg This page intentionally left blank From the Library of Lee Bogdanoff ptg WHAT YOU’LL LEARN IN THIS HOUR: . The fundamentals of animation . The common terms of animation . How to use the basic Flash features related to animation . The common miscon- ceptions of animation (and how to overcome them) There’s nothing like animation. It can inspire, educate, and entertain. It’s memorable, too; no doubt when you hear the name Disney, scenes from classic animated movies pop into your head. You are on the verge of gain- ing the power to communicate your own messages with animation. Before we get into the nuts and bolts of Flash animation, there are several concepts you should understand. This hour discusses animation in general and as applied to Flash creations. If your basic understanding is clear, acquiring and applying the technical animation skills discussed in the next several hours is easier. How Animation Works Animation is made from individual images. Regardless of how motion is created in an animation, an animation is still a collection of fixed images. Suppose you see a car drive by; you see the car the entire time it’s within sight, but you are likely to blink. Your brain covers up the fact that you missed part of the action. When you watch a movie or television, the screen is blinking quickly. Sometimes it shows an image, and other times it’s blank. The fact that the blank moments are so short enables your brain to interpolate the missing information, and you think you’re watching full mo- tion with no gaps. The image projected onto the retina of your eyes remains even after the light stops. If you close your eyes, the last thing you saw remains imprinted for just an instant, and then it fades. This persistence of vision is why you don’t notice the blank spots between frames of a movie, assuming they are short enough. HOUR 7 Understanding Animation From the Library of Lee Bogdanoff ptg 144 HOUR 7: Understanding Animation FIGURE 7.1 Click Window, Timeline to open the Timeline panel if your timeline isn’t visible. Elements of Animation Now that you know a little bit about how animation works, we can discuss how it applies to Flash. As discussed in the following sections, several gen- eral animation terms have specific meanings in Flash. You need to under- stand both the general meanings and how the terms apply to Flash. Frames and Frame Rate As mentioned earlier in this hour, an animation is a series of still images. Each image is called a frame. In movies, frames are the individual pictures on the film itself. In Flash, frames are the little rectangular cells in the Time- line. If you can’t see your timeline, you might need to open the Timeline panel by clicking Window, Timeline (shown in Figure 7.1). The frames are numbered at the top of the Timeline, and every fifth frame is gray; the rest of the frames are white with a gray outline. The Timeline displays all the frames, but normally you can look at the contents of one frame at a time. The red current-frame marker can be in only one place at a time—the frame you’re currently viewing. You don’t draw into a frame on the Timeline— you draw onto the Stage. The current-frame marker indicates the frame whose contents are currently onscreen. Figure 7.2 shows the Timeline in its initial state. Until this movie’s duration is extended, you can’t move the red current-frame marker past 1, and only Frame 1 is enclosed by a solid white box with a hollow circle. From the Library of Lee Bogdanoff ptg Elements of Animation 145 FIGURE 7.2 The Timeline, with its many cells, is initially only one frame long. FIGURE 7.3 A 60-frame Timeline is shown with the red current-frame marker on Frame 15. You can move the cur- rent-frame marker to any frame within the 60 frames by dragging in the numbered area. By default, a Timeline is initially one frame long. The current-frame marker is unmovable at that point because it can be placed only in the frame of an animation, and so far the current movie has only one frame. Let’s look at an animation that has more frames, but instead of building an animation, you can download a sample from the publisher’s website. Download and open the keyframing.fla file, so you can follow along. Click in the numbered area of the Timeline on Frame 15. The current-frame marker moves to where you click; be sure to click in the numbered area to- ward the top of the Timeline, not in the cells (see Figure 7.3). This example illustrates a few important concepts. First, if you click and drag the current-frame marker in the number area above the frames all the way from Frame 1 to Frame 60, you see a quick preview of the animation. This technique is called scrubbing. The preview you’re given is dependent on how fast you scrub. Naturally, the frame rate is more even and consistent when the user watches an animation. If you select Control, Play, or press Enter, you see this animation play at its correct frame rate. To stop, press En- ter again. Take a look at the status area along the bottom of the Timeline. From the Library of Lee Bogdanoff ptg 146 HOUR 7: Understanding Animation Frame rate Current time Current frame number FIGURE 7.4 The status area in the Timeline con- tains three important numbers re- lated to timing. The three numbers are the current frame number, the frame rate, and the current time elapsed (see Figure 7.4). Scrub is a term that is used in other animation software. It’s a technique for previewing an animation. In Flash, you grab the red current-frame marker above the timeline cells and drag it back and forth. You are moving your mouse in a scrubbing motion, hence the name. Frame rate is the rate at which frames are played back for the user, meas- ured in frames per second (fps). A frame rate of 30 fps means that 30 frames are displayed every second. It is easy to confuse frame rate with speed, but they’re not necessarily the same. If an entire animation uses 10 frames at 10 fps, it might look identical to the same movement using 20 frames if the frame rate is set to 20 fps. Both of these animations take 1 second to finish. Speed isn’t the reason you pick one rate over another. The issue is the capa- bility of the user’s machine. Flash’s frame rate should really be called maxi- mum frame rate. Your movie never exceeds this rate, but on a slow computer, it might play more slowly. The current frame number, on the left, indicates the location of the red cur- rent-frame marker. It changes while you’re playing or scrubbing, reflecting that you can be in only one frame at a time. The frame rate, the middle number, normally indicates the frame rate for the movie that you last speci- fied. This is set by selecting Modify, Document and making a selection in the Document Properties dialog box. However, the number shown can be reduced if after you play the movie, Flash estimates that it can’t actually keep up with the requested frame rate. It’s not entirely accurate, but it does provide a good estimate. Let’s change the frame rate to something very high and see what happens. With the keyframing.fla sample file open, let’s open the Document Prop- erties dialog box by selecting Modify, Document. (You can also open this di- From the Library of Lee Bogdanoff ptg Elements of Animation 147 alog box by pressing Ctrl+J.) Another way to change the frame rate without opening the Document Properties is by double-clicking the frame rate num- ber on the Timeline and typing in a new number. Change the frame rate to 120. Press Enter to play the movie, and notice that as the red current-frame marker moves through the Timeline, the frame rate changes to show how fast Flash is actually playing. It wants to go 120 fps, but it might not be able to keep up. Now the status shows a more realistic frame rate, one that your computer can maintain. In reality, however, the frame rate shown is not particularly accurate because it shows only how fast Flash plays during au- thoring, not in the actual exported movie. If you were to export this movie and play it in a browser, it would likely play slightly faster because the Flash authoring environment is not part of the picture. Current time, the third number, indicates how long it takes to reach the frame you’re viewing from the start of the movie. For example, how long it takes an animation to play 50 frames depends on the frame rate. At 24 fps, it should take about 2 seconds. At 12 fps, it should take about 4 seconds. The duration of the movie is based on the frame rate. Frame Rate Versus the Number of Frames The numbers in the status area are very important. When you design an an- imation, you should pick a frame rate and stick to it. When you change the document frame rate, you’re changing it for the entire movie. For example, say you have an animation of a character walking, running, jumping, and sitting still for a few seconds. If the portion where he’s walking is too slow, you might try to speed it up by increasing the frame rate to make it look better—but then you discover the character runs extra fast and his sitting time goes by more quickly. Everything is faster! It’s best to leave the frame rate alone and find another way to increase the speed. There are ways to change the effective speed. Suppose you have an animation of an airplane moving across the sky. You need to decide the effective speed of the airplane according to the size of the airplane and how much sky you’re showing. If you move the airplane all the way across the screen in 36 frames, you can’t determine whether that’s the right speed unless you con- sider the frame rate. At 12 fps, the airplane takes 3 seconds to move across the sky. Effective speed is how fast something seems to move. Actual speed, in com- parison, is absolute and can be measured. If an animation uses 12 frames at 12 fps, the elapsed time of 1 second is the animation’s actual speed. The NOTE Changing the Frame Rate with Code It turns out that in Flash Player 9 and later, you can use Action- Script 3.0 to change the frame rate while the movie plays. This involves a fair bit of work as you have to write the code. Plus, you can’t preview the animation while in Flash, and instead you must export the movie to see the results. For these reasons, we repeat our advice: You should pick one frame rate and stick with it. Keep in mind you can set the frame rate with the code stageframeRate=30. From the Library of Lee Bogdanoff ptg 148 HOUR 7: Understanding Animation viewer’s psychological impression determines effective speed. Therefore, you can use illusions to increase or decrease an animation’s effective speed. If a lot of action and changes occur in those 12 frames, it’s effectively fast. If only one slight change occurs, the effective speed is slow. If an airplane in the sky travels completely through your view in 3 seconds, the airplane is probably pretty close to you. If the plane is at 20,000 feet, it would take about 15 seconds or longer to move across the sky. If 3 seconds is too fast for the airplane in an animation, you can make it appear slower by slowing down the frame rate or by increasing the number of frames used in the Timeline. If you slow the frame rate to 2 fps, it takes 18 seconds for 36 frames, but the animation is very jumpy. Plus, you’re changing the rest of the animations in your movie. If you extend the animation to take 240 frames, the airplane takes 20 seconds to complete the motion. You learn how to do these things in the next few hours, but for now, it’s only impor- tant to understand the difference between frame rate and total frames. Frame Rates of Different Types of Animation To put the animation you’re about to create into perspective, let’s consider some traditional animation media. In a motion picture, the frame rate at which the images appear is 24 fps. Even at this relatively slow rate, you don’t notice the moments when the screen is blank. Television plays at 30 fps. In computer animation, the screen doesn’t blink between frames, but you do have a choice about what frame rate to use. Technically, the user’s moni- tor flickers as much or as little as he has it set to flicker, but in any case, it is much faster than an animation’s frame rate. In computer animation, frame rate affects how frequently the onscreen graphic changes or, conversely, how long it pauses before advancing to the next frame. In practice, if you go much below Flash’s default setting of 12 fps, your user starts to notice jumpiness, and if it’s much higher than 36 fps, it can not perform well on all machines. (Remember that traditional movies use 24 fps and look quite smooth.) It can seem that you should always crank up the frame rate as high as you can, which would address the problem of jumpiness. However, it’s not that simple. First, more frames can mean that your movie has a bigger file size. Also, it often requires a computer that can display images quickly. If your user’s machine can’t keep up, it slows down the animation and makes it From the Library of Lee Bogdanoff ptg Elements of Animation 149 not only jumpy but slow. Ultimately, a higher frame rate means more frames, and therefore, more work on your part in creating the animation. Finally, creative animation techniques enable you to fool the user in ways other than relying on persistence of vision and a fast frame rate. You see ex- amples in Hour 8, “Using Motion Tweens to Animate,” when you create an animation that uses only three frames. In Hour 23, “Optimizing Perfor- mance,” you learn about even more techniques. For now, keep in mind that frame rate is important, but it isn’t everything. Keyframes and Blank Keyframes A keyframe is a frame in which you establish exactly what should appear on the Stage at a particular point. A keyframe can include an image, or it might be blank. A blank keyframe is still a keyframe; it’s just one in which nothing appears on the Stage. In traditional film animation, every frame is a keyframe—that is, something new appears onscreen with each frame. In Flash, you can make every frame a keyframe, but you can also take some shortcuts. If the first keyframe oc- curs on Frame 1 and the next keyframe doesn’t occur until Frame 10, no changes appear onscreen during Frames 2–9. The keyframe in Frame 1 es- tablishes what appears in Frame 1, and it doesn’t change until the keyframe in Frame 10, which establishes what appears then. This is totally appropri- ate for something that doesn’t need to change every fraction of a second. When you create a keyframe, it’s as if you’re telling Flash, “Put this stuff on the Stage, and keep it here until you reach the next keyframe.” The next keyframe says the same thing, “Now, put this new stuff on the Stage.” You have two things to decide when you create keyframes: when you want them to occur in the Timeline and what you want to appear onscreen at those moments. Creating a keyframe is done by clicking the cell in the Timeline exactly where you want a keyframe to be. After you click to select a single cell in the Timeline, click Insert, Timeline, and Keyframe or press F6. A couple things happen when you do this: Flash places a keyframe in that frame, in- dicated by either a solid or hollow circle. (The second thing it does sounds more confusing than it is, as you see when you try it yourself shortly.) Flash copies the Stage content from the previous keyframe, and it appears in your new keyframe. If at the previous keyframe you have nothing on the Stage, a blank keyframe is inserted. If at the previous keyframe you have something From the Library of Lee Bogdanoff ptg TRY IT YOURSELF ▼ Analyze a Finished Animation 150 HOUR 7: Understanding Animation drawn on the Stage, that shape or symbol instance is copied onto the State at the new keyframe. This can be convenient because a keyframe gives you a chance to specify both when you want an onscreen change to occur and what the onscreen contents should change to. Often you want just a small change. Creating a keyframe enables you to start with a copy of the previ- ous keyframe’s content instead of redrawing it from scratch. You get the idea when you do it yourself. Whatever you draw in a keyframe continues to be displayed until the Time- line arrives at the next keyframe (blank or otherwise). If keyframes are placed one after another, the screen changes with every frame. If the frame rate is 10 fps, you see 10 keyframes in 1 second. However, keyframes don’t have to occur one after another. If you insert keyframes at alternating frames, changes appear five times per second (still at 10 fps). For any frames between keyframes, you see the content of the previous keyframe, either an image or a blank screen. Say you want a box to appear onscreen and remain still for 1 second before it moves. In one keyframe you draw a box, and then 10 frames later (1 second at 10 fps) you insert a new keyframe in which you can move the box to a new location. 2. Notice there are separate named layers: Sparkle, CS4, Flash, and Back- ground. (We look at each separately.) You might need to resize the height or width of the Timeline, use the scrollbars, or view it as a sepa- rate panel to see all the frames and layers (as illustrated in Figure 7.6). FIGURE 7.5 This Timeline has many clues about what kind of animation is taking place. In this task, you view a sample animation and make some edits so you can better understand keyframes. Follow these steps: 1. Download the file keyframing.fla from the publisher’s website. In Flash, open this file, and then press Enter to watch the animation (see Figure 7.5). From the Library of Lee Bogdanoff [...]... locations Five things you can do while modifying a graph include adding a control point, selecting a control point, moving a control point, modifying the graph shape before or after a control point, or deselecting all control points The cursor for each is shown in Figure 8.11 Note you can remove control points by selecting one, and then pressing Delete Add a control point Select a control point (then drag... creating the ending frame because the new keyframe Flash creates for you always contains a copy of what’s in the first keyframe 2 After you’ve created your beginning keyframe and ending frame, you can adjust the position, scale, rotation, skew, brightness, tint, and alpha of either the instance in the beginning keyframe or the instance in the end keyframe 3 Keep an eye on the current-frame marker in. .. frame in which you are currently editing Sticking to a Pattern NOTE A Word About Classic Tweening The motion tweening you’ve just learned differs from motion tweening in CS3 and earlier versions of Flash You might have noticed the tweening option Classic Tweening In Classic Tweening, you create a starting keyframe and an ending keyframe You position your object that you want to animate in its ending... top of the screen 4 Click Frame 20 in the Timeline, and insert a frame by selecting Insert, Timeline, Frame (or press F5) Add motion tweening by choosing Insert, Motion Tween 5 Before you move anything, click Frame 20 in the Timeline, and insert another keyframe From the Library of Lee Bogdanoff 166 ▼ TRY IT YOURSELF Make an Animation Finish Where It Starts HOUR 8: Using Motion Tweens to Animate 6 Now... You’re initially given a control point at the beginning and end of the tween You can make a tween ease in and out with just these two points Add more control points only when you need the easing behavior to change in the middle of a tween From the Library of Lee Bogdanoff Fine-Tuning a Motion Tween 169 By default, one graph applies to all properties that are changing within the tween It’s set in the... control points The Custom Easing dialog box makes the most sense after you give it a try The next task explores a couple of typical uses for custom easing: easing in and easing out in the same animation From the Library of Lee Bogdanoff 170 ▼ TRY IT YOURSELF Make an Animation Ease In and Ease Out HOUR 8: Using Motion Tweens to Animate In this task, you see how to combine Ease In and Ease Out in a single... its outline you just created is to click on the frame in the timeline where it’s located It’s indicated by a solid black circle Clicking on that frame selects everything that is drawn in the frame Later, when you add more layers, make sure you are clicking the correct frame in the correct layer; for now, clicking the single frame in this movie is easy as it selects the entire circle and outline NOTE... tweened or interpolated frames so you don’t have to do all the work So you can see what it looks like, check out the tweened frames in Figure 7.9 Tweening really is as simple as drawing two frames and making Flash tween the difference You learn more about tweening during Hour 8 and Hour 9, “Using Shape Tweens to Morph.” Flash helps you by doing some of the tedious work NOTE The Meaning of Tweening The... tweening in the beginning keyframe in this case, the first keyframe in Frame 1 To do this, select the keyframe in Frame 1, and then select Insert, Motion Tween You can also right-click (Ctrl-click on the Mac) and choose Create Motion Tween, as shown in Figure 8.1 FIGURE 8.1 Right-clicking or choosing Insert, Motion Tween enables you to set the Tween type TIP Selecting Everything in a Frame A quick... Timeline to be sure it’s located in the keyframe you want to edit You refine your techniques over time, but you should follow those basic steps during your entire Flash career From the Library of Lee Bogdanoff Fine-Tuning a Motion Tween 165 Fine-Tuning a Motion Tween Making a motion tween is pretty easy when you know how Making it look good is another matter A few basic techniques for fine-tuning a . itself. In Flash, frames are the little rectangular cells in the Time- line. If you can’t see your timeline, you might need to open the Timeline panel by clicking Window, Timeline (shown in Figure. Motion Presets HOUR 13 Including Sound in Animations HOUR 14 Nesting Animations in Movie Clip and Graphic Symbols HOUR 15 Creating Special Effects PART II Animating in Flash From the Library. moments. Creating a keyframe is done by clicking the cell in the Timeline exactly where you want a keyframe to be. After you click to select a single cell in the Timeline, click Insert, Timeline, and