Demo 9: Creating an Animated .gif in ImageReady

1. Copy the file "demo9.psd" from the Class Folders into a folder called "demo9".
   
   
2. In the Layers pallette, option-click on the eye icon of each layer. This will disable the visibility of every layer except the one you are clicking on. Notice the way the position of the man's eyes and the hats change for each layer.
   
   
3. Now, with the eyes left layer visible only, open up the Animation pallette in ImageReady (go to Window>Animation). Go to the New Frame button at the bottom (to the left of the trash can), and add three New Frames. You should have four frames total.
   
   
4. With #2 Animation State selected, Option/Alt click on the eye icon (as in step 2) for the eyes up layer to disable the visiblity for all layers except that one.
   
   
5. With #3 Animation State selected, Option/Alt click on the eye icon for the eyes right layer to disable the visiblity for all layers except that one.
   
   
6. With #4 Animation State selected, Option/Alt click on the eye icon for the eyes down layer to disable the visiblity for all layers except that one.
   
   
7. Press the Play button.
   
   
8. That's a little bit fast. To slow it down, you can adjust the delay by clicking just below the photo in the frame. Set it to 0.2 seconds.
   
   
9. Add 4 new layers to your layers pallette, on top of the layers you currently have. One layer should be named man, and consist of the word MAN, another should be named of, and consist of the word OF, another should be named many, and include the word MANY, and the last layer should be named hats, and include of the word HATS. Position these words on the page however you wish.
   
   
10. For the first frame, make the man layer visible (in addition to the eyes left layer), but none of the other new layers. For the second frame, make the layers man and of visible. For the third frame make the layers man, of, and many visible. For the fourth frame, make all of the new layers visible: man, of, many, and hats.
    
    
11. You can add some fun by changing the position of the words from frame to frame too, or create warped text, or text effects. The possibilities are endless! You can also play around with tweening, by pressing the Tween button, which is at the bottom of the animation pallette, to the left of the the New Frame button.
    
    
12. When finished, click on the arrow at the upper right of the animation pallette and choose Optimize Animation. Make sure both boxes are checked and press OK.
    
    
13. Now go to file>Save Optimized As... Make sure it is saved in your demo9 folder as a .gif. JPG file format does not support animation.
    
    
14. Insert the animated gif in a Dreamweaver page and save it as your Demo 9 file.