Understanding Understanding Multimedia Elements – Multimedia Elements –

Sound, Animation, VideoSound, Animation, VideoUnit CUnit C

2

ObjectivesObjectives

Understand soundUnderstand sound

Sound on the WebSound on the Web

2-D animation2-D animation

3-D animation3-D animation

Animation on the Animation on the WebWeb

3

ObjectivesObjectives

VideoVideo

Video Video compression & compression & video editingvideo editing

Video on the Video on the WebWeb

4

Understanding Sound: AnalogUnderstanding Sound: Analog

Sound waves Sound waves

Analog wave patternAnalog wave pattern– Volume = height of each peakVolume = height of each peak

• Higher the peak, louder the soundHigher the peak, louder the sound

– Frequency(pitch) = distance between Frequency(pitch) = distance between peaks measured in hertz(Hz)peaks measured in hertz(Hz)• Greater the distance, lower the soundGreater the distance, lower the sound

5

Understanding Sound: DigitalUnderstanding Sound: Digital

Converted to bits via samplingConverted to bits via sampling

Quality depends on:Quality depends on:– Sample rate:Sample rate: number of times sample is number of times sample is

taken (11.025 kHz, 22.05 kHz & 44.1 kHz)taken (11.025 kHz, 22.05 kHz & 44.1 kHz)– Sample size:Sample size: amount of information stored amount of information stored

(8 bit and 16 bit)(8 bit and 16 bit)

6

Digitizing ProcessDigitizing Process

Cassette tape player, Cassette tape player, videotape player, CD or videotape player, CD or microphone is captured microphone is captured by sound cardby sound card

Software/user controls Software/user controls sample rate and sizesample rate and size

Sound-editing program Sound-editing program used for manipulationused for manipulation

7

Sound File FormatsSound File Formats

WAVWAV– Windows or MacintoshWindows or Macintosh– Used on the WebUsed on the Web

AIFFAIFF (Audio Interchange File Format) (Audio Interchange File Format)– AIFFC (AIFF Compressed)AIFFC (AIFF Compressed)– Windows or MacintoshWindows or Macintosh

RealAudioRealAudio (.ra) (.ra)– Allows streaming of sound over WebAllows streaming of sound over Web

MP3MP3 (MPEG Layer 3) (MPEG Layer 3)– Compresses entire songs for WebCompresses entire songs for Web– Near stereo qualityNear stereo quality

8

MIDI Sound FilesMIDI Sound Files

Musical Instrument Musical Instrument Digital InterfaceDigital InterfaceElectronic musical Electronic musical instruments create instruments create sound; then stored sound; then stored on computeron computerContain Contain code/commands, not code/commands, not digitized soundsdigitized soundsVery small filesVery small files

9

Sound on the WebSound on the Web

File size is an issueFile size is an issueFile compression used for File compression used for certain file formats certain file formats (RealAudio and MP3)(RealAudio and MP3)Sounds stored on Web Sounds stored on Web serverserverMedia player installed on Media player installed on user computeruser computer– RealPlayer, Windows Media RealPlayer, Windows Media

Player, MP3, QuickTimePlayer, MP3, QuickTime

File size is an issueFile size is an issueFile compression used for File compression used for certain file formats certain file formats (RealAudio and MP3)(RealAudio and MP3)Sounds stored on Web Sounds stored on Web serverserverMedia player installed on Media player installed on user computeruser computer– RealPlayer, Windows Media RealPlayer, Windows Media

Player, MP3, QuickTimePlayer, MP3, QuickTime

10

Streaming MediaStreaming Media

Audio and video can Audio and video can be played in real timebe played in real time

File starts playing File starts playing immediately – doesn’t immediately – doesn’t wait for full downloadwait for full download

Connection to web Connection to web server is continuousserver is continuous

11

Tips for Using Sound on WebTips for Using Sound on Web

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

12

2-D Animation Can Provide2-D Animation Can Provide

Action and realism in entertainment Action and realism in entertainment

Visualization and demonstration in educationVisualization and demonstration in education

Simulation of actual eventsSimulation of actual events

13

2-D Animation Issues2-D Animation Issues

Movement is made up of many Movement is made up of many still imagesstill images

Each still image has its own Each still image has its own frameframe

Speed of moving these frames:Speed of moving these frames:– Movies on film:Movies on film: 24 fps 24 fps– Television:Television: 30 fps 30 fps– Computer animation:Computer animation: 12-15 fps 12-15 fps

14

2-D Animation Types: 2-D Animation Types: Cel AnimationCel Animation

