cours-smil

Crer un document multimdia avec SMIL e eSbastien Laborie e

[email protected] http://www.iutbayonne.univ-pau.fr/~slaborie/

1

Sbastien Laborie e

Crer un document multimdia avec SMIL e e

XML : eXtensible Markup LanguageQuelques rappels essentiels

Sbastien Laborie e

2

Sbastien Laborie e

XML : eXtensible Markup Language

Le contexte : structurer/traiter/changer des donnes e eWWWrequte e

transformation

requte e

requte e

transformation

requte e

requte e

transformation

transformation

Ncessit de dnir un langage structur (semi-structur) et extensible. e e e e e Ncessit de prendre en compte la diversit des informations changes. e e e e e3 Sbastien Laborie e XML : eXtensible Markup Language

XML

Document XML Composs dunits de stockage appeles entits. e e e e Ces donnes sont soit des donnes simples soit des donnes concourant au e e e marquage (balisage). Le balisage permet de dcrire la structure logique du document. e Validation dun document XML Un document XML est bien form sil respecte les r`gles de XML. e e XML fournit un mcanisme pour contraindre les structures, les DTD e (Dnition de Type de Document). e Un document XML peut tre valide par rapport ` une ou plusieurs DTD. e a

4

Sbastien Laborie e


Un exemple en XML IUT de Bayonne et du Pays Basque 17 Place Paul Bert 64100 BAYONNE http://www.iutbayonne.univ-pau.fr 05.59.57.43.70 05.59.57.43.79 ... 5 Sbastien Laborie e XML : eXtensible Markup Language

Larbre XMLcarnetDeContact contact contact

adresse

url

logo

tel

tel

lignesAdresse

codePostal

ville

ligne ligne ligne6 Sbastien Laborie e XML : eXtensible Markup Language

Question ?

Quel langage XML connaissez-vous ?

7

Sbastien Laborie e


Les standards du W3C bass sur XML e

8

Sbastien Laborie e


SMIL : Synchronized Multimedia Integration LanguageUne introduction au langage

Sbastien Laborie e

9

Sbastien Laborie e

SMIL : Synchronized Multimedia Integration Language

Introduction

Un exemple de document multimdia e

Synchronisation10

AchageSbastien Laborie e

Interactivit e


Introduction

Le contextePourquoi utiliser le langage SMIL ? Dautres langages de spcication de documents multimdia : e e Flash PowerPoint ... SMIL est une recommandation du W3C (un standard) DTD XML = Interoperabilit e Utilisation de toutes les technologies XML (XQuery, XPath, XSLT. . .) Beaucoup de projets Open Source autour des standards (Editeurs, Players. . .) Un langage en volution constante. e

11

Sbastien Laborie e


Introduction

Lhistoire de SMIL1996 : W3C Workshop 1997 : Premi`re runion du groupe de travail SYMM e e 1998 : La recommandation SMIL 1.0 est ne eSynchronisation et placement visuel dobjets multimdia e Interactivit e Capacit dadaptation ` dirents contextes e a e

2001 : SMIL 2.0Animation Mta-donnes e e

2005 : SMIL 2.1Eets de transitions Excution multi plates-formes (SMIL proles) e

2008 : SMIL 3.0Outils supplmentaires de structure et de contrle de la prsentation e o e

12

Sbastien Laborie e


Introduction

Tables des mati`res e1

Introduction au langage SMIL Structure gnrale dun document multimdia SMIL e e e Dimension spatiale Dimension contenu Dimension temporelle Dimension hypermdia e Autres fonctionnalits e Les animations Adaptation au contexte Spcication de mta-donnes e e e Les drivs du langage SMIL e e HTML + TIME MMS SVG - Animation Les outils dvelopps autour de SMIL e e Les diteurs e Les lecteursSbastien Laborie e SMIL : Synchronized Multimedia Integration Language

2

3

4

13

Introduction au langage SMIL



2

3

4

14


Structure gnrale dun document multimdia SMIL e e e

La structure gnrale dun document multimdia SMIL e e e

... ...

Spcications de lachage, e des mta-donnes et des transitions e e Synchronisation des objets multimdia, e Spcication des informations hypermdia e e

15

Sbastien Laborie e



Dimension spatiale

Spcication des zones dachage e

x y Fentre dachage e

Rgion 1 Rgion 2 Rgion 3 e e e

Rgion 4 e

...

16

Sbastien Laborie e



Dimension spatiale

Spcication des zones dachage en SMIL e

17

Sbastien Laborie e



Dimension spatiale

Exercice : Spcier cette organisation spatiale en SMIL e(0,0)

region1500

region2

(200,150)

region3 region4650

region5(570,200)

600

18

Sbastien Laborie e



Dimension spatiale

Le corps dun document multimdia SMIL e

... ...

Spcications de lachage, e des mta-donnes et des animations e e Synchronisation des objets multimdia, e Spcication des informations hypermdia e e

19

Sbastien Laborie e



Dimension contenu

Spcication des objets multimdia e e

Audio :

Vido : e

Texte :

Image :

20

Sbastien Laborie e



Dimension temporelle

Spcication de la timeline de la prsentation e e

Certains lments sont jous en parall`le. ee e e Certains lments sont jous en squence. ee e e

