February 27, 2002
About Animated GIFS:
- GIF Animations are multiple image frames played back in a specific sequence.
- Use ImageReady and the Animation palette; Saves as a single GIF file.
- Keep files small (200x200 pixels or less) to download and play quickly.
- Speed of playback is determined by CPU, browser version, and RAM allocated to browser.
- Make sure you STOP your animation before switching programs (or will play in background).
TO MOVE IMAGERY:
- Create an image with a transparent background layer (background / image)
- Window > Show Animation
- Select a layer with the image (not background)
- Image > Canvas Size (resize to give room to move)
- Use the Move tool to drag to one side of main window
- Click "Duplicate current frame" button on Animation palette. (auto selects new frame)
- Drag layer to opposite side of window; updates in AnimPal window
- Choose Tween from AnimPal:
Click OK; Preview animation (click Play button) or
Save file; Preview In...[browser] for accurate playback speed.
To UNDO: Shift select inbetweens, and drag to trash/delete. * DO THIS!*
- All Layers: copies pixels from ALL layers (even ones that weren't modified) - Use to record
options that occur simultaneously in two or more layers. OR
- Selected Layers: copies only pixels from currently selected layer (rest hidden)
- Parameters: Position, Opacity, Effects
- Tween with: add in-betweens previous (& current) OR first (& current); if more than one frame
selected prior to entering Tween, only Selection option will be available.
- Frames to Add: how many TOTAL frames to add (+2 for keyframes); more=bigger/smoother
TO FADE IMAGERY IN AND OUT:
- Use same keyframes as move.
- Adjust Opacity in First Frame and Last Frame
TO REMOVE FRAMES:
- Select Frame
- AnimPal > Delete Frame or drag to trash
- Select entire animation except 1st frame
- AnimPal > Delete Animation or drag to trash
TO REVERSE FRAMES:
Reverse Frames AnimPal > Reverse Frames (plays it backwards)
PLAYBACK OPTIONS: (saved with file)
- Looping: Select Once, Forever, or Other... (Forever can be annoying!)
- Delay Value: (on each frame) Select Frame - each can be different (No=0 seconds, .1=faster) (0-240)
TO CREATE A ROTATING / PIXEL-CHANGING ANIMATION:
- Open an image and animation palette
- Duplicate current frame
- Tween, click Layers: All Layers; #of frames, OK
- Select starting frame.
- Layers > duplicate layer to be animated - rename layer
- On the new layer, edit the pixels (rotate, paint, change color, transform)
- Hide original layer to see changes (appears in Animation palette)
- Click on Next frame; Show original layer and hide duplicate layer
- Click on the next frame, hide original, hide duplicate, etc...
TO EDIT AN ANIMATION:
- Layer PIXEL changes will be copied to ALL animation frames in which that frame is visible
- Hide/show, position, opacity, blending mode, layer effect will NOT be copied to all frames
because these edits use layer's palette and Don't change ACTUAL pixels.
- To copy these layer edits across all frames, choose AnimPal >Match Layer Across Frames
- careful: this removes any tween changes on that layer
- Position, Opacity, Effects Tween options will effect individual frames only.
TO LOOP AN ANIMATION BACK & FORTH:
- Click the last frame on the animation
- Anim Pal > Tween
- Layers: All Layers; Check all parameters; Choose Tween with: First Frame; # of frames; OK
TO APPLY ANOTHER ANIMATION EFECT TO AN ANIMATION:
This preserves existing animation, but develops new animation
- Chose / create the layer to apply 2nd animation effect.
- Select frame in Anim Pal
- Position layer imagery exactly where you want it and adjust opacity or effect
- Click on end frame for this animation
- Modify the layer element's position, opacity, effect; Keep layer selected
- Shift select the frames to be tweened
- Anim Pal > Tween
- Layers: Selected Layer; Check Parameters; OK
TO REDUCE/ CROP IMAGE (If too big!)
Reduce: Image > Image Size
200x200 / 150x300 or smaller;
Qualtiy: Smooth (Bicubic);
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...
- Save original for your files (Don't OPTIMIZE!)
- File > Save (original.psd)
- File > Save optimized (doesn't preserve layer elements, but matches each frame to a layer) - flattens frames to layers - can't modify
Same as Photoshop + Gradient/Pattern Effect
Displayed on Layers palette as indented layers below name of layer applied to. Move with that layer.
- Choose a layer
- Layer > Effects OR Click f button in palette and select from pop-up
- Choose Options
- Add more effects for that layer
- Click on name to bring up its effects.
- To DELETE: drag to trash
- Copy effects to other layers by dragging onto another; or Effects bar to apply all the effects
- Right Click on a layer name to get context menu
- Use effects to establish visual consistency between layer elements, especially type.
Adding animation to rollover states
You use the Animation palette, in conjunction with the Rollover palette, to add an animation to a rollover
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:
Note: Adding an animation to the Normal state will cause the animation to appear when the image is
loaded in a Web browser.
- 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.
- In the Animation palette, create frames for the animation. (See Creating animations.)
Back to Syllabus