X-Git-Url: https://melusine.eu.org/syracuse/G/git/?a=blobdiff_plain;ds=inline;f=doc%2Fpage.md;h=7b9b1c412f21e171e72ef7700733eade9070f740;hb=4b4707e827c7674de20de51cbd275671696d032c;hp=1da4cdb4ed9d6b738785a1b6b1246e611403d1a1;hpb=de55ed8075f0d9f1456508f71a78fa5e9c6c3dca;p=svganimation.git
diff --git a/doc/page.md b/doc/page.md
index 1da4cdb..7b9b1c4 100644
--- a/doc/page.md
+++ b/doc/page.md
@@ -1,3 +1,4 @@
+
@@ -21,21 +34,203 @@ constitué à partir de l'exploration de différents scénarios de
présentation de ces animations et des modes de construction des fichiers
SVG.
+
+
Les différents exemples se charge en cliquant sur le bouton
+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.
+
Nous présentons, dans la section XX, le code qui permet de charger
+l'animation sur demande.
+
+
## Installation
-Le fichier `SVGAnimation.js` (que l'on supposera dans le répertoire `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 :
-
-La librairie `SVGAnimation.js` dépend de `JQuery`, il faut donc charger charger cette bibliothèque JavaScript avant.
-## L'objet `Animation`
+## 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 grâce à JavaScript.
+
+### La famille d'images
+
+Les différentes images composant l'animation doivent se nommer avec un
+*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, autre exemple :
+
+ monfichier-001.svg monfichier-002.svg monfichier-003.svg ...
+
+Nous verrons comment gérer le formatage de l'indice des images dans
+les sections suivantes.
+
+
+
L'idée d'une telle librairie est venue du fait que le logiciel
+MetaPost permet de produire des images SVG, et nous l'utilisons
+abondamment pour la production d'animations.
+
+
+
+## L'utilisation
+
+### Côté HTML
+
+La librairie `SVGAnimation` définit le *prototype* javascript
+`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 }
+
+
+
Chargement
+
+
+~~~~~~~
+
+### 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`.
+
+
+
+
+
+#### Le résultat
+
+Tout ceci donne le code suivant
+
+~~~~~~~ { .html }
+
+
+
+
+
+
+
Chargement...
+
+
+~~~~~~~
+
+dont l'affichage est :
+
+
+
+
Chargement...
+
+
+
+
+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');
+ 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 }
+
+
+
Ellipsographe
+
+
+~~~~~~~
+
+On peut en profiter pour adapter le *style* des éléments englobants.
+
+
-
Ellipsographe
-
+
Ellipsographe
+
@@ -48,6 +243,4 @@ La librairie `SVGAnimation.js` dépend de `JQuery`, il faut donc charger charger
### `SVGPlayerButtons.js`
-
-
-
+## Exemples d'utilisation