1. Multimedia for the Web: Creating Digital Excitement Multimedia Element — Animation

2. Chapter 7 2 Multimedia for the Web 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 Chapter Concepts

3. Chapter 7 3 Multimedia for the Web 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 Introduction

4. Chapter 7 4 Multimedia for the Web 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 Introduction

5. Chapter 7 5 Multimedia for the Web 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 Introduction

6. Chapter 7 6 Multimedia for the Web 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

7. Chapter 7 7 Multimedia for the Web 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

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

9. Chapter 7 9 Multimedia for 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 Discuss Using Animation on the Web

10. Chapter 7 10 Multimedia for the Web 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 Animation Guidelines

11. Chapter 7 11 Multimedia for the Web 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 Animation Guidelines

12. Chapter 7 12 Multimedia for the Web 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

13. Chapter 7 13 Multimedia for the Web 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 Sampling Rates

14. Chapter 7 14 Multimedia for the Web Frame-based animation also called cel animation Frame-based Animation

15. Chapter 7 15 Multimedia for the Web 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 Frame-based Animation

16. Chapter 7 16 Multimedia for the Web 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

17. Chapter 7 17 Multimedia for the Web 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

18. Chapter 7 18 Multimedia for the Web 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

19. Chapter 7 19 Multimedia for the Web 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 Understand 3-D Animation, Special Effects, and VR

20. Chapter 7 20 Multimedia for the Web 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 Understand 3-D Animation, Special Effects, and VR

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

22. Chapter 7 22 Multimedia for the Web 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 Special Animation Effects

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

24. Chapter 7 24 Multimedia for the Web 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

25. Chapter 7 25 Multimedia for the Web Macromedia –Macromedia Fireworks –Macromedia Flash Adobe –Adobe ImageReady Shareware Explore Animation Software

26. Chapter 7 26 Multimedia for the Web 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

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

28. Chapter 7 28 Multimedia for the Web 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 Macromedia Flash

29. Chapter 7 29 Multimedia for the Web 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

30. Chapter 7 30 Multimedia for the Web 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

31. Chapter 7 31 Multimedia for the Web 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

32. Chapter 7 32 Multimedia for the Web 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

33. Chapter 7 33 Multimedia for the Web 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

34. Chapter 7 34 Multimedia for the Web 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 MPEG

35. Chapter 7 35 Multimedia for the Web 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

36. Chapter 7 36 Multimedia for the Web 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

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

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

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