Unit 6 – Multimedia Element: Animation

1. Unit 6 – Multimedia Element: Animation 2014-15 Semester 1

2. Unit Outline • In this unit, we will learn • Animation Guidelines • Flipbook • Sampling Rate and Playback Rate • Cel Animation • Frame-based Animation • Path-based Animation • Computational Animation • Program-based or Script-based Animation • Special Animation Effects • Animation Software • Animation File Formats

3. Introduction • Animation is an illusion, a perception of motion. • Animation: Simply a moving or changing graphic image • Animation: A series of still images played back fast enough to trick our minds into believing that there is movement To create the illusion of animation, a series of still images is displayed fast enough so the viewer believes the images are moving.

4. Introduction • Animation is an excellent way to increase appeal of a multimedia application and ensure return visits. • Animation can be used to simplify complex concepts and visualize concepts. • Animations can be simple, as in blinking text, marquee-like scrolling headlines, rotating logos, animated icons, Web buttons, 2-D action figures, 3-D action figures. 4

5. Animation Guidelines Self-Study Slide • Animations should impact not detract. • Animate what we want users to notice. • Animation should be appropriate to the mood and content of the application. • Do not use too many animated objects per page. • Animation that does the same thing over and over is annoying. • Use transitions and special effects that help communicate message. • Make sure animation loads quickly.

6. Animation Guidelines Self-Study Slide • Use animation where taking video shots may be unpractical or impossible but where depicting motion is necessary. • Use animation where minute details are to be depicted. • Video often has a lower resolution than animation. 6

7. Flipbook • Digital animation is based on flipbooks. • A flipbook is a book with a series of pictures varying gradually from one page to the next, so that when the pages are turned rapidly, the pictures appear to animate. Flipbook 7

8. Sampling Rate and Playback Rate • Two rates are used to measure animation: sampling rate and playback rate • Sampling rate refers to the number of images created per second and available to be used in an animation. • Playback rate is the number of frames displayed per second when animation is being viewed. • Playback rate cannot be higher than the sampling rate.

9. Sampling Rate and Playback Rate • To create the illusion of motion effectively, the playback rate of animation must be between 24 and 30 frames per second at full-motion video standards. • On the Web, the standard is generally 12 to 15 frames per second. • Anything less than 12 frames per second, however, will create a jerky motion as the eye detects the changes from one frame to the next. 9

10. Cel Animation • Images are drawn on pieces of celluloid. • Celluloid images are placed on a stationary background. • The background remains fixed as objects change from frame to frame.

11. Example of cel animation

12. Frame-based Animation • Computer-based cel animation is based on changes that occur from one frame to the next. • Each keyframe is unique and illustrates a key event in the timeline of the animation. The difference between one keyframe and the next keyframe could be the result of a new position, color, shape, or any number of other characteristics or combinations of characteristics. • Tweening: process of drawing “between’’ frames; requires at least two keyframes

13. Path-based Animation • Also known as vector animation; an animated object is created by following an object’s transition over a line or vector • 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 With path-based animation, the computer program manipulates the object by drawing the frames along the path that the object follows.

14. Computational Animation • Allows an object to be moved across a screen by varying its x- and y- coordinates • Is similar to path-based animation; however, instead of specifying a path for the object to travel, its position is varied based on axes

15. Program-based or Script-based Animation • Involves the use of programming / scripting languages to create animation • Animations created are often more flexible than those created using the other methods because they can be very easily modified to use new images and objects.

16. Special Animation Effects • Morphing: process of blending together two images into a series of images • Morphing uses frames to create the illusion of one object changing into another. • In Adobe Flash, morphing on simple vector graphics can be created by using a process called shape tweening. Morphing 16

17. Special Animation Effects • Warping: Distortion of an image (only one image is used) Software can be used to distort or warp an image to create a special animation effect. 17

18. Special Animation Effects • A film loop consists of a series of animated frames looped to play over and over again. • Trail effect is when the image from the previous frame is not completely erased so that it appears in the new frame.

19. Onion-skinning • Is a common feature provided by animation software • Enables animators to see previous and following frames while they are drawing the current frame Onion-skinning 19

20. Animation Software • Some animation software combine both bitmap- and vector-editing tools within a single environment. • Animation software allow animators to import media elements of various file formats. • Some animation software use a timeline for development and control. • Some animation software has a built-in scripting language • Example: ActionScript in Adobe Flash 20

21. Animation Software • Examples • Adobe Fireworks • Adobe Flash

22. Animation File Formats • Animated GIF • Also known as GIF89a • Requires no plug-in for viewing in browsers • Is supported by all major browsers • SWF • This file format is for viewing only • To view SWF files, Adobe Flash Player must be installed on user’s computer. • QuickTime (MOV) • Apple’s animation and movie file format • Is non-platform specific

23. Animation File Formats • MPEG (Moving Picture Experts Group) • Moving Picture Experts Group created standards for interactive animation and video. • MPEG files tend to be much smaller and of much higher quality for the size since MPEG uses very sophisticated compression techniques. • AVI (Audio Video Interleave) • Microsoft’s animation and movie file format for Windows • Although AVI files are native to Windows, other programs and players will also recognize and play them. 23

24. Reference • Part of this slide set is prepared or/and extracted from the following book: • Multimedia For The Web Revealed, Calleen Coorough & Jim Shuman, Thomson Learning, 2006, ISBN:1-4188-3953-1 • This set of slides is for teaching purpose only. • Self-study slide(s) is / are within the scope of the final examination.