Publicit e

Titre Vido e Recette

0s

5s

2m 11s

21

Sbastien Laborie e




Spcication de la timeline en SMIL e

Conteneurs temporels SMIL : PAR et SEQ.

22

Sbastien Laborie e




Exercice : Spcier cette organisation temporelle en SMIL e

Image irit.jpg Image carte.jpg

Texte sous-titrage.rt Vido e presentation.avi Musique music.mp3

0s 5s

20s

95s

23

Sbastien Laborie e



Dimension hypermdia e

Spcication de liens hypermdia e eDenition Liens hypermdia e Interne : permet de naviguer ` lintrieur dune mme prsentation. a e e e Externe : permet de naviguer vers dautres prsentations. e

l1 Publicit e Titre Vido e Recette 0s24

5sSbastien Laborie e

Autre documentSMIL : Synchronized Multimedia Integration Language

2m 11s


Dimension hypermdia e

Spcication de liens hypermdia en SMIL e e 25 Sbastien Laborie e SMIL : Synchronized Multimedia Integration Language

Autres fonctionnalits e



2

3

4

26


Les animations

Les animations

Dnition (animation) e Lanimation consiste ` donner lillusion dun mouvement ` laide dune suite a a dimages. Examples danimation Mouvement dun ensemble dobjetsTranslation Rotation

Modication de lapparence dun objetModication de taille Changement de couleurs

27

Sbastien Laborie e



Les animations

Les animations en SMILSpcication dune animation e Une animation en SMIL se dcrit dans la spcication dun objet multimdia. e e e Dclaration de lanimation e Mouvement dun ensemble dobjetsTranslation : Pas de rotation

Modication de lapparence dun objet :Modication de taille : Changement de couleur :

Application de lanimation 28 Sbastien Laborie e SMIL : Synchronized Multimedia Integration Language


Les animations

Les eets de transition

Dnition (eets de transitions) e Les eets de transition sont des animations particuli`res qui se droulent au dbut e e e ou ` la n de la prsentation dun ensemble dobjets multimdia. a e e Plusieurs types deets de transition Fondu-encha e n Apparition ou disparition (e.g., sous forme dtoile) e ...

29

Sbastien Laborie e



Les animations

Les eets de transition en SMILSpcication des eets de transition e Les eets de transition en SMIL se dclarent gnralement dans lentte head du e e e e document. Dclaration de la transition (partie head) e Application de la transition au contenu (partie body)

30

Sbastien Laborie e



Les animations

Exercice : Spcier des animations et des transitions e

Inverser image 1 et image 2 en les faisant se croiser en mme temps e Faire dispara tre limage de fond en toile apr`s linversion e e(200,150)

Image de fond Image 1650

Image 2(570,200)

31

Sbastien Laborie e



Adaptation au contexte

Adaptation de documents multimdia e

Adaptation

Prol132 Sbastien Laborie e

Prol2

Prol3



Adaptation au contexte

Spcication dalternatives en SMIL e... ...

33

Sbastien Laborie e



Spcication de mta-donnes e e e

Spcication de mta-donnes simples e e e

Dnition (mta-donne simple) e e e Une mta-donne simple est une description textuelle dune donne. e e e Des exemples de mta-donnes simples e e Lauteur du document. La date de cration du document. e Lditeur e Les droits ...

34

Sbastien Laborie e




Spcication de mta-donnes simple en SMIL e e e

...

...

35

Sbastien Laborie e




Recherche dune mta-donne simple e e

Requte : cherchez les noms des auteurs du document SMIL e Utilisation XQuery for $x in doc(cremeAnglaise.smil)/smil/head/meta[@name=Author] return $x/@content sorted by @content Rponse e Florence Sedes Sebastien Laborie

36

Sbastien Laborie e


Les drivs du langage SMIL e e



2

3

4

37


HTML + TIME

