From: Maxime Chupin (escudo) <chupin@fougeriens.org>
Date: Sun, 13 Nov 2016 09:19:30 +0000 (+0100)
Subject: Un peu plus d'explications pour l'exemple de l'ellipsographe
X-Git-Url: https://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=commitdiff_plain;h=40d5d73a693518605340931260d3ecef886557bb

Un peu plus d'explications pour l'exemple de l'ellipsographe
---

diff --git a/ellipsographe/index.md b/ellipsographe/index.md
index 28d2702..30030f8 100644
--- a/ellipsographe/index.md
+++ b/ellipsographe/index.md
@@ -11,3 +11,31 @@ Le fichier MetaPost a été recompilé avec l'entête suivante :
 de façon à obtenir toutes les figures (autonomes)  au format SVG, logées dans le bon répertoire (créé au préalable).
 
 L'[animation](animation.html) est construite par une instance d'`Animation` et contrôlée par une instance de `SVGPlayerOne`. 
+
+### Du côté du code HTML
+
+Un fois les fichiers SVG produits dans le répertoire `svg` et les librairies JS `jquery`, `SVGAnimation.js` et `SVGPlayerone.js` chargées, il faut placer, à l'endroit souhaité, le code HTML suivant :
+
+	<div id="anim1" style="margin:10px auto;padding:10px;width:660px;border:2px solid #AAA;border-radius:4px">
+      <img src="svg/ellipsographe-1.svg" alt="animation1" style="width:660px;height:480px"/>
+      <div class="message" id="anim1_message">Ellipsographe</div>
+      <div id="anim1_boutons" class="SVGbutton"></div>
+    </div>
+
+où le nom `anim1` est laissé libre (il faut veiller à ce que ce nom se retrouve pour `anim1_message` et `anim1_boutons`). Les champs `style`, `class` et `alt` sont à renseigner (ou non). 
+
+### Du côté du code JavaScript
+
+Dans la page HTML, il faut écrire un peu de code JavaScript. Cela peut se faire de la façon, en écrivant le code suivant :
+
+	<script type="text/javascript">
+      $(window).load(function() {
+        a1 = new Animation('anim1','svg/ellipsographe-',1,91);
+        a1.delai = 60;
+        a1.loopOnload();
+        b1 = new SVGPlayerOne(a1);
+        b1.connect();
+      });
+	</script>
+
+Le constructeur d'animation pour `a1` prend en argument l'`id` de la balise `div` de l'amimation, le préfixe de la série d'images à animer (avec le répertoire `svg`), l'indice de la première image (ici, 1 pour `svg/ellipsographe-1`), et l'indice de la dernière image (ici, 91 pour `svg/ellipsographe-91`). L'attribut `delai` est modifié pour régler la fréquence de changement d'image lors de la lecture. La variable `b1`, elle, est le *player* qui est configurer dans le fichier `SVGPlayerone.js` et qui est connecté à l'animation.