Understanding

Multimedia Elements –
Sound, Animation, Video
Unit C
 Objectives

Understand sound
Sound on the Web
2-D animation
3-D animation
Animation on the
Web

2
Objectives

Video
Video
compression &
video editing
Video on the
Web

3
Understanding Sound: Analog

Sound waves
Analog wave pattern
– Volume = height of each peak
• Higher the peak, louder the sound
– Frequency(pitch) = distance between
peaks measured in hertz(Hz)
• Greater the distance, lower the sound

4
Understanding Sound: Digital

Converted to bits via sampling

Quality depends on:
– Sample rate: number of times sample is
taken (11.025 kHz, 22.05 kHz & 44.1 kHz)
– Sample size: amount of information stored
(8 bit and 16 bit)

5
 Digitizing Process

Cassette tape player,

videotape player, CD or
microphone is captured
by sound card
Software/user controls
sample rate and size
Sound-editing program
used for manipulation
6
 Sound File Formats
WAV
– Windows or Macintosh
– Used on the Web
AIFF (Audio Interchange File Format)
– AIFFC (AIFF Compressed)
– Windows or Macintosh
RealAudio (.ra)
– Allows streaming of sound over Web
MP3 (MPEG Layer 3)
– Compresses entire songs for Web
– Near stereo quality

7
MIDI Sound Files

Musical Instrument
Digital Interface
Electronic musical
instruments create
sound; then stored
on computer
Contain
code/commands, not
digitized sounds
Very small files
8
 Sound on the Web
File
File size
size isis an
an issue
issue
File
File compression
compression used used for
for
certain
certain file
file formats
formats
(RealAudio
(RealAudio and and MP3)
MP3)
Sounds
Sounds stored
stored onon Web
Web
server
server
Media
Media player
player installed
installed on
on
user
user computer
computer
–– RealPlayer,
RealPlayer, Windows
Windows Media
Media
Player,
Player, MP3,
MP3, QuickTime
QuickTime
9
 Streaming Media

Audio and video can

be played in real time
File starts playing
immediately – doesn’t
wait for full download
Connection to web
server is continuous

10
Tips for Using Sound on Web

Is the sound appropriate? Is there a

benefit?
Is it a good sound quality?
Can you afford the cost of recording
the sound?
Should you just use sound with still
images instead of video?
Can you stream the files?
Can you give the user control?

11
 2-D Animation Can Provide

Simulation of actual events

Action and realism in entertainment

Visualization and demonstration in education

12
 2-D Animation Issues

Movement is made up of many

still images
Each still image has its own
frame
Speed of moving these frames:
– Movies on film: 24 fps
– Television: 30 fps
– Computer animation: 12-15 fps

13
2-D Animation Types:
Cel Animation
Based on changes that
occur from one frame to
another
Background image is
stationary
Celluloid images placed on
background
Celluloid images change
from frame to frame
14
 2-D Animation Types
Cel
Cel
Animation
Animation

15
 2-D Animation Types:
Path Animation
Object moved along predetermined
path on screen
Object can stay the same, be resized
or rotated
Tweening in an authoring program
– Define beginning position in one frame
– Define ending position in another frame
– Software fills in intervening frames

16
 2-D Animation Types
Path
Path
Animation
Animation

17
 2-D Animation Software Allows

Frame rate changes

Transitions
User playback control
Looping
Object drawing and animating
Sound clips
Cheap shareware to expensive authoring packages
18
3-D Animation

Games and adventure

titles
Users are participants, not
spectators
Much more complex than
2-D
Involves:
– Modeling
– Animation
– Rendering

19
 3-D Modeling and Animation
Draw views by setting points on a grid

Create contours and structure

Define object’s motion,

lighting & perspective views

20
 3-D Rendering

