Chapter 5 - Animation

MELJUN CORTESMELJUN CORTES

Chapter Objectives Define animation List several uses for Web animation Describe the roles and responsibilities of the

animation specialist List and explain the different methods used to create

animation Describe the different programming languages used

to create Web animation List and describe the different animation tools

available for creating animation for the Web List the most popular animation file formats found

on the Web and explain some of their key featuresHarcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Introduction

Animation– Moving graphic image– Computer displays a series of still images fast

enough to trick the human eye into believing that there is motion

Grabs attention– Effective – Distracting

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Introduction

Process used to create animation has evolvedEffects– Onion skinning– Trail effect– Film loop

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Uses of Animation

Education and TrainingEntertainment and GamesAdvertising and E-commerce

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Animation Specialist

Responsible for creating animationSkills– Graphic design– 3D modeling– Web development

Trick to good animation: knowing what, when and how much to animate

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Methods of Creating Animation

Flipbook approachFrame-based animation (cell animation)

Path-based animation (vector animation)Program- or Script-based animation

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Flipbook approach

Sampling ratePlayback rate – 12-30 frames/secondFlicker

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Frame-based (cell) animation

Key framesTweeningTweenersShape Tweening - Morphing

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Frame-based (cell) animation

Morphing Example

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Path-based (vector) animation

Follows object over a line or vectorComputational – plots x and y coordinates

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Program (Script) - based animation

Most flexibleHigher learning curveLingoJava– Applets

JavaScript

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Animation Software

Graphics softwareAnimation engineCompiling engine with codec

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Macromedia

FireworksDirectorFlash

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Fireworks

Bitmap and vector toolsFrame-based environmentWrites JavaScript

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Director

Shockwave - Web contentTheater metaphor– Stage– Casts – internal and external– Text and paint windows– Score – cast member becomes sprite– Channels – tempo, color palette, transition, sound,

script, sprite

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Flash

Bitmap and vector toolsActions for interactivityShape and motion tweeningTimelineLibraryPublishFlash Player

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Adobe

ImageReadyLiveMotion

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

ImageReady

Interactive rolloversAnimated GIFsAnimation paletteOptimized Web files

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

LiveMotion

Includes sound and interactivityBitmap and vector toolsStyles palette– Saves color, texture, opacity, gradient, fills and

motion

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Shareware

GIF Construction SetGIFmation

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

Animation File Formats

Animated GIF (GIF89a)– Streamed

AVI (Video for Windows)DCRMNGMPEGQuickTime (MOV)SWF

Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.