Animation

We've all seen animated gifs and by now most of us are pretty annoyed with them. However, they can still be useful in some settings. ImageReady provides us with a very easy way to create animated gifs. We will go through an example of creating an animated GIF.

Example #1

We are going to go over creating an animation from a blank document step by step

  • Step one, Create a blank a new document. Set the Width to 300px and the Height to 300px. Set the Background to White. Click OK
  • Next, With the paintbrush draw a stick figure with no arms onto the blank document
  • Create a new layer, draw the stick figures arms onto the new layer. The arms should be pointing to the ground.
  • Create a new layer, draw the stick figures arms onto the new layer. The arms now should be horizontal.
  • Create a new layer, draw the stick figures arms on the new layer. The arms should now be pointing to the sky
  • Your layers palette should resemble this:

We have now created the graphical aspect of this animation. Now its time to move onto the animation side

  • Open the animation palette if it is not already opened. Window > Animation
  • In the layers palette, turn off layer visibility for layer 2 and layer 3. The toggle for layer visibility is the eye on the left of the layer.
  • Next, create a new frame in the animation palette. To do this, click on the icon that looks like a page turning.
  • Select the second frame in the animation palette. In the Layers palette turn off visibility for layer 1 and turn on visibility for layer 2. After doing this frame 1 in the animation palette should be the stick figure with his hands down and frame 2 should be the stick figure with his hands horizontal.
  • Next, create a third frame in the animation palette and in the layers palette turn off visibility for layer 2 and turn on visibility for layer 3. After doing this frame 2 in the animation palette should be the stick figure with his hands horizontal and frame 3 should be the stick figure with his hands in the air.
  • Finally, Create a fourth frame in the animation palette and in the layers palette turn off visibility for frame 3 and turn on visibility for frame 2.
  • Our animation palette should now resemble this:

To view the animation you can click the play button in the animation palette or you can go to File > Preview in Browser. To save the animation go to File > Save Optimized As it will automatically save it as a .gif file.

Here is the finished animated GIF
last modified on 11/20/2007 16:31