Transcript chap07 (new window)

Multimedia for the Web:
Creating Digital Excitement
Multimedia Element —
Animation
Chapter Concepts
Discuss Using Animation on the Web
Examine the Methods for Creating
Animation
Understand 3-D Animation, Special
Effects, and VR
Explore Animation Software
Discuss Animation File Formats for
the Web
Multimedia for the Web
Chapter 7
2
Introduction
Animation: Simply a moving or
changing graphic image
Virtual world created by animated
objects has physical properties
including height, width, depth, time
Used appropriately, animation can be
an integral part of a Web site
Multimedia for the Web
Chapter 7
3
Introduction
Drawing attention to something of no
use is an example of an ineffective
and negative application of animation
An animation specialist is responsible
for creating the animation on a Web
site
Multimedia for the Web
Chapter 7
4
Introduction
Planning is important to ensure the
animation is appropriate and well
conceived
Storyboards help visualize the
multimedia Web site
Animation specialist must have
technical skills and design savvy
Multimedia for the Web
Chapter 7
5
Discuss Using Animation on
the Web
Excellent way to increase appeal of
Web site and ensure return visits
Animations can be simple, as in
blinking text, marquee-like scrolling
headlines, rotating logos, animated
icons, Web buttons, 2-D action
figures
Multimedia for the Web
Chapter 7
6
Discuss Using Animation on
the Web
Complex concepts can be simplified
and can use animation to visualize
each concept
Animation often a better instructional
tool than video:
– Easy to understand, more costeffective and also creates smaller
file size
Multimedia for the Web
Chapter 7
7
Discuss Using Animation on
the Web
Many Web sites use animation
geared toward entertaining kids as
they learn
Multimedia for the Web
Chapter 7
8
Discuss Using Animation on
the Web
Macromedia Flash allows Web pages
to run animations with small file size
Animation must be designed to be
appropriate to the application and
geared toward users of the site
Multimedia for the Web
Chapter 7
9
Animation Guidelines
Animations should impact not detract
Determine amount of animation
Animate what you want users to notice
Animation is appropriate to mood and
content of the application
Not too many animated objects per
page
Multimedia for the Web
Chapter 7
10
Animation Guidelines
Animation that does the same thing
over and over is also annoying
Use transitions and special effects that
help communicate message
Make sure animation loads quickly
Multimedia for the Web
Chapter 7
11
Examine the Methods for
Creating Animation
Digital animation based on flipbooks
Animation: A series of still images
played back fast enough to trick our
minds into believing that there is
movement
Two rates used to measure animation:
Sampling and Playback
Multimedia for the Web
Chapter 7
12
Sampling Rates
Sampling rate: number of different
images that occur per second
Playback rate: number of frames
displayed per second when animation
is being viewed
Playback rate cannot be higher than
the sampling rate
Multimedia for the Web
Chapter 7
13
Frame-based Animation
Frame-based animation also called
cel animation
Multimedia for the Web
Chapter 7
14
Frame-based Animation
Computer-based cel animation: based
on changes that occur from one frame
to the next
Prior to computer-generated
animation, artists drew each cel or
frame needed to create the illusion of
movement
Multimedia for the Web
Chapter 7
15
Frame-based Animation
Tweening: Process of drawing
‘between’ frames; requires keyframes
Morphing: Special technique that uses
frames to create the illusion of one
object changing into another
Morphing on the Web generally uses
process called shape tweening
Multimedia for the Web
Chapter 7
16
Path-based Animation
Also called vector animation
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
Computational animation: move
object by varying coordinates
Multimedia for the Web
Chapter 7
17
Program- or Script-based
Animation
Involves use of programming/scripting
languages to create animation
Animations are often more flexible
than those created using the other
methods
Multimedia for the Web
Chapter 7
18
Understand 3-D Animation,
Special Effects, and VR
3-D animation is the foundation of
many multimedia games and
adventure Web sites
Creating 3-D animation is
considerably more complex than
creating 2-D animation
Multimedia for the Web
Chapter 7
19
Understand 3-D Animation,
Special Effects, and VR
Animating 3-D images and objects
may involve frame-based, cell-based,
or program-based animation to
change the object’s shape or position
Changing lighting, perspective, and
camera angle assists in creating the
illusion of animation in a 3-D world
Multimedia for the Web
Chapter 7
20
Understand 3-D Animation,
Special Effects, and VR
Rendering: Giving objects attributes
such as colors, surface textures, and
opacity
Multimedia for the Web
Chapter 7
21
Special Animation Effects
Onion skinning: Create new images
by tracing over an existing image
Trail effect: When image from the
previous frame is not completely
erased so that it appears in the new
frame
Multimedia for the Web
Chapter 7
22
Special Animation Effects
Warping: Single image used
Morphing: More than one object
Multimedia for the Web
Chapter 7
23
Virtual Reality
Used to describe 3-D scenes on the
Web that surround user to become
part of the experience
Using VR, Web developers are able
to create 3-D objects that users can
manipulate with a pointing device
such as a mouse, trackball, or joystick
Multimedia for the Web
Chapter 7
24
Explore Animation Software
Macromedia
– Macromedia Fireworks
– Macromedia Flash
Adobe
– Adobe ImageReady
Shareware
Multimedia for the Web
Chapter 7
25
Macromedia Fireworks
Combines both bitmap- and vectorediting tools within single environment
Allows you to import files from digital
cameras, scanners, and other
graphics applications
Multimedia for the Web
Chapter 7
26
Macromedia Flash
Vast majority of animations seen on
the Web created using Flash
Allows you to work with vector
graphics to create incredibly smooth,
compact animation
Multimedia for the Web
Chapter 7
27
Macromedia Flash
Can import artwork from drawing
programs such as Adobe Illustrator
and Macromedia FreeHand
Macromedia Flash uses a timeline for
development and control
Macromedia Flash has a built-in
scripting language: ActionScript
Multimedia for the Web
Chapter 7
28
Adobe ImageReady
Packaged with Adobe Photoshop;
Specifically designed for producing
superior Web graphics and animation
Allows developers to creative
interactive elements without writing
Produce high-quality graphics and
animations with the smallest possible
file sizes
Multimedia for the Web
Chapter 7
29
Shareware
Distributed on the honor system
Sometimes free of charge, or small
fee for delivery
Create animated banners and signs,
apply special effects such as
transitions and spins, rotate, crop,
color-adjust, and resize
Multimedia for the Web
Chapter 7
30
Animated GIFS
When viewed on the Web, the
multiple images are streamed, or
played back one at a time
Animated GIFs require no plug-ins or
players and are supported by all
major browsers
Multimedia for the Web
Chapter 7
31
SWF Format
Designed for efficient graphic
delivery over the Web
Files are small, support streaming so
they can be delivered over a network
with limited bandwidth
To view SWF files, Macromedia
Flash Player must be installed on
user’s computer
Multimedia for the Web
Chapter 7
32
QuickTime (MOV)
Apple’s animation and movie file
format
Non-platform specific
Can be either downloaded or
streamed for quicker viewing
QuickTime player needed to view
QuickTime files
Multimedia for the Web
Chapter 7
33
MPEG
Moving Picture Experts Group
(MPEG)
Created standards for interactive
animation and video
MPEG files are much smaller
compared to other coding formats
Much higher quality for the size
Multimedia for the Web
Chapter 7
34
AVI
Audio Video Interleave format (AVI)
Microsoft’s animation and movie file
format for Windows
Quality is adequate, but do not offer
some of the features and crossplatform compatibility found in other
formats
Files may take longer to download
Multimedia for the Web
Chapter 7
35
MNG
Multiple Image Network Graphics
Similar to animated GIF; this format
stores multiple images that are then
streamed for quick download and
playback
Offers advantages over GIF format
Supports multiple levels of
transparency
Multimedia for the Web
Chapter 7
36
Summary
Discuss Using Animation on the Web
Animation Guidelines
Examine the Methods for Creating
Animation
Sampling Rates
Frame-based Animation
Program- or Script-based Animation
Multimedia for the Web
Chapter 7
37
Summary
Understand 3-D Animation,
Special Effects, and VR
Virtual Reality
Macromedia Fireworks
Macromedia Flash
Macromedia
Adobe ImageReady
Multimedia for the Web
Chapter 7
38
Summary
Shareware
Animated GIFS
SWF Format
QuickTime (MOV)
MPEG
AVI
MNG
Multimedia for the Web
Chapter 7
39