Animated Slide Show

Display thumbnails of your photos on the Web in an animated slideshow with professional-looking dissolves.

1.	Create a New File in ImageReady In this project you'll learn how simple it is to show off a selection of your photos in an animated slide show. Try it with these photos and then substitute your own. This animation looks best with photographs that are all the same size and orientation. If you use your own photos, resize them so that they are all the same size along at least one dimension, create a new folder, and move your prepared photos into that folder. Start making a slide show by creating a new file in ImageReady. Choose File>New from the menu bar. In the New dialog box, set Width to 300 pixels and Height to 224 pixels. Leave Contents of First Layer at its default. Click OK to open a new image. TIP Protecting Photo Quality. JPEG is a lossy format that compresses a file by throwing away image data. So each time you make a change to a JPEG and resave, you lose a little image quality. This is true even if all you do is rotate and save the image. If you shoot JPEGs with your digital camera, as soon as you bring the photos into your computer save a copy in PSD format for editing and archive the JPEGs.
2.	Import Photos as Frames Choose File>Import>Folder as Frames from ImageReady's menu bar. Navigate to a folder of photos (for example, the Project Files>Chapter 2>C02-04-photos folder) and click Choose. ImageReady automatically does all of the following for you: Places each item in the folder on a separate layer in the Layers palette A. Creates a frame in the Animation palette (Window>Animation) for each layer B. Makes the contents of a single layer visible on each frame (by turning on just one layer's Eye icon per frame) C. This shortcut bypasses the long-winded process of dragging individual photos into the slide show file, creating animation frames one-by-one, and adjusting layer visibility manually on each frame. Create a White Layer Click the Create New Layer icon at the bottom of the Layers palette A. Double-click the name of the new layer in the Layers palette and rename it White. Press D on the keyboard to set the Background Color in the toolbox to white. Press Command-Delete/Ctrl-Backspace to fill the new layer with white. Then drag the new layer to the bottom of the layer stack in the Layers palette. TIP Frame Order. The Import>Folder as Frames command imports files in alphabetical order. (To force the fire photo to precede the other photos in the Animation palette, we added a space before its file name.) After you import frames, you can change their order by clicking and dragging frames left or right in the Animation palette.
4.	Match the Layer Across Frames Next you'll make the White layer visible on all frames of the animation so that the semitransparent tweened frames you'll be creating shortly will all have the same solid white background. Select the White layer and click the Unify Visibility button at the top of the Layers palette A. Choose Match at the prompt B. The symbol on the White layer C indicates that it is visible on all frames. Tween Frame 2 The rest of the frames in this animation will be created automatically using a process called Tweening. Tweening takes its name from the frames it generates "in-between" the frames that you create by hand. Select Frame 2 in the Animation and click the Tween button at the bottom of the Animation palette A (or click the arrow on the right side of the Animation palette B and choose Tween from the side menu). Choose Tween Settings Choose the following settings in the Tween dialog box: Make sure Tween With is set to Previous Frame to add tweened frames between the selected frame and the previous frame A. Type the number 2 in the Frames to Add field. This tells the program to create two additional tweened frames B. Leave Layers set to All Layers C. Make sure that Opacity is checked, because this is the layer property that you want to change across the tweened frames D. We usually leave all three parameters checked just to be safe. Click OK to add two semitransparent tweened frames between the earth and fire photos. This will create a dissolve between these photos that resembles the slide dissolve you'd get by using two professional slide projectors in the analog world. INSIGHT What Can You Tween? ImageReady will tween only the following properties of artwork. So, for example, you can't use tweening to morph two images. Position — use the Move tool to change the location of layered art; Opacity — vary the opacity of one or more layers in the Opacity field of the Layers palette; Effects — apply one or more Layer Styles and vary their options in the Layer Styles dialog box; change Blending Modes in the Layers palette or vary Blending Options in the Layer Styles dialog box; apply a warp text effect to type and change options in the Warp Text dialog box.
7.	Preview the Tween Select Frame 1 in the Animation palette. Then click the frame forward button at the bottom of the Animation palette Ato move through the frames one at a time. Notice that both the fire and earth photos are partially transparent on Frames 2 and 3, creating a dissolve effect. Tween Frame 5 The water photo now appears on Frame 5. Select Frame 5 and click the Tween icon in the Animation palette again. Leave all the Tween settings as they were in Step 6 and click OK to add two tweened frames between the earth and water photos. Tween Frame 8 The wind photo is now on Frame 8. Select Frame 8 and click the Tween icon again. Leave all the Tween settings as they were in the preceding step, and click OK to tween the wind photo with the water photo. Preview the Animation Click the Play button at the bottom of the Animation palette to preview the animation in the document window. Notice that there's a jump between the wind photo and the fire photo. That's caused by the animation looping back to to the beginning of the animation with no partially transparent fames between the wind photo on Frame 10 and the fire photo on Frame 1. You'll fix that in the next step. Click the Stop button (the square icon) at the bottom of the Animation palette to stop the preview. Tween the First and Last Frames Select Frame 10-—the last frame in the Animation palette. Click the Tween button. In the Tween dialog box, change the Tween With field to First Frame. Leave the other tween settings as they were in Step 9, and click OK. There are now two partially transparent frames at the end of the animation. They create a dissolve between the wind photo in Frame 10 and the fire photo in Frame 1, smoothing the look of the animation when it loops back to the beginning to repeat itself. Preview in a Web Browser Click the Preview in Browser button on the toolbox to preview the finished animation in a Web browser. Notice that it plays very fast and that it repeats over and over. You'll address those two issues in the next steps. C A U T I O N Must be a GIF. If you see a warning when you try to preview in a browser, click Cancel and change the Format field in your Optimize palette to GIF. Re-click the Preview in Browser button.
13.	Set the Repetitions The looping option at the bottom of the Animation palette is set to Forever by default. This would create an animation that continuously repeats without end. You'll limit the number of repetitions of your slide show in this step. Click the looping option and choose Other from the pop-up menu. In the Set Loop Count dialog box that appears, type 2 into the Play field and click OK. Your slide show will play through twice in a viewer's Web browser. TIP Forever is Too Long. ImageReady animations are set to loop forever by default. A continuously repeating Web animation can be distracting, if not downright annoying. It's often better to limit the number of repetitions by adjusting the looping option in the Animation palette.
14.	Reduce the Speed Slow this animation down so viewers have time to appreciate the photographs. Select all the frames by clicking on Frame 1, holding down the Shift key, TIP Once is Not Enough. If you set your animation to play once, it might finish playing before it is completely downloaded to a viewer's Web browser. To ensure that viewers see your complete animation, we recommend that you set your animations to loop at least two times.
15.	Pause on Selected Frames. Now increase the timing on the four frames that display opaque photos so that the animation pauses on those frames. Click on Frame 1, hold the Command/Ctrl key and click on Frames 4, 7, and 10. Choose 2 seconds from the time delay menu beneath any one of those frames. Preview again to see the results. Optimize the Animation Although this file contains photos, it can't be optimized in JPEG format because JPEG doesn't support animation. Instead, you'll have to optimize the entire file as one animated GIF, choosing the maximum number of GIF colors (256), and adding dither to smooth the bands of color in the photos. In the Optimize palette, choose Format: GIF, Colors: 256, Dither Method: Diffusion, Dither Amount: 100%, Lossy: 17, and Add Metadata: Unchecked. Leave the other optimization settings at their defaults, as shown here. TIP Interpolation Method. When you reduce image size, some pixels are discarded from the image. The method by which pixels are discarded (the interpolation method) can affect the appearance of the image. Bicubic Sharper is usually the best interpolation method for reducing image size. Use it when you're making small Web images like photo thumbnails.
17.	Reduce the Image Size Click the box at the bottom of the Optimized tab of the document window and choose Optimized Information. The file size reported there is quite large for the Web. To reduce file size, you'll have to reduce the physical dimensions of the image. Choose Image>Image Size. Type 50% in the Percent field, make sure Constrain Proportions is checked, and choose Quality: Bicubic Sharper. Save Choose File>Save Optimized As. Leave Format/Save as Type set to Images Only, and click Save. ImageReady saves a single animated GIF file. To display this slide show on the Web add a link to the GIF in any HTML file. Choose File>Save As to save the PSD source file. In this tutorial: Animation These are not your father's gifts Flashy Format  Radar Screen Animation  Animation Warped Text  Bringing a Picture to Life Animated Slide Show Rollover Triggered Animation Image Map Triggered Animation Layer Mask Animation  Vector Based Flash Movie  Animating a Layer Style  Changing Layer Properties in Animation