Animate Your Images

You can create animations as layered images (PSD files) in Photoshop or ImageReady. You can save the finished animation as a GIF, which doesn’t require a browser add-in to display properly, a QuickTime movie, or as a Macromedia Flash™ animation (a SWF file). The latter two require browser add-ins.

Tip

You can download the free Flash player from Macromedia at http://macromedia.com. The Flash player is required to view Flash animations in web browsers and is included with most browser downloads. The free QuickTime player is available from Apple at http://www.apple.com/quicktime/. It is required to view QuickTime movies in web browsers.

Create an Animation

The Animation palette, shown in Figure 9-9, is used in conjunction with the Layers and Web Content palettes to create animations. To create an animation:

1. Create a new layered image in Photoshop or ImageReady.

2. Create a layer for the static elements—the elements that do not move in the animation.

3. Create layers for each frame of the moving elements. In each frame the position and/or shape of the moving object will change slightly.

4. Save the image as a PSD file; then open the image in ImageReady if it’s in Photoshop.

5. In the Layers palette, hide all the layers except the static elements and the first frame of the moving elements.

6. Click Window | Animation to open the Animation palette, if it’s not open; then click the Duplicate Animation Frame button.

7. In the Layers palette, hide the first frame of the moving objects, and make visible the next frame layer.

8. Repeat steps 6 and 7 for each frame in the animation, successively hiding and making visible each moving object layer.

9. Set the duration of time each frame will be displayed by clicking the Frame Delay Time button and selecting the delay from the menu. Selecting Other opens the Set Frame Delay dialog box, where you can set display times not available in the menu.

   

10. To set how many times the animation will run, click Looping Options. The Looping Options menu opens, and you can select Once, Forever, or Other. If you select Other, the Set Loop Count dialog box opens, and you can set the number of repeats you want.

    

    
    Figure 9-9: You use the Animation Palette to set options for your animation.

    Tip

    You can set the delay times for single frames or uniformly for a selected group of frames. To set the delay time for a selected group, click the first frame and then press shift while you click the last frame. Click the Frame Delay Time button in any selected frame to set the time for all the selected frames.

The creation of animations can be simplified by the use of tweening. Tweening creates intermediate frames in an animation. You create the start and end frames, and tweening creates the specified number of frames in between those frames; hence, the term tweening.

Tweening can be applied to single or contiguous frames:

• If applied to a single frame, you select whether to tween between it and the previous or following frame.

• If you select two contiguous frames, the tweened frames are placed between the selected frames.

• If you select more then two contiguous frames, the intermediate frames are modified.

• If you select the first and last frames, they are treated as contiguous. This is useful for smoothing animations that loop more than once.

1. In the Animation palette, select the frames to tween.

2. Click the Tween button to open the Tween dialog box.

   

3. Open the Tween dialog box, select the Tween With drop-down list, and click the frames to tween. If you selected a single frame, the options Next Frame and Previous Frame are available. If you selected more than one frame, only the Selected option is available.

   

4. Set the number of frames to create between the selected frames in the Frames To Add text box. This option is not available if you selected more than two frames. In that case only the selected frames are tweened.

5. Select a Layers option: All Layers to modify all the layers in the selected frames or Selected Layer to modify only the layers selected in the Layers dialog box. Static layers do not need to be modified by tweening, but you may have objects on multiple layers that do.

6. Click Parameters and select the layers tweening parameters:

   • Position varies the position of the objects evenly between the starting and ending frames.

   • Opacity varies the opacity of the objects evenly between the starting and ending frames. This is useful for making smooth fades.

   • Effects varies the layer effect parameters evenly between the starting and ending frames. For example, a drop shadow effect could be used to give the impression of a light source moving across the animation, changing the angle of the shadow.

7. Click OK to apply your settings.

View Animations

You can view animations in ImageReady or a web browser. In ImageReady:

1. Open the animation and the Animation palette.

2. Click the Play button. The animation runs in the document window.

   

3. While the animation is playing, the Play button changes to the Stop button. Click the Stop button to stop the animation.

   

To view the animation in a web browser, click the Preview In Browser button in the toolbox. The animation and generated HTML is shown in the browser, as shown in Figure 9-10.

