Creating Animations with ImageReady

Frame by Frame Animation

1. File > New 200 pixels width by 200 pixels height.  72 ppi.   Background transparent, RGB mode.  You can make your animation whatever size you want, so this is arbitrary.  Also, because it must be saved as a .gif, it can have a transparency if you want.  Save as fish.psd.
2. Remember that everything's layers.  Create different layers for each element of your graphic.
3. Draw or import a fish graphic into fish.psd.  Make 3 copies of the fish in different layers.
4. For each of the fish copies, do Edit > Transform > and either Skew, Perspective, or Scale to change the fish to give the appearance of swimming.

5. Using the Animation window, you will build your animation frame by frame by turning off all the layers except the first fish, for frame #1.  The page icon at the bottom of the animation window will insert a new frame.

6. Turn off the eye of one layer, and turn on the eye of another layer, to slowly build your animation, frame by frame.  Note that you choose how many times your animation will cycle by clicking the arrow next to the word "Forever" on the bottom left of the Animation window.   There's also a side arrow on the top upper right, that allows you to select multiple frames, copy them, delete them, and reverse them.  Experiment.  Just watch the document window, and each frame, as you experiment with turning on and off layers, change the graphic's position, add a new element, etc.  **Of special note is the timing, located on each frame.  Just click the small arrow next to where it says "O sec." and you control how long each frame will show.  Think of the movement of the fish as a whole movie.

7. Make sure you have optimized your graphic (Window > Optimize) and that the format is a .gif.  Then File > Save Optimized as and save.  Your choice if you want just an image or HTML and Images.  If you want to use Dreamweaver, just Insert > Image the graphic just like you would any other image.  Or open the .html page created when you save as HTML and Images.

Tweened Animation

1. You can have the software draw the frames "in-between" what you want as the beginning frame, and what you want as the end frame.  Just press the icon that looks like a series of squares.  You will have some choices to make from a pop-up dialog box.  I usually choose 3-5 frames, Tween with: Previous Frame

Adding an animation to your graphic user interface (gui) rollovers

1. If you followed the tutorial for creating a home page using ImageReady, you learned how to insert rollover buttons.  This is the exact same principle.  Just create a your page graphic, and slice an area to turn it into a "button".  Use the Rollover window to insert a rollover layer, and then create an animation as above.