Learning Flash CS4 Professional phần 4 ppsx

Project Progress Chapter 4, Importing Graphics 93 As you saw when importing the logo, when importing directly to the Stage, two options help control placement of assets. You can change the size of the Stage to match the dimensions of the Illustrator document, and you can place the imported assets at their original positions in the Illustrator document, relative to the upper-left corner of the Stage. However, when importing into a movie clip, these options are not available. This behavior mimics the process of importing to the Library instead of the Stage, where position is not relevant. Unfortunately, you want to automatically position the elements in your movie clip, too. You’re importing into a movie clip because you’ve prepared your workflow to ease asset integration in the future. When the time comes, you will transfer the Lab movie clip to the main project FLA, and your prep work will really pay off. There are a few ways to work around the issue. First, you can import directly to the Stage and then create a new movie clip once the import is complete. In this case, you will need to manually adjust the location of the assets after the movie clip is created because the movie clip registration point will not be (0, 0). This will make transferring the movie clip to your main file more trouble- some later on, so it is not ideal. A better approach is to continue to use the content movie clip in your template. Import to the Stage, copy the newly imported assets to the clipboard, open the content movie clip, and then Paste in Place (Edit→Paste in Place) to preserve their prior locations. Because the registration point of your content movie clip is also (0, 0), the assets will be right where you want them. This is the approach you should use when confronted with a similar situation without control over your imported assets. However, there’s another trick that continues your workflow optimization by preparing for this issue while still in Illustrator. By simply adding a placeholder asset in the upper-left corner of your matching-size Illustrator document, the placeholder will correspond to point (0, 0) after import and all the assets will be correctly positioned. This trick has been used in the furnished source files, and all you need to do is remove the placeholder asset: Create a new file using your 1. Content template and double-click the content movie clip to prepare for importing. Create a new layer and delete the placeholder layer. Your movie clip 2. should now have only one layer with nothing in it. Select the frame in that layer and import (File3. →Import→Import to Stage) the provided source file qwerty.ai. All the work you would have put into the Import dialog has been done for 4. you in Illustrator, so just click OK to continue with the import. Once the import is complete, the assets will be correctly positioned and 5. you will see a small pink square in the upper-left corner. Look at the NOTE Remember, importing AI files is nearly identical to importing PSD files, so you can easily experiment with the process using your own files. Rather than focus- ing on that process again, this portion of the exercise focuses on workflow and collaboration between Illustrator and Flash users. Learning Flash CS4 Professional 94 Project Progress Timeline panel and you will see a layer at the top of the Timeline called placeholder. Delete this layer, and you’re done. Save your file as 6. lab_page.fla and compare it to the provided source file, lab_page_final.fla. Figure 4-24 shows the finished movie clip after removing the placeholder layer. Poke around and see that the braces, letters, and the tabbed card at the bottom of the screen are all movie clips. Double-click the tabbed card and look inside to find a group. Grouping elements in Illustrator helps preserve their relative locations during the import process. Break this group apart (Edit→Break Apart), and you’ll find that the text field already has an instance name. This is ready to program with ActionScript, which you’ll do in Chapter 6. The Lab movie clip after importing into Flash from Adobe IllustratorFigure 4-24. The Project Continues In the next chapter, the heavy lifting begins. You’ll position all the UI elements, apply some Timeline animations to introduce the portfolio when it loads, and add the content you’ve created to date. 95 5 CHAPTER Introduction For many users, animation is the cornerstone of Flash. Sure, there are large groups of users who choose Flash over other tools because of its video capabilities, or for use as an application development tool, or even to learn programming in a fun, visual way. A big part of the Flash user base, however, employs the application as the main tool, if not the exclusive tool, for animation. For years, animators have used Flash to further web-based storytelling, pro- duce content for animated television shows, and even contribute to feature films. In some ways, it’s easy to see why Flash is a boon for animators. Using Flash, artists no longer have to draw every single frame of an animation by hand. Instead, animators can draw a few key poses by hand or build charac- ters from many smaller posable parts, and then let the computer fill in the frames between poses. This process is called tweening because the computer calculates the frames between each pose. Of course, Flash is not a wholesale substitute for hand-drawn animations. Highly expressive poses or sequences with rapidly changing poses still require a lot of manual illustrations. Even in these situations, however, Flash can lend a hand with backgrounds, transitions, and other elements that aren’t the primary focus of attention. Deciding when to use Flash in your animations will usually be a matter of choosing the best tool for the job. In this chapter, you’ll learn how to create animations using a variety of techniques ranging from the Flash equivalent of traditional cel animation to the simple motion of symbols, and to morphing between shapes. Along the way you’ll learn more about the Timeline and frame types, how to animate gradi- ent and bitmap fills, how to use Flash CS4 Professional’s new Motion Editor, and much more. This chapter will focus exclusively on interface-driven animations, and the next chapter will introduce some ActionScript basics for controlling animation with code. By the time you have finished reading these two chapters, you will probably recognize which kinds of animations Flash is most suited to create. Ideally, your animation tasks will be conquered more  anImatIon IN THIS CHAPTER Introduction Knowing the Timeline Creating Frame-by-Frame Animations Creating a Shape Tween Adding a Layer Mask Creating a Motion Tween Using Motion Presets Copying Motion Using The Motion Editor Panel Easing Creating a Classic Tween Project Progress Learning Flash CS4 Professional 96 Knowing the Timeline often than not with a big computer assist, leaving you more quality time to spend on fewer hand-drawn sequences. Knowing the Timeline The single most important step in conquering noncoded animation in Flash is gaining an understanding of the Flash Timeline panel (Figure 5-1). Prior to Flash CS4 Professional, the Timeline panel was the primary interface element for all things animated. You’ll learn later in this chapter that Flash CS4 Professional introduces a new tool for manipulating animations, the Motion Editor, but even when you’re using this new tool, animations must originate in the Timeline panel. classic motion guide classic tween normal layer motion tween layer folder mask shape tween empty keyframe occupied keyframe property keyframe end of frame span show/ hide new layer new folder go to playhead onion skin onion sk. outlines edit multiple frames mod. onion sk. markers frame frames per sec secs delete folder lock/ unlock show outlines The Timeline panel, displaying Figure 5-1. examples of many major Timeline features Layers Figure 5-1 shows an example file viewed in the Timeline panel. This example uses many of the animation tools that will be explained in this chapter. As described in Chapter 1, there are two primary ways to organize assets in a Timeline: by vertical stacking order (layers) and by time (frames). Horizontal spatial arrangement in a single frame is determined simply by where you place your assets on the Stage. You can set vertical stacking of over- lapping assets by arranging them in a single frame and by bringing an asset forward or sending it backward (using Modify→Arrange) when they overlap. Knowing the Timeline Chapter 5, Animation 97 However, to animate objects in the Timeline panel, you place assets into dis- crete layers so that only the desired asset is included in the animation. This visual stacking arrangement will be familiar to users of Adobe Illustrator and Adobe Photoshop. There are several layer types, not the least of which are the normal layer and guide layer discussed in Chapter 1. Normal layers have no unique func- tionality, and guide layers display content only during authoring (guide layers are excluded when SWFs are compiled). You can also organize layers into layer folders. This is handy when files have a large number of layers, because you can collapse the folder using the arrow to the left of the folder icon and hide all the layers therein. While they are not specifically reserved layer types, two kinds of tweens reside in their own layers. Shape tweens are typically used to morph shapes, and classic tweens (formerly called motion tweens) are legacy animation types used to animate symbols, such as movie clips. The Flash CS4 Professional upgrade for the classic tween retains the name motion tween and has become a dedicated layer type. You will learn how to create both kinds of motion tweens in this chapter and even use both techniques in your ongoing portfolio project. You can use a special kind of guide layer, called a classic motion guide, with classic tweens. Classic motion guide layers allow you to draw a path for an associated classic tween for the animated asset to follow. At the top of Figure 5-1, you can see the name and icon of the classic tween layer icon indented below the name and icon of the classic motion guide layer. This indicates a relationship between the two layers, and the guide is partially controlling the location of the asset in the classic tween. For now, the final unique layer types you’ll learn about are the mask and masked layers. A mask layer can be used to show only select content from an underlying masked layer. At the bottom of Figure 5-1, you will notice another pair of associated layers. This time the name and icon of a masked layer—in this case, a shape tween—are indented below a mask layer. There are three buttons beneath the layer icons and names in Figure 5-1. From left to right, these buttons let you create a new layer, create a layer folder, or delete a selected layer. To the right of the layer icons and names are three columns. Clicking in these columns in a layer of interest will, from left to right, show or hide the layer’s contents, lock layers to prevent further edits, and display all layer contents as colored outlines. For example, the red x indicates that the sections layer is hidden, the locks show that the mask and shape tween layers are locked, and the purple outline box indicates that the classic tween layer is displaying its contents in purple outlines. NOTE In Chapter 10, you’ll learn about a brand- new layer type, called an armature layer, which contains inverse kinematics (IK) armatures. IK is an animation tool that lets you join objects together with bones and joints like a skeleton or robotic arm. NOTE You can use the show/hide option to control the parts that are compiled into a SWF. If you disable Include hidden layers in the Flash section of the File→Publish Settings dialog, hidden layers will be excluded from your SWF. Use this feature to hide assets, prevent scripts from executing, or speed up compiling by excluding sounds. Learning Flash CS4 Professional 98 Knowing the Timeline Frames The right half of Figure 5-1 is composed of the frames that make up the FLA’s Timeline, much like the frames of a film, with each showing only the content of a single frame of the total animation to the viewer at a time. Chapter 1 outlines the principle differences between keyframes and computer interpolated frames, but, as animation techniques add complexity, a broader overview is in order. An ordinary frame is a frame in which no change occurs. Such frames might be empty or they may contain static, or unchanging, content. Within the Timeline panel, ordinary frames have no visual appearance other than a gray tint if the frame contains content. In Figure 5-1, for example, frame 18 of the sections layer (directly under the red playhead) is an empty frame, and frame 5 of the sections layer is an ordinary frame with static content. A keyframe is a frame that contains animator-defined change. By defini- tion, the first frame of every frame span is a keyframe, whether it contains content or not, because the animator has chosen to isolate that frame from its previous frame. Traditional keyframes are marked with a circle. An empty circle represents an empty keyframe (frame 15 of the sections layer in Figure 5-1), while a filled black circle marks a keyframe that contains content (frame 1 of the same layer). A filled black diamond marks the new property keyframe, which is part of the new motion tween format. You’ll learn more about property keyframes when you read about motion tweens, but you can see property keyframe icons in frames 10 and 20 of the motion tween layer. An interpolated frame is a frame in which content properties have been altered by the computer. Varying color tints indicate interpolated frames, depending on which kind of tween is at work. For example, frame 5 of the shape tween layer is tinted green to indicate that a shape is likely morphing from its original appearance in frame 1 to its final appearance in frame 23. Frame 5 of the motion tween layer is tinted light blue to show that it is part of the new Flash CS4 Professional motion tween. A movie clip in this layer may be moving between three positions set in frames 1, 10, and 20. Finally, frame 5 of the classic tween layer is tinted a purplish blue to show its inclu- sion in a legacy style motion tween. This layer may be tweening another property, such as scale, for example, between sizes set in frames 1, 10, and 23. Finally, although not a keyframe, the end of a frame span is marked by a vertical rectangle. This serves no other purpose than as a visual indicator that an ordinary frame span has ended. Frames 14 and 23 of the sections layer mark the end of content-filled and empty frame spans, respectively. NOTE When a frame contains content, creating a new keyframe is usually based on the need to change a property of the frame’s content (such as its location) or even replace the content altogether. However, it’s also sometimes useful to add empty keyframes to a layer. For example, an empty keyframe can remove content from a layer only after a specific frame, or even serve as a visual cue to divide a Timeline into easily noticeable segments. NOTE You cannot edit content in interpolated frames of shape tweens and classic tweens. You must create a keyframe to make any changes. Properties of content in new motion tweens, however, can be changed without first creating a keyframe. A property keyframe will automatically be created for you. Knowing the Timeline Chapter 5, Animation 99 Adding and removing frames Prior to adding frames, the Timeline panel is restricted to working only with frame 1. You can’t even move the playhead through the Timeline panel beyond the last frame. Although you can draw static illustrations in a single frame or control animations with ActionScript, Timeline-based animations require a minimum of two frames. To add frames to a single layer, click in the layer where you want to insert the frame and press F5 (Insert→Timeline→Frame), shown in Figure 5-2a. If you click in an existing frame, a frame will be added at that point. If you click beyond all existing frames, additional frames will be added up to that point. For example, if you start with a new empty file containing only frame 1, and want the Timeline to contain 20 frames, click in frame 20 and press F5. The process is similar for adding frames to more than one layer of the Timeline at once. Instead of clicking once in a single frame, drag through all the layers in which you will insert frames (Figure 5-2b). To insert new frames between existing frames in all layers, click in the number span atop the Timeline to position the playhead. By not clicking in a specific layer, frames will be added to all layers at the position of the playhead (Figure 5-2c). This technique will only work within existing frame spans, however, because the playhead can’t move past the last frame in the Timeline. Finally, to remove frames, select the frames you want to remove (by dragging your mouse over them or Shift-+clicking the first and last frames) and press Shift-+F5 (Edit→Timeline→Remove Frames). WARNING Removing frames will literally remove the frames, not the contents of the frames, and will shorten the entire frame span. If you only want to remove the contents of a frame, click once to select the frame span in question and delete. If you want to remove the contents from a segment of a frame span, insert keyframes at the start and end of the segment so you can then delete only that portion of the content. Creating and clearing keyframes Creating and clearing keyframes is similar to adding and removing frames. Select the frame that you want to convert to a keyframe and press F6 (Insert→Timeline→Keyframe). To end a frame span by inserting a keyframe and deleting its contents, there’s a more direct process: create an empty keyframe by using F7 (Insert→Timeline→Blank Keyframe) instead of F6. To convert a keyframe back to a normal frame, select the keyframe and press Shift+F6 (Modify→Timeline→Clear Keyframe). Select (a) (b) (c) Add (F5) Adding frames to one layer (a), Figure 5-2. select layers (b), and all layers(c) Learning Flash CS4 Professional 100 Creating Frame-by-Frame Animations Frame Editing Controls Below the frames, in the bottom of the Timeline panel shown in Figure 5-1, is a series of frame editing controls. The first button will scroll the Timeline panel to center the frame in which the playhead currently resides. The next two buttons will turn on onion skin preview and show the onion skin frames in outline view. Onion skin preview allows you to display frames to the left and/or right of the current frame in a muted image or outline, depending on your setting (Figure 5-3). The additional frames are rendered right on the Stage, showing the current frame in the context of its surrounding frames. This feature gets its name from the translucency of onion skin. The more layers of onion skin you must look through, the harder it is to see the content. Therefore, the frames farthest from the playhead are the least opaque. The onion skin feature is discussed further in Chapter 10 when working with inverse kinematics armatures. The next control allows you to edit multiple frames at once and will be explained in greater detail later in this chapter. The final button offers a quick setting to modify the onion and edit multiple markers that appear on top of the frame numbers. These markers change the number of frames that appear to the left and right of the playhead when using the onion skin or edit multiple frames features. You can manually drag the markers to show any number of frames, but this quick menu will show two, five, or all the frames surrounding the playhead. It also allows you to anchor the visible frames (even when you move the playhead) and show the markers all the time, even when the features are not in use. The three editable values that conclude the array of controls are the current playhead position measured in frames, the frame rate (the speed at which the playhead moves through frames) measured in seconds, and the current playhead position measured in seconds. The playhead in Figure 5-1 is in frame 18 and the frame rate of the file is 24 frames per second, so the playhead is resting at 0.7 seconds of elapsed playback time. Creating Frame-by-Frame Animations If you plan to create very stylistic animations with many unique art elements, it’s likely that you won’t be able to rely too heavily on tweening for assistance. In this scenario, you’ll have to start from the beginning and use the time-tested technique of frame-by-frame animation. There’s nothing very special or difficult about frame-by-frame animation beyond the care and attention it requires. The method literally entails creating Onion skinning enabled, Figure 5-3. showing two frames behind and two frames ahead of the current frame WARNING Animation speed is often affected by many factors of the end user’s computer setup. These include processor speed, available RAM, other running applications, and even which tasks are being performed in Flash at any given moment. As such, don’t rely too heavily on a frame-to-time correlation, especially when trying to synchronize Creating Frame-by-Frame Animations Chapter 5, Animation 101 a keyframe in every frame and drawing or manipulating each frame’s artwork manually. Figure 5-4 shows a layer with keyframes in every frame. While this is the most straightforward of all animation techniques, there are a few tips and features that can make the process easier. For example, you should create keyframes as you go, rather than all at once at the outset of your effort. That is, avoid selecting a long span of frames and pressing F6 to create individual keyframes from the span. True, this is a quick process. However, if you add one keyframe at a time, each new frame will duplicate the previous frame. This allows you to adjust each new frame based on the prior frame’s appearance, rather than starting from scratch. Additional features can provide big animation assists. Editing multiple frames, copying and pasting frames, swapping symbols, and the aforementioned onion skin option not only improve frame-by-frame animations, but can be used with other animation techniques as well. Editing Multiple Frames In some cases, particularly when working with a sequence of several keyframes, you face the prospect of having to edit many frames. For example, assume you are working on a frame-by-frame animation and later decide that you want to move the art in every other frame down a bit on the stage. This would ordinarily require you to move the playhead to every other frame and repeatedly select the frame’s contents and make the adjustments. What’s more, you would have little context from the surrounding frames during the editing process. Fortunately, the Edit Multiple Frames feature allows you to work in as many keyframes as you like, not only making it possible to edit the frames’ content, but also to see each frame on the Stage at the same time. To do this, click the Edit Multiple Frames button at the bottom of the Timeline. Brackets will appear to the left and right of the playhead. You can drag these brackets to set the number of editable frames to the left and right of the playhead. Thereafter, you can work in any of the included frames. The top of Figure 5-5 shows the feature enabled at the bottom of the Timeline panel detail (the button just to the right of the playhead, under frame 8, is pushed in, meaning the feature is active). The editable frames are set to two to the left and two to the right of the playhead. The selected movie clips on the Stage at the bottom of the figure, as well as the highlighted frames in the Timeline, show that content in frames 5, 7, and 9 are selected. They have been moved down 10 pixels, creating the desired effect. Copying and Pasting Frames In addition to copying and pasting content from a single frame, it is also possible to cut, copy, and paste the frames in their entirety. Doing so will preserve the frames’ contents, but also keyframes, tweens, layer properties, and more. Keyframes in every frame Figure 5-4. allow precise manipulation of frame-by- frame animations The Edit Multiple Frames Figure 5-5. feature allows simultaneous editing of more than one frame at a time—in this case, the two frames on either side of the current frame Learning Flash CS4 Professional 102 Creating Frame-by-Frame Animations For example, if you selected five frames and used the standard Copy feature, you would only copy the content from the current frame—the frame in which the playhead resides. However, if you selected those same five frames and used the Copy Frames feature, you could then paste five frames with all their content and attributes intact. You can access the Copy Frames command through the application menu (Edit→Timeline→Copy Frames) or by right-clicking (Windows) or Control- clicking (Mac) the selection (Figure 5-6). You can then paste frames using the Paste Frames option found in the same menus. This is really handy when you realize, after a lot of hard work, that you want all the animations you finished in the main Timeline to be in a movie clip instead. In that case, you can copy (or cut, if you prefer) all the frames, create a movie clip, double-click to edit that movie clip, and then paste all the frames into the movie clip. All of the layers, frames, and contents will be recreated inside the movie clip. Copying and pasting frames is also convenient when you want to create an animation of repeating frames. The only tricky part of the process is when you want to replace frames with a paste. In the aforementioned examples, you are likely creating frames where none previously existed, such as when adding content to an empty movie clip. However, if you need to overwrite existing frames, you must first select the frames you want to replace. If you fail to do this, you will be adding to the existing frames, rather than replacing them, and your frame span will grow, possibly affecting frame synchronization later on. Figure 5-7 shows the steps required to replace frames with a paste. The first step, (a), is to select the desired frames by dragging over them with your mouse and copying them. The next step, (b), is to select the frames you wish to overwrite using the same selection procedure. The final step, (c), is to paste the frames into the selection. (a) (b) (c) Copying and pasting frames to repeat a frame sequence; (a) select four frames Figure 5-7. and use the Copy Frames feature, (b) select frames to be replaced, and (c) use Paste Frames Swap Symbols When using symbols in animations, it can be very convenient to automatically replace a symbol without otherwise affecting animation properties. For example, if you had to replace a symbol by deleting it and adding a new Using the Copy Frames feature Figure 5-6. instead of the traditional Copy feature [...]... tween, with an abrupt change at frame 4 110 Learning Flash CS4 Professional Creating a Motion Tween Figure 5-26 Irregular motion caused by the same amount of distance traveled in differing numbers of frames A new Flash CS4 feature called roving keyframes solves this problem Roving keyframes are specific to motion paths and are not linked to frames in the Timeline Flash will disassociate roving keyframes... automatically added for you! When a frame span doesn’t already exist to convert to a motion tween, Flash will add one second’s 112 Learning Flash CS4 Professional Using Motion Presets worth of frames for the motion tween to occupy So, if your frame rate is the default 24 frames per second, you will end up with 24 frames 4 Move the playhead to frame 1 and select the movie clip Choose Alpha from the Color Effect... descriptions and the steps may be more obvious It may also help to see the portfolio in action at the companion website, http://www.LearningFlashCS4.com, before proceeding Chapter 5, Animation 125 Project Progress 3 9 13 4 2 1 14 5 6 12 7 10 8 11 15 16 17 18 Figure 5 -47 A step-by-step illustration of navigating between sections of the portfolio project At first launch, the viewing wheel fades in over... behaves just like a regular stroke Figure 5-22 shows a motion path being dragged into an arc using the Selection tool and Flash s natural drawing techniques You can grab a motion path anywhere along its length and distort it just as you would any other line 108 Learning Flash CS4 Professional Creating a Motion Tween Figure 5-22 Dragging a straight motion path into an arc with the Selection tool The... manipulating curves—both of which you’ll learn how to do in a moment—require the Motion Editor panel Figure 5-32 The Motion Editor panel, showing changes in the x and y properties of the tween 1 14 Learning Flash CS4 Professional Using the Motion Editor Panel Think of the Motion Editor panel as a combination of the Timeline and Properties panels with a little Pen tool thrown in for good measure If you have... shows the x position offstage to the left in negative territory Figure 5-35 More Motion Editor graphs of x property change over 24 frames, with a property keyframe at frame 12; 0 to 300 to 300 (top), 0 to 300 to 0 (middle), 300 to –300 to 300 (bottom) 116 Learning Flash CS4 Professional In addition to working directly with keyframes, you can edit the curve to edit the animation as a whole, including... different values Unfortunately, it’s not currently possible to 120 Learning Flash CS4 Professional Easing rename any ease setting, even the custom settings you create, so you’re stuck with remembering which setting is which by number After you have created the curve and set its strength, you can apply the setting to a property Figure 5 -40 shows the custom ease curve created in Figure 5-39 being applied... panel 122 Learning Flash CS4 Professional Creating a Classic Tween Once you’ve had some experience with the differences between easing in and out, try to add another classic motion tween sequence, perhaps by practicing the Copy and Paste Frames processes discussed earlier in this chapter Save a copy of your basic classic tween file first, as you’ll want to work with the simple version when learning. .. start of the path you drew, until it snaps into place 7 Select the last keyframe and drag the movie clip in that frame until it snaps to the end of the motion guide to complete the process 1 24 Learning Flash CS4 Professional Project Progress If you scrub through your Timeline, you’ll see that the movie clip now follows the path you drew Compare your work to the classic_tween_motion_guide.fla source... clearly look like morphs For example, you can also use them for transitions, as when covering up content with a shape that matches the Stage color, or for animating the look of drawing lines 1 04 Learning Flash CS4 Professional Creating a Shape Tween Shape Hints If you look carefully at the shape tween in Figure 5-12, the square appears to rotate as it changes into a circle However, the shape is not really . exercise focuses on workflow and collaboration between Illustrator and Flash users. Learning Flash CS4 Professional 94 Project Progress Timeline panel and you will see a layer at the top of. panel Learning Flash CS4 Professional 1 04 Creating a Shape Tween will morph a square into a circle. To create a shape tween, you need two keyframes, each containing a shape. To try this in Flash, . drawing method. Figure 5- 24 shows just such a stroke. Learning Flash CS4 Professional 110 Creating a Motion Tween A standard stroke drawn in a tapering sine wave shapeFigure 5- 24. Once the path is