Animation

1
Animation

• Chapter 3

2
Animation

• What is it?
• Anything that moves on the web.
• Examples?
• Note, many types of animations require plugins
  (e.g. Flash, RealPlayer, QuickTime, etc)

3
Goals of Animation

• Get attention/entertain/advertise
• Explain
• Set mood

4
Examples

• Advertisement
• Punch the monkey
• Entice viewer to click in the window, which is a
  link to some commercial site
• Can distract from the main content of the site
• Can consume a deal of bandwidth
• Mood
• Eyeball Design FX Zone
• Adds to the feel of the page
• Does not detract from main content, but enhances
  it (if done right)

5
Examples (cont.)

• Entertainment
• Strong Bad New Hands

6
How Animation works on the Web

• Frame Animation
• A series of still images displayed one after the
  other. Each image differs slightly from the
  previous.
• File size depends on the number of frames and
  amount of change between each image
• Can produce very large files
• Most banner Ads are in this form
• Example
• Napoleon Dynamite Animated Gif (Buddy Icon)

7
How Animation works on the Web (cont.)

• Vector Animation
• Used when objects move across a defined path
• Typically requires a plug-in (like Flash)
• Requires less file space
• Has little need for compression
• Why?
• Uses mathematics to define shapes, paths, and
  speeds.

8
Compressing Frame Animation

• Each Frame is compressed as discussed last week.
  
• Each frame is an image, thus each one is
  compressed as a separate still image
• Frame difference compression is then applied
  (works best with line drawings)
• What is Frame difference compression? (discussed
  more in chapter 5)
• Rather than storing each frame individually, only
  the change in pixels is stored between each frame.

9
Lets Look at an Animated Gif

• Open Napolean Dynamite in Adobe Photoshop to se
  each frame

10
File Formats for Animation

• Animated gifs do not require plug-ins
• Flash .swf
• Fireworks .phg
• Video
• QuickTime .mov
• RealVideo .ram
• Windows Media .wmv
• Plus many more (mpg, dcr, etc)

11
Building Animation in Flash

• Check out page 62-64
• Lets check it out in class!

12
Creating 3D Animation

• Cinema4D
• Reasonably priced software
• GMAX
• Free learning tool for 3D object creation and
  animation
• 3D Studio Max
• Etc.

13
Embedding Animation in a Web Page

• Animated gifs
• These are inserted the same way a still image is
  inserted
• Check page 68 for information on ebedding flash
  files (.swf)
• Good Usablity Note!
• Rather than placing a video right on the page,
  put a link allowing the users to choose to view
  the video or not.