var player = new Controle(anim);
player.connect();
}
+ function charge_anim2() {
+ var a = new Animation('anim2');
+ a.loopOnLoad();
+ var b = new Controle(a);
+ b.connect();
+ }
$(window).load(function() {
anim = new Animation('XXXX','../ellipsographe/svg/ellipsographe-',1,91);
anim.loopOnload();
### 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 ...
* 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é
### 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`
`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 :
</div>
~~~~~~~
-dont le résultat est :
+dont l'affichage est :
<div id="XXXX">
<img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>
</div>
+Il est possible de différer le chargement de l'animation en créant une fonction Javascript.
+
+~~~~~~~ { .javascript }
+function charge_anim2() {
+ var a = new Animation('anim2');
+ a.loopOnLoad();
+ var b = new Controle(a);
+ b.connect();
+}
+~~~~~~~
+
+Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant, à
+l'internaute, le chargement de l'animation...
+
+~~~~~~~ { .html }
+<div id="anim2"
+ style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
+ <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
+ <div class="message" id="anim2_message">Ellipsographe</div>
+ <div id="anim2_boutons"><button onclick="charge_anim2();">Charger l'animation</button></div>
+</div>
+~~~~~~~
+
+On peut en profiter pour adapter le *style* des éléments englobants.
<div id="anim2" style="margin:10px auto;padding:10px;width:350px;border:2px solid #AAA;border-radius:4px">
<img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
<div class="message" id="anim2_message">Ellipsographe</div>
- <div id="anim2_boutons"><button onclick="charge('anim2','../ellipsographe/svg/ellipsographe-',1,91);">Charger l'animation</button></div>
+ <div id="anim2_boutons"><button onclick="charge_anim2">Charger l'animation</button></div>
</div>
+
### Les paramètres
## Les *players*