Les
balises de base
SMIL tourne principalement autour de deux balises : <par>
et <seq>, qui font respectivement
référence à des actions en parallèles
(en même temps) ou en séquence (l'une après l'autre).
Simplement, les éléments devant être diffusés
en même temps seront placés dans une même balise
<par>, et ceux devant être
diffusés les uns après les autres, dans une même
balise <seq>.
<body>
<seq>
<img src="/img/monImage1" dur="1s"
/>
<img src="/img/monImage2" dur="1s"
/>
<img src="/img/monImage3" dur="1s"
/>
</seq>
</body>
Nos trois images
vont ici s'afficher les unes après les autres, chacune pendant
une seconde, au même emplacement (l'utilisation des CSS est
possible pour tout ce qui concerne la mise en page...). L'attribut
dur="" nous permet de
spécifier le temps durant lequel l'élément
sera visible (ici, une seconde pour chaque). Etant donné
que nous sommes dans une séquence (balise <seq>),
chaque élément ne s'affiche qu'une fois que l'élément
précédent a terminé de s'afficher.
Nous avons donc ici un galerie avec défilement automatique très
simple à réaliser ! Mais elle ne boucle pas : une fois la dernière
image affichée, plus rien ne se passe. Pour relancer la galerie, on ajoute
un attribut repeatCount="indefinite" à
la balise <seq> : <seq
repeatCount="indefinite">. La galerie ne s'arrêtera
plus...
Revoyons notre
code précédent en remplaçant <seq>
par <par> :
<body>
<par>
<img src="/img/monImage1" dur="1s"
/>
<img src="/img/monImage2" dur="1s"
/>
<img src="/img/monImage3" dur="1s"
/>
</par>
</body>
Nos images ne sont plus
en séquence mais en parallèle : toutes les trois s'affichent côte
à côte pendant une seconde, puis disparaissent. Si on ajoutait le
repeatCount="indefinite", on obtiendrait
un affichage tout ce qu'il y a de plus HTML-esque : trois images statiques, l'une
à coté de l'autre. Mais SMIL nous permet d'animer un peu cela :
<body>
<par repeatCount="indefinite">
<img src="/img/monImage1" dur="1s"
begin="1s" />
<img src="/img/monImage2" dur="1s"
begin="2s" />
<img src="/img/monImage3" dur="1s"
/>
</par>
</body>
Nous avons maintenant
défini le début de l'affichage de chacune de nos trois
images: mongImage1 se lance au bout
d'une seconde, monImage2 au bout
de deux secondes, et monImage3 dès
le lancement de la boucle. Toutes ne sont plus visibles au bout
d'une seconde : nous avons une guirlande d'images du plus bel effet...
en tout cas plus rapide à réaliser qu'en faisant appel
à JavaScript.
Ce n'est là
qu'un petite portion des possibilités de SMIL, qui compte
dans sa seconde version 9 modules spécifiques : animation,
contrôle du contenu, mise en page, liaison, gestion du temps,
synchronisation, effets de transition... Nous vous les présenterons
individuellement lors de prochains articles.
Page 1 | 2
|
Discutez en sur 
[