Figure 9-10: When the animation runs in a browser, the HTML code is also displayed.

Optimize Animations

You should only optimize animations as GIF images—this is the only image format that supports animations. If you optimize an animation as a JPEG or PNG, only the current frame of the animation will be displayed. In addition to the optimization options available for all GIF images, with animations you can limit optimization to only the areas that change between frames, which greatly reduces the size of the final file. ImageReady also applies a special dithering algorithm to prevent flickering.

To display the Optimize Animation dialog box, open the Animation palette menu, and select Optimize Animation.

• Bounding Box crops each frame to the area that has changed from the preceding frame. This option is recommended because it makes for a smaller file, but it isn’t supported by all GIF editors. If your animations will be edited in other programs, you should determine if this feature is supported or turn it off.

• Redundant Pixel Removal makes all pixels that are unchanged from the previous frame transparent. This option is also recommended to reduce the final file size. This feature requires that the Transparency option in the Optimize palette be selected.

  

  

  

  Note

  Photoshop doesn’t support viewing animations. When you open an animation in Photoshop, only the layer last selected in ImageReady is visible. You cannot edit or save the animation in Photoshop, but you can save the animation as a layered image (PSD file). You can add layers in Photoshop, and the layers will be added to all the frames in the animation. However, the new layer will only appear in the selected frame when you reopen the animation in ImageReady. You can also change the order of the layers in Photoshop, and the new order will appear in ImageReady.

Save Animations

You can save an animation as an animated GIF, a QuickTime movie, or a Macromedia Flash (SWF) file. You can also save each frame of the animation as a separate file.

Saving an animation as a GIF is basically the same as saving any other GIF image. You first optimize the image and then save it.

To save an animation as a QuickTime movie:

1. Click File | Export | Original Document. The Export Original dialog box opens.

2. Open Save As Type, and click QuickTime Movie in the drop-down list.

3. Open Save In, select the location to save the file in the drop-down list, and type the name for the file in the File Name text box.

4. Click Save. The Compression Settings dialog box is displayed.

   

5. Select the graphic format from the drop-down list at the top of the dialog box. A number of standard video and graphic formats are available. The default, Photo-JPEG, will work in most situations. The remaining options vary based on the format selected here.

6. If the Depth drop-down list is displayed, use it to select the bit depth for the file.

7. If the Quality slider is displayed, use it to set the amount of compression for the file. Best creates the largest file and Least, the smallest.

8. If the Option button appears, click it to open a dialog box with options for the selected format. For Photo-JPEG, the only option is Optimize For Streaming. If you select this, you can also make the file RFC 2035 Compatible (a format for JPEG compressed video). Streaming video starts playing in a browser before the file has been completely downloaded and continues playing while the full file downloads in the background. The video will start playing in the minimum amount of time, enhancing the user experience.

   

9. Click OK to save the file.

   Note

   RFC stands for Request For Comments. When an Internet standard is proposed, the initial draft is released as a request for comments. Interested parties, such as manufacturers and industry groups, comment on the standard. Eventually the standard is finalized with the RFC number.

Create an SWF Animation

Macromedia Flash is one of the most popular formats for animations on the Web. ImageReady makes it very easy to create Flash animations (SWF files) that can be imported into Macromedia Flash or added to web pages.

1. Click File | Export | Macromedia Flash™ SWF.

   –Or–

   Click File | Export | Original Document. The Export Original dialog box opens. Open Save As Type, and select Macromedia Flash™ SWF from the drop-down list. Click Save. The Macromedia Flash™ (SWF) Export dialog box will open.

   

2. Select the Preserve Appearance check box to retain the appearance of text and shape layers that cannot be exported natively to the SWF file. ImageReady will rasterize (convert the text to a graphic) these objects to retain the appearance of the PSD file. These will be lost if this option isn’t selected.

3. Open the SWF Bgcolor drop-down list, and select a background color.. You can use the current Foreground and Background colors, any color from the current palette, or a color selected with the Color Picker.

4. Select the Generate HTML check box to generate the HTML needed to display the animation in a web page.

