From 40d5d73a693518605340931260d3ecef886557bb Mon Sep 17 00:00:00 2001 From: "Maxime Chupin (escudo)" Date: Sun, 13 Nov 2016 10:19:30 +0100 Subject: [PATCH] Un peu plus d'explications pour l'exemple de l'ellipsographe --- ellipsographe/index.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) 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 : + +
+ animation1 +
Ellipsographe
+
+
+ +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 : + + + +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. -- 2.20.1