Add life to a scene by creating multiple animations of traffic signals and lights. This project is done in ImageReady.
1. Deconstruct the Layers
Let's face it—Web animations can be distracting, if not downright overwhelming. But when applied subtly, as in this project, animation can add a realistic touch that makes an otherwise static scene come alive on the Web. You'll create several animations in sliced areas of this photograph in the steps that follow. You'll make traffic lights change and parking lights blink on and off. These realistic animations are created by turning layer visibility on and off from frame to frame.
Let's face it—Web animations can be distracting, if not downright overwhelming. But when applied subtly, as in this project, animation can add a realistic touch that makes an otherwise static scene come alive on the Web. You'll create several animations in sliced areas of this photograph in the steps that follow. You'll make traffic lights change and parking lights blink on and off. These realistic animations are created by turning layer visibility on and off from frame to frame.
INSIGHTAnimating a Photograph. ImageReady creates animations in GIF format by default. If you're including a photograph in a GIF animation, you'll have to optimize the photo with GIF settings, even though GIF limits the number of colors in a photograph and can compromise its appearance. To make a photograph look better in GIF format, try increasing the number of colors and adding dither; but use these tactics judiciously to keep the file size of the animation from skyrocketing. Although JPEG is usually the format of choice for photographs, JPEG does not support animation. |
Take a minute to familiarize yourself with the contents of the layers in this file before you start animating. In the Layers palette, click the arrow to the left of each of the three Traffic layer sets, opening them so you can see the layers they contain A. Option/Alt-click in the Visibility field to the left of any layer B to see only the artwork on that layer. Option/Alt-click again to see all the layered artwork that was originally visible.
We already made and optimized some slices in this image, so that you can concentrate on creating the animations. The user slices we made have blue numbers. The auto slices ImageReady added are ghosted and have gray numbers. If you don't see these slices, click the Slice Visibility toggle near the bottom of the toolbox. If the ghosted auto slices are obscuring your view, choose ImageReady/Edit>Preferences>Slices and lower the percentage of color adjustment in the Auto Slices field.
3. Slice the Traffic Lights
In this project you'll be creating several independent animations in a large image. You'll slice the areas where the animations will occur to separate them from the rest of the image. ImageReady will generate a separate animated GIF file from each slice that contains animation frames.
In this project you'll be creating several independent animations in a large image. You'll slice the areas where the animations will occur to separate them from the rest of the image. ImageReady will generate a separate animated GIF file from each slice that contains animation frames.
Start by adding slices around the traffic lights so that you can animate those areas. Select the Slice tool in the toolbox, zoom in, and draw a slice around all three lights in the traffic signal on the left A, another around the lights in the middle traffic signal B, and one more slice around the lights in the traffic signal on the right C. You can make the red, yellow, and green traffic light layers visible temporarily to make it easier to see where to slice. Turn those layers off when you're done slicing.
4. Slice the Truck Blinkers
Draw another slice with the Slice tool around the darkened blinkers on the left side of the truck to prepare that area for animation. You can make the Dark_Blinkers layer visible temporarily to help position your slice. Turn that layer off when you're done slicing.
5. Name the Animation Slices
ImageReady assigns a default name to each slice. The GIFs produced from the slices will inherit those names. To ensure that you can recognize your animated GIFs among the many image files that will be generated, give each of your animation slices a meaningful name. Choose Window>Slice to open the Slice palette. Select the Slice Select tool in the toolbox and click on the slice you drew around the traffic signal on the left. Type Traffic_Left in the Name field of the Slice palette. Repeat this for the other three slices you just created, naming them Traffic_Mid, Traffic_Rt, and Blinkers respectively. Don't use spaces or special characters in slice names.
ImageReady assigns a default name to each slice. The GIFs produced from the slices will inherit those names. To ensure that you can recognize your animated GIFs among the many image files that will be generated, give each of your animation slices a meaningful name. Choose Window>Slice to open the Slice palette. Select the Slice Select tool in the toolbox and click on the slice you drew around the traffic signal on the left. Type Traffic_Left in the Name field of the Slice palette. Repeat this for the other three slices you just created, naming them Traffic_Mid, Traffic_Rt, and Blinkers respectively. Don't use spaces or special characters in slice names.
TIPLayer Visibility. Control the visibility of the artwork on a layer by clicking in the Visibility field to the left of the layer to show or hide its Eye icon. A layer is on when the Eye icon is showing and off when it's not showing.All the layers sets in this file will display an Eye icon throughout the animation, because at least one layer in each of the layer sets is always set to on. |
6. Set Up Frame 1
Choose Window>Animation to open the Animation palette. Frame 1 of the animation is displayed in that palette. Go to the Layers palette and click in the Visibility field of the following layers, turning on their Eye icons, to make the artwork on these layers visible on Frame 1 of the animation. All the other traffic light layers should be off.
Choose Window>Animation to open the Animation palette. Frame 1 of the animation is displayed in that palette. Go to the Layers palette and click in the Visibility field of the following layers, turning on their Eye icons, to make the artwork on these layers visible on Frame 1 of the animation. All the other traffic light layers should be off.
Left_Red (This turns the traffic light on the left to red A.)
Mid_Red (This turns the traffic light in the middle to red B.)
Rt_Green (This turns the traffic light on the right to green C.)
Dark_Blinkers (Don't be confused by the on/off terminology here. When this layer is on, the blinkers on the left side of the truck look dark D.)
7. Add a Time Delay
Click the Time Delay menu under Frame 1 and choose 0.5 seconds to set the approximate timing of Frame 1 and all subsequent frames.
Click the Time Delay menu under Frame 1 and choose 0.5 seconds to set the approximate timing of Frame 1 and all subsequent frames.
8. Add Frames 2 through 4
The next three frames are copies of Frame 1. Click the Duplicate Animation Frame button at the bottom of the Animation palette three times. Or hold down the Option/Alt key on your keyboard while clicking and dragging Frame 1 to the right and repeat twice more so you have a total of four frames.
9. Create Frame 5
On Frame 5, the traffic light on the right changes to yellow. Create Frame 5 by selecting Frame 4 and clicking the Duplicate Animation Frame button at the bottom of the Animation palette. Now change the artwork on Frame 5 by going to the Layers palette, turning on the Rt_Yellow layer, and turning off the Rt_Green layer.
10. Add Frames 6 through 8
The next three frames are copies of Frame 5. With Frame 5 selected, click the Duplicate Animation Frame button three times. You should have a total of eight frames.
11. Create Frame 9
On Frame 9, the traffic light on the left changes to green, the traffic light in the middle changes to green, and the traffic light on the right changes to red. Create Frame 9 by selecting Frame 8 and clicking the Duplicate Animation Frame button. Change the artwork on Frame 9 by doing the following in the Layers palette:
Turn off the Left_Red layer
Turn on the Left_Green layer
Turn off the Mid_Red layer
Turn on the Mid_Green layer
Turn off the Rt_Yellow layer- Turn on the Rt_Red layer
12. Add Frames 10 through 26
The next 17 frames are copies of Frame 9. With Frame 9 selected, click the Duplicate Animation Frame button 17 times. You have a total of 26 frames.
The next 17 frames are copies of Frame 9. With Frame 9 selected, click the Duplicate Animation Frame button 17 times. You have a total of 26 frames.
13. Create Frame 27
You're almost done. On Frame 27, the traffic light on the left changes to yellow, and the middle traffic light changes to yellow. The light on the right stays red. Create Frame 27 by selecting Frame 26 and clicking the Duplicate Animation Frame button. Change the artwork on Frame 27 by doing the following in the Layers palette:
You're almost done. On Frame 27, the traffic light on the left changes to yellow, and the middle traffic light changes to yellow. The light on the right stays red. Create Frame 27 by selecting Frame 26 and clicking the Duplicate Animation Frame button. Change the artwork on Frame 27 by doing the following in the Layers palette:
Turn off the Left_Green layer
Turn on the Left_Yellow layer
Turn off the Mid_Green layer
Turn on the Mid_Yellow layer
14. Add Frames 28 through 30
The next three frames are copies of Frame 27. With Frame 27 selected, click the Duplicate Animation Frame button three times. You now have 30 frames.
The next three frames are copies of Frame 27. With Frame 27 selected, click the Duplicate Animation Frame button three times. You now have 30 frames.
15. Create Frame 31
On Frame 31, the traffic light on the left changes to red, the middle traffic light changes to red, and the traffic light on the right changes to green. Select Frame 30 and click the Duplicate Animation Frame button. Change the artwork on Frame 31 by doing the following in the Layers palette:
On Frame 31, the traffic light on the left changes to red, the middle traffic light changes to red, and the traffic light on the right changes to green. Select Frame 30 and click the Duplicate Animation Frame button. Change the artwork on Frame 31 by doing the following in the Layers palette:
- Turn off the Left_Yellow layer
- Turn on the Left_Red layer
- Turn off the Mid_Yellow layer
- Turn on the Mid_Red layer
- Turn off the Rt_Red layer
- Turn on the Rt_Green layer
16. Add Frames 32 through 36
The next five frames are copies of Frame 31. With Frame 31 selected, click the Duplicate Animation Frame button five times. You should have a total of 36 frames. You're done creating frames.
The next five frames are copies of Frame 31. With Frame 31 selected, click the Duplicate Animation Frame button five times. You should have a total of 36 frames. You're done creating frames.
17. Preview in ImageReady
Preview what you've made so far by clicking the Play arrow at the bottom of the Animation palette. The animation plays in ImageReady's document window. Click the Stop button that replaces the Play arrow to pause the animation.
Preview what you've made so far by clicking the Play arrow at the bottom of the Animation palette. The animation plays in ImageReady's document window. Click the Stop button that replaces the Play arrow to pause the animation.
18. Add the Blinking Truck Lights
Click the diagonal lines at the bottom right of the Animation palette and stretch the palette out so you can see as many frames as possible A. Click on Frame 2. Then hold the Command/Ctrl key as you click on every other frame (Frames 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36). In the Layers palette, click in the Visibility field of the Dark_Blinkers layer to turn the visibility of that layer off B, so that the colored lights on the back of the truck are visible on the selected frames. Preview again to see these lights blink on and off throughout the animation.
Click the diagonal lines at the bottom right of the Animation palette and stretch the palette out so you can see as many frames as possible A. Click on Frame 2. Then hold the Command/Ctrl key as you click on every other frame (Frames 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36). In the Layers palette, click in the Visibility field of the Dark_Blinkers layer to turn the visibility of that layer off B, so that the colored lights on the back of the truck are visible on the selected frames. Preview again to see these lights blink on and off throughout the animation.
19. Turn on the Streetlight
Select any frame in the animation. In the Layers palette, turn on the visibility of the Streetlight layer A. Then click on the Streetlight layer to select it and click the Unify Visibility button in the Layers palette B. In the prompt that appears, click Match. This causes the Streetlight layer to become visible on every frame of the animation. The symbol you now see on the Streetlight layer indicates that the change you made to the visibility of this layer has been applied to all frames in the animation.
Select any frame in the animation. In the Layers palette, turn on the visibility of the Streetlight layer A. Then click on the Streetlight layer to select it and click the Unify Visibility button in the Layers palette B. In the prompt that appears, click Match. This causes the Streetlight layer to become visible on every frame of the animation. The symbol you now see on the Streetlight layer indicates that the change you made to the visibility of this layer has been applied to all frames in the animation.
20. Preview in a Web Browser
Click the Preview in Web Browser icon in the toolbox to play the animation in your default Web browser. The traffic lights will change color synchronistically and the lights on the truck blink on and off, adding a touch of realism to the scene. If your animation isn't working as expected, debug it by clicking on each frame in the Animation palette and matching layer visibility to the Frame Summary on the facing page.
Click the Preview in Web Browser icon in the toolbox to play the animation in your default Web browser. The traffic lights will change color synchronistically and the lights on the truck blink on and off, adding a touch of realism to the scene. If your animation isn't working as expected, debug it by clicking on each frame in the Animation palette and matching layer visibility to the Frame Summary on the facing page.
21. Optimize and Save
Click the Optimized tab in your document window. Wait a second while the program works through all the frames to generate an optimized preview. At this point you would normally optimize each part of the scene by selecting each user slice and one of the auto slices separately and choosing optimization settings in the Optimize palette (Window>Optimize). However, we had already optimized the existing slices, and the slices you drew took their optimization settings from our underlying slices. Select the slices you drew in the scene and notice the settings in the Optimize palette. Each of them was optimized as a GIF with 64 colors, No Dither, and a Lossy setting of 17 to keep the file size down while maintaining the appearance of the image. Transparency is checked because it is a prerequisite for Redundant Pixel Removal.
Click the arrow on either of the information fields at the bottom of the document window and choose Optimized Information to see the file size of the optimized animated scene. Depending on how you drew your slices, it's about 77K---. Choose File>Save Optimized As, leave Format/Save as Type set to Images Only, and click Save. Choose File>Save to save the original with your changes.
Click the Optimized tab in your document window. Wait a second while the program works through all the frames to generate an optimized preview. At this point you would normally optimize each part of the scene by selecting each user slice and one of the auto slices separately and choosing optimization settings in the Optimize palette (Window>Optimize). However, we had already optimized the existing slices, and the slices you drew took their optimization settings from our underlying slices. Select the slices you drew in the scene and notice the settings in the Optimize palette. Each of them was optimized as a GIF with 64 colors, No Dither, and a Lossy setting of 17 to keep the file size down while maintaining the appearance of the image. Transparency is checked because it is a prerequisite for Redundant Pixel Removal.
Click the arrow on either of the information fields at the bottom of the document window and choose Optimized Information to see the file size of the optimized animated scene. Depending on how you drew your slices, it's about 77K---. Choose File>Save Optimized As, leave Format/Save as Type set to Images Only, and click Save. Choose File>Save to save the original with your changes.
TIP
All Frames Optimize the Same. When you optimize an animation (a single file or a slice to which you've applied animation frames), all frames in the animation use the same optimization settings. With the Optimized tab selected in the document window, turn off slice visibility and click through the frames in the Animation palette to check the appearance of the optimized image on each frame.INSIGHT
Redundant Pixel Removal. Redundant Pixel Removal minimizes animation file size by making transparent all pixels in a frame that have not changed since the preceding frame. For Redundant Pixel Removal to work, Transparency must be checked in the Optimize palette. Redundant Pixel Removal is on by default in the Optimize Animation dialog box (Animation side arrow>Optimize Animation).INSIGHT
Frame Summary. Here's a summary of layer visibility on each animation frame (in addition to the Streetlight, Sky, and Background layers which are always on).
Frame |  Left_ Red Layer Rt_ Red Layer OFF |
|---|
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
This is and amazing post no confusion .
ReplyDelete