5. Select the Enable Dynamic Text check box to map PSD text to SWF dynamic text. SWF dynamic text is lost when the file in opened in Flash, so this option is only useful if the animation will only be on the Web.

6. If Enable Dynamic Text is selected, use the Embed Fonts drop-down list to set the text options. No characters will be embedded if you select None. Full Set embeds the entire character set. If you select Partial Set, you must choose which characters to embed:

   • All uppercase characters

     

   • All lowercase characters

     

   • All numbers

     

   • All punctuation

     

   1. Type other characters you want to embed in the Extra text box.

   2. Open Format and select the format for bitmap images from the drop-down list. Auto Select will choose the best format based on the number of colors. Lossless-8 will generate 8-bit images with no color loss. Lossless-32 will generate 32-bit images with no color loss. JPEG generates JPEG images.

   3. If you selected Auto Select or JPEG, open JPEG Quality and use the slider to set the amount of compression.

   4. Click OK. The Export As Macromedia™ SWF dialog box is displayed.

   5. Open Save In, and select the location for the file from the drop-down list, and type or select the file name in the File Name text box.

   6. Click Save.

Export Animation Frames as Files

You can export any or all of the frames of an animation as individual files.

1. Click File | Export | Animation Frames As Files. The Export Animation Frames As Files dialog box, shown in Figure 9-11, is opened.

   
   Figure 9-11: The Export Animation Frames As Files dialog box is used to set the options for saving animation frames as files.

2. Enter the base of the file name for each file in the Base Name text box. File names for each frame will use the base name as the first part of the full file name.

3. Click Set to open the Frame File Naming dialog box, which gives you a number of options for constructing a file name for each frame. An Example of the generated file name appears in the lower-left corner of the dialog box.

   

4. Click OK. The generated file name for the first image appears after the File Naming label.

5. Click Choose to open the Browse For Folder dialog box. Select the folder to save the files in, and click OK. The path to the folder is displayed after the Destination label.

   

6. Select the Selected Files Only check box if you want to save only the frames that are selected in the Animation palette.

7. Select the Preview check box if you want to preview the selected frames in the document window. When you select it, the Preview drop-down list beneath Save Options will be made available. Use the right and left arrows to scroll backwards and forward through the frames.

8. Select any of the remaining Format Options as needed. These are the same as in the Save For Web dialog box. If you have questions, refer to “Optimize Using the Save For Web Dialog Box.”

9. Click OK to save your animation frames as files.

   Note

   The number of frames in the resulting animation will be the same as the number of layers in the Photoshop file. The bottom layer of the file will be the first frame of the animation. Select Reverse Frames in the Animation palette menu if you want to reverse the order.

Import Files and Folders as Animations

ImageReady can import and edit many animation formats created in other programs. Along with PSD (Photoshop) and GIFs, you can import and edit MOV (QuickTime), AVI (Windows Media), and FLIC (several programs) files. You can also import folders containing bitmap images to use in animations.

To import Photoshop files as frames in ImageReady:

1. Open File and select Open. The Open dialog box is displayed.

2. Select the Photoshop file to open, and click OK.

3. Open the Animation palette menu, and select Make Frames From Layers.

To import a folder of files as frames in ImageReady:

1. Put only the files you want to be frames in the animation in the folder.

2. Click File | Import | Folder As Frames. The Browse For Folder dialog box opens.

3. Select the folder to import, and click OK. The files will be placed in the Animation palette as frames and in the Layers palette as layers.

To import MOV, AVI, and FLIC files for editing in ImageReady:

1. Open File, select Open, and then choose the file to open.

2. Click OK. The Open Movie dialog box is displayed.

   

3. Select the range of frames to import:

   • From Beginning To End to select all the frames.

   • Selected Range Only to import some of the frames. Select the frames to import by holding down shift and moving the slider or by clicking the previous and next arrows in the animation window.

     

   1. Select the Limit To Every check box, click Frame, and choose a value in the drop-down list to skip frames in the selected range.

   2. Click OK to import the selected frames.

      Note

      The files will be imported alphabetically. To ensure the files are placed as frames in the correct order, modify the file names if necessary. You can also reorganize the frames in the Animation palette after they are imported.