doc/page.md

   1 <script type="text/javascript" src="../SVGAnimation.js"></script>
   2 <script type="text/javascript" src="../SVGPlayerOne.js"></script>
   3 <script type="text/javascript">
   4   function charge(i,p,a,b) {
   5     var anim = new Animation(i,p,a,b);
   6     anim.loopOnload();
   7     var player = new Controle(anim);
   8     player.connect();
   9   }
  10 </script>
  11
  12
  13 **Participants :** Chupin Maxime, Sarlat Jean-Michel.
  14
  15 **Interface du dépôt Git :** <http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary>
  16
  17 L'objectif est de développer, en particulier, du code Javascript afin de
  18 présenter des animations de fichiers SVG produits, en particulier, par
  19 MetaPost. Ce développement n'étant pas tout à fait prédéterminé, il sera
  20 constitué à partir de l'exploration de différents scénarios de
  21 présentation de ces animations et des modes de construction des fichiers
  22 SVG.
  23
  24 <div class="alert alert-warning">
  25 <p>Les différents exemples se charge en cliquant sur le bouton
  26 dédié. Ceci **n'est pas** le comportement par défaut. Il s'agit
  27 d'éviter de charger toutes les animations présentes sur cette page,
  28 cela serait bien trop lourd.</p>
  29 <p>Nous présentons, dans la section XX, le code qui permet de charger
  30 l'animation sur demande.</p>
  31 </div>
  32
  33 ## Installation
  34
  35 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 :
  36
  37     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  38     <script type="text/javascript" src="js/SVGAnimation.js"></script>
  39
  40 La librairie `SVGAnimation.js` dépend de `JQuery`, il faut donc charger cette bibliothèque JavaScript avant.
  41
  42 ## Principe
  43
  44 Le principe est simple : on dispose d'un ensemble d'images au format
  45 SVG qui constituent, par une suite chronologique, une animation à
  46 visionner. La libraire `SVGAnimation` permet de visionner cette
  47 animation dans une page HTML.
  48
  49 ### La famille d'images
  50
  51 Les différentes images composant l'animation doivent se nommer avec un
  52 *prefixe* suivit d'un tiret puis d'un nombre (celui-ci pouvant être
  53 formater de différente façons).
  54
  55     monfichier-1.svg  monfichier-2.svg monfichier-3.svg ...
  56
  57 ou
  58
  59     monfichier-001.svg  monfichier-002.svg monfichier-003.svg ...
  60
  61 Nous verrons comment gérer le formatage de l'indice des images dans
  62 les sections suivantes.
  63
  64 <div class="alert alert-info">
  65 <p>L'idée d'une telle librairie est venue du fait que le logiciel
  66 MetaPost permet de produire des images SVG, et nous l'utilisons
  67 abondamment pour la production d'animations.</p>
  68 </div>
  69
  70
  71 ## L'objet `Animation`
  72
  73 La librairie `SVGAnimation` définit le *prototype* javascript
  74 `Animation`. Pour l'utiliser il faut déclarer
  75
  76 <div id="anim1" style="margin:10px auto;padding:10px;width:350px;border:2px solid #AAA;border-radius:4px">
  77   <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
  78   <div class="message" id="anim1_message">Ellipsographe</div>
  79   <div id="anim1_boutons"><button onclick="charge('anim1','../ellipsographe/svg/ellipsographe-',1,91);">Charger l'animation</button></div>
  80 </div>
  81
  82
  83 ### L'utilisation
  84
  85 ### Les paramètres
  86
  87 ## Les *players*
  88
  89 ### `SVGPlayerOne.js`
  90
  91 ### `SVGPlayerButtons.js`