450 likes | 592 Views
G0Q55A Multimedia: modelleren en programmeren. Martin Wolpers & Erik Duval 5 Oktober 2007. Questions so far?. Some remarks: Nice work! BUT Publish your storyboard! Explain and document!. Today!. Group presentations Quality and Evaluation Criteria MM Modelling Formalization
E N D
G0Q55A Multimedia: modelleren en programmeren Martin Wolpers & Erik Duval 5 Oktober 2007 G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Questions so far? • Some remarks: • Nice work! BUT • Publish your storyboard! • Explain and document! G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Today! • Group presentations • Quality and Evaluation Criteria • MM Modelling Formalization • Timeline and Sequences • Layout and Presentation • Flash and Interactivity G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Group Presentations • Groep 1 • Simon Wouters • Laurent Verbruggen • Dries Geebelen • Ben Raes • Groep 4 • Bart Timmermans • Tine Vangansewinkel • Rob Vanden Broucke • Jef Maerien G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Evaluation and Quality Criteria Multimedia-Information are • Symbolic forms of expressions • Symbolic knowledge G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Our Criteria • Easy to understand • Clear presentation • Not too extensive • Structured Navigation • User control • Media Relevant to subject • Media constistent with visual style • Focus group • Media type constistent • Syncronized media • Not too much media • User Satisfaction G0Q55A – Multimedia: modelleren en programmeren 2007/2008
From your wiki pages: • Presentation and interaction • Attractiveness • User friendly • Usability • Clear information presentation • Clear navigation • Clear structure • Completeness • Implementation • Focus groups G0Q55A – Multimedia: modelleren en programmeren 2007/2008
MM Criteria • Objective of the system • Focus group and Motivation • Suitability • Stimulate cognitive constructions • Quality and Suitability • Media • Media Mix • Media parts • (Inter-)Activity • Multi-sensor impression on the user • (Multimodal) Interaction through user interface • Information Presentation • Representation of interpretable information • Navigation and Structure G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Media Theories • Semantic knowledge is not media neutral Example YouTube: http://www.youtube.com/ • Personalisation and Adaptation Example Amazon: http://www.amazon.com/ • Spatial Localisation Example Hotel Mappers: http://hotel.mappers.info/map.html?Leuven G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Synchronisation, Timeline and Sequence G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Synchronisation Establishing a defined temporal dependcy between several MM objects Audio 1 Audio 2 Img 1 Img 2 Img 3 Video 1 Animation 1 Time G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Fine granular sync • Necessary is • Access to start and end • Access into the complex MM object decomposition of complex MM objects E.g. uncompressed video = image stream (sequence) + audio G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Examples • Lip synchronisation • Constraints: audio and video max. 80ms earlier • Slide show <80ms G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Inacurate sync Tolerable as human perception is not perfect! G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Modelling Sync G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Timeline approach • All events are aligned on a time axes • All events are totally ordered • Only basic interval relations {<, =, >} G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Timing Constraints T[s] Upper bound; equiv. to [0;0.2] Lower bound: min X; equiv. To [0.3;∞] Duration of time interval through upper and lower bound specification Precise specification of duration of time interval 0 max 0.2 [0.2;0.5] 2:10 0:25 G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Complex Activitations Composed activation • Multiple parallel presentations Animation activation • Auto triggering of sequence of activations :Audio :Anim L R Img1.gif Img2.gif WavL.wav WavR.wav Img3.gif Img4.gif Img5.gif G0Q55A – Multimedia: modelleren en programmeren 2007/2008
More… • Media filters • Parameterization • Starting time • Links • Execution choice points • Timing tolerance • Activation Delay • Deactivation Delay Fade in Permanent 50% Fade out G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Extended Sequence Diagrams G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Layout • See Erik Duval‘s course on Human Computer Interaction Here: Use common sense! G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Presentation Diagrams • Spatial presentation • Visualization elements • Interaction elements • Stereotypes for basic GUI elements • Hierarchical composition • Audio elements G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Flash and Interactivity • Flash: highly available • Flash plays in 98% of all browsers • WWW based • Simple to use authoring environment • CS2 or CS3 • Flexible usage • Used for Advertisement • Video Conferencing • eLearning • Etc. G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Flash Player stats • Installed on >600 Mio Computers • >98% of all web-connected computers • >2 Mio installs per day • New player reaches 80% of computers in 12 months G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Flash Platform G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Flash Usage • Content: combine video and interactivity • Applications: desktop as web applications G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Flash Usage cont‘d • Communication • Streaming audio/video in both directions • E.g. Flashmeeting • Mobile G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Flash Platform Architecture G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Flash Player • Virtual engine for Action ScriptAction Script: JavaScript like procedural language for event-driven application control • Display engine • Based on vector graphics • Integrates blended video • 2-way audio/video • Sandbox model for Privacy and Security G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Flash player cont‘d • Networking via Internet (http, https, sockets) G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Timeline Stage Object Library Actions G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Why your design makes sense! Timeline = Extended Sequence Diagram Object Library =Class/Object Diagram Stage =Presentation Diagram Actions = State Diagram G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Extended Sequence Diagram Presentation Diagram Class/Object Diagram State Diagram G0Q55A – Multimedia: modelleren en programmeren 2007/2008
The example G0Q55A – Multimedia: modelleren en programmeren 2007/2008
What have you seen? G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Let‘s see how this is done… • Live (very simple) demo • 2 images • 1 video file • 3 texts G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Class Diagram G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Extended Sequence Diagram G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Presentation Diagram G0Q55A – Multimedia: modelleren en programmeren 2007/2008
State Diagram Not Necessary!!! G0Q55A – Multimedia: modelleren en programmeren 2007/2008
State Diagram??? • State Diagrams model MM application behaviour • Labeled directed graph (finite state machine) • States (start, end, other) • Edges (transitions from one state to the other) • Conditions for transitions • Input and Output values • Literature: • http://atlas.kennesaw.edu/~dbraun/csis4650/A&D/UML_tutorial/state.htm • http://www.visual-paradigm.com/VPGallery/diagrams/State.html G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Soda Machine Example Steps to get some Soda (machine perspective) • Get insert money • Show amount of money • Get selection of soda or refund • Dispense soda • Dispense change if any G0Q55A – Multimedia: modelleren en programmeren 2007/2008
State Diagram Example Soda Machine State Diagram thanks to SUN: http://developers.sun.com/jsenterprise/reference/techart/jse8/umlStateDiag.html G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Assignment for today • Finish storyboard • Prepare State Diagram of your application • Implement application in Flash • Document sources • Follow storyboard • Provide readme outlining used time and tools • Upload to wiki 17 Oktober sharp ! • Don‘t hesitate to ask! G0Q55A – Multimedia: modelleren en programmeren 2007/2008
Action Script • Help is on the way: • http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/js/html/wwhelp.htm?href=Part1_Programming_AS3_1.html • http://www.flashfocus.nl/forum/showthread.php?t=6338 G0Q55A – Multimedia: modelleren en programmeren 2007/2008