881 CHAPTER Animating Using the Animation (Frames) Panel IN THIS CHAPTER Getting to know the Animation (Frames) panel Tweening in the Animation (Frames) panel Creating frame-by-frame animation N ow that you are familiar with how the Animation (Timeline) panel works, I introduce you to the Animation (Frames) panel. The Animation (Frames) panel is very different from the Animation (Timeline) panel; it has a different look and feel and different features to go along with it. The Animation (Timeline) panel is made primarily for you to import video files and color correct, enhance, or create artistic effects with them. The Animation (Frames) panel is meant primarily to be used with the painting and drawing tools to create cartoon animations, primarily animated GIF files for the Web. An animated GIF is a small animated image or icon that you see almost anywhere on the Web. They are usually simple, such as the animated smiley faces, and operate at an extremely slow frame rate, giving their motion a jerky appearance. Although Frame animation has most of the capability of Animation (Timeline), you’ll find that its strength lies in creating short, crude animations, such as animated GIFs. Being able to see each frame without dragging the current time indicator around is very handy. Frame animation can get very unwieldy in a very few frames, however, as you’ll see when you begin to create animations in this chapter. Some of the other advantages of frame animation are being able to reverse frames or set the frame rate of each frame individually without too much effort. If you change an Animation (Timeline) to a Frame animation, however, you permanently lose some of the properties of the keyframes set in your Animation (Timeline). You must determine which animation method you want to use before you begin a project. 39_584743-ch28.indd 88139_584743-ch28.indd 881 5/3/10 10:58 AM5/3/10 10:58 AM Part VIII: Working with Video and Animation 882 You’ll find that the panels and menus of these two types of animation are completely different from one another. In this chapter, I introduce you to the Animation (Frames) panel and show you different methods of animating using this panel. Working in the Animation (Frames) Panel Before I show you how to create animations using the Animation (Frames) panel, let’s look at the features that distinguish the Animation (Frames) panel from the Animation (Timeline) panel. Panel features Just as the name implies, the Animation (Frames) panel is composed of thumbnails of each individual frame in your animation. This gives it an entirely different look than the Timeline, as shown in Figure 28.1. The look of the animation is not the only thing that’s changed; the panel itself has completely different options. Let’s look at what the differences are and why they are different. FIGURE 28.1 The Animation (Frames) panel Looping options Frame delay time Playback controls Duplicate selected frames Convert to Animation (timeline) panel Tweens animation frames Disposal method Animation (Frames) panel menu Frame delay time The frame delay time allows you to quickly set the time you want each frame to last. Click the arrow next to the time set, and select the number of seconds or fractions of seconds you want your frame to last. Click Other if you would like to set a time that is not specified. You can select one frame at a time and set different rates, or you can select all the frames to change the rates in all of them at the same time. When you add a new frame to the animation, it automatically retains the delay rate of the frame immediately before it. 39_584743-ch28.indd 88239_584743-ch28.indd 882 5/3/10 10:58 AM5/3/10 10:58 AM Chapter 28: Animating Using the Animation (Frames) Panel 883 Disposal method This icon doesn’t appear by default on the frame icons, but if you right-click one or more selected thumbnails, you are asked to choose a disposal method. Choosing Do Not Dispose or Dispose creates a different icon for each method of animation. A disposal method simply determines whether the current frame is disposed of as the next frame is displayed. There are three disposal options: l Automatic: This is the default option. This allows Photoshop to determine the disposal method for each frame automatically. The current frame is disposed of if the next frame contains layer transparency. When this option is selected, no icon appears in the frame thumbnail. l Do Not Dispose: This setting preserves the current frame as the next frame is brought into view. If any part of the frame is transparent, the preceding frames show through. l Dispose: This option disposes of the frame as the next frame is displayed, preserving the transparency of the current frame. Looping options Setting the looping option simply decides how many times your animation plays without stopping. Click the Looping Options icon to open a drop-down menu, and select Once, 3 times, Forever, or Other. If you select Other, a dialog box opens allowing you to specify the number of times you want the animation to loop. Tweens animation frames icon There are no keyframes in the Animation (Frames) panel, but you can still take advantage of tweening. Tweening is the process of creating frames between two frames with different properties, making the change gradual over several frames. When you have enough frames, you give the change the illusion of true motion. Although the Animation (Frames) panel has no layer properties, the properties that can be animated in the Timeline are the same properties that can be tweened in the Animation (Frames) panel. These properties are position, opacity, and style. To create tweening frames, select one or two frames in the panel and click the Tweens Animation Frames icon, shown in Figure 28.2. The Tween dialog box, shown in Figure 28.3, opens, allowing you to set options for the Tweening. FIGURE 28.2 Select one or two frames to tween. 39_584743-ch28.indd 88339_584743-ch28.indd 883 5/3/10 10:58 AM5/3/10 10:58 AM Part VIII: Working with Video and Animation 884 FIGURE 28.3 The Tween dialog box Tween with The first option available in the Tween dialog box is the Tween With drop-down menu that allows you to set which frames you are going to tween: l Selection: If you’ve selected the two frames that you want to tween, this option is the default in the menu. If you don’t have two frames selected, this option isn’t highlighted. l First Frame: This option can be chosen only if you have selected the last frame in the animation. If you select First, Photoshop tweens between the last frame and the first frame of the animation, creating a seamless loop. l Last Frame: This option is available only if you have the first frame of the animation selected. Just like the last option, this creates tweening from the last frame to the first. l Previous Frame: This creates tweening between the selected frame and the preceding frame. l Next Frame: This creates tweening between the selected frame and the next frame. Frames to add The next option in the Tween dialog box is simply how many frames you want to have created between the frames you are tweening. You should take into account how long your frame rate is and the complexity of the difference in the frames you want to tween. Layers Next in the Tween dialog box, you can set the layers that will be affected by the tween. Select All Layers if you would like to animate all the layers within the file, or choose Selected Layers to confine the tweening to layers you have selected. In Figure 28.2, I am animating the sun as well as the drop-shadow of the boy, so I choose All Layers. 39_584743-ch28.indd 88439_584743-ch28.indd 884 5/3/10 10:58 AM5/3/10 10:58 AM Chapter 28: Animating Using the Animation (Frames) Panel 885 Parameters The Parameters setting is reminiscent of the animation properties in the Animation (Timeline) panel, where you can decide whether to tween all changes in position, opacity, and style or if you want to tween only one or two of these parameters. Choosing a parameter is the equivalent of using linear keyframes in an interpolation, whereas deselecting a parameter is like creating a hold keyframe. After you set the Tweening Options, click OK. The frames you have specified are created, as shown in Figure 28.4. FIGURE 28.4 Just like setting keyframes, tweening creates a smooth transition from one frame to another by applying the change over a series of frames. Notice that there is only a very slight amount of change in the first ten frames of the transition. Duplicating selected frames Click the Duplicates Selected Frames icon on the bottom of the Animation (Frames) panel, and all the frames you have selected at the time are copied and pasted directly behind the last frame selected. This is a quick and easy way to duplicate the last frame and then make changes to it. Convert to Animation (Timeline) With this handy icon, you can toggle back and forth between the Animation (Frames) panel and the Animation (Timeline) panel. This should be done before you start working with your animation. Moving from the Animation (Timeline) panel causes some of the properties—keyframes in particular—to be lost. Toggling back to the Animation (Timeline) panel does not restore the lost properties. It’s best to decide which animation panel you want to work in before opening or creating a new document, and stick to that decision. The Animation (Frames) panel menu Click the menu icon to activate the flyout menu for the Animation (Frames) panel. It is very different from the Animation (Timeline) menu, so I introduce you to the different options in the next section. 39_584743-ch28.indd 88539_584743-ch28.indd 885 5/3/10 10:58 AM5/3/10 10:58 AM Part VIII: Working with Video and Animation 886 Animation (Frames) panel menu Just in case you hadn’t noticed yet, the Animation (Frames) panel menu lets you know that you are not working with the same tools as the Animation (Timeline) panel. As shown in Figure 28.5, the menus not only look different, but they have completely different options. FIGURE 28.5 Comparing the Animation (Frames) panel menu with the Animation (Timeline) panel menu These differences highlight the features of each panel and reasons why each panel can perform equally important but different functions. I define the features found on the Animation (Frames) panel here. Many of these options are self-explanatory, but a few may be new concepts. If you find that a short definition isn’t enough, don’t worry, You’ll see more on these features later on in this chapter: l New Frame: This creates a frame at the end of the animation. This frame is a duplicate of the last frame in the animation. l Delete Frame: This deletes any selected frames. l Delete Animation: This deletes all frames except the first, leaving an image rather than an animation. l Copy Frame: This copies selected frames. l Paste Frame: This pastes copied frames. You can choose four options for pasting a frame: l Replace Frames: This replaces all selected frames and their accompanying layers with the copied frames. 39_584743-ch28.indd 88639_584743-ch28.indd 886 5/3/10 10:58 AM5/3/10 10:58 AM . to know the Animation (Frames) panel Tweening in the Animation (Frames) panel Creating frame -by- frame animation N ow that you are familiar with how the Animation (Timeline) panel works, I. begin a project. 39_584743-ch28.indd 88139_584743-ch28.indd 881 5/3/10 10:58 AM5/3/10 10:58 AM Part VIII: Working with Video and Animation 882 You’ll find that the panels and menus of these two. 28: Animating Using the Animation (Frames) Panel 883 Disposal method This icon doesn’t appear by default on the frame icons, but if you right-click one or more selected thumbnails, you are