1. Multimedia and the WWW Howell Istance and Chris Hand, Napier University

2. Web Multimedia n Using: u sounds u movies/animation/images u interactivity u virtual reality worlds n Adds interest, excitement n But costs download time n And often requires plug-ins/helpers

3. Issues with media elements… Create, capture, edit Media element Integration and sequencing into a presentation Interactive presentation to end user n Tools specialised for different media elements n Compression techniques for different elements use information about the importance of data for each type n Standards enable portability between applications and platforms Authoring of digital media Capture to digital form Edit and optimise Compression, file standards

4. Issues with producing presentation… Create, capture, edit Media element Integration and sequencing into a presentation Interactive presentation to end user n Language or script to define order of media clips and how user interaction is handled (SMIL, Windows Metafile) n Encode presentations or components, Compression techniques used depend on means of delivery to user and available bandwidth Order media clips Encode for delivery

5. Issues with delivery… Create, capture, edit Media element Integration and sequencing into a presentation Interactive presentation to end user n Download: complete file is transferred to users machine before playback begins (except ‘pseudo- streaming’) n Stream: playback begins immediately after small amount of buffering at client side n Issues: protocol for data transfer, required bandwidth and available bandwidth of network connection download or stream (client)(server) (network)

6. Issues with client presentation Create, capture, edit Media element Integration and sequencing into a presentation Interactive presentation to end user n Decode compressed elements n Deliver on end user machine via application software and available hardware devices n Handle user inputs locally or send request to server n Issues: hardware and device characteristics, platform independence, browser capabilities and plugins Decode and deliver media elements Handle user input (client)(server) (network)

7. Helpers - Background n MIME - Multi-purpose Internet Mail Extensions n Extend range of file types playable n Helpers decode and play MIME types n E.G. file type.pdf uses Adobe Acrobat helper app

8. Plug-ins n Offer playability and interactivity n Do things browser can’t, e.g. u allow user to walk-through a virtual world (VRML Plug-in such as Cosmo Player) n Reside on client side - no plug-in no play: u provide links to download sites u check your server can handle the plug-in u offer alternatives

9. Developing Multimedia Web Sites n Extending basic HTML (e.g. DHTML, CSS) n Need special tools, e.g.: u Director for interactive presentations u Flash for animated movies u Platinum VRCreator for VRML worlds n And associated plug-ins, e.g.: u Shockwave for Director content u Flash Player for Flash content u Cosmo Player for virtual worlds

10. Flash n Create and animate graphics n Add interactivity and sound n Authoring creates movies as.fla files: u Then turn movie into Shockwave Flash movie (.swf) u Load into an existing web page u Or, publish movie - create HTML: n Can also publish in bitmap forms (e.g. gif)

11. Fireworks n Web specific graphics creation app n Features: u optimise graphics u create imagemaps, rollovers, etc n Big advantages: u all in one place - create vector graphics, add fills, text etc, save, optimise and export u good compatibility with rest of Macromedia suite

12. Flash or Fireworks? n Use Flash for: u simple graphics u complex/long movies u stand-alone Flash pages n Use Fireworks for: u complex graphics u short/simple animations

13. Flash or Shocked Director? n Use Flash for: u animation of simple images u low interactivity u fast turn-around n Use Director for: u complex interactive presentations (e.g. games) u longer turn-around (buggy)

14. VRML: VR on the Web n VRML: Virtual Reality Modelling Language n VR system for the web proposed at first WWW conference, Geneva 1994 n HTML is for words, VRML is for 3D models and worlds n Open standard u First draft spec - Nov 1994 u VRML 1.0 - May 1995 u VRML 1.0c - Jan 1996 u VRML 2.0 - August 1996

15. Building a VRML World n Collection of objects arranged in a particular order n Objects u 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

16. Nodes in VRML n fundamental building blocks, some nodes are objects, some nodes are containers to hold nodes which are related u e.g. Shape node contains geometry node and appearance node n Nodes can contain other nodes n All nodes contain fields, which hold the data for the node

17. 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)

18. #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 n Transform - specifies how a group of children nodes may be translated, rotated or scaled n translation field takes a single vector as its value, showing the amount to move in the x, y and z direction

19. Events and ROUTEs n Nodes can receive or generate Events (or both) n Events sent/received defined by eventIn and eventOut n Easy to plug eventOut into eventIn using ROUTE statement n Once event is generated, Browser propagates it along ROUTEs to other nodes n Sensor nodes generate events based on user input (eg. TouchSensor, DragSensor), or time passing (TimeSensor)

20. #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

21. Simple Animation in VRML n Interpolator nodes allows key values (e.g. positions) to be specified and browser "fills in the gaps" - like key frame animation n Interpolators work with u Positions u Rotations u Colors u Coordinates u Normals u Scalars