Multimedia and the WWW
Howell Istance and
Chris Hand, Napier University
Web Multimedia
Using: sounds movies/animation/images interactivity virtual reality worlds
Adds interest, excitement But costs download time And often requires plug-ins/helpers
Issues with media elements…
Create, capture, edit
Media element
Integration and sequencing into a presentation
Interactive presentation to end user
Tools specialised for different media elements Compression techniques for different elements use
information about the importance of data for each type Standards enable portability between applications and
platforms
Authoring of digital media
Capture to digital form
Edit and optimise
Compression, file standards
Issues with producing presentation…
Create, capture, edit
Media element
Integration and sequencing into a presentation
Interactive presentation to end user
Language or script to define order of media clips and how user interaction is handled (SMIL, Windows Metafile)
Encode presentations or components, Compression techniques used depend on means of delivery to user and available bandwidth
Order media clips
Encode for delivery
Issues with delivery…Create, capture, edit
Media element
Integration and sequencing into a presentation
Interactive presentation to end user
Download: complete file is transferred to users machine before playback begins (except ‘pseudo-streaming’)
Stream: playback begins immediately after small amount of buffering at client side
Issues: protocol for data transfer, required bandwidth and available bandwidth of network connection
download
or stream
(client)(server)
(network)
Issues with client presentation
Create, capture, edit
Media element
Integration and sequencing into a presentation
Interactive presentation to end user
Decode compressed elements Deliver on end user machine via application software
and available hardware devices Handle user inputs locally or send request to server Issues: hardware and device characteristics, platform
independence, browser capabilities and plugins
Decode and deliver media elements
Handle user input
(client)(server)
(network)
Helpers - Background
MIME - Multi-purpose Internet Mail Extensions
Extend range of file types playable Helpers decode and play MIME
types E.G. file type .pdf uses Adobe
Acrobat helper app
Plug-ins
Offer playability and interactivity Do things browser can’t, e.g.
allow user to walk-through a virtual world (VRML Plug-in such as Cosmo Player)
Reside on client side - no plug-in no play: provide links to download sites check your server can handle the plug-in offer alternatives
Developing Multimedia Web Sites Extending basic HTML (e.g. DHTML,
CSS) Need special tools, e.g.:
Director for interactive presentations Flash for animated movies Platinum VRCreator for VRML worlds
And associated plug-ins, e.g.: Shockwave for Director content Flash Player for Flash content Cosmo Player for virtual worlds
Flash
Create and animate graphics Add interactivity and sound Authoring creates movies as .fla files:
Then turn movie into Shockwave Flash movie (.swf)
Load into an existing web page Or, publish movie - create HTML:
Can also publish in bitmap forms (e.g. gif)
Fireworks
Web specific graphics creation app Features:
optimise graphics create imagemaps, rollovers, etc
Big advantages: all in one place - create vector
graphics, add fills, text etc, save, optimise and export
good compatibility with rest of Macromedia suite
Flash or Fireworks?
Use Flash for: simple graphics complex/long movies stand-alone Flash pages
Use Fireworks for: complex graphics short/simple animations
Flash or Shocked Director? Use Flash for:
animation of simple images low interactivity fast turn-around
Use Director for: complex interactive presentations
(e.g. games) longer turn-around (buggy)
VRML: VR on the Web
VRML: Virtual Reality Modelling Language VR system for the web proposed at first WWW
conference, Geneva 1994 HTML is for words, VRML is for 3D models and worlds Open standard
First draft spec - Nov 1994 VRML 1.0 - May 1995 VRML 1.0c - Jan 1996 VRML 2.0 - August 1996
Building a VRML World
Collection of objects arranged in a particular order Objects
correspond to something physical that has shape, various surface properties (colour, smoothness, shininess) and a position in 3D space
other objects include sounds, lights, viewpoints, all of which have a location in 3D space
Nodes in VRML
fundamental building blocks, some nodes are objects, some nodes are containers to hold nodes which are related e.g. Shape node contains geometry node and
appearance node Nodes can contain other nodes All nodes contain fields, which hold the data
for the node
Simple VRML Example
#VRML V2.0 utf8
# A Cylinder
Shape {
appearance Appearance {
material Material { }
}
geometry Cylinder {
height 2.0
radius 1.5
}
}
Appearance - contains Material node - definition of surface properties of an object, colour, texture, shininess
Geometry - definition of shape, predefined nodes include Cylinder, Box, Sphere, user defined shape represented as an indexed faceset (collection of numbered coordinates and specification of connectivity)
#VRML V2.0 utf8
Transform{
translation -2.4 2 3 # translate the node(s) x , y, z units
children [
Shape {
appearance Appearance{
material Material{ }
}
geometry Cylinder {
radius 3
height 6
side TRUE
top FALSE
bottom TRUE
}
}
]
}# end of Transform node
Grouping Nodes Transform - specifies
how a group of children nodes may be translated, rotated or scaled
translation field takes a single vector as its value, showing the amount to move in the x, y and z direction
Events and ROUTEs
Nodes can receive or generate Events (or both) Events sent/received defined by eventIn and
eventOut Easy to plug eventOut into eventIn using
ROUTE statement Once event is generated, Browser propagates it
along ROUTEs to other nodes Sensor nodes generate events based on user
input (eg. TouchSensor, DragSensor), or time passing (TimeSensor)
#VRML V2.0 utf8
DEF view1 Viewpoint {
position 0 0 20
description "view1"
}
DEF view2 Viewpoint {
position 5 0 20
description "view2"
}
Group {
children [
DEF box Transform {
translation 5 0 0
children [
Shape {
appearance Appearance {
material Material { diffuseColor 1 0 0 }
}
geometry Box { }
}
DEF touchBox TouchSensor { }
]
}
DEF sphere Transform {
translation 0 0 0
children [
Shape {
appearance Appearance {
material Material { diffuseColor 0 1 0 }
}
geometry Sphere { }
}
]
}
DEF cone Transform {
translation -5 0 0
children [
Shape {
appearance Appearance {
material Material { diffuseColor 0 0 1 }
}
geometry Cone { }
}
]
}
] # end of Group children
}
ROUTE touchBox.isActive TO view2.set_bind
Simple Animation in VRML
Interpolator nodes allows key values (e.g. positions) to be specified and browser "fills in the gaps" - like key frame animation
Interpolators work with Positions Rotations Colors Coordinates Normals Scalars