Cours SMIL

Crer un document multimdia avec SMIL e e
Sbastien Laborie e
Sebastien.Laborie@iutbayonne.univ-pau.fr http://www.iutbayonne.univ-pau.fr/~slaborie/
Sbastien Laborie e
Crer un document multimdia avec SMIL e e
XML : eXtensible Markup Language

Quelques rappels essentiels
Sbastien Laborie e
Sbastien Laborie e
Le contexte : structurer/traiter/changer des donnes e e

WWW
requte 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 e
3 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
Sbastien Laborie e
Un exemple en XML
<?xml version="1.0" encoding="iso-8859-1"?> <carnetDeContact> <contact> <adresse> <lignesAdresse> <ligne>IUT de Bayonne et du Pays Basque</ligne> <ligne>17 Place Paul Bert</ligne> </lignesAdresse> <codePostal>64100</codePostal> <ville>BAYONNE</ville> </adresse> <url>http://www.iutbayonne.univ-pau.fr</url> <logo src="http://www.iutbayonne.univ-pau.fr/logo.jpg" /> <tel t="fixe">05.59.57.43.70</tel> <tel t="fax">05.59.57.43.79</tel> </contact> <contact>...</contact> </carnetDeContact>
Larbre XML
carnetDeContact contact contact
adresse
url
logo
tel
tel
lignesAdresse
codePostal
ville
ligne ligne ligne

Question ?
Quel langage XML connaissez-vous ?
Sbastien Laborie e
Les standards du W3C bass sur XML e
Sbastien Laborie e
SMIL : Synchronized Multimedia Integration Language

Une introduction au langage
Sbastien Laborie e
Sbastien Laborie e
Introduction
Un exemple de document multimdia e
Synchronisation
10
Achage
Sbastien Laborie e
Interactivit e
Introduction
Le contexte
Pourquoi 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 SMIL
1996 : W3C Workshop 1997 : Premi`re runion du groupe de travail SYMM e e 1998 : La recommandation SMIL 1.0 est ne e
Synchronisation et placement visuel dobjets multimdia e Interactivit e Capacit dadaptation ` dirents contextes e a e
2001 : SMIL 2.0

Animation Mta-donnes e e
2005 : SMIL 2.1

Eets de transitions Excution multi plates-formes (SMIL proles) e
2008 : SMIL 3.0

