Animation Chapter 3
Animation • What is it? • Anything that moves on the web. • Examples? • Note, many types of animations require plugins (e.g. Flash, RealPlayer, QuickTime, etc)
Goals of Animation • Get attention/entertain/advertise • Explain • Set mood
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)
Examples (cont.) • Entertainment • Strong Bad: New Hands
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)
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.
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.
Lets Look at an Animated Gif • Open Napolean Dynamite in Adobe Photoshop to se each frame
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)
Building Animation in Flash • Check out page 62-64 • Lets check it out in class!
Creating 3D Animation • Cinema4D • Reasonably priced software • GMAX • Free learning tool for 3D object creation and animation • 3D Studio Max • Etc.
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.