X-Git-Url: https://melusine.eu.org/syracuse/G/git/?a=blobdiff_plain;f=doc%2Fpage.md;h=0cffee17a97ebec2d0b59567d52c2b1d4a4da1c1;hb=263e8d367f3d8cc8f1a03e6ff5d14dd8a33650e6;hp=a77c3863b4b9f4fcf5fd956ca4fb51515cfc1079;hpb=063e35eea0756d210c9dae72960351f16c42573c;p=svganimation.git

diff --git a/doc/page.md b/doc/page.md
index a77c386..0cffee1 100644
--- a/doc/page.md
+++ b/doc/page.md
@@ -1,3 +1,4 @@
+<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">
@@ -7,6 +8,18 @@
     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();
+    player = new Controle(anim);
+    player.connect();
+    });
 </script>
 
 
@@ -23,7 +36,9 @@ SVG.
 
 <div class="alert alert-warning">
 <p>Les différents exemples se charge en cliquant sur le bouton
-dédié. Ceci **n'est pas** le comportement par défaut. Il s'agit
+dédié. Ceci **n'est pas** le comportement par défaut, c'est du code
+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.</p>
 <p>Nous présentons, dans la section XX, le code qui permet de charger
@@ -32,29 +47,29 @@ l'animation sur demande.</p>
 
 ## Installation
 
-Le fichier `SVGAnimation.js` (que l'on supposera dans un répertoire nommé `js`) est à charger dans la page `html` en mettant les lignes suivantes :
+Le fichier `SVGAnimation.js` (que l'on supposera dans un répertoire
+nommé `js`) est à charger dans la page `html` en mettant les lignes
+suivantes :
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
     <script type="text/javascript" src="js/SVGAnimation.js"></script>
 
-La librairie `SVGAnimation.js` dépend de `JQuery`, il faut donc charger cette bibliothèque JavaScript avant.
 
 ## Principe
 
 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.
+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* suivit d'un tiret puis d'un nombre (celui-ci pouvant être
-formater de différente façons).
+*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 ...
 
-ou
+ou, autre exemple :
 
     monfichier-001.svg  monfichier-002.svg monfichier-003.svg ...
 
@@ -68,19 +83,157 @@ abondamment pour la production d'animations.</p>
 </div>
 
 
-## L'objet `Animation`
+## L'utilisation
+
+### Côté HTML
 
 La librairie `SVGAnimation` définit le *prototype* javascript
-`Animation`. Pour l'utiliser il faut déclarer
+`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 :
+
+~~~~~~~ { .html }
+<div id="anim1">
+  <img src="svg/ellipsographe-1.svg" alt="animation1"/>
+  <div class="message" id="anim1_message">Chargement</div>
+  <div id="anim1_boutons"></div>
+</div>
+~~~~~~~
+
+### 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 pour permettre à l'animation
+de se jouer.
+
+#### Construire l'objet `Animation`
+
+Le *constructeur* du prototype JavaScript s'utilise, pour l'exemple
+donné à la section précédente, de la façon
+suivante :
+
+~~~~~~~ { .javascript }
+var anim = new Animation('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 :
+
+~~~~~~~ { .javascript }
+var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
+anim.loopOnload();
+var player = new Controle(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 :
+
+~~~~~~~ { .javascript }
+$(window).load(function() {
+    var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
+    anim.loopOnload();
+    var player = new Controle(anim);
+    player.connect();
+});
+~~~~~~~
+
+Bien sûr, ceci nécessite le chargement, dans la page HTML, de la
+librairie `JQuery`.
+
+
 
-<div id="anim1" style="margin:10px auto;padding:10px;width:350px;border:2px solid #AAA;border-radius:4px">
+
+
+#### Le résultat
+
+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">
+$(window).load(function() {
+    var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
+    anim.loopOnload();
+    var player = new Controle(anim);
+    player.connect();
+});
+</script>
+<!--[...]-->
+<div id="XXXX">
+  <img src="svg/ellipsographe-1.svg" alt="animation1"/>
+  <div class="message" id="XXXX_message">Chargement...</div>
+  <div id="XXXX_boutons"></div>
+</div>
+~~~~~~~
+
+dont l'affichage est :
+
+<div id="XXXX">
+  <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>
+  <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="anim1_message">Ellipsographe</div>
-  <div id="anim1_boutons"><button onclick="charge('anim1','../ellipsographe/svg/ellipsographe-',1,91);">Charger l'animation</button></div>
+  <div class="message" id="anim2_message">Ellipsographe</div>
+  <div id="anim2_boutons"><button onclick="charge_anim2()">Charger l'animation</button></div>
 </div>
 
 
-### L'utilisation
 
 ### Les paramètres
 
@@ -89,3 +242,5 @@ La librairie `SVGAnimation` définit le *prototype* javascript
 ### `SVGPlayerOne.js`
 
 ### `SVGPlayerButtons.js`
+
+## Exemples d'utilisation