Animations

As soon as we say animation, most people think Flash. But there are more options for creating web animation than just Flash movies for example, GIF animations and QuickTime movies.

This section shows you how to use your arsenal of applications to create more animated fun.

Creating GIF Animations

Years ago, the only format web designers used for animations was GIF. Web banner ads were exclusively GIF animations. But GIF animations have fallen out of favor. Consider the fact that the same content in a five-second GIF animation can run as long as 30 seconds in a Flash movie of the same file size. And the Flash movie can contain sounds and much more sophisticated animations. However, there are web sites that require GIF animations, rather than Flash movies. So it is important to be able to create GIF animations.

Both Photoshop and ImageReady create GIF animations. Choose Window > Animations to open the Animation palette (Figure 17-17). Each frame of the palette becomes another frame in the animation. You can move objects on layers to have them move from one animation frame to another. You can also select two frames in the Animation and use the Tween command to generate intermediate frames that create the steps between the two original frames.

Figure 17-17. Animation palette (top) and Layers palette with frame controls visible (bottom).

As you work with the Animation palette you'll see additional features appear in the Layers palette Unify and Propagate Frame 1 that you don't see when you're working with "static" images (Figure 17-17). These controls allow you to create layer attributes and then apply them to just one frame in your animation or to all of the frames that follow it.

The Unify feature offers three options:

• Layer position sets the position of the image on the layer.

• Layer visibility controls the on/off visibility of the image on the layer. This visibility does not relate to the opacity of the layer.

• Layer style controls any style applied to the layer.

The Propagate Frame 1 feature allows you to automatically apply any changes to the first frame to the rest of the animation. If you don't want the changes in frame 1 to be applied to the rest of the frames, deselect this option. This command is available only for the first frame of an animation. If you want the changes on a different frame to propagate to the rest of the frames, you can use the Unify controls or move that frame to the first frame position.

Saving GIF Animations

Once you've created the frames, it is rather simple to export the file as a GIF animation. Just choose GIF in the Save For Web dialog box (Photoshop) or the Optimized palette (ImageReady). There's no need to specify anything special. The mere presence of the frames in the file is all you need to create the GIF animation.

Converting QuickTime Movies in ImageReady

This is one of those really esoteric features that few people know. You can use ImageReady to open a QuickTime movie and convert the QuickTime frames into animation frames. Sandee uses this technique when she wants to quickly take a series of screen shots when teaching an application. It's also a good tool for ad agencies that need to convert movies into storyboards or keyframes for print ads.

Use a screen capture program, such as SnapzPro X (Mac) or SnagIt (Windows), to record what you're working on as a QuickTime movie. (In Sandee's case, that would be capturing all the dialog boxes and menus as she goes through a procedure.) Then, use ImageReady to open the QuickTime file. The frames from the movie appear in the Animation palette. Even better, each frame appears on its own layer.

Rather than manually exporting each layer as its own file, you can click the Edit in Photoshop button in the Tools palette. This moves the file from ImageReady into Photoshop. This means you can use the File > Scripts > Export Layers To Files command to quickly generate as many individual Photoshop documents as you want.

This technique can be used on any type of QuickTime movie.