Animating in ImageReady involves adding new frames in the Animation  Palette  and then changing the image data within the image accordingly using the Layers  Palette .  Each frame holds the current state of the image.  For instance, if you want a graphic to fade away you would reduce the opacity of the Layer  containing the graphic in steps through a series of frames.  After you’ve created each frame of your animation you manipulate and adjust timing by adding time to each frame or particular frames.  Finally, you decide if you want the animation to loop continuously, loop a set number of times, or play once.  Let’s animate our “staticbanner” image in ImageReady.

1. {Click} the 2-Up Tab in the Image Window  so you can see the original version and apply Compression  settings to the second Preview Window.
   
   

2. Ensure that the second Preview Window is selected and use the following Compression  settings from the Optimize Palette : Gif, Adaptive, Diffusion, 0 Lossy, 90 Colors.  Experiment with Dither settings if you desire.  Notice that with Diffusion you can adjust the percentage by using the Dither slider.
   
   

3. If it’s not open, select Windows/Show Animation  to open the Animation Palette .  The Animation Palette contains one Frame Thumbnail representing the first frame.
   
   

4. Our animation involves the “and save” text moving into the banner from off the edge and each word building up in sequence.  Use the Layers  Palette  to make the Type Layers invisible.  Notice how the Type Layers also disappear from the Frame Thumbnail.
   
   

5. {Click} on the Duplicate  Current Frame button to create a new frame and turn the visibility of the “See Tokyo this Summer!” Layer  back on.  We now have a two frame animation in which the words “See Tokyo this Summer!” appear in the banner.  {Click} on the Play button in the Palette’s Frame Controls to preview your animation.  Notice the abrupt and sudden looping of the frames.  We’ll adjust this later.  {Click} the Stop button.

6. Now we’re going to animate the “Stage Left” entrance of the “and save” text. Duplicate  the current frame and turn the visibility of the “and save” text on.  Duplicate this new frame.  You should now have 2 frames added with the visibility of “and save” turned on in both.
   
   

7. We’re going to set the start and end position of the “and save” text.  At the moment, we have the end position, or where we want the text to be when that part of the animation ends.  Now we have to establish the start position.  Select the first Frame Thumbnail that contains the visible “and save” text and use the Arrows on your keyboard to move it off the left edge.  If you cannot select the “and save” Layer  {Click} the Original Preview Window as modifications can only be performed with the original version selected, not in any of the Compression  Preview Windows.
   
   

8. Select both “and save” Frame Thumbnails  (Frames 3 and 4).
   
   

9. {Click} on the Tween Frames button at the bottom of the Animation  Palette .  We are going to have ImageReady generate Frames in beTween the two frames to automatically move the text.
   

The Tween dialog box

6. Examine the Tween dialog box.  Select “All Layers ” to copy all the currently visible Layers into the Frames that ImageReady automatically generates.  {Click} Position, Opacity , or Effects  (Layer  Effects) depending on the nature of the changes you are making to create the animation.  In this case, we check Position.  Define what to Tween with, either Selection, Next Frame, or Last Frame.  In this case, we are Tweening  the Frame Thumbnails  we have selected so select Selection.  How many frames do we want in beTween the first and last frame that make up our selection?  Input “3” into Frames to Add.  {Click} OK.  Examine the Animation  Palette .  {Click} each Frame Thumbnail to see the text advance in each Frame.

11. {Click} the Play button in the Animation  Palette .  You’ll see the text move into the image.  Keep in mind that ImageReady does not play the animation as quickly as it will actually play in a web browser.  To see how it really plays you’ll have to save it and preview the file in a browser.
    
    

12. Duplicate  the last frame in the animation and turn the visibility of the “50%” text on.  We now have all of the frames for our animation.  Now we just have to adjust the timing.
    
    

13. Use the Frame Timing drop down menu below each Frame thumbnail to adjust the delay between each frame.  Set each frame to play for 1 second except for those that make up the “and save” position change.  Set those frames to play at 0.1 seconds except for the last which you should also be set for 1 second.  The last frame of the animation should be set for two or three seconds.
    

Frame Thumbnails  with Duration setting added to each frame.

14. Select File/Save, to save the Original version of the file with the new changes.
    
    

15. Select Files/Save Optimized , to save the GIF version with the new changes.
    
    

16. View the GIF in a web browser.

Congratulations!  You’ve created an animated GIF.