15 Animation for the Web

Objective:

  • To understand differences between animation choices
  • To gain experience in using animated GIF and DHTML techniques to combine 2D images

I. Overview of Animation Types

Type Software Advantages Disadvantages
Animated GIF (2D Raster) ImageReady 3.0, GifBuilder, GIF Animator Combines Raster images Large files
DHTML GoLive Floating boxes with text & raster images Not consistently supported by all browsers
2D Vector Macromedia Flash Small Files, scaleable Needs plug-in, drawingtools simple (import from other programs)
3D Camera Animation FormZ, Design Workshop Lightscape Simple Keyframe Animation Eye and Target only (+ Sun for DW)
3D Object Animation 3D Studio Max, Strata Studio Pro Close control of 3D objects & Environment, Max Object oriented Complex interfaces
Video editing software Adobe Premiere, iMovie, Final Cut Pro Combines video, sound, images & text with transition effects Files can be large

III. ImageReady GIF Animation

Add Inc. Site & Components

Building components

IV. GoLive Animation

Building components

Example with transparent components

Floating box DHTML animation tutorial (frog)

V. References

RealWorld GoLive

Layer Mask Animation (Photoshop Classroom in a Box Lesson 8, part 2)