SMIL XML:Construction progressive d'un fichier SMIL
Un article de WikiTuto.
Sommaire |
structure
La structure d'un document SMIL ressemble beaucoup à celle d'un document HTML. L'élément racine est <smil>, et il comporte un élément <head> et un élément <body> :
<smil> <head>(...)</head> <body>(...)</body> </smil>
On peut ajouter dans l'élément <head> des balises <meta>, comme par exemple <meta name="copyright" content="(...)" />.
Il est également possible d'incorporer dans le prologue du fichier, avant l'élément racine, la déclaration de version XML, ainsi qu'une déclaration de dépendance envers la DTD du W3C :
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 1.0//EN" "http://www.w3.org/TR/REC-smil/SMIL10.dtd">
La dernière version de la spécification du W3C est la 2.1. Par rapport à la 2.0,qui n'apportait que de petites modifications sur certains éléments, elle ajoute le concept de modularité et l'ajout de nouvelles fonctionnalités plus particulièrement destinées aux mobiles.
Ce cours d'initiation se limite à la version 1.0.
Positionnement
Introduction
Dans le header, doit également être défini l'élément <layout>, dont la fonction est de spécifier la zone dans laquelle les animations doivent être affichées, ainsi que les diverses régions où elles doivent prendre place.
Élément de base
La fenêtre destinée à accueillir l'ensemble des animations est définie par l'élément vide <root-layout/> :
<root-layout width="300" height="200" background-color="blue" title="Animations" />
Cet élément permet de définir par ses attributs width et height la taille de la fenêtre de base, mais également sa couleur de fond, son titre, etc. A l'intérieur de cette fenêtre, tout comme à l'intérieur d'une fenêtre de navigateur, le positionnement d'un objet se fait par rapport au coin supérieur gauche.
Définition des régions
Chaque objet multimédia devra être associé, dans ce cadre général, à uné région qu'il faut donc définir. Cela se fait par l'intermédiaire de l'élément vide <region/> :
<region id="region1" left="75" top="50" width="32" height="32" />
Pour placer ensuite l'image "test.gif", de taille 32x32, dans cette région, il suffit alors de l'insérer dans le body, en spécifiant son affectation à la région. Cela donne au final :
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 1.0//EN" "http://www.w3.org/TR/REC-smil/SMIL10.dtd"> <smil> <head> <meta name="copyright" content="Jean Dupont" /> <root-layout width="300" height="200" background-color="blue" title="Animations" /> <region id="region1" left="75" top="50" width="32" height="32" /> </head> <body> <img src="test.gif" alt="image de test" region="region1" /> </body> </smil>
Il est possible également de définir le positionnement de la région, non en absolu par rapport à la fenêtre principale comme dans l'exemple précédent, mais en relatif, en utilisant les attributs left="40%" et height="30%", par exemple, qui positionnent le coin supérieur gauche de la région à 40% de la taille totale de la fenêtre principale par rapport à son bord gauche, et à 30% par rapport à son bord supérieur.
z-index
De même qu'en DHTML, il est possible de positionner une région en avant- ou arrière-plan d'une autre, via l'attribut z-index. Plus la valeur de cet attribut est élevée, plus la région est à l'avant-plan. Par exemple
<region id="region1" left="75" top="50" width="32" height="32" z-index="1" /> <region id="region2" left="100" top="175" width="80" height="80" z-index="2" />
Ces deux régions se superposent, mais la région region2 est à l'avant-plan : un objet placé dans cette région apparaîtra devant tout objet de la première.
Ajustement de la taille de l'objet
L'attribut fit de l'élément region permet de définir la manière dont un objet doit la remplir :
- fit="fill" demande à l'objet de remplir toute la fenêtre ; cela peut entraîner des déformations d'une image, par exemple ;
- fit="meet" demande à l'objet de s'agrandir éventuellement jusqu'à ce que sa plus grande dimension entre en contact avec les bords de la région ;
- fit="slice" est le complémentaire de la valeur précédente, puisque cette fois-ci c'est sa plus petite dimension qui est étirée pour entrer en contact avec les bors de la région ;
- fit="scroll" permet à un objet plus grand que la fenêtre d'y être affiché avec des barres de défilement.
Types d'objets multimédia
On a vu un exemple d'utilisation d'une image avec l'élément img. Il est également possible d'utiliser d'autres types d'objets multimédia :
- les formats d'images acceptés sont gif et jpeg ;
- des fichiers audio : wav, MP3, mais aussi des formats plus particuliers comme le format de données audio de Sun. C'est la balise audio ;
- des fichiers de texte : texte brut avec la balise text, ou bien texte en streaming avec la balise textstream pour les lecteurs Real ;
- des fichiers vidéo (Real movie, avi, mpeg, mov) avec la balise video.
Synchronisation
Gestion des paramètres temporels d'affichage
On utilise pour cela les attributs begin et dur (pour duration) :
<img src="test.gif" alt="image de test" region="region1" begin="1s" dur="3s" />
Dans cet exemple, l'affichage de l'image débute une seconde après la définition de la région region1, puis l'image disparaît après trois secondes.
Séquence
Il est possible de créer une séquence d'événements, en se servant de la balise seq et des attributs begin et dur. Ainsi...
<seq> <img src="test.gif" alt="image de test" region="region1" dur="3s" /> <img src="test2.gif" alt="image de test" region="region1" dur="3s" begin="1s" dur="7s" /> </seq>
... va afficher dans la région1 tout d'abord test.gif pendant trois secondes, puis la faire disparaître. Une seconde plus tard, test2.gif est affichée, et ce pendant sept secondes. Les séquences vidéo et audio ont un "timer" interne ; la gestion de leur affichage se fait grâce à d'autres attributs (clip-begin, clip-end...), qui permettent de positionner la lecture en différents endroits de la piste. En l'absence de ces attributs, les films et extraits musicaux sont joués dans leur intégralité.
Affichage en parallèle
Il est également possible de faire jouer des objets en parallèle, avec l'élément par.
Exercice 1. Un premier fichier SMIL
Télécharger la correction et l'ouvrir localement, avec tous les fichiers multimédias donnés dans l'énoncé.