Based on changes that Based on changes that occur from one frame to occur from one frame to anotheranotherBackground image is Background image is stationarystationaryCelluloid images placed on Celluloid images placed on backgroundbackgroundCelluloid images change Celluloid images change from frame to frame from frame to frame

15

2-D Animation Types2-D Animation Types

CelCelAnimationAnimation

CelCelAnimationAnimation

16

2-D Animation Types: 2-D Animation Types: Path AnimationPath Animation

Object moved along predetermined Object moved along predetermined path on screenpath on screen

Object can stay the same, be resized Object can stay the same, be resized or rotatedor rotated

Tweening in an authoring programTweening in an authoring program– Define beginning position in one frameDefine beginning position in one frame– Define ending position in another frameDefine ending position in another frame– Software fills in intervening framesSoftware fills in intervening frames

17

2-D Animation Types2-D Animation Types

PathPathAnimationAnimation

PathPathAnimationAnimation

18

2-D Animation Software Allows2-D Animation Software Allows

Frame rate changesFrame rate changes

TransitionsTransitions

User playback controlUser playback control

LoopingLooping

Object drawing and animatingObject drawing and animating

Sound clipsSound clips

Cheap shareware to expensive authoring packagesCheap shareware to expensive authoring packages

19

3-D Animation3-D Animation

Games and adventure Games and adventure titlestitlesUsers are participants, not Users are participants, not spectatorsspectatorsMuch more complex than Much more complex than 2-D2-DInvolves:Involves:– ModelingModeling– AnimationAnimation– RenderingRendering

20

3-D Modeling and Animation3-D Modeling and Animation

Draw views by setting points on a gridDraw views by setting points on a grid

Create contours and structureCreate contours and structure

Define object’s motion, Define object’s motion, lighting & perspective viewslighting & perspective views

21

3-D Rendering3-D Rendering

Give objects attributesGive objects attributes– ColorsColors– Surface texturesSurface textures– Transparency amountsTransparency amounts

ProgramsPrograms– Strata 3DStrata 3D– LightWave 3DLightWave 3D– 3D Studio Max3D Studio Max– MayaMaya– HoudiniHoudini

Give objects attributesGive objects attributes– ColorsColors– Surface texturesSurface textures– Transparency amountsTransparency amounts

ProgramsPrograms– Strata 3DStrata 3D– LightWave 3DLightWave 3D– 3D Studio Max3D Studio Max– MayaMaya– HoudiniHoudini

22

3-D Morphing3-D Morphing

23

WarpingWarping

Distort a single imageDistort a single image

Change a frown into a smileChange a frown into a smile

24

Virtual Reality (VR)Virtual Reality (VR)

Creates an environment that surrounds Creates an environment that surrounds the user so the user becomes part of the the user so the user becomes part of the experienceexperienceExamples:Examples:– Boeing Corporation flight simulatorsBoeing Corporation flight simulators– CD-based adventure games: Myst and 7CD-based adventure games: Myst and 7 thth Guest Guest– Virtual tour sitesVirtual tour sites

Some require special equipment like Some require special equipment like goggles & glovesgoggles & gloves

25

Animation on the WebAnimation on the Web

Animated textAnimated text

Animated GIFAnimated GIF

Macromedia Director applicationsMacromedia Director applications

3-D environments3-D environments

You must have the plug-ins to play these animations!You must have the plug-ins to play these animations!You must have the plug-ins to play these animations!You must have the plug-ins to play these animations!

26

Animated Text on the WebAnimated Text on the Web

Rotating, zooming, scrolling, Rotating, zooming, scrolling, distorting, blinkingdistorting, blinking

Use authoring softwareUse authoring software

Use HTMLUse HTML– <blink>Hello</blink><blink>Hello</blink>

27

Animated GIFs on the WebAnimated GIFs on the Web

Each .gif image file is

a little different

28

Macromedia Applications Macromedia Applications on the Webon the Web

Director or Flash to authorDirector or Flash to author

Shockwave to deliver on WebShockwave to deliver on Web

29

VRMLVRML

Virtual Reality Modeling Language Virtual Reality Modeling Language

Creates interactive 3-D on the WebCreates interactive 3-D on the Web

User is moved through the User is moved through the environment (instead of object environment (instead of object moving)moving)

Environment is dynamic and Environment is dynamic and always changingalways changing

30

Understanding VideoUnderstanding Video

Video can beVideo can be– Very expensiveVery expensive

