| JavaScript - Animation contrôlée |
 |
|
 |
|
|
Dans la famille "scripts à tout faire", en voici un qui se déclinera facilement. On pensera naturellement à l'adapter à un diaporama mais les utilisations possibles sont multiples. On commence par une petite démo :
Cette magnifique séquence est composée de 8 images GIF stockées dans des fichiers nommés v1.gif, v2.gif... Passons vite au script, sans s'occuper des boutons changeant d'aspect car cela a déjà été traité à la page des Roll-overs :
 Dans l'en-tête
<![CDATA[var maxi = 8;
var auto = false;
var vue = new Array(maxi);
var compteur = 1;
var timerID;]]>
Ces quelques variables vont nous être utile par la suite :
maxi contient le nombre total de vues
auto indique si l'animation est en cours (valeur true) ou non (valeur false)
vue est un tableau qui va contenir toutes les images de la séquence
compteur contient le rang de l'image en cours d'affichage
timerID sera expliqué plus loin
Nous trouvons ensuite une petite boucle qui crée et affecte les objets images qui vont prendre place dans le tableau vues.
<![CDATA[for (i=1;i<=maxi;i++) {
vue[i] = new Image(120,80);
vue[i].src = "v" + i + ".gif";
}]]>
Voyons maintenant les fonctions qui vont gérer l'affichage d'une nouvelle image et le défilement de celles-ci. La fonction next() sera chargée d'incrémenter compteur et d'afficher la prochaine image :
<![CDATA[function next() {
if (compteur == maxi) {
compteur = 1;
}
else {
compteur++;
}
document.Film.src = vue[compteur].src;
}]]>
La fonction play() déclenche la séquence à partir de l'image courante. Elle commence par affecter la valeur true à la variable auto. Ce sera utile pour la gestion de l'affichage des boutons. La ligne setInterval("next()", 200) génère un programme qui s'activera (sur cet exemple) toutes les 200 milisecondes. Ce programme déclenchera la fonction next() à intervalle régulier, assurant ainsi le défilement de la séquence.
<![CDATA[function play() {
auto = true;
timerID = setInterval("next()", 200);
}]]>
On note ici la présence de la variable timerID qui récupère un numéro de programme. Celui-ci sera utile pour stopper le défilement. On y arrive...
Voici maintenant les fonctions qui seront associées aux boutons. La fonction clicStop() sera exécutée à chaque fois qu'on cliquera sur le bouton "Stop". Le code de celle-ci ne sera exécuté que si l'animation est en cours (d'où l'utilité de la variable auto). En plus de changer l'aspect des différents boutons, elle stoppe le programme de séquencement grâce à l'instruction clearInterval(timerID).
<![CDATA[function clicStop() {
if (auto == true) {
auto = false;
document.BoutonStop.src = Bstop0.src;
document.BoutonNext.src = Bnext.src;
document.BoutonPlay.src = Bplay.src;
document.BoutonReset.src = Breset.src;
clearInterval(timerID);
if (compteur == 1) {
document.BoutonReset.src = Breset0.src;
}
else {
document.BoutonReset.src = Breset.src;
}
}
}]]>
La fonction clicReset() se charge de "rembobiner" le film :
<![CDATA[function clicReset() {
if (compteur != 1) {
compteur = 1;
document.Film.src = vue[compteur].src;
}
}]]>
La fonction clicNext() a pour principale fonction de déclencher l'affichage de la prochaine image si l'animation n'est pas activée.
<![CDATA[function clicNext() {
if (auto == false) {
next();
if (compteur == 1) {
document.BoutonReset.src = Breset0.src;
}
else {
document.BoutonReset.src = Breset.src;
}
}
}]]>
La plus simple pour finir : clicPlay() est associée au bouton "Play" et déclenche l'animation (fonction play()). On remarque que sur cette action, tous les boutons changent d'aspect, c'est tellement plus joli comme ça...
<![CDATA[function clicPlay() {
if (auto == false) {
document.BoutonStop.src = Bstop.src;
document.BoutonNext.src = Bnext0.src;
document.BoutonPlay.src = Bplay0.src;
document.BoutonReset.src = Breset0.src;
play();
}
}]]>
Dans le corps de la page
Après tous ces préparatifs, on va enfin pouvoir visionner notre séquence. On commence par afficher la première image. Pour pouvoir en changer, on nomme "Film" l'élément IMG :
<![CDATA[<IMG SRC="v1.gif" NAME="Film">]]>
Les boutons sont des images qui font l'objet de liens déclenchant les fonctions déjà citées. Chacun d'entre eux est nommé. Ces noms d'objets ont déjà été rencontrés dans les fonctions de l'en-tête.
<![CDATA[<A HREF="javascript:clicReset()"><IMG SRC="reset0.gif" NAME="BoutonReset">
<A HREF="javascript:clicStop()"><IMG SRC="stop0.gif" NAME="BoutonStop">
<A HREF="javascript:clicNext()"><IMG SRC="next.gif" NAME="BoutonNext">
<A HREF="javascript:clicPlay()"><IMG SRC="play.gif" NAME="BoutonPlay">]]>
Et voilà ! notre visionneuse est prête à servir.
|
