X-Git-Url: https://melusine.eu.org/syracuse/G/git/?a=blobdiff_plain;f=doc%2Fpage.md;h=26dd7c395dafe6668feee157ef3a04f04034dec3;hb=db08eee2240e6df1fa3dc319bb7c79db1ee506e8;hp=b05b46c6160d15c6ca02cb41d4f4a3042969aa54;hpb=b18b5c7d0c76e52002f8372aac5f597d762c096c;p=svganimation.git

diff --git a/doc/page.md b/doc/page.md
index b05b46c..26dd7c3 100644
--- a/doc/page.md
+++ b/doc/page.md
@@ -1,4 +1,4 @@
-<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>-->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript" src="../SVGAnimation.js"></script>
 <script type="text/javascript" src="../SVGPlayerOne.js"></script>
 <script type="text/javascript">
@@ -8,11 +8,17 @@
     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() {
-    a1 = new Animation('anim1','../ellipsographe/svg/ellipsographe-',1,91);
-    a1.loopOnload();
-    b1 = new Controle(a1);
-    b1.connect();
+    anim = new Animation('XXXX','../ellipsographe/svg/ellipsographe-',1,91);
+    anim.loopOnload();
+    player = new Controle(anim);
+    player.connect();
     });
 </script>
 
@@ -58,7 +64,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 ...
@@ -91,8 +97,8 @@ faut :
 * 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 +115,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 +136,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 :
 
@@ -171,7 +177,6 @@ Tout ceci donne le code suivant
 ~~~~~~~ { .html }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript" src="../SVGAnimation.js"></script>
-<script type="text/javascript" src="../SVGPlayerOne.js"></script>
 <script type="text/javascript">
 $(window).load(function() {
     var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
@@ -181,30 +186,55 @@ $(window).load(function() {
 });
 </script>
 <!--[...]-->
-<div id="anim1">
+<div id="XXXX">
   <img src="svg/ellipsographe-1.svg" alt="animation1"/>
-  <div class="message" id="anim1_message">Chargement</div>
-  <div id="anim1_boutons"></div>
+  <div class="message" id="XXXX_message">Chargement...</div>
+  <div id="XXXX_boutons"></div>
 </div>
 ~~~~~~~
 
-dont le résultat est :
+dont l'affichage est :
 
-<div id="anim1">
+<div id="XXXX">
   <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>
-  <div class="message" id="anim1_message">Ellipsographe</div>
-  <div id="anim1_boutons"></div>
+  <div class="message" id="XXXX_message">Chargement...</div>
+  <div id="XXXX_boutons"></div>
 </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','svg/ellipsographe-',1,91);
+  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*