– Time-consuming to createTime-consuming to create– Very large filesVery large files

Video can be found in stock film Video can be found in stock film companiescompanies

Video must be digitized from an Video must be digitized from an analog signalanalog signal

31

Digitizing an Digitizing an Analog Video SignalAnalog Video Signal

32

Editing VideoEditing Video

Digitized video is not Digitized video is not linear like analog videolinear like analog video

Can access any part of Can access any part of video randomlyvideo randomly

Can cut and pasteCan cut and paste

Can use special effects Can use special effects and transitionsand transitions

33

Digital Video File Size Digital Video File Size ConsiderationsConsiderations

1 second of high-quality 1 second of high-quality color video on ¼ of the color video on ¼ of the computer screen = 1 MB computer screen = 1 MB file sizefile size

Determining file sizeDetermining file size– Frame rate:Frame rate: lower the better lower the better

(15 fps minimum)(15 fps minimum)– Image size:Image size: use smaller use smaller

playback windowplayback window– Color depth:Color depth: 8-bit vs. 16-bit 8-bit vs. 16-bit

vs. 24-bit colorvs. 24-bit color

34

Video Video Compression/DecompressionCompression/Decompression

CodecsCodecs

LosslessLossless: gives larger file by : gives larger file by preserving exact imagepreserving exact image

LossyLossy: eliminates some image : eliminates some image data; smaller file, but poorer data; smaller file, but poorer qualityquality

35

MPEG Compression FormatMPEG Compression Format

Motion Pictures Experts GroupMotion Pictures Experts Group

Reduce file size by eliminating Reduce file size by eliminating redundant information (backgrounds)redundant information (backgrounds)

Also looks for changes from frame to Also looks for changes from frame to frameframe

36

Video Compression SoftwareVideo Compression Software

Apple’s QuickTime and QuickTime for Apple’s QuickTime and QuickTime for WindowsWindows– Dual platformDual platform– Lossy compressionLossy compression

Microsoft Windows Media PlayerMicrosoft Windows Media Player– AVI formatAVI format

Both synchronize sound and motionBoth synchronize sound and motion– Synchronized Multimedia Integration Language Synchronized Multimedia Integration Language

(SMIL)(SMIL)– Markup language like HTMLMarkup language like HTML

37

Video Editing SoftwareVideo Editing Software

Transitions:Transitions: dissolves, wipes, spins dissolves, wipes, spins

AnimationsAnimations: fly-in logo: fly-in logo

Special effects:Special effects: twisting, zooming, twisting, zooming, rotatingrotating

Filters:Filters: color balance, color balance, brightness/contrast, blurring, brightness/contrast, blurring, distortions, morphingdistortions, morphing

Adobe PremiereAdobe Premiere

38

Video on the WebVideo on the Web

Only practical for 56K Only practical for 56K or higher connectionsor higher connections

PlanningPlanning– Is animation or still images Is animation or still images

with sound better?with sound better?– Are stock videos better?Are stock videos better?– Quality-versus-cost and Quality-versus-cost and

relevance of video to relevance of video to applicationapplication

39

Video Transfer Types: HTTPVideo Transfer Types: HTTP

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

40

Video Transfer Types: RTSPVideo Transfer Types: RTSP

Real-Time Streaming Protocol Real-Time Streaming Protocol

Continuous playing/streamingContinuous playing/streaming

Not saved on hard driveNot saved on hard drive

User can randomly access any video User can randomly access any video partpart

Better for large videos and live Better for large videos and live broadcastsbroadcasts

41

Streaming VideoStreaming Video

HorizonLive: live video presentationsHorizonLive: live video presentations

42

Video and Virtual RealityVideo and Virtual Reality

Apple QuickTime VR system Apple QuickTime VR system iPEX systemiPEX systemStarts with panoramic photographsStarts with panoramic photographsCamera rotated after each picture for Camera rotated after each picture for 360 degrees360 degreesPhotographs electronically “stitched” Photographs electronically “stitched” togethertogetherUser can navigate and zoom (White User can navigate and zoom (White House site)House site)

43

Issue: The Napster ControversyIssue: The Napster Controversy

Intellectual Property Intellectual Property Rights and Emerging Rights and Emerging Web TechnologiesWeb Technologies

Sharing MP3 files Sharing MP3 files through the webthrough the web

Recording Industry Recording Industry Association of Association of America filed suitAmerica filed suit

Understanding Understanding Multimedia Elements – Multimedia Elements –

Sound, Animation, VideoSound, Animation, VideoEndEnd