X-Git-Url: https://melusine.eu.org/syracuse/G/git/?a=blobdiff_plain;f=doc%2Fpage.html;h=e822d012a6b2a98323afaed0928f101ee2d56f9c;hb=6a9b3b4d49e62b9a57eff23c820c74141f1c0a05;hp=c1502815118acee94c279ad12113433f94feb056;hpb=b18b5c7d0c76e52002f8372aac5f597d762c096c;p=svganimation.git diff --git a/doc/page.html b/doc/page.html index c150281..e822d01 100644 --- a/doc/page.html +++ b/doc/page.html @@ -1,5 +1,5 @@
- +

Participants : Chupin Maxime, Sarlat Jean-Michel.

@@ -33,7 +39,7 @@ Nous présentons, dans la section XX, le code qui permet de charger l'animat

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 puis d'un nombre (indice), celui-ci pouvant être formater de différente façons :

+

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 ...
@@ -45,7 +51,7 @@ L'idée d'une telle librairie est venue du fait que le logiciel MetaPost per

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"

+

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 :

<div id="anim1">
   <img src="svg/ellipsographe-1.svg" alt="animation1"/>
@@ -53,14 +59,14 @@ L'idée d'une telle librairie est venue du fait que le logiciel MetaPost per
   <div id="anim1_boutons"></div>
 </div>

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 permettre à l'animation de se jouer.

+

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 :

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é, 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 :

+

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 :

var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
 anim.loopOnload();
 var player = new Controle(anim);
@@ -78,7 +84,6 @@ L'idée d'une telle librairie est venue du fait que le logiciel MetaPost per
 
Tout ceci donne le code suivant

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript" src="../SVGAnimation.js"></script>
-<script type="text/javascript" src="../SVGPlayerOne.js"></script>
 <script type="text/javascript">
 $(window).load(function() {
     var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
@@ -88,28 +93,43 @@ L'idée d'une telle librairie est venue du fait que le logiciel MetaPost per
 });
 </script>
 <!--[...]-->
-<div id="anim1">
+<div id="XXXX">
   <img src="svg/ellipsographe-1.svg" alt="animation1"/>
-  <div class="message" id="anim1_message">Chargement</div>
-  <div id="anim1_boutons"></div>
+  <div class="message" id="XXXX_message">Chargement...</div>
+  <div id="XXXX_boutons"></div>
 </div>

-
dont le résultat est :

-

+
dont l'affichage est :

+

 animation1
-

-Ellipsographe
+

+Chargement...
 

-

+

 
 

 

+
Il est possible de différer le chargement de l'animation en créant une fonction 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...

+
<div id="anim2"  
+  style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
+ <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
+ <div class="message" id="anim2_message">Ellipsographe</div>
+ <div id="anim2_boutons"><button onclick="charge_anim2();">Charger l'animation</button></div>
+</div>

+
On peut en profiter pour adapter le style des éléments englobants.

 

 animation1
 

 Ellipsographe
 

 

-