Flash CS4 Professional in 24 Hours- P6

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:30

0
57
lượt xem
7
download

Flash CS4 Professional in 24 Hours- P6

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Flash CS4 Professional in 24 Hours- P6: The creation of this book could not have happened without the skill and patience of many, many people at Sams Publishing. Most of all, I want to thank Mark Taber for offering me this opportunity and Philip Kerman for writing such a great book. I also greatly appreciate the efforts of Songlin Qiu for keeping me on track and organized, not an easy task.

Chủ đề:
Lưu

Nội dung Text: Flash CS4 Professional in 24 Hours- P6

  1. PART II Animating in Flash 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
  2. This page intentionally left blank
  3. HOUR 7 Understanding Animation There’s nothing like animation. It can inspire, educate, and entertain. It’s WHAT YOU’LL LEARN IN memorable, too; no doubt when you hear the name Disney, scenes from THIS HOUR: classic animated movies pop into your head. You are on the verge of gain- . The fundamentals of ing the power to communicate your own messages with animation. Before animation we get into the nuts and bolts of Flash animation, there are several concepts . The common terms of you should understand. This hour discusses animation in general and as animation applied to Flash creations. If your basic understanding is clear, acquiring and applying the technical animation skills discussed in the next several . How to use the basic hours is easier. Flash features related to animation . The common miscon- How Animation Works ceptions of animation (and how to overcome Animation is made from individual images. Regardless of how motion is them) 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.
  4. 144 HOUR 7: Understanding Animation 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. FIGURE 7.1 Click Window, Timeline to open the Timeline panel if your timeline isn’t visible.
  5. Elements of Animation 145 FIGURE 7.2 The Timeline, with its many cells, is initially only one frame long. 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). 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. 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.
  6. 146 HOUR 7: Understanding Animation The three numbers are the current frame number, the frame rate, and the current time elapsed (see Figure 7.4). FIGURE 7.4 The status area in the Timeline con- tains three important numbers re- lated to timing. Current frame number Current time Frame rate 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-
  7. 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 NOTE The numbers in the status area are very important. When you design an an- Changing the Frame Rate imation, you should pick a frame rate and stick to it. When you change the with Code document frame rate, you’re changing it for the entire movie. For example, It turns out that in Flash Player 9 say you have an animation of a character walking, running, jumping, and and later, you can use Action- Script 3.0 to change the frame sitting still for a few seconds. If the portion where he’s walking is too slow, rate while the movie plays. This you might try to speed it up by increasing the frame rate to make it look involves a fair bit of work as you better—but then you discover the character runs extra fast and his sitting have to write the code. Plus, you time goes by more quickly. Everything is faster! It’s best to leave the frame can’t preview the animation rate alone and find another way to increase the speed. while in Flash, and instead you must export the movie to see There are ways to change the effective speed. Suppose you have an animation the results. For these reasons, of an airplane moving across the sky. You need to decide the effective speed we repeat our advice: You of the airplane according to the size of the airplane and how much sky should pick one frame rate and stick with it. Keep in mind you you’re showing. If you move the airplane all the way across the screen in 36 can set the frame rate with the frames, you can’t determine whether that’s the right speed unless you con- code stageframeRate=30. 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
  8. 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
  9. 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
  10. 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. ▼ TRY IT YOURSELF In this task, you view a sample animation and make some edits so you Analyze a Finished can better understand keyframes. Follow these steps: Animation 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). FIGURE 7.5 This Timeline has many clues about what kind of animation is taking place. 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).
  11. Elements of Animation 151 ▼ TRY IT YOURSELF Analyze a Finished Animation FIGURE 7.6 You can resize the width of the Timeline to see all the layers. 3. The Background layer appears initially in Frame 1 and remains un- changed onscreen for the duration of the animation. Notice the keyframe in Frame 1, followed by many regular frames. It’s possible to extend or reduce the duration of any of the background layers by first holding Ctrl and then moving the box at Frame 60—but don’t do this yet. Figure 7.7 shows a close-up of the Timeline. Sequence of several keyframes FIGURE 7.7 Blank keyframe followed by blank frames Here’s a close-up of the Timeline. Keyframe followed by frames Sequence of keyframes followed by a pause 4. Scrub Frames 31 through 60 by dragging the current-frame marker in the numbered area of the Timeline. Notice the animation of Sparkle. The Sparkle layer has a keyframe in each frame from 31 to 54. Onscreen, a different drawing of the Sparkle appears for each frame. Scrub past Frame 54, and the Sparkle is gone—because in the Sparkle layer, there are no frames after 54.
  12. 152 HOUR 7: Understanding Animation ▼ TRY IT YOURSELF 5. The layer called Flash is more interesting. In Frame 1, the word Flash Analyze a Finished appears, but there isn’t another keyframe until Frame 4, where the Animation word changes. Then, in Frames 4 through 15, a different keyframe for every frame contains a modified image of the word to make it look like it spins. You can press the comma and period keys to step through this animation because scrubbing might be too fast to let you see the effect. 6. The CS4 layer has a blank keyframe in Frame 1 shown by a hollow cir- cle. It’s not that the CS4 graphic is offscreen at the start, rather it doesn’t exist. That’s the idea of a blank keyframe. The CS4 graphic doesn’t appear until Frame 10. This is where you see the first keyframe with a solid black circle. When the CS4 graphic appears, it changes in every frame that contains a keyframe. Actually, it pauses at Frame 20, and another keyframe in that layer doesn’t appear until Frame 25. Finally, Frame 30 is the last frame for this layer, and no frames exist past this point. 7. Try adding frames after Frame 30 in the CS4 layer. Click the cell at Frame 60, and select Insert, Timeline, Frame or press F5. When you play the animation, the CS4 graphic never fully disappears. The new regular frames extend the duration of the contents at the keyframe in Frame 30. One way to remove the frames following the keyframe in Frame 30 is to hold down the Ctrl key and drag the box that is now at the end of the Sparkle layer to the left (see Figure 7.8). (Note that you don’t need to hold Ctrl if you’ve previously selected Edit, Preferences and clicked the Span Based Section option.) FIGURE 7.8 After you add frames to the end of a layer, you can reduce the du- ration if you hold Ctrl and drag the box to the left. 8. Close this file without saving. The practical example in the preceding task is a great chance to see keyframes, blank keyframes, and regular frames in a working file. This isn’t the most impressive Flash movie, but it’s intended to exemplify specific points about frames and keyframes.
  13. Elements of Animation 153 Tweening You can put whatever you want in keyframes. The space between two keyframes effectively holds the onscreen contents from the first keyframe. Alternatively, you can tell Flash to interpolate the change in a process called tweening. For example, suppose in one keyframe an airplane is on the left of the stage. Then, you have a series of frames. Finally, you have another keyframe that shows the airplane on the right side of the stage. Flash can NOTE calculate how to move the first image to the second through the intervening The Meaning of Tweening frames. The word tweening is from the word between, and it is used in Tweening is the process of interpolating two keyframes. Tweening conventional animation, as well smoothes out a big change by breaking it into little steps. If a circle at the as in Flash. If you look at the bottom of the screen jumps to the top of the screen 1 second later at 10 fps, credits on any full-length ani- the change appears abrupt. If the two frames are tweened, you see the circle mated feature film, you’re likely move a little bit (about 1/10 of the total distance) 10 times. The coarse to see the names of both the principal artists and the tween- movement is smoothed out with small changes in the in-between frames. ers. The principal artists draw Flash calculates these tweened or interpolated frames so you don’t have to the keyframes, and the tweeners do all the work. fill in the blanks between them. Similarly, in Flash, you draw the So you can see what it looks like, check out the tweened frames in Figure keyframes, and Flash creates 7.9. Tweening really is as simple as drawing two frames and making Flash the frames in between. 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. FIGURE 7.9 When you have two keyframes sep- arated by several frames, you can tell Flash how to get from one to the next.
  14. 154 HOUR 7: Understanding Animation Summary This hour you took a good look at animation. The concepts discussed in this hour prepare you for the next few hours. In this hour, you learned about familiar media such as television and film, including how persistence of vision gives the illusion of animation work. As part of this discussion, you’ve learned several important terms, includ- ing frame rate, keyframes, and tweening. Frame rate is how fast Flash at- tempts to display the contents of each frame in sequence. Keyframes are where you establish what is on the Stage at a particular time. Finally, tweening is Flash’s way of filling the spaces between keyframes. These three concepts and many more become almost second nature as you prac- tice during the next few hours. Q&A Q. What is the best frame rate to use? A. There’s really no right answer. If there were a rule, it would be to use the lowest frame rate possible. This means fewer total frames, which in turn means a slightly smaller file. More importantly, it means that low- end computers are likely to play back the animation at the intended rate. In addition, it can mean less animating as there are fewer frames to animate. The only downside is you have to be very creative to create animations that use only a few frames to communicate an idea or a movement. In general, you’re usually safe sticking to Flash’s default rate of 24 fps. Q. My monitor’s refresh rate is 75Hz, meaning it blinks 75 times per sec- ond. However, I can crank the Flash movie’s frame rate all the way to 120 fps. What would be the value of doing that? A. Nothing, really. First of all, you are likely to find that if you set the frame rate to 120 fps, Flash won’t keep up. If you’re playing only a frame or two, it can actually go much faster than 36 fps. But even if Flash could display 120 fps on a fast computer, it can’t play that fast for the vast majority of the audience. Generally, going much over 36 fps is simply asking for trouble. Q. It was really helpful deconstructing that keyframing.fla file. Can you add some more files like that? A. Sure. In fact, you find several other files that appear later in the book at the publisher’s website.
  15. Workshop 155 Q. I’ve set my document properties to 24 fps, but the display on the bot- tom of the Timeline changed to 18.2 fps. How do I change it back? A. First, this is a sign your movie can’t play at 24 fps. The 18.2 indicates that the last time you played the movie, it could reach only that frame rate. The frame rate set in the document properties has not changed. If you really want to change the display number, you need to access the document properties again or double-click the 18.2 and edit it. Keep in mind that just because you set the frame rate to 24 fps doesn’t mean Flash plays that fast. It can try, but it might not succeed. 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. Quiz 1. What is the visual effect of a movie that has a keyframe in every frame? A. It appears smooth. B. It appears jumpy. C. It might have no visual effect. 2. If you set the frame rate to 2 fps, what is the visual result? A. The animation looks jumpy. B. You see the blank (black) pauses between frames. C. You can see subliminal messages between the frames. 3. If a document’s properties are set to a frame rate of 60 fps, how long does it take to reach Frame 90? A. 1.5 seconds exactly B. 1.5 seconds or more C. None of the above
  16. 156 HOUR 7: Understanding Animation Quiz Answers 1. C. Many factors besides how frequently keyframes appear affect how an animation looks. First, the nature of the content has more impact than how many keyframes you have. You could have very similar or very different content onscreen for each keyframe. Also, frame rate af- fects how an animation appears. 2. A. A frame rate of 2 fps is slow enough for you to notice the still frames, but the visual effect is jumpiness. In fact, if the contents of each frame are the same, you won’t see any changes. The pauses be- tween frames are just that, pauses, and not black frames. 3. B. It’s not that your computer won’t display 60 fps if the animation is particularly complex. It probably takes longer than 1.5 seconds to dis- play all 90 frames. If your computer can keep up with the frame rate of 60 fps, it takes slightly less than 1.5 seconds because it has to travel only 59 frames from Frame 1.
  17. HOUR 8 Using Motion Tweens to Animate Ever consider how film or old-fashioned cartoons are created? The anima- WHAT YOU’LL LEARN IN tion is created frame by frame. In Flash lingo, that means one keyframe ap- THIS HOUR: pears right after another. You can create animations like this in Flash, but . How to create a motion it’s a lot of work because you have to draw every frame yourself. With tween tweening, Flash fills in the blank frames between two keyframes. Flash has . The basic properties of a two types of tweening: motion tweening and shape tweening. This hour we motion tween cover motion tweening. Motion tweening animates clip properties such as lo- cation, scale, rotation, tint, alpha, and filters. . How to use the Ease In and Ease Out effects . Tricks to make your mo- Creating a Motion Tween tion tweens look natural A basic motion tween is easy to produce. Let’s create one in the following and realistic task, and then we can analyze it. . How to use the Motion Editor to control Easing In this task, you make a circle animate across the screen by using the TRY IT YOURSELF ▼ Motion Tween feature. Follow these steps: Create a Basic Motion 1. In a new file, draw a circle on the Stage. Tween 2. Select the entire circle, and choose Modify, Convert to Symbol (or press F8). Name it Circle, set the behavior to Movie Clip, and click OK. 3. Click Frame 30 in the Timeline, and select Insert, Timeline, Frame (or press F5). 4. Click on the keyframe in Frame 1; the red current-frame marker moves to Frame 1. Position the circle where you want it to appear at the begin- ning—in this case, to the left side of the Stage.
  18. 158 HOUR 8: Using Motion Tweens to Animate ▼ TRY IT YOURSELF 5. Set tweening in the beginning keyframe—in this case, the first keyframe in Frame 1. To do this, select the keyframe in Frame 1, and Create a Basic then select Insert, Motion Tween. You can also right-click (Ctrl-click on Motion Tween 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 way to select the circle and 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 sin- gle frame in this movie is easy 6. The Properties panel changes to give you options for your tween. Leave as it selects the entire circle all the default settings. and outline. 7. Click on the last frame, Frame 30, and move your circle to the right of NOTE the stage. Test Movie Versus That’s it; you’re animating! Figure 8.2 shows that Flash has colored Publishing frames blue background to represent the interpolated frames between the beginning keyframe and the final frame. Notice the colored line in Selecting File, Publish or File, the center of the circle—this is the motion path. Publish Preview is equivalent to testing the movie. In addi- 8. Select Control, Test Movie (or press Ctrl+Enter) to see what happens. tion to generating an Adobe Flash SWF file (.swf), it cre- 9. Choose the Selection tool, and, just for fun, click and drag one of the ates the .html page to host it tiny dots on the motion path, the colored line, and upward. Now, click and (in the case of Publish Control, Test Movie. It’s easy to give your animation an elaborate path to Preview) immediately enables follow by modifying the shape of the motion path, as show in Figure 8.3. you to view the results in the browser. This is more accurate than Test Movie because you see the movie in a browser, but Test Movie is a quicker way to preview your movie while you’re working.
  19. Creating a Motion Tween 159 TRY IT YOURSELF ▼ Create a Basic Motion Tween FIGURE 8.2 The Properties panel displays an arrow on a blue background to in- dicate that Flash is tweening these frames. FIGURE 8.3 You can modify the motion path of any motion tween you create by using the Selection tool and drag- ging the green dots in the path. NOTE .swf Files You learned about .swf (pro- nounced “swif”) and source (.fla) (pronounced “fla”) files in Hour 1, “Basics.” A .swf file is an exported Flash file. This is the actual file you call in the code of a web page. A .fla file is the file you create and edit. You cannot edit a .swf file as it is the finished file produced from your .fla file. The critical concept is that a source file is a .fla file, and that’s the file you need to keep. You can always export again to create a .swf from the .fla, but you can’t get an editable .fla from a .swf.
  20. 160 HOUR 8: Using Motion Tweens to Animate Following the Rules of a Motion Tween The previous task worked because the instructions carefully followed the rules of a motion tween: . You can’t have multiple objects in keyframes. . The one object you do have needs to be an instance of a symbol. Flash is unforgiving when you don’t follow these rules. The good news is Flash warns you when you try to break the rules for a motion tween. For example, if you try to draw a new circle in the first keyframe in the animation you just created, you aren’t allowed to, and in- stead you get a warning dialog. Give it a try, and see for yourself! Here’s another quick one to try: In a new file, create a symbol, and drag two in- stances of it into the same frame. Add a frame at 30, and then try adding a motion tween. It can’t be done, but Flash tries to help by offering to com- bine your two symbols into a new symbol for you. Motion Tweening Techniques and Tips You should feel proud of the circle you moved across the screen in the pre- ceding task. Flash did the work, but you set the beginning and ending frames and modified the motion path. As you’re about to see, Flash can tween between two frames, no matter how different they are from one an- other. Plus, there are some ways to make the process even easier for you. Tweening More Than Position Recall from Hour 4, “Staying Organized with the Library and Layers,” you learned that each instance on the Stage can be different from all the others, even if you have only one master symbol in the Library. Instances can be positioned in different locations, scaled to a variety of sizes, rotated in all directions, set with various color effects, and enhanced with special effects filters. Flash can tween changes in all these properties. Let’s try to tween more than just an instance’s position. The following task is an exercise to practice tweening. We’re not going for smoothness. We ad- dress smoothness in the “Fine-Tuning a Motion Tween” section, later in this hour.
Đồng bộ tài khoản