5. Animation

Phillip M^cKerrow

9/10/01

---

Animation concepts

Creating the appearance of motion

Location - where the object is on the window - x, y, theta

Time - an object that changes its location over time is animated

Frame rate - number of times per second the window is updated

Motion Styles

Path animation - object appears to move along a path - sailing boat

Random animation - object follows a different path each time

Parts-in-place animation - object stays still but parts of it move - hands moving on clock

Synchronised animation - movement synchronised with sounds - lips move with speach

Film loop animation - combination of parts-in-place with path animation - bird flapping wings as it flies across screen

Animation Content

Frame based animation - each frame overwrites the previous one

Vector based animation - each frame is drawn with vectors

Miscellaneous

Tweening - adding frames between keyframes to obtain smoother motion, zooming or brightness changes

Onion Skinning - makes part of frame transparent so you can see portions of previous or next frame

Do not dispose - sucessive frames layed on top of each other, so you can see through transparent parts

Restore to Background - each frame is discarded before next is displayed

Rollover animation - images changes when mouse rolls over it

Blitted animation - image is created in memory and blitted to screen

Animated GIFS

don't require browser plugins and are small

sequences of slightly varying frames that are displayed successively

can be made in ImageReady - based on layers

1. Prepare the graphics in Photoshop or Illustrator with the parts you want to animate in layers

NOTE: in Illustrator you need to save as a Photoshop 6 doccument

2. Open file in ImageReady

3. Choose show animation

3. Select current animation frame and duplicate it

4. On second animation frame select the layer(s) that you want to animate and make a copy

5. Use the Edit>Transform>... tools to transform the layer to the new position/size

6. Repeat steps 3..5 until you have made all the frames you want

7. As the above results in new layer(s) for every frame and theses occur in all frames, go back through the frames and turn off the layers you don't want in each frame

8. Change the delay to the time you want using the pop up

9. Select how often the animation is to repeat

10. Preview the animation using the play button and analyse its operation - is it smooth, does it produce the effect you want, is it clipped, does it run at the desired speed, is it efficient to down load

11. Use the optimisation pallet to optomise the animated gif for the web - 28KB

12. Save the gif

Use it in your web page

2nd example

Animated gifs, by nature, always loop through the number of frames that make up the animation. Unlike the Flash or QuickTime, the Animated GIF Asset does not have a setting to turn off the looping feature. To pause an animated GIF you need to set the pause property through scripting.