Outils supplmentaires de structure et de contrle de la prsentation e o e
12
Sbastien Laborie e
Introduction
Tables des mati`res e

1
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 lecteurs
Sbastien Laborie e SMIL : Synchronized Multimedia Integration Language
13
Introduction au langage SMIL

1
14
Structure gnrale dun document multimdia SMIL e e e
La structure gnrale dun document multimdia SMIL e e e
<smil> <head> ... </head> <body> ... </body> </smil>
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
<head> <layout> <root-layout background-color="#ffffcc" height="460" width="710"/> <region height="440" id="RVideo" left="10" top="10" width="440"/> <region height="230" id="RTitre" left="450" top="10" width="260"/> <region height="230" id="RRecette" left="450" top="240" width="260"> <region id="" left="" top="" width="" height="" z-index="" .../> </region> </layout> </head>
17
Sbastien Laborie e
Dimension spatiale
Exercice : Spcier cette organisation spatiale en SMIL e

(0,0)
region1
500
region2
(200,150)
region3 region4
650
region5
(570,200)
600
18
Sbastien Laborie e
Dimension spatiale
Le corps dun document multimdia SMIL e
<smil> <head> ... </head> <body> ... </body> </smil>
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 :
<audio id="..." src="..." begin="..." dur="..." end="..." />
Vido : e
<video id="..." src="..." begin="..." dur="..." />
Texte :
<text id="..." src="..." region="..." />
Image :
<img id="..." src="..." region="..." fit="fill" />
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.

<body> <seq> <img id="Publicite" src="pub.jpg" region="RPub" dur="5s"/> <par> <video id="Emission" src="Emission.avi" region="RVideo"/> <img id="Titre" src="Titre.jpg" region="RTitre"/> <img id="Recette" src="Recette.jpg" region="RRecette"/> </par> </seq> </body>
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 e

Denition 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 0s

24
5s
Sbastien Laborie e
Autre document
2m 11s
Dimension hypermdia e
Spcication de liens hypermdia en SMIL e e

<body> <seq> <img id="Publicite" src="pub.jpg" region="RPub" dur="5s"> <area href="http://www.pub.com"/> </img> <par> <video id="Emission" src="Emission.avi" region="RVideo"/> <img id="Titre" src="Titre.jpg" region="RTitre" dur="255s"> <area href="#Publicite" dur="100s"/> </img> <img id="Recette" src="Recette.jpg" region="RRecette"> <area coords="0,85,260,103" href="command:seek(52)"/> </img> </par> </seq> </body>
25 Sbastien Laborie e SMIL : Synchronized Multimedia Integration Language
Autres fonctionnalits e

1
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 dobjets
Translation Rotation
Modication de lapparence dun objet

Modication de taille Changement de couleurs
27
Sbastien Laborie e
Les animations
Les animations en SMIL

Spcication 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 dobjets
Translation : <animateMotion targetElement="region" from="0,0" to="10,10" dur="3s"/> Pas de rotation
Modication de lapparence dun objet :

Modication de taille : <animate attributeName="left" from="200" to="0"/> Changement de couleur : <animate attributeName="fill" from="red" to="blue"/>
Application de lanimation <img src="img.jpg" dur="20s"> <animate ... /> </img>

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 SMIL

Spcication 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 <transition id="fondu" type="fade" dur="5s" /> <transition id="etoile" type="starWipe" subtype="fivePoint" dur="5s" /> Application de la transition au contenu (partie body) <seq> <img src="img1.jpg" dur="30s" transIn="etoile" transOut="fondu"/> <img src="img2.jpg" dur="30s" transIn="fondu"/> </seq>
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 1

650
Image 2
(570,200)
31
Sbastien Laborie e
Adaptation au contexte
Adaptation de documents multimdia e
Adaptation
Prol1
32 Sbastien Laborie e
Prol2
Prol3
Adaptation au contexte
Spcication dalternatives en SMIL e

... <par> <video id="Demo" src="Demo.avi" region="r1"/> <switch> <audio systemOperatingSystem="palmos" systemLanguage="en" src="Commentaire-palm.au" .../> <audio systemLanguage="en" src="Commentaire-en.au" .../> <audio systemLanguage="de" src="Commentaire-de.au" .../> <audio src="Commentaire.au" .../> </switch> </par> ...
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
<head>
...
<meta name="Author" content="Sebastien Laborie"/> <meta name="Author" content="Florence Sedes"/> <meta name="Date" content="27-10-2008"/> <meta name="Publisher" content="IRIT"/> <meta name="Rights" content="Copyright 2008 Laborie"/>
...
</head>
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

1
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 : e
Synchronisation 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
<body> <t:par begin="1s"> <t:audio src="talk.mp3"/> <p timeContainer="seq"> <span dur="2.9s" timeAction="class:highlight">SMIL Timing syntax consists of a set of </span><br/> <span dur="3s" timeAction="class:highlight">attributes for controlling the behavior of media, </span><br/> <span dur="2s" timeAction="class:highlight">and several types of time containers </span><br/> <span dur="4s" timeAction="class:highlight">that group media together for coordinated presentation.</span> </p> </t:par> </body>
39
Sbastien Laborie e
MMS
MMS
Multimedia Messaging Service Envoyer des messages multimdia entre plates-formes mobiles. e Bas sur le langage SMIL : e
Synchronisation 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 MMS

start="<SMIL>"; type="application/smil" Content-ID: <messageContent> Content-Type: application/smil; name="smil.smil" Content-ID: <SMIL> Content-Location: smil.smil <smil> <head> <layout> <root-layout height="191" width="128"/> <region id="avatar" top="0" left="0" height="96" width="128" fit="hidden"/> <region id="txt" top="96" left="0" height="80" width="128" fit="hidden"/> <region id="reply" top="176" left="0" height="15" width="128" fit="hidden"/> </layout> </head> <body> <par dur="10s"> <img src="logo.gif" region="avatar" begin="0s" repeatDur="10s" /> <audio src="audio.amr" begin="0s" /> <text src="url.txt" region="txt" begin="0s" /> <a href="tel:1234567890"><text src="reply.txt" region="reply" begin="0s" /></a> </par> </body> </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 : e
animate. 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
<svg xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> circle:hover fill-opacity:0.9; </style> <g style="fill-opacity:0.7;"> <circle cx="6.5cm" cy="2cm" r="100" style="fill:red;stroke:black; stroke-width:0.1cm" transform="translate(0,50)" /> <circle cx="6.5cm" cy="2cm" r="100" style="fill:blue;stroke:black; stroke-width:0.1cm" transform="translate(70,150)" /> <circle cx="6.5cm" cy="2cm" r="100" style="fill:green;stroke:black; stroke-width:0.1cm" transform="translate(-70,150)"/> </g> </svg>
43
Sbastien Laborie e
SVG - Animation
Un exemple de SVG avec du SMIL
<svg xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> circle:hover fill-opacity:0.9; </style> <g style="fill-opacity:0.7;"> <circle cx="6.5cm" cy="2cm" r="100" style="fill:red;stroke:black; stroke-width:0.1cm" transform="translate(0,50)"> <animateMotion path="..."/> </circle> <circle cx="6.5cm" cy="2cm" r="100" style="fill:blue;stroke:black; stroke-width:0.1cm" transform="translate(70,150)" /> <circle cx="6.5cm" cy="2cm" r="100" style="fill:green;stroke:black; stroke-width:0.1cm" transform="translate(-70,150)"/> </g> </svg>
44
Sbastien Laborie e
Les outils dvelopps autour de SMIL e e

1
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 e
Spcication des multiples dimensions des documents multimdia e e
contenu, 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 e

Des 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. e

Des e-mails dcrits en SMIL e
Lutilisation du langage sur diverses plates-formes se gnralise. e e

Tlvision, Set-top boxes, lecteurs multimdia. . . ee e
Le langage est utilis dans lindustrie (e.g., Adobe, Real). e

Windows 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

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours SMIL

Titre original :

Transféré par

Droits d'auteur :

Formats disponibles

Crer un document multimdia avec SMIL e e

Crer un document multimdia avec SMIL e e

XML : eXtensible Markup Language

XML : eXtensible Markup Language

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

XML : eXtensible Markup Language

ligne ligne ligne

Quel langage XML connaissez-vous ?

XML : eXtensible Markup Language

Les standards du W3C bass sur XML e

XML : eXtensible Markup Language

SMIL : Synchronized Multimedia Integration Language

SMIL : Synchronized Multimedia Integration Language

Un exemple de document multimdia e

SMIL : Synchronized Multimedia Integration Language

SMIL : Synchronized Multimedia Integration Language

2001 : SMIL 2.0

2005 : SMIL 2.1

2008 : SMIL 3.0

SMIL : Synchronized Multimedia Integration Language

Tables des mati`res e

Introduction au langage SMIL

Tables des mati`res e

Introduction au langage SMIL

Structure gnrale dun document multimdia SMIL e e e

La structure gnrale dun document multimdia SMIL e e e

<smil> <head> ... </head> <body> ... </body> </smil>

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

Spcication des zones dachage e

Rgion 1 Rgion 2 Rgion 3 e e e

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

Spcication des zones dachage en SMIL e

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

Exercice : Spcier cette organisation spatiale en SMIL e

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

Le corps dun document multimdia SMIL e

<smil> <head> ... </head> <body> ... </body> </smil>

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

Spcication des objets multimdia e e

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

Spcication de la timeline de la prsentation e e

Titre Vido e Recette

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

Spcication de la timeline en SMIL e

Conteneurs temporels SMIL : PAR et SEQ.

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

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

SMIL : Synchronized Multimedia Integration Language

Introduction au langage SMIL

Spcication de liens hypermdia e e

l1 Publicit e Titre Vido e Recette 0s

Introduction au langage SMIL