ptg Creating Frame-by-Frame Animation Introduction Flash provides several methods for creating animation. In addition to shape and motion tweening, you can create frame-by-frame animations. The frame-by-frame method is derived from the traditional animation process whereby the content is redrawn on each frame with slight differences from the last frame. When these frames are played in sequence, there is an illusion of movement. In Flash, you utilize keyframes in the Timeline to accomplish this. A keyframe defines a change to the artwork placed on the Stage. There are a number of ways to create and edit keyframes, as they are editable objects. Keyframes can be moved, copied, and pasted to and from any Timeline in your Flash movie or between different Flash documents. Frame-by-frame anima- tions can be previewed in the Flash development environ- ment so you can quickly see the results and check your work as you animate. They can also be viewed in the Flash Player using the Test Movie options. Additionally, there is an Onion Skin mode that allows you to see the active frame in context to the frames around it, making it easier to fine-tune keyframe changes. The versatility of the Timeline and the strength of the Flash Player allow you to implement animation in your movie and give it life. 7 7 What You’ll Do Understand Frame-by-Frame Animation Create Keyframes Convert Frames to Keyframes Use Frame-Based Versus Span- Based Selection Clear Keyframes Versus Removing Frames Edit Keyframes Create a Simple Frame-by-Frame Animation Play an Animation Use Onion Skinning Modify Onion Skin Markers Edit Multiple Frames 217 From the Library of Wow! eBook ptg 218 Chapter 7 Animation is the illusion of movement. It is comprised of a series of pictures, each slightly different from the last, that when played sequentially imply movement. Motion pic- tures work the same way. What you see when you view a film is a long strip of images played at specific intervals. In this way, the content in the pictures moves and seems to imitate real life. Traditional cell animators draw a picture onto a frame of celluloid and then draw the same thing onto the next frame but with slight changes made to the drawing. Static parts of the scene (such as a background) are copied and only the objects that change are redrawn. In this way the process is more effi- cient. The principles for animating in Flash have derived from this process. In Flash, you create frame-by-frame animations in the Timeline through the use of keyframes. Each keyframe defines a change on the Stage, and when played in succession, the content can seem to evolve, or move. When you export your movie, Flash will play these frames in succes- sion at specific intervals depending on the frame rate you set. A good introduction to this concept, as well as the basics of animation, is the dissection a character walk cycle. When human beings walk, they are essentially repeating the same motion over and over again. In an animated walk cycle, the same thing occurs, though instead of drawing the cycle over and over again, the motion is spaced out so that the last frame (the last image drawn) meets up with the first frame. If this animation is looped, the character will seem to walk perpetually. Understanding Frame-by-Frame Animation Static elements such as the sidewalk span across multiple frames. Keyframes define changes. Each frame displays a different part of the walk cycle. From the Library of Wow! eBook ptg Chapter 7 Creating Frame-by-Frame Animation 219 Frame 4 Frame 5 Frame 6 Frame 7 Frame 8 Frame 1 Frame 2 Frame 3 Frame-by-Frame Animation From the Library of Wow! eBook ptg 220 Chapter 7 When art is placed on the Stage, it appears in a keyframe in the Timeline. A keyframe is represented as a black-bounded box with a small circle in it. By default, each layer in the Timeline has a keyframe on its first frame. An empty keyframe displays an empty or hollow cir- cle, but when you place artwork or objects on the Stage, the bounding box becomes shaded and the small circle becomes a filled black dot. A keyframe can span multiple frames when there are no changes to the art. To make a change you create another keyframe. In this way, you can create animations or content that seems to move or change over time. Creating Keyframes Create a Keyframe Place art or an object on the Stage. Click on a frame later in the Timeline. Click the Insert menu, point to Timeline, and then click Keyframe. A new keyframe appears. TIMESAVER Press F6 to add a keyframe or Control+click (Mac) or right-click (Win) the selected frame, and then click Add Keyframe. 3 2 1 Empty keyframe appears as a hollow circle. When content is placed on the Stage, the hollow dot becomes a filled black dot. 2 New keyframe appears Framespan Did You Know? You can remove content from a keyframe. Select a filled keyframe in the Timeline or the art on the Stage contained in that keyframe, and then press the Delete (Mac) or Backspace (Win) key. From the Library of Wow! eBook ptg Chapter 7 Creating Frame-by-Frame Animation 221 Create a Blank Keyframe Click on a frame in the Timeline where you want to add a blank keyframe. IMPORTANT You can only add a blank keyframe to a frame without an existing keyframe (sometimes called an inactive frame or keyspan). Click the Insert menu, point to Timeline, and then click Blank Keyframe. TIMESAVER Press F7 to add a keyframe or Control+click (Mac) or right-click (Win) the selected frame, and then click Add Blank Keyframe. Increase the Keyframe Span Click anywhere in a keyframe span. ◆ To insert multi pl e ke yframes, select the number of frames you want. Click the Insert menu, point to Timeline, and then click Frame. Repeat until you've increased the framespan to the length you need. TIMESAVER Press F5 to add a frame or Control+click (Mac) or right-click (Win) the selected frame, and then click Insert Frame. 2 1 2 1 1 1 Blank keyframe appears A framespan increased by 10 frames Inserts one frame Did You Know? You can decrease the keyframe span. Press Shift+F5 for each frame you want to remove. From the Library of Wow! eBook ptg 222 Chapter 7 Any frame can be converted into a keyframe. As a time-saver, you can select a range of frames and convert them all into keyframes simulta- neously. This is useful when you have many frames to convert. It is also a good technique for fine-tuning shape and motion tweens. After the tween has been applied, you can convert the frames in the tweened span into keyframes and edit them independently. Converting Frames to Keyframes Convert Multiple Frames Into Keyframes Click on a frame, and then drag to select a frame span. Click the Modify menu, point to Timeline, and then click Convert To Keyframes. TIMESAVER Press Ctrl+click (Mac) or right-click (Win) the selected frames, and then click Convert To Keyframes or Press F6 after selecting all of the frames you want to convert. 2 1 1 Selected frames are converted into keyframes. Did You Know? You don't have to select a frame to add keyframes. If you place the playhead over a frame and add a keyframe or a blank keyframe, it appears without you having to select the actual frame. However, if you are working with multi- ple layers, Flash adds a keyframe to all layers at that frame if no frame is selected. From the Library of Wow! eBook ptg Chapter 7 Creating Frame-by-Frame Animation 223 Depending upon how you like to work, you can choose between two selection modes in Flash. The default mode is frame-based selection. In this mode, frames are treated as individual elements. When span- based selection is chosen, Flash treats frames as part of a frame span, which means all of the frames adjacent to a keyframe are selected as a unit. You can accomplish the same tasks in either mode and you can switch between the two depending upon the task at hand. Using Frame-Based Versus Span-Based Selection Set the Frame Selection Style Click the Flash (Mac) or Edit (Win) menu, and then click Preferences. If necessary, click the General category. Select the Span Based Selection check box to enable span-based selection or clear it to enable frame-based selection. Click OK. 4 3 2 1 3 Frame-based selection: Clicking once on a frame selects that frame Span-based selection: Clicking once on a frame selects the entire span 2 4 Did You Know? You can select a single frame in span- based mode. Press A+click (Mac) or Ctrl+click (Win) the frame. Likewise, to select a span of frames in frame-based mode, click the first or last frame in the span, and then drag until you've selected the entire span. From the Library of Wow! eBook . Frame-by-Frame Animation Introduction Flash provides several methods for creating animation. In addition to shape and motion tweening, you can create frame-by-frame animations. The frame-by-frame. Versus Span- Based Selection Clear Keyframes Versus Removing Frames Edit Keyframes Create a Simple Frame-by-Frame Animation Play an Animation Use Onion Skinning Modify Onion Skin Markers Edit Multiple. They can also be viewed in the Flash Player using the Test Movie options. Additionally, there is an Onion Skin mode that allows you to see the active frame in context to the frames around it,