Upload
meljun-cortes
View
76
Download
1
Tags:
Embed Size (px)
Citation preview
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.