2. Chapter Concepts Discuss Using Animation on the Web
OVERVIEW
Chapter Concepts
Discuss Using Animation on the Web
Examine the Methods for Creating Animation
Understand 3-D Animation, Special Effects, and VR
Explore Animation Software
Discuss Animation File Formats for the Web
Multimedia for the Web

3. Introduction Animation: Simply a moving or changing graphic image
Virtual world created by animated objects has physical properties including height, width, depth, time
Used appropriately, animation can be an integral part of a Web site
Multimedia for the Web

4. INTRODUCTION
Introduction
Drawing attention to something of no use is an example of an ineffective and negative application of animation
An animation specialist is responsible for creating the animation on a Web site
Multimedia for the Web

5. INTRODUCTION
Introduction
Planning is important to ensure the animation is appropriate and well conceived
Storyboards help visualize the multimedia Web site
Animation specialist must have technical skills and design savvy
Multimedia for the Web

6. Discuss Using Animation on the Web
CONCEPT 1
Discuss Using Animation on the Web
Excellent way to increase appeal of Web site and ensure return visits
Animations can be simple, as in blinking text, marquee-like scrolling headlines, rotating logos, animated icons, Web buttons, 2-D action figures
Multimedia for the Web

7. Discuss Using Animation on the Web
CONCEPT 1
Discuss Using Animation on the Web
Complex concepts can be simplified and can use animation to visualize each concept
Animation often a better instructional tool than video:
Easy to understand, more cost-effective and also creates smaller file size
Multimedia for the Web

8. Discuss Using Animation on the Web
CONCEPT 1
Discuss Using Animation on the Web
Many Web sites use animation geared toward entertaining kids as they learn
Multimedia for the Web

9. Discuss Using Animation on the Web
CONCEPT 1
Discuss Using Animation on the Web
Macromedia Flash allows Web pages to run animations with small file size
Animation must be designed to be appropriate to the application and geared toward users of the site
Multimedia for the Web

10. Animation Guidelines Animations should impact not detract
CONCEPT 1
Animation Guidelines
Animations should impact not detract
Determine amount of animation
Animate what you want users to notice
Animation is appropriate to mood and content of the application
Not too many animated objects per page
Multimedia for the Web

11. CONCEPT 1
Animation Guidelines
Animation that does the same thing over and over is also annoying
Use transitions and special effects that help communicate message
Make sure animation loads quickly
Multimedia for the Web

12. Examine the Methods for Creating Animation
CONCEPT 2
Examine the Methods for Creating Animation
Digital animation based on flipbooks
Animation: A series of still images played back fast enough to trick our minds into believing that there is movement
Two rates used to measure animation: Sampling and Playback
Multimedia for the Web

13. CONCEPT 2
Sampling Rates
Sampling rate: number of different images that occur per second
Playback rate: number of frames displayed per second when animation is being viewed
Playback rate cannot be higher than the sampling rate
Multimedia for the Web

14. Frame-based Animation
CONCEPT 2
Frame-based Animation
Frame-based animation also called cel animation
Multimedia for the Web

15. Frame-based Animation
CONCEPT 2
Frame-based Animation
Computer-based cel animation: based on changes that occur from one frame to the next
Prior to computer-generated animation, artists drew each cel or frame needed to create the illusion of movement
Multimedia for the Web

16. Frame-based Animation
CONCEPT 2
Frame-based Animation
Tweening: Process of drawing ‘between’ frames; requires keyframes
Morphing: Special technique that uses frames to create the illusion of one object changing into another
Morphing on the Web generally uses process called shape tweening
Multimedia for the Web

17. Path-based Animation Also called vector animation
CONCEPT 2
Path-based Animation
Also called vector animation
Involves the creation of one object and a path; then tweening is used to fill in the frames as the object moves along the path
Computational animation: move object by varying coordinates
Multimedia for the Web

18. Program- or Script-based Animation
CONCEPT 2
Program- or Script-based Animation
Involves use of programming/scripting languages to create animation
Animations are often more flexible than those created using the other methods
Multimedia for the Web

19. Understand 3-D Animation, Special Effects, and VR
CONCEPT 3
Understand 3-D Animation, Special Effects, and VR
3-D animation is the foundation of many multimedia games and adventure Web sites
Creating 3-D animation is considerably more complex than creating 2-D animation
Multimedia for the Web

20. Understand 3-D Animation, Special Effects, and VR
CONCEPT 3
Understand 3-D Animation, Special Effects, and VR
Animating 3-D images and objects may involve frame-based, cell-based, or program-based animation to change the object’s shape or position
Changing lighting, perspective, and camera angle assists in creating the illusion of animation in a 3-D world
Multimedia for the Web

