Unit 6 – Multimedia Element: Animation

Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Unit Unit 66 – – Multimedia Element: Multimedia Element: AnimationAnimation

2015-16 2015-16 Semester 1Semester 1

Unit 6: Multimedia Element: AnimationUnit 6: Multimedia Element: Animation

Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

2

Unit OutlineUnit 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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

3

IntroductionIntroduction

• 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.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

IntroductionIntroduction

• 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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

5

Animation GuidelinesAnimation Guidelines

• 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.

SSelf-elf-SS

tudy

tudy

SSlid

elid

e


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Animation GuidelinesAnimation Guidelines

• 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

SSelf-elf-SS

tudy

tudy

SSlid

elid

e


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

• 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.

FlipbookFlipbook

7

Flipbook


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

8

Sampling Rate and Playback Sampling Rate and Playback RateRate

• 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.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

iaSampling Rate and Playback Sampling Rate and Playback

RateRate• 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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

10

Cel AnimationCel 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.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

11

Example of cel animation


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

12

Frame-based AnimationFrame-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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

13

Path-based AnimationPath-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.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Computational AnimationComputational 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

14


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

15

Program-based or Script-Program-based or Script-based Animationbased 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.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Special Animation EffectsSpecial 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.

16

Morphing


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

• 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



Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

18


• 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.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Onion-skinningOnion-skinning

• Is a common feature provided by animation software

• Enables animators to see previous and following frames while they are drawing the current frame

19

Onion-skinning


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Animation SoftwareAnimation 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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

21

Animation SoftwareAnimation Software

• Examples– Adobe Fireworks– Adobe Flash


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

22

Animation File FormatsAnimation 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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Animation File FormatsAnimation 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


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

ReferenceReference

• 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.

24

Unit 6 – Multimedia Element: Animation

Documents