X-Git-Url: https://melusine.eu.org/syracuse/G/git/?a=blobdiff_plain;f=doc%2Fpage.md;h=33e08d51b6d79ffb0d148299fc756e171cabf0c5;hb=f1b6847f4fde160a3b56c252201670205885f932;hp=663a7f900e004bc6cf1f046c4218eb509f838f99;hpb=608afabf8b5e5c93a4c90229f412fb2f5a026652;p=svganimation.git diff --git a/doc/page.md b/doc/page.md index 663a7f9..33e08d5 100644 --- a/doc/page.md +++ b/doc/page.md @@ -8,6 +8,12 @@ var player = new Controle(anim); player.connect(); } + function charge_anim2() { + var a = new Animation('anim2','../ellipsographe/svg/ellipsographe-',1,91); + a.loopOnload(); + var b = new Controle(a); + b.connect(); + } $(window).load(function() { anim = new Animation('XXXX','../ellipsographe/svg/ellipsographe-',1,91); anim.loopOnload(); @@ -35,8 +41,9 @@ JavaScript qui permettra de choisir quand l'animation se charge. Il s'agit d'éviter de charger toutes les animations présentes sur cette page, cela serait bien trop lourd.
-Nous présentons, dans la section XX, le code qui permet de charger -l'animation sur demande.
+Nous présentons, dans la section Chargement différé, le code qui permet de +charger l'animation sur demande.
## Installation @@ -58,7 +65,7 @@ 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* puis d'un nombre (indice), celui-ci pouvant être +*prefixe* suivi d'un nombre (indice), celui-ci pouvant être formater de différente façons : monfichier-1.svg monfichier-2.svg monfichier-3.svg ... @@ -85,14 +92,15 @@ 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 : +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"` + 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é @@ -109,7 +117,7 @@ En supposant que les images SVG se trouvent dans un répertoire nommé ### Côté JavaScript Une fois qu'on a la structure HTML présentée ci-dessus, il est -nécessaire d'ajouter un peu de code JavaScript permettre à l'animation +nécessaire d'ajouter un peu de code JavaScript pour permettre à l'animation de se jouer. #### Construire l'objet `Animation` @@ -130,7 +138,7 @@ dernière. `anim.loopOnload()` permet le chargement de l'animation. -Une fois celle-ci chargé, il faut en permettre la lecture qui se fait +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 : @@ -187,7 +195,7 @@ $(window).load(function() { ~~~~~~~ -dont le résultat est : +dont l'affichage est :