doc/page.md

   1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
   2 <script type="text/javascript" src="../SVGAnimation.js"></script>
   3 <script type="text/javascript" src="../SVGPlayerOne.js"></script>
   4 <script type="text/javascript">
   5   function charge(i,p,a,b) {
   6     var anim = new Animation(i,p,a,b);
   7     anim.loopOnload();
   8     var player = new Controle(anim);
   9     player.connect();
  10   }
  11   function charge_anim2() {
  12     var a = new Animation('anim2','../ellipsographe/svg/ellipsographe-',1,91);
  13     a.loopOnload();
  14     var b = new Controle(a);
  15     b.connect();
  16   }
  17   $(window).load(function() {
  18     anim = new Animation('XXXX','../ellipsographe/svg/ellipsographe-',1,91);
  19     anim.loopOnload();
  20     player = new Controle(anim);
  21     player.connect();
  22     });
  23 </script>
  24
  25
  26 **Participants :** Chupin Maxime, Sarlat Jean-Michel.
  27
  28 **Interface du dépôt Git :** <http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary>
  29
  30 L'objectif est de développer, en particulier, du code Javascript afin de
  31 présenter des animations de fichiers SVG produits, en particulier, par
  32 MetaPost. Ce développement n'étant pas tout à fait prédéterminé, il sera
  33 constitué à partir de l'exploration de différents scénarios de
  34 présentation de ces animations et des modes de construction des fichiers
  35 SVG.
  36
  37 <div class="alert alert-warning">
  38 <p>Les différents exemples se charge en cliquant sur le bouton
  39 dédié. Ceci **n'est pas** le comportement par défaut, c'est du code
  40 JavaScript qui permettra de choisir quand l'animation se charge. Il
  41 s'agit
  42 d'éviter de charger toutes les animations présentes sur cette page,
  43 cela serait bien trop lourd.</p>
  44 <p>Nous présentons, dans la section XX, le code qui permet de charger
  45 l'animation sur demande.</p>
  46 </div>
  47
  48 ## Installation
  49
  50 Le fichier `SVGAnimation.js` (que l'on supposera dans un répertoire
  51 nommé `js`) est à charger dans la page `html` en mettant les lignes
  52 suivantes :
  53
  54     <script type="text/javascript" src="js/SVGAnimation.js"></script>
  55
  56
  57 ## Principe
  58
  59 Le principe est simple : on dispose d'un ensemble d'images au format
  60 SVG qui constituent, par une suite chronologique, une animation à
  61 visionner. La libraire `SVGAnimation` permet de visionner cette
  62 animation dans une page HTML grâce à JavaScript.
  63
  64 ### La famille d'images
  65
  66 Les différentes images composant l'animation doivent se nommer avec un
  67 *prefixe* suivi d'un nombre (indice), celui-ci pouvant être
  68 formater de différente façons :
  69
  70     monfichier-1.svg  monfichier-2.svg monfichier-3.svg ...
  71
  72 ou, autre exemple :
  73
  74     monfichier-001.svg  monfichier-002.svg monfichier-003.svg ...
  75
  76 Nous verrons comment gérer le formatage de l'indice des images dans
  77 les sections suivantes.
  78
  79 <div class="alert alert-info">
  80 <p>L'idée d'une telle librairie est venue du fait que le logiciel
  81 MetaPost permet de produire des images SVG, et nous l'utilisons
  82 abondamment pour la production d'animations.</p>
  83 </div>
  84
  85
  86 ## L'utilisation
  87
  88 ### Côté HTML
  89
  90 La librairie `SVGAnimation` définit le *prototype* javascript
  91 `Animation`. Pour l'utiliser il faut déclarer une balise HTML `div`
  92 avec un identifiant (`id`) unique. Choisissons pour l'exemple `XXXX`.
  93 À l'intérieur de ces balises, il
  94 faut :
  95
  96 * une balise `img` contenant un image `svg` qui servira de vignette à
  97   l'animation;
  98 * une balise `div` avec l'identifiant `id="XXXX_message"` où `XXXX` est
  99   l'identifiant de la balise englobante. Dans cette balise *message*,
 100   on y met, si on le souhaite, un message à afficher avant le
 101   chargement de l'animation;
 102 * une balise `div` avec l'identifiant `id="XXXX_boutons"`.
 103
 104
 105 En supposant que les images SVG se trouvent dans un répertoire nommé
 106 `svg`, voici un exemple d'une telle structure :
 107
 108 ~~~~~~~ { .html }
 109 <div id="anim1">
 110   <img src="svg/ellipsographe-1.svg" alt="animation1"/>
 111   <div class="message" id="anim1_message">Chargement</div>
 112   <div id="anim1_boutons"></div>
 113 </div>
 114 ~~~~~~~
 115
 116 ### Côté JavaScript
 117
 118 Une fois qu'on a la structure HTML présentée ci-dessus, il est
 119 nécessaire d'ajouter un peu de code JavaScript pour permettre à l'animation
 120 de se jouer.
 121
 122 #### Construire l'objet `Animation`
 123
 124 Le *constructeur* du prototype JavaScript s'utilise, pour l'exemple
 125 donné à la section précédente, de la façon
 126 suivante :
 127
 128 ~~~~~~~ { .javascript }
 129 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
 130 anim.loopOnload();
 131 ~~~~~~~
 132
 133 `XXXX` est l'identifiant de la balise `div` HTML *englobante*,
 134 `svg/ellipsographe-` est le préfixe dont on a parlé plus haut, `1` est
 135 l'indice de la première image à animer, et `91` l'indice de la
 136 dernière.
 137
 138 `anim.loopOnload()` permet le chargement de l'animation.
 139
 140 Une fois celle-ci chargée, il faut en permettre la lecture qui se fait
 141 grâce à un nouvel objet nommé `Controle`. Ce contrôle s'utilise en
 142 fait comme ceci :
 143
 144 ~~~~~~~ { .javascript }
 145 var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
 146 anim.loopOnload();
 147 var player = new Controle(anim);
 148 player.connect();
 149 ~~~~~~~
 150
 151 Nous verrons par la suite comment personnaliser le contrôle de la
 152 lecture de l'animation.
 153
 154 Tout ceci n'est toujours pas suffisant car il faut exécuter ce code
 155 JavaScript. Ceci peut être fait grâce à `JQuery` par exemple, en
 156 exécutant ces quatre lignes de code à l'ouverture de la fenêtre :
 157
 158 ~~~~~~~ { .javascript }
 159 $(window).load(function() {
 160     var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
 161     anim.loopOnload();
 162     var player = new Controle(anim);
 163     player.connect();
 164 });
 165 ~~~~~~~
 166
 167 Bien sûr, ceci nécessite le chargement, dans la page HTML, de la
 168 librairie `JQuery`.
 169
 170
 171
 172
 173
 174 #### Le résultat
 175
 176 Tout ceci donne le code suivant
 177
 178 ~~~~~~~ { .html }
 179 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 180 <script type="text/javascript" src="../SVGAnimation.js"></script>
 181 <script type="text/javascript">
 182 $(window).load(function() {
 183     var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
 184     anim.loopOnload();
 185     var player = new Controle(anim);
 186     player.connect();
 187 });
 188 </script>
 189 <!--[...]-->
 190 <div id="XXXX">
 191   <img src="svg/ellipsographe-1.svg" alt="animation1"/>
 192   <div class="message" id="XXXX_message">Chargement...</div>
 193   <div id="XXXX_boutons"></div>
 194 </div>
 195 ~~~~~~~
 196
 197 dont l'affichage est :
 198
 199 <div id="XXXX">
 200   <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>
 201   <div class="message" id="XXXX_message">Chargement...</div>
 202   <div id="XXXX_boutons"></div>
 203 </div>
 204
 205
 206 Il est possible de différer le chargement de l'animation en créant une fonction Javascript.
 207
 208 ~~~~~~~ { .javascript }
 209 function charge_anim2() {
 210   var a = new Animation('anim2','svg/ellipsographe-',1,91);
 211   a.loopOnload();
 212   var b = new Controle(a);
 213   b.connect();
 214 }
 215 ~~~~~~~
 216
 217 Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant, à
 218 l'internaute, le chargement de l'animation...
 219
 220 ~~~~~~~ { .html }
 221 <div id="anim2"
 222   style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
 223  <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
 224  <div class="message" id="anim2_message">Ellipsographe</div>
 225  <div id="anim2_boutons"><button onclick="charge_anim2();">Charger l'animation</button></div>
 226 </div>
 227 ~~~~~~~
 228
 229 On peut en profiter pour adapter le *style* des éléments englobants.
 230
 231 <div id="anim2"  style="margin:10px auto;padding:10px;width:350px;border:2px solid #AAA;border-radius:4px">
 232   <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
 233   <div class="message" id="anim2_message">Ellipsographe</div>
 234   <div id="anim2_boutons"><button onclick="charge_anim2()">Charger l'animation</button></div>
 235 </div>
 236
 237
 238
 239 ### Les paramètres
 240
 241 ## Les *players*
 242
 243 ### `SVGPlayerOne.js`
 244
 245 ### `SVGPlayerButtons.js`
 246
 247 ## Exemples d'utilisation