X-Git-Url: https://melusine.eu.org/syracuse/G/git/?a=blobdiff_plain;ds=inline;f=doc%2Fpage.html;h=08dd75828fd2db29175b5e9be9b32c320d961fad;hb=61d44c7fd1dff323aaa42fb4e17239cfb61a78f7;hp=33c7f29370e0355a565e8622d85af54a76db607a;hpb=4b4707e827c7674de20de51cbd275671696d032c;p=svganimation.git
diff --git a/doc/page.html b/doc/page.html
index 33c7f29..08dd758 100644
--- a/doc/page.html
+++ b/doc/page.html
@@ -10,8 +10,8 @@
player.connect();
}
function charge_anim2() {
- var a = new Animation('anim2');
- a.loopOnLoad();
+ var a = new Animation('anim2','../ellipsographe/svg/ellipsographe-',1,91);
+ a.loopOnload();
var b = new Controle(a);
b.connect();
}
@@ -23,64 +23,70 @@
});
L'objectif est de développer, en particulier, du code Javascript afin de présenter des animations de fichiers SVG produits, en particulier, par MetaPost. Ce développement n'étant pas tout à fait prédéterminé, il sera constitué à partir de l'exploration de différents scénarios de présentation de ces animations et des modes de construction des fichiers SVG.
Le principe est simple : on dispose d'un ensemble d'images au format SVG qui constituent, par une suite chronologique, une animation à visionner. La libraire SVGAnimation permet de visionner cette animation dans une page HTML grâce à JavaScript.
+
Le principe est simple : on dispose d'un ensemble d'images au format SVG qui constituent, par une suite chronologique, une animation à visionner. La libraire SVGAnimation permet de visionner cette animation dans une page HTML grâce à JavaScript.
La famille d'images
-
Les différentes images composant l'animation doivent se nommer avec un prefixe suivi d'un nombre (indice), celui-ci pouvant être formater de différente façons :
La librairie SVGAnimation définit le prototype javascript Animation. Pour l'utiliser il faut déclarer une balise HTML div avec un identifiant (id) unique. Choisissons pour l'exemple XXXX. À l'intérieur de ces balises, il faut : * une balise img contenant un image svg qui servira de vignette à l'animation; * une balise div avec l'identifiant id="XXXX_message" où XXXX est l'identifiant de la balise englobante. Dans cette balise message, on y met, si on le souhaite, un message à afficher avant le chargement de l'animation; * une balise div avec l'identifiant id="XXXX_boutons".
-
En supposant que les images SVG se trouvent dans un répertoire nommé svg, voici un exemple d'une telle structure :
une balise img contenant un image svg qui servira de vignette à l'animation;
+
une balise div avec l'identifiant id="XXXX_message" où XXXX est l'identifiant de la balise englobante. Dans cette balise message, on y met, si on le souhaite, un message à afficher avant le chargement de l'animation;
+
une balise div avec l'identifiant id="XXXX_boutons".
Une fois qu'on a la structure HTML présentée ci-dessus, il est nécessaire d'ajouter un peu de code JavaScript pour permettre à l'animation de se jouer.
var anim =newAnimation('XXXX','svg/ellipsographe-',1,91);anim.loopOnload();
-
XXXX est l'identifiant de la balise div HTML englobante, svg/ellipsographe- est le préfixe dont on a parlé plus haut, 1 est l'indice de la première image à animer, et 91 l'indice de la dernière.
anim.loopOnload() permet le chargement de l'animation.
-
Une fois celle-ci chargée, il faut en permettre la lecture qui se fait grâce à un nouvel objet nommé Controle. Ce contrôle s'utilise en fait comme ceci :
var anim =newAnimation('XXXX','svg/ellipsographe-',1,91);anim.loopOnload();var player =newControle(anim);player.connect();
-
Nous verrons par la suite comment personnaliser le contrôle de la lecture de l'animation.
-
Tout ceci n'est toujours pas suffisant car il faut exécuter ce code JavaScript. Ceci peut être fait grâce à JQuery par exemple, en exécutant ces quatre lignes de code à l'ouverture de la fenêtre :
+
Nous verrons par la suite comment personnaliser le contrôle de la lecture de l'animation.
functioncharge_anim2() {
- var a =newAnimation('anim2');
- a.loopOnLoad();
+ var a =newAnimation('anim2','svg/ellipsographe-',1,91);
+ a.loopOnload();var b =newControle(a);b.connect();}
-
Fonction qui sera liée à l'événementonclick d'un bouton proposant, à l'internaute, le chargement de l'animation...