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