22
Chapter 5 Animation MELJUN CORTES MELJUN CORTES

MELJUN CORTES Multimedia lecture chapter5 animation

Embed Size (px)

Citation preview

Page 1: MELJUN CORTES Multimedia lecture chapter5 animation

Chapter 5

Animation

MELJUN CORTESMELJUN CORTES

Page 2: MELJUN CORTES Multimedia lecture chapter5 animation

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.

Page 3: MELJUN CORTES Multimedia lecture chapter5 animation

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.

Page 4: MELJUN CORTES Multimedia lecture chapter5 animation

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.

Page 5: MELJUN CORTES Multimedia lecture chapter5 animation

Uses of Animation

Education and Training

Entertainment and Games

Advertising and E-commerce

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

Page 6: MELJUN CORTES Multimedia lecture chapter5 animation

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.

Page 7: MELJUN CORTES Multimedia lecture chapter5 animation

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.

Page 8: MELJUN CORTES Multimedia lecture chapter5 animation

Flipbook approach

Sampling rate

Playback rate – 12-30 frames/second

Flicker

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

Page 9: MELJUN CORTES Multimedia lecture chapter5 animation

Frame-based (cell) animation

Key frames

Tweening

Tweeners

Shape Tweening - Morphing

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

Page 10: MELJUN CORTES Multimedia lecture chapter5 animation

Frame-based (cell) animation

Morphing Example

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

Page 11: MELJUN CORTES Multimedia lecture chapter5 animation

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.

Page 12: MELJUN CORTES Multimedia lecture chapter5 animation

Program (Script) - based animation

Most flexible

Higher learning curve

Lingo

Java– Applets

JavaScript

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

Page 13: MELJUN CORTES Multimedia lecture chapter5 animation

Animation Software

Graphics software

Animation engine

Compiling engine with codec

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

Page 14: MELJUN CORTES Multimedia lecture chapter5 animation

Macromedia

Fireworks

Director

Flash

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

Page 15: MELJUN CORTES Multimedia lecture chapter5 animation

Fireworks

Bitmap and vector tools

Frame-based environment

Writes JavaScript

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

Page 16: MELJUN CORTES Multimedia lecture chapter5 animation

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.

Page 17: MELJUN CORTES Multimedia lecture chapter5 animation

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.

Page 18: MELJUN CORTES Multimedia lecture chapter5 animation

Adobe

ImageReady

LiveMotion

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

Page 19: MELJUN CORTES Multimedia lecture chapter5 animation

ImageReady

Interactive rollovers

Animated GIFs

Animation palette

Optimized Web files

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

Page 20: MELJUN CORTES Multimedia lecture chapter5 animation

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.

Page 21: MELJUN CORTES Multimedia lecture chapter5 animation

Shareware

GIF Construction Set

GIFmation

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

Page 22: MELJUN CORTES Multimedia lecture chapter5 animation

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.