G0Q55A Multimedia: modelleren en programmeren

1
G0Q55A Multimedia modelleren en programmeren

• Martin Wolpers Erik Duval
• 5 Oktober 2007

2
Questions so far?

• Some remarks
• Nice work!
• BUT
• Publish your storyboard!
• Explain and document!

3
Today!

• Group presentations
• Quality and Evaluation Criteria
• MM Modelling Formalization
• Timeline and Sequences
• Layout and Presentation
• Flash and Interactivity

4
Group Presentations

• Groep 1
• Simon Wouters
• Laurent Verbruggen
• Dries Geebelen
• Ben Raes
• Groep 4
• Bart Timmermans
• Tine Vangansewinkel
• Rob Vanden Broucke
• Jef Maerien

5
Evaluation and Quality Criteria

• Multimedia-Information are
• Symbolic forms of expressions
• Symbolic knowledge

6
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

7
From your wiki pages

• Presentation and interaction
• Attractiveness
• User friendly
• Usability
• Clear information presentation
• Clear navigation
• Clear structure
• Completeness
• Implementation
• Focus groups

8
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

9
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

10
Synchronisation, Timeline and Sequence
11
Synchronisation

• Establishing a defined temporal dependcy between
  several MM objects

Audio 1
Audio 2
Img 1
Img 3
Img 2
Video 1
Animation 1
Time
12
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

13
Examples

• Lip synchronisation
• Constraints audio and video max. 80ms earlier
• Slide show

lt80ms
14
Inacurate sync

• Tolerable as human perception is not perfect!

15
Modelling Sync
16
Timeline approach

• All events are aligned on a time axes
• All events are totally ordered
• Only basic interval relations lt, , gt

17
Timing Constraints
Ts

• Upper bound equiv. to 00.2
• Lower bound min X equiv. To 0.38
• Duration of time interval through upper and lower
  bound specification
• Precise specification of duration of time interval

0
max 0.2
0.20.5
210
025
18
Complex Activitations

• Animation activation
• Auto triggering of sequence of activations

• Composed activation
• Multiple parallel presentations

Audio
Anim
L
R
Img1.gif
Img2.gif
WavR.wav
WavL.wav
Img3.gif
Img4.gif
Img5.gif
19
More

• Media filters
• Parameterization
• Starting time
• Links
• Execution choice points
• Timing tolerance
• Activation Delay
• Deactivation Delay

Fade in
Permanent 50
Fade out
20
Extended Sequence Diagrams
21
Layout

• See Erik Duvals course on
• Human Computer Interaction
• Here
• Use common sense!

22
Presentation Diagrams

• Spatial presentation
• Visualization elements
• Interaction elements
• Stereotypes for basic GUI elements
• Hierarchical composition
• Audio elements

23
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.

24
Flash Player stats

• Installed on gt600 Mio Computers
• gt98 of all web-connected computers
• gt2 Mio installs per day
• New player reaches 80 of computers in 12 months

25
Flash Platform
26
Flash Usage

• Content combine video and interactivity
• Applications desktop as web applications

27
Flash Usage contd

• Communication
• Streaming audio/video in both directions
• E.g. Flashmeeting
• Mobile

28
Flash Platform Architecture
29
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

30
Flash player contd

• Networking via Internet (http, https, sockets)

31
Timeline
Object Library
Stage
Actions
32
Why your design makes sense!
Timeline Extended Sequence Diagram
Object Library Class/Object Diagram
Stage Presentation Diagram
Actions State Diagram
33
Extended Sequence Diagram
Class/Object Diagram
Presentation Diagram
State Diagram
34
The example
35
What have you seen?
36
Lets see how this is done

• Live (very simple) demo
• 2 images
• 1 video file
• 3 texts

37
Class Diagram
38
Extended Sequence Diagram
39
Presentation Diagram
40
State Diagram
Not Necessary!!!
41
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/AD/UML
  _tutorial/state.htm
• http//www.visual-paradigm.com/VPGallery/diagrams/
  State.html

42
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

43
State Diagram Example
Soda Machine State Diagram thanks to
SUN http//developers.sun.com/jsenterprise/refere
nce/techart/jse8/umlStateDiag.html
44
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 !
• Dont hesitate to ask!

45
Action Script

• Help is on the way
• http//livedocs.adobe.com/flash/9.0/main/wwhelp/ww
  himpl/js/html/wwhelp.htm?hrefPart1_Programming_AS
  3_1.html
• http//www.flashfocus.nl/forum/showthread.php?t63
  38