Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.
Cours suivant : Un format de dessin vectoriel en XML: SVG
Liste des fichiers associés à ce fichier HTML :
version 1.31, dernière mise à jour le 23 mai 2006.
Il existe divers moyens d'apporter du contenu dynamique, alliant son, texte et animations sur un site web, Flash par exemple. De son côté, dans le cadre d'études sur la généralisation du format XML, le W3C a mis sur pied des groupes de travail chargés de définir un format de données, fondé sur XML, permettant de créer des animations multimédia sur Internet. Ces groupes de travail ont donc défini SMIL (Synchronized Multimedia Integration Language). Ce langage permet de synchroniser divers éléments multimédia, tels que de la vidéo, du son et du texte. Ceci permet de créer des présentations multimédia interactives très complexes.
Le SMIL est une application XML et se sert donc de tout ce qu'offre ce dernier. Dans cette application, le XML indique le comportement dans le temps des divers objets multimédia, et leur interactivité via des liens hypertextes ou autres.
Il est probable que vous ayiez déjà utilisé ce format de données sans le savoir ; en effet, il commence à se répandre. Il existe des applets Java permettant de visualiser une présentation dans un navigateur, telles que le Soja Player de HELIO et HPAS (Hypermedia Presentation and Authoring System) chez Digital.
On retrouve de même la possibilité de lire ces nouveaux standards à l'aide du Windows Media Player à partir de la version 7.0, Apple Quick Time à partir de la version 5.0 ou encore Real Player à partir de la version 8.0.
La société Oratrix propose une famille de produits multimédia (dont le nom est GriNS Authoring Software) permettant de créer des présentations multimédia en flux tendu pouvant être lues grâce au Real Player G2. Cette famille de logiciels permet de la même manière de créer des présentations en format SMIL "pur" contenant aussi bien du HTML interactif que des animations très complexes.
Un document SMIL est structuré en trois parties :
définition des régions qui recevront les différents objets multimédias (position, style) ;
définition de l'ordre et de l'échelle temporelle à appliquer aux objets. Cette étape permet en plus de définir les mouvements, les transitions, etc. ;
définition du débit en fonction du type de connexion.
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.
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.
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.
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.
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.
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.
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.
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.
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é.
Il est également possible de faire jouer des objets en parallèle, avec l'élément par.
Télécharger la correction et l'ouvrir localement, avec tous les fichiers multimédias donnés dans l'énoncé.
La spécification 2.0 du W3C a ajouté également d'autres fonctionnalités, comme des effets de transition ; mais dès le début, SMIL a permis de mettre en place l'affichage de liens http, de l'interactivité via des réactions à la souris... Bref, il est possible de mettre sur pied des présentations multimédia interactives, avec l'avantage que le fichier source est un simple fichier ASCII. Bien sûr, des environnements intégrés de développement existent également, pour les réfractaires au Bloc Notes...
De nombreux didacticiels existent sur Internet. Je vous recommande, si ce format vous intéresse, d'y passer quelque temps. Des exemples y sont donnés.
Le site du W3C, bien entendu...
Real Networks offre bien sûr un très bon site de présentation générale :http://service.real.com/help/library/guides/production/htmfiles/smil.htm. D'autres ressources figurent également sur ce site
L'Université de Boston présente un très bon tutoriel à http://www.bu.edu/webcentral/learning/smil1/.
Des didacticiels réalisés en SMIL et faisant appel à l'applet SOJA sont disponibles sur http://www.empirenet.com/~joseram/
Un autre bon didacticiel a été réalisé par la société HELIO à http://www.helio.org/products/smil/tutorial/
Just Smil est une mine de renseignements sur http://smw.internet.com/smil/smilhome.html
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.
Cours suivant : Un format de dessin vectoriel en XML: SVG
Liste des fichiers associés à ce fichier HTML :
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.