HTML+TIME

Timed Interactive Multimedia Extensions for HTML Ajoute une dimension temporelle aux pages web. Bas sur le module temporel de SMIL : eSynchronisation des contenus multimdia. e Utilisation des conteneurs temporels. Permet la spcication danimations. e

Pas de langage de scripts pour animer la page. On manipule toujours du XML.

38

Sbastien Laborie e



HTML + TIME

Un exemple de code HTML+TIME

SMIL Timing syntax consists of a set of
attributes for controlling the behavior of media,
and several types of time containers
that group media together for coordinated presentation.

39

Sbastien Laborie e



MMS

MMS

Multimedia Messaging Service Envoyer des messages multimdia entre plates-formes mobiles. e Bas sur le langage SMIL : eSynchronisation des contenus multimdia. e Placement visuel des contenus multimdia. e Interactivit. e

La spcication de la prsentation est peu volumineuse. e e Les contenus sont encods dans le document MMS. e

40

Sbastien Laborie e



MMS

Un exemple de code MMSstart=""; type="application/smil" Content-ID: Content-Type: application/smil; name="smil.smil" Content-ID: Content-Location: smil.smil Content-Type: image/gif; name="logo.gif" Content-Transfer-Encoding: base64 Content-ID: logo Content-Location: logo.gif R0lGODlhgABgAMMAAP///8zMzEAgMAAAAHBAYLBwkICAgGAgQNBAkP+ZzP8wsJkzZuCAsJBQcNgN*snip* nAML74Y7Og6yejwClJ+YsU62mm8EAAA7 Content-Type: audio/amr; name="audio.amr" Content-Transfer-Encoding: base64 Content-ID: audio Content-Location: audio.amr IyFBTVIKPHA6cpg8ggZIwmH4IURQR8AACAppIJnAAAQLBFvnQZA8Po3aqNkAHgHjivZPIAJ8rU+m*snip*/E/pbLYCCbJWN8Ju6TYkCNA= ... 41 Sbastien Laborie e SMIL : Synchronized Multimedia Integration Language


SVG - Animation

SVG

Scalable Vector Graphics Raliser des dessins vectoriels. e Lanimation du dessin SVG est base sur le module animation de SMIL : eanimate. animateMotion. animateTransform.

Pas de langage de scripts pour animer la page. On manipule toujours du XML.

42

Sbastien Laborie e



SVG - Animation

Un exemple de SVG

circle:hover fill-opacity:0.9;

43

Sbastien Laborie e



SVG - Animation

Un exemple de SVG avec du SMIL

circle:hover fill-opacity:0.9;

44

Sbastien Laborie e


Les outils dvelopps autour de SMIL e e



2

3

4

45


Les diteurs e

LimSee (http://limsee2.gforge.inria.fr)

46

Sbastien Laborie e



Les diteurs e

Adobe GoLive (http://www.adobe.com)

47

Sbastien Laborie e



Les lecteurs

Les lecteurs de documents SMIL

Quicktime (SMIL 1.0) Real Player et Grins (SMIL 2.0) PocketSMIL (SMIL 2.0 sur PDA) Ambulant (SMIL 2.1 et SMIL 3.0) Internet Explorer (HTML+TIME) RubiC (MMS)

48

Sbastien Laborie e


Conclusion et perspectives

Conclusion

SMIL est un langage standard qui permet de spcier des e prsentations multimdias e eSpcication des multiples dimensions des documents multimdia e econtenu, temporelle, spatiale et hypermdia e animations, transitions. . .

Spcications de mta-donnes e e e Utilisation de toutes les technologies XML (XPath, XSLT. . .) Dveloppement de projets Open Source (Editeur, Player) e Un langage en volution constante e

49

Sbastien Laborie e


Conclusion et perspectives

Perspectives

SMIL est un standard mais nest pas le langage le plus utilis eDes projets de recherche autour de ce langage sont en cours.Adaptation et transformations de documents SMIL

Dautres formes du langage (SMIL Proles) sont en laboration. eDes e-mails dcrits en SMIL e

Lutilisation du langage sur diverses plates-formes se gnralise. e eTlvision, Set-top boxes, lecteurs multimdia. . . ee e

Le langage est utilis dans lindustrie (e.g., Adobe, Real). eWindows Media Player. . .

50

Sbastien Laborie e


Questions

Questions ?

Les slides sont disponibles ` ladresse suivante a

http://www.iutbayonne.univ-pau.fr/~slaborie/SMIL/Cours-SMIL.pdf

51

Sbastien Laborie e


cours-smil

Documents