ellipsographe/index.md

   1 ## Animation : Ellipsographe
   2
   3 Elle est obtenue à partir d'un fichier déjà présent sur le site : <http://melusine.eu.org/syracuse/metapost/animations/ellipsographe/?idsec=1>.
   4
   5 Le fichier MetaPost a été recompilé avec l'entête suivante :
   6
   7     prologues := 3;
   8     outputtemplate := "svg/%j-%c.svg";
   9     outputformat := "svg";
  10
  11 de façon à obtenir toutes les figures (autonomes)  au format SVG, logées dans le bon répertoire (créé au préalable).
  12
  13 L'[animation](animation.html) est construite par une instance d'`Animation` et contrôlée par une instance de `SVGPlayerOne`.
  14
  15 ### Du côté du code HTML
  16
  17 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 :
  18
  19         <div id="anim1" style="margin:10px auto;padding:10px;width:660px;border:2px solid #AAA;border-radius:4px">
  20       <img src="svg/ellipsographe-1.svg" alt="animation1" style="width:660px;height:480px"/>
  21       <div class="message" id="anim1_message">Ellipsographe</div>
  22       <div id="anim1_boutons" class="SVGbutton"></div>
  23     </div>
  24
  25 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).
  26
  27 ### Du côté du code JavaScript
  28
  29 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 :
  30
  31         <script type="text/javascript">
  32       $(window).load(function() {
  33         a1 = new Animation('anim1','svg/ellipsographe-',1,91);
  34         a1.delai = 60;
  35         a1.loopOnload();
  36         b1 = new SVGPlayerOne(a1);
  37         b1.connect();
  38       });
  39         </script>
  40
  41 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.