MELJUN CORTES Multimedia lecture chapter5 animation

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 features

Harcourt, 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 evolved

Effects– Onion skinning– Trail effect– Film loop

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

Uses of Animation

Education and Training

Entertainment and Games

Advertising and E-commerce

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

Animation Specialist

Responsible for creating animation

Skills– 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 approach

Frame-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 rate

Playback rate – 12-30 frames/second

Flicker

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

Frame-based (cell) animation

Key frames

Tweening

Tweeners

Shape 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 vector

Computational – plots x and y coordinates

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

Program (Script) - based animation

Most flexible

Higher learning curve

Lingo

Java– Applets

JavaScript

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

Animation Software

Graphics software

Animation engine

Compiling engine with codec

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

Macromedia

Fireworks

Director

Flash

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

Fireworks

Bitmap and vector tools

Frame-based environment

Writes 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 tools

Actions for interactivity

Shape and motion tweening

Timeline

Library

Publish

Flash Player

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

Adobe

ImageReady

LiveMotion

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

ImageReady

Interactive rollovers

Animated GIFs

Animation palette

Optimized Web files

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

LiveMotion

Includes sound and interactivity

Bitmap and vector tools

Styles palette– Saves color, texture, opacity, gradient, fills and

motion

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

Shareware

GIF Construction Set

GIFmation

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

Animation File Formats

Animated GIF (GIF89a)– Streamed

AVI (Video for Windows)

DCR

MNG

MPEG

QuickTime (MOV)

SWF

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