X-Git-Url: https://melusine.eu.org/syracuse/G/git/?a=blobdiff_plain;f=doc%2Fpage.md;h=87c6f11daf70b724068b257ee2cecd67535ef157;hb=1bdee2347fb99078b44af956afd804b83aa1d76a;hp=b9faf2c5138b674f7890e4e769df399e0db44567;hpb=6bfcc0f719cbb35a9126bb408e510ba09daf7d70;p=svganimation.git
diff --git a/doc/page.md b/doc/page.md
index b9faf2c..87c6f11 100644
--- a/doc/page.md
+++ b/doc/page.md
@@ -2,10 +2,24 @@
@@ -20,33 +34,344 @@ 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 chargent 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 Chargement différé, 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.
+
+
-
-
Ellipsographe
-
+#### Le résultat
+
+Tout ceci donne le code suivant
+
+~~~~~~~ { .html }
+
+
+
+
+
+
+
Chargement...
+
+
+~~~~~~~
+
+dont l'affichage est :
+
+
+
+
Chargement...
+
+
+
+
+#### Chargement différé
+
+On peut laisser le chargement d'une animation à la demande en créant une
+fonction Javascript.
+
+~~~~~~~ { .javascript }
+function charge_anim2() {
+ var a = new Animation('anim2','svg/ellipsographe-',1,91);
+ a.loopOnload();
+ var b = new Controle(a);
+ b.connect();
+}
+~~~~~~~
+
+Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant
+justement le chargement de l'animation...
+
+~~~~~~~ { .html }
+
+
+
Ellipsographe
+
+
+
+
+~~~~~~~
+
+Dans le même temps, le *style* des éléments englobants a été adapté.
+
+
+
+
Ellipsographe
+
### Les paramètres
+L'objet `Animation` ne possède que deux propriétés configurables, autres
+que celles (4) qui lui sont passées en argument.
+
+• **delai** *(valeur par défaut : 50)* — C'est la durée, en millisecondes, entre deux images.
+
+~~~{.javascript}
+var a = new Animation('anim','svg/pre',1,100);
+a.delai = 200;
+a.loopOnload();
+~~~
+Ceci fixera le défilement à 5 images/s. Un *player* comme ceux que nous vous proposons ci-dessous peut
+modifier cette valeur.
+
+• **pad** *(valeur par défaut : 0)* — Ce paramètre n'a d'effet
+que s'il est supérieur ou égal à 2, il permet de fixer la longueur des
+index des images en complétant avec des 0.
+
+~~~{.javascript}
+var a = new Animation('anim','svg/pre',1,100);
+a.pad = 3;
+a.loopOnload();
+~~~
+Les images chargées seront, successivement, `svg/pre001.svg`, `svg/pre002.svg`, ..., `svg/pre100.svg`.
+
## Les *players*
+Le fichier `SVGAnimation.js` contient le constructeur `Controle` qui est
+la base des *players*. S'il est invoqué directement, il fournit un
+contrôle *simpliste* de l'animation, comme cela a été vu
+[ci-dessus](#côté-javascript).
+
### `SVGPlayerOne.js`
-### `SVGPlayerButtons.js`
+Pour utiliser un *player* plus *sophistiqué*, il faut surcharger la
+méthode `Initialisation` de l'objet `Controle`. Pour plus de détails
+sur les *players*, nous vous invitons à consulter la page dédiée.
+
+L'idée que nous présentons ici est de construire un objet JavaScript
+qui mettra des boutons de contrôle (lecture, stop, etc.).
+
+Ceci peut se faire de la façon suivante :
+
+~~~~~~~ { .javascript }
+function SVGPlayerOne(a) { // déclaration de l'objet
+ Controle.call(this,a); // construit à partir de l'objet Controle
+ SVGPlayerOne.prototype.connect = Controle.prototype.connect // et de
+ // la méthode connect du Controle
+}
+~~~~~~~
+
+Une fois déclaré un tel objet, il suffit de surcharger la méthode
+`Initialisation` de l'objet `Controle` fourni dans `SVGAnimation.js`.
+Dans l'exemple ci-dessous, on « vide » la `div` `XXXX_message`, et on
+ajoute des boutons à la `div` `XXXX_boutons` qui réagissent aux
+`onclick` pour lancer les fonctions JavaScript adéquates définies dans
+le fichier `SVGAnimation.js`.
+
+~~~~~~~ { .javascript }
+// Surcharge de la méthode [Initialisation]
+SVGPlayerOne.prototype.Initialisation = function() {
+ var a = this.a; // l'animation courante
+ var self = this.me; // le player
+ a.image.style.display = 'inline';
+ a.message.parentNode.removeChild(a.message); // on supprime la
+ //balise d'id=XXXX_message
+ var play = document.createElement('button'); // on crée un bouton
+ play.className = "SVGplay playBtn"; // ajout de classe pour le style
+ play.innerHTML = "Play"; // on y met du texte
+ play.onclick = function(){a.action = true; a.rotate(self.a)}; // on
+ // associe une fonction JS
+ // on recommence
+ var stop = document.createElement('button');
+ stop.className = "SVGplay stopBtn";
+ stop.innerHTML = "Stop";
+ stop.onclick = function(){a.action = false;};
+ var debut = document.createElement('button');
+ debut.className = "SVGplay debutBtn";
+ debut.innerHTML = "Début";
+ debut.onclick = function(){a.action = false; a.first(self.a)};
+ var fin = document.createElement('button');
+ fin.className = "SVGplay finBtn";
+ fin.innerHTML = "Fin";
+ fin.onclick = function(){a.action = false; a.last(self.a)};
+ var moins = document.createElement('button');
+ moins.className = "SVGplay moinsBtn";
+ moins.innerHTML = "-";
+ moins.onclick = function(){a.delai = a.delai > 2000 ? 2000 : a.delai * 1.414};
+ var plus = document.createElement('button');
+ plus.className = "SVGplay plusBtn";
+ plus.innerHTML = "+";
+ plus.onclick = function(){a.delai = a.delai < 30 ? 30 : a.delai / 1.414};
+ // placement des boutons
+ a.boutons.appendChild(play);
+ a.boutons.appendChild(stop);
+ a.boutons.appendChild(debut);
+ a.boutons.appendChild(fin);
+ a.boutons.appendChild(moins);
+ a.boutons.appendChild(plus);
+}
+~~~~~~~
+
+Un fois déclaré tout ceci (le mieux étant dans un fichier externe), on
+associe le *player* `SVGPlayerOne` à l'animation de la même façon que
+le *player* `Controle` :
+
+~~~~~~~ { .javascript }
+var anim = new Animation('anim2','svg/ellipsographe-',1,91);
+anim.loopOnload();
+var player = new SVGPlayerOne(anim);
+player.connect();
+~~~~~~~
+
+
+
+
+
+
Ellipsographe
+
+
+Le fichier `SVGPlayerOne.js` est fourni à la racine du projet SVGAnimation.
+## Exemples d'utilisation