Step 3: Create Animation

To create an animation, you now need to carefully define the first and last image and apply the Tween

49-5

command to automatically create all the transitional states in between — that is it — it is that simple! As we want the beginning of the image to look as if no polarizer was used (the image with the rich fall colors), we set it as the first image. Then we create a second image in the Animation palette and carefully set it to look like the image where the circular polarizer's full capability of removing reflective light has been used (the image showing the bottom of the shallow stream).

■ Click the menu button in the upper-right corner of the Animation palette to get a pop-up menu; click New Frame to create a second frame in the Animation palette, which should now look like the one shown in Figure 49.6. The second animation cell is now highlighted indicating that it is the active cell. The Layers palette now reflects the settings for the active cell, as does the water2-before image.

49.8

■ Click the eye icon to the left of the Layer 1 layer in the Layers palette to hide that layer. The Layers palette should now look like the one shown in Figure 49.7. This now changes the look of the second cell in the Animation palette to look like the image where the bottom of the stream may be seen.

■ Press Shift and click cell 1 in the Animation palette to select both cells. Click the bottom of either cell to get a pop-up menu giving you options of setting the amount of time each cell is displayed; click 0.2 to set each cell to display two-tenths of a second.

■ With both cells still highlighted, click the menu button in the upper-right corner of the Animation palette to get the pop-up menu shown in Figure 49.8. Click Tween to get the Tween dialog box shown in Figure 49.9. This dialog box allows you to set the characteristics of the tween effect — the way the images are made between each cell.

■ Click in the Frames to Add box and type 18, which results in a total of 20 cells — the starting and ending cells, plus 18 tweened cells. All Layers should be checked in the Layers area. In the Parameters area, only Opacity should be checked. Click OK to begin the tweening process.

■ The Animation palette should now look like the one shown in Figure 49.10. To see the entire animation, you have to use the scroll bar at the bottom of the Animation palette.

■ At the bottom-left corner of the Animation palette, there is a Looping Option setting box; click it to get a pop-up menu.Then click Once to have the animation play a single time without looping.

■ To view the Animation, click the Play button in the Animation palette — the button with a single triangle on it. You now see the 20-cell animation play in the water2-before image window. Pretty cool, don't you think?

■ Covering the details of Web images is way beyond the scope of this book, but you should be aware that ImageReady is doing some pretty

49.10

sophisticated manipulation of the images based upon defaults or your chosen settings. Take a quick look at the Optimize palette. Click in the Settings box to view the many options that are available. As animations must be GIF files and as we want the best quality of animation for our stream image animation, select GIF 128 Dithered. The Optimize palette should now look similar to the one shown in Figure 49.11. ■ To find out how large the image has become, look at the bottom of the water2-before.jpg document window. You see that the entire 20-cell GIF image is 556.3 Kbs. While that is small, for what is essentially a file of 20 images, the file is too large to download from a Web page and just fine to use as a CD-ROM-based image. To make it smaller, you can change GIF settings, make the image smaller, or tween with fewer than 20 cells.

Admittedly, this animation is very simple and we avoided looking at the many other features that allow you to further control how the animation displays. But, this example gives you a good idea of what can be done with animations. Well-thought-out animations can enhance Web pages, but they also can repeat too often, be too distracting, and ultimately lower user experience if you have not used them appropriately.

You may now want to consider other ways that you can use animations. How about having a moon float up toward the top and off a late evening photo as if it were rising in the sky? Or, you can create an animation where the sky gets darker and darker until it is almost totally black as it does each evening as the sun sets. Taking this concept to reality takes less than two minutes by using ImageReady 7. After creating the first and last cell, I reduced Lightness by using Hue/Saturation and then tweened 28 new cells to create the GIF image named sunset-in-the-forest.gif from the saturated image created in Technique 9. The file can be found in the \49 folder. View this image by dragging it onto an open Web browser. The image loops three times. What animation do you want to create?

0 0

Post a comment