Animated GIFS

March 3, 2004

About Animated GIFS:

TO MOVE IMAGERY:

  1. Create an image with a transparent background layer (background / image)
  2. Window > Show Animation
  3. Select a layer with the image (not background)
  4. Image > Canvas Size (resize to give room to move)
  5. Use the Move tool to drag to one side of main window
  6. Click "Duplicate current frame" button on Animation palette. (auto selects new frame)
  7. Drag layer to opposite side of window; updates in AnimPal window
  8. Choose Tween from AnimPal:
  9. Click OK; Preview animation (click Play button) or
  10. Save file; Preview In...[browser] for accurate playback speed.
  11. To UNDO: Shift select inbetweens, and drag to trash/delete. * DO THIS!*

TO FADE IMAGERY IN AND OUT:

  1. Use same keyframes as move.
  2. Adjust Opacity in First Frame and Last Frame
  3. Tween

TO REMOVE FRAMES:

  1. Select Frame
  2. AnimPal > Delete Frame or drag to trash
OR
  1. Select entire animation except 1st frame
  2. AnimPal > Delete Animation or drag to trash

TO REVERSE FRAMES:

Reverse Frames AnimPal > Reverse Frames (plays it backwards)

PLAYBACK OPTIONS: (saved with file)

TO CREATE A ROTATING / PIXEL-CHANGING ANIMATION:

  1. Open an image and animation palette
  2. Duplicate current frame
  3. Tween, click Layers: All Layers; #of frames, OK
  4. Select starting frame.
  5. Layers > duplicate layer to be animated - rename layer
  6. On the new layer, edit the pixels (rotate, paint, change color, transform)
  7. Hide original layer to see changes (appears in Animation palette)
  8. Click on Next frame; Show original layer and hide duplicate layer
  9. Click on the next frame, hide original, hide duplicate, etc...

TO EDIT AN ANIMATION:

TO LOOP AN ANIMATION BACK & FORTH:

  1. Click the last frame on the animation
  2. Anim Pal > Tween
  3. Layers: All Layers; Check all parameters; Choose Tween with: First Frame; # of frames; OK

TO APPLY ANOTHER ANIMATION EFECT TO AN ANIMATION:

  1. Chose / create the layer to apply 2nd animation effect.
  2. Select frame in Anim Pal
  3. Position layer imagery exactly where you want it and adjust opacity or effect
  4. Click on end frame for this animation
  5. Modify the layer element's position, opacity, effect; Keep layer selected
  6. Shift select the frames to be tweened
  7. Anim Pal > Tween
  8. Layers: Selected Layer; Check Parameters; OK
This preserves existing animation, but develops new animation

TO REDUCE/ CROP IMAGE (If too big!)

Reduce: Image > Image Size
200x200 / 150x300 or smaller;
Qualtiy: Smooth (Bicubic);
OK

Crop: Chose a frame (if moves, select one in middle)
Crop tool: Delete (permanently remove pixels that extend beyond box) OR
Hide: preserves pixels that move offstage
Decrease the number of layers and colors in table also!

TO SAVE: Always Save TWO versions...

  1. Save original for your files (Don't OPTIMIZE!)
  2. File > Save (original.psd)
  3. File > Save optimized (doesn't preserve layer elements, but matches each frame to a layer) - flattens frames to layers - can't modify

LAYER EFFECTS:

Same as Photoshop + Gradient/Pattern Effect
Displayed on Layers palette as indented layers below name of layer applied to. Move with that layer.
To apply:
  1. Choose a layer
  2. Layer > Effects OR Click f button in palette and select from pop-up
  3. Choose Options
  4. Add more effects for that layer
  5. Click on name to bring up its effects.
  6. To DELETE: drag to trash

Adding animation to rollover states

You use the Animation palette, in conjunction with the Rollover palette, to add an animation to a rollover state.

When working with a layer-based slice or a layer-based image map area, moving the layer in the Normal state repositions the layer in every rollover state. However, moving the layer in a rollover state other than the Normal state repositions the layer only in the current state.

To add an animation to a rollover state:

  1. In the Rollover palette, create a new rollover state or select the thumbnail for a rollover state in which you want to display an animation.
  2. In the Animation palette, create frames for the animation. (See Creating animations.)
Note: Adding an animation to the Normal state will cause the animation to appear when the image is loaded in a Web browser.


Back to Syllabus