1 ## Animation : Ellipsographe
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>.
5 Le fichier MetaPost a été recompilé avec l'entête suivante :
8 outputtemplate := "svg/%j-%c.svg";
11 de façon à obtenir toutes les figures (autonomes) au format SVG, logées dans le bon répertoire (créé au préalable).
13 L'[animation](animation.html) est construite par une instance d'`Animation` et contrôlée par une instance de `SVGPlayerOne`.
15 ### Du côté du code HTML
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 :
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>
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).
27 ### Du côté du code JavaScript
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 :
31 <script type="text/javascript">
32 $(window).load(function() {
33 a1 = new Animation('anim1','svg/ellipsographe-',1,91);
36 b1 = new SVGPlayerOne(a1);
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.