Give
Give objects
objects attributes
attributes
–– Colors
Colors
–– Surface
Surfacetextures
textures
–– Transparency
Transparencyamounts
amounts
Programs
Programs
–– Strata
Strata3D
3D
–– LightWave
LightWave3D3D
–– 3D
3DStudio
StudioMax
Max
–– Maya
Maya
–– Houdini
Houdini

21
3-D Morphing

22
 Warping

Distort a single image

Change a frown into a smile

23
 Virtual Reality (VR)

Creates an environment that surrounds

the user so the user becomes part of the
experience
Examples:
– Boeing Corporation flight simulators
– CD-based adventure games: Myst and 7th Guest
– Virtual tour sites
Some require special equipment like
goggles & gloves
24
 Animation on the Web

Animated text
Animated GIF
Macromedia Director applications
3-D environments
You
You must
must have
have the
the plug-ins
plug-ins to
to play
play these
these animations!
animations!

25
Animated Text on the Web

Rotating, zooming, scrolling,

distorting, blinking
Use authoring software
Use HTML
– <blink>Hello</blink>

26
 Animated GIFs on the Web

Each .gif
image file is
a little
different

27
 Macromedia Applications
on the Web
Director or Flash to author

Shockwave to deliver on Web

28
 VRML

Virtual Reality Modeling Language

Creates interactive 3-D on the Web
User is moved through the
environment (instead of object
moving)
Environment is dynamic and
always changing

29
 Understanding Video

Video can be
– Very expensive
– Time-consuming to create
– Very large files
Video can be found in stock film
companies
Video must be digitized from an
analog signal
30
 Digitizing an
Analog Video Signal

31
 Editing Video

Digitized video is not

linear like analog video
Can access any part of
video randomly
Can cut and paste
Can use special effects
and transitions

32
Digital Video File Size
Considerations
1 second of high-quality
color video on ¼ of the
computer screen = 1 MB
file size
Determining file size
– Frame rate: lower the better
(15 fps minimum)
– Image size: use smaller
playback window
– Color depth: 8-bit vs. 16-bit
vs. 24-bit color
33
 Video
Compression/Decompression
Codecs
Lossless: gives larger file by
preserving exact image
Lossy: eliminates some image
data; smaller file, but poorer
quality

34
MPEG Compression Format
Motion Pictures Experts Group
Reduce file size by eliminating
redundant information (backgrounds)
Also looks for changes from frame to
frame

35
Video Compression Software

Apple’s QuickTime and QuickTime for

Windows
– Dual platform
– Lossy compression
Microsoft Windows Media Player
– AVI format
Both synchronize sound and motion
– Synchronized Multimedia Integration Language
(SMIL)
– Markup language like HTML

36
 Video Editing Software
Adobe Premiere
Transitions: dissolves, wipes, spins
Animations: fly-in logo
Special effects: twisting, zooming,
rotating
Filters: color balance,
brightness/contrast, blurring,
distortions, morphing
37
 Video on the Web

Only practical for 56K

or higher connections
Planning
– Is animation or still images
with sound better?
– Are stock videos better?
– Quality-versus-cost and
relevance of video to
application

38
Video Transfer Types: HTTP

HyperText Transfer
Protocol
Downloads entire video
to hard drive of user
User can play it over
and over quickly
Better for small video
clips

39
Video Transfer Types: RTSP

Real-Time Streaming Protocol

Continuous playing/streaming
Not saved on hard drive
User can randomly access any video
part
Better for large videos and live
broadcasts

40
 Streaming Video
HorizonLive: live video presentations

41
 Video and Virtual Reality

Apple QuickTime VR system

iPEX system
Starts with panoramic photographs
Camera rotated after each picture for
360 degrees
Photographs electronically “stitched”
together
User can navigate and zoom (White
House site)

42
Issue: The Napster Controversy

Intellectual Property
Rights and Emerging
Web Technologies
Sharing MP3 files
through the web
Recording Industry
Association of
America filed suit
43
 Understanding
Multimedia Elements –
Sound, Animation, Video
End