21. Understand 3-D Animation, Special Effects, and VR
CONCEPT 3
Understand 3-D Animation, Special Effects, and VR
Rendering: Giving objects attributes such as colors, surface textures, and opacity
Multimedia for the Web

22. Special Animation Effects
CONCEPT 3
Special Animation Effects
Onion skinning: Create new images by tracing over an existing image
Trail effect: When image from the previous frame is not completely erased so that it appears in the new frame
Multimedia for the Web

23. Special Animation Effects
CONCEPT 3
Special Animation Effects
Warping: Single image used
Morphing: More than one object
Multimedia for the Web

24. CONCEPT 3
Virtual Reality
Used to describe 3-D scenes on the Web that surround user to become part of the experience
Using VR, Web developers are able to create 3-D objects that users can manipulate with a pointing device such as a mouse, trackball, or joystick
Multimedia for the Web

25. Explore Animation Software
CONCEPT 4
Explore Animation Software
Macromedia
Macromedia Fireworks
Macromedia Flash
Adobe
Adobe ImageReady
Shareware
Multimedia for the Web

26. CONCEPT 4
Macromedia Fireworks
Combines both bitmap- and vector-editing tools within single environment
Allows you to import files from digital cameras, scanners, and other graphics applications
Multimedia for the Web

27. CONCEPT 4
Macromedia Flash
Vast majority of animations seen on the Web created using Flash
Allows you to work with vector graphics to create incredibly smooth, compact animation
Multimedia for the Web

28. CONCEPT 4
Macromedia Flash
Can import artwork from drawing programs such as Adobe Illustrator and Macromedia FreeHand
Macromedia Flash uses a timeline for development and control
Macromedia Flash has a built-in scripting language: ActionScript
Multimedia for the Web

29. CONCEPT 4
Adobe ImageReady
Packaged with Adobe Photoshop; Specifically designed for producing superior Web graphics and animation
Allows developers to creative interactive elements without writing
Produce high-quality graphics and animations with the smallest possible file sizes
Multimedia for the Web

30. Shareware Distributed on the honor system
CONCEPT 4
Shareware
Distributed on the honor system
Sometimes free of charge, or small fee for delivery
Create animated banners and signs, apply special effects such as transitions and spins, rotate, crop, color-adjust, and resize
Multimedia for the Web

31. CONCEPT 5
Animated GIFS
When viewed on the Web, the multiple images are streamed, or played back one at a time
Animated GIFs require no plug-ins or players and are supported by all major browsers
Multimedia for the Web

32. SWF Format Designed for efficient graphic delivery over the Web
CONCEPT 5
SWF Format
Designed for efficient graphic delivery over the Web
Files are small, support streaming so they can be delivered over a network with limited bandwidth
To view SWF files, Macromedia Flash Player must be installed on user’s computer
Multimedia for the Web

33. QuickTime (MOV) Apple’s animation and movie file format
CONCEPT 5
QuickTime (MOV)
Apple’s animation and movie file format
Non-platform specific
Can be either downloaded or streamed for quicker viewing
QuickTime player needed to view QuickTime files
Multimedia for the Web

34. MPEG Moving Picture Experts Group (MPEG)
CONCEPT 5
MPEG
Moving Picture Experts Group (MPEG)
Created standards for interactive animation and video
MPEG files are much smaller compared to other coding formats
Much higher quality for the size
Multimedia for the Web

35. AVI Audio Video Interleave format (AVI)
CONCEPT 5
AVI
Audio Video Interleave format (AVI)
Microsoft’s animation and movie file format for Windows
Quality is adequate, but do not offer some of the features and cross-platform compatibility found in other formats
Files may take longer to download
Multimedia for the Web

36. MNG Multiple Image Network Graphics
CONCEPT 5
MNG
Multiple Image Network Graphics
Similar to animated GIF; this format stores multiple images that are then streamed for quick download and playback
Offers advantages over GIF format
Supports multiple levels of transparency
Multimedia for the Web

37. Summary Discuss Using Animation on the Web Animation Guidelines
Examine the Methods for Creating Animation
Sampling Rates
Frame-based Animation
Program- or Script-based Animation
Multimedia for the Web

38. Summary Understand 3-D Animation, Special Effects, and VR
Virtual Reality
Macromedia Fireworks
Macromedia Flash
Macromedia
Adobe ImageReady
Multimedia for the Web

39. Summary Shareware Animated GIFS SWF Format QuickTime (MOV) MPEG AVI
MNG
Multimedia for the Web