doc/page.html

   1 <div>
   2 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
   3 <script type="text/javascript" src="../SVGAnimation.js"></script>
   4 <script type="text/javascript" src="../SVGPlayerOne.js"></script>
   5 <script type="text/javascript">
   6   function charge(i,p,a,b) {
   7     var anim = new Animation(i,p,a,b);
   8     anim.loopOnload();
   9     var player = new Controle(anim);
  10     player.connect();
  11   }
  12   function charge_anim2() {
  13     var a = new Animation('anim2','../ellipsographe/svg/ellipsographe-',1,91);
  14     a.loopOnload();
  15     var b = new Controle(a);
  16     b.connect();
  17   }
  18   $(window).load(function() {
  19     anim = new Animation('XXXX','../ellipsographe/svg/ellipsographe-',1,91);
  20     anim.loopOnload();
  21     player = new Controle(anim);
  22     player.connect();
  23     });
  24 </script>
  25 <p><strong>Participants :</strong> Chupin Maxime, Sarlat Jean-Michel.</p>
  26 <p><strong>Interface du dépôt Git :</strong> <a href="http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary" class="uri">http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary</a></p>
  27 <p>L'objectif est de développer, en particulier, du code Javascript afin de présenter des animations de fichiers SVG produits, en particulier, par MetaPost. Ce développement n'étant pas tout à fait prédéterminé, il sera constitué à partir de l'exploration de différents scénarios de présentation de ces animations et des modes de construction des fichiers SVG.</p>
  28 <div class="alert alert-warning">
  29 <p>
  30 Les différents exemples se chargent en cliquant sur le bouton dédié. Ceci <strong>n'est pas</strong> 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.
  31 </p>
  32 <p>
  33 Nous présentons, dans la section <a
  34 href="#chargement-différé">Chargement différé</a>, le code qui permet de charger l'animation sur demande.
  35 </p>
  36 </div>
  37 <h2 id="installation">Installation</h2>
  38 <p>Le fichier <code>SVGAnimation.js</code> (que l'on supposera dans un répertoire nommé <code>js</code>) est à charger dans la page <code>html</code> en mettant les lignes suivantes :</p>
  39 <pre><code>&lt;script type=&quot;text/javascript&quot; src=&quot;js/SVGAnimation.js&quot;&gt;&lt;/script&gt;</code></pre>
  40 <h2 id="principe">Principe</h2>
  41 <p>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 <code>SVGAnimation</code> permet de visionner cette animation dans une page HTML grâce à JavaScript.</p>
  42 <h3 id="la-famille-dimages">La famille d'images</h3>
  43 <p>Les différentes images composant l'animation doivent se nommer avec un <em>prefixe</em> suivi d'un nombre (indice), celui-ci pouvant être formater de différente façons :</p>
  44 <pre><code>monfichier-1.svg  monfichier-2.svg monfichier-3.svg ...</code></pre>
  45 <p>ou, autre exemple :</p>
  46 <pre><code>monfichier-001.svg  monfichier-002.svg monfichier-003.svg ...</code></pre>
  47 <p>Nous verrons comment gérer le formatage de l'indice des images dans les sections suivantes.</p>
  48 <div class="alert alert-info">
  49 <p>
  50 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.
  51 </p>
  52 </div>
  53 <h2 id="lutilisation">L'utilisation</h2>
  54 <h3 id="côté-html">Côté HTML</h3>
  55 <p>La librairie <code>SVGAnimation</code> définit le <em>prototype</em> javascript <code>Animation</code>. Pour l'utiliser il faut déclarer une balise HTML <code>div</code> avec un identifiant (<code>id</code>) unique. Choisissons pour l'exemple <code>XXXX</code>. À l'intérieur de ces balises, il faut :</p>
  56 <ul>
  57 <li>une balise <code>img</code> contenant un image <code>svg</code> qui servira de vignette à l'animation;</li>
  58 <li>une balise <code>div</code> avec l'identifiant <code>id=&quot;XXXX_message&quot;</code> où <code>XXXX</code> est l'identifiant de la balise englobante. Dans cette balise <em>message</em>, on y met, si on le souhaite, un message à afficher avant le chargement de l'animation;</li>
  59 <li>une balise <code>div</code> avec l'identifiant <code>id=&quot;XXXX_boutons&quot;</code>.</li>
  60 </ul>
  61 <p>En supposant que les images SVG se trouvent dans un répertoire nommé <code>svg</code>, voici un exemple d'une telle structure :</p>
  62 <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;anim1&quot;</span><span class="kw">&gt;</span>
  63   <span class="kw">&lt;img</span><span class="ot"> src=</span><span class="st">&quot;svg/ellipsographe-1.svg&quot;</span><span class="ot"> alt=</span><span class="st">&quot;animation1&quot;</span><span class="kw">/&gt;</span>
  64   <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;message&quot;</span><span class="ot"> id=</span><span class="st">&quot;anim1_message&quot;</span><span class="kw">&gt;</span>Chargement<span class="kw">&lt;/div&gt;</span>
  65   <span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;anim1_boutons&quot;</span><span class="kw">&gt;&lt;/div&gt;</span>
  66 <span class="kw">&lt;/div&gt;</span></code></pre></div>
  67 <h3 id="côté-javascript">Côté JavaScript</h3>
  68 <p>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.</p>
  69 <h4 id="construire-lobjet-animation">Construire l'objet <code>Animation</code></h4>
  70 <p>Le <em>constructeur</em> du prototype JavaScript s'utilise, pour l'exemple donné à la section précédente, de la façon suivante :</p>
  71 <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> anim <span class="op">=</span> <span class="kw">new</span> <span class="at">Animation</span>(<span class="st">&#39;XXXX&#39;</span><span class="op">,</span><span class="st">&#39;svg/ellipsographe-&#39;</span><span class="op">,</span><span class="dv">1</span><span class="op">,</span><span class="dv">91</span>)<span class="op">;</span>
  72 <span class="va">anim</span>.<span class="at">loopOnload</span>()<span class="op">;</span></code></pre></div>
  73 <p><code>XXXX</code> est l'identifiant de la balise <code>div</code> HTML <em>englobante</em>, <code>svg/ellipsographe-</code> est le préfixe dont on a parlé plus haut, <code>1</code> est l'indice de la première image à animer, et <code>91</code> l'indice de la dernière.</p>
  74 <p><code>anim.loopOnload()</code> permet le chargement de l'animation.</p>
  75 <p>Une fois celle-ci chargée, il faut en permettre la lecture qui se fait grâce à un nouvel objet nommé <code>Controle</code>. Ce contrôle s'utilise en fait comme ceci :</p>
  76 <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> anim <span class="op">=</span> <span class="kw">new</span> <span class="at">Animation</span>(<span class="st">&#39;XXXX&#39;</span><span class="op">,</span><span class="st">&#39;svg/ellipsographe-&#39;</span><span class="op">,</span><span class="dv">1</span><span class="op">,</span><span class="dv">91</span>)<span class="op">;</span>
  77 <span class="va">anim</span>.<span class="at">loopOnload</span>()<span class="op">;</span>
  78 <span class="kw">var</span> player <span class="op">=</span> <span class="kw">new</span> <span class="at">Controle</span>(anim)<span class="op">;</span>
  79 <span class="va">player</span>.<span class="at">connect</span>()<span class="op">;</span></code></pre></div>
  80 <p>Nous verrons par la suite comment personnaliser le contrôle de la lecture de l'animation.</p>
  81 <p>Tout ceci n'est toujours pas suffisant car il faut exécuter ce code JavaScript. Ceci peut être fait grâce à <code>JQuery</code> par exemple, en exécutant ces quatre lignes de code à l'ouverture de la fenêtre :</p>
  82 <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="at">$</span>(window).<span class="at">load</span>(<span class="kw">function</span>() <span class="op">{</span>
  83     <span class="kw">var</span> anim <span class="op">=</span> <span class="kw">new</span> <span class="at">Animation</span>(<span class="st">&#39;XXXX&#39;</span><span class="op">,</span><span class="st">&#39;svg/ellipsographe-&#39;</span><span class="op">,</span><span class="dv">1</span><span class="op">,</span><span class="dv">91</span>)<span class="op">;</span>
  84     <span class="va">anim</span>.<span class="at">loopOnload</span>()<span class="op">;</span>
  85     <span class="kw">var</span> player <span class="op">=</span> <span class="kw">new</span> <span class="at">Controle</span>(anim)<span class="op">;</span>
  86     <span class="va">player</span>.<span class="at">connect</span>()<span class="op">;</span>
  87 <span class="op">}</span>)<span class="op">;</span></code></pre></div>
  88 <p>Bien sûr, ceci nécessite le chargement, dans la page HTML, de la librairie <code>JQuery</code>.</p>
  89 <h4 id="le-résultat">Le résultat</h4>
  90 <p>Tout ceci donne le code suivant</p>
  91 <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span>
  92 <span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="ot"> src=</span><span class="st">&quot;../SVGAnimation.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span>
  93 <span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="kw">&gt;</span>
  94 <span class="at">$</span>(window).<span class="at">load</span>(<span class="kw">function</span>() <span class="op">{</span>
  95     <span class="kw">var</span> anim <span class="op">=</span> <span class="kw">new</span> <span class="at">Animation</span>(<span class="st">&#39;XXXX&#39;</span><span class="op">,</span><span class="st">&#39;svg/ellipsographe-&#39;</span><span class="op">,</span><span class="dv">1</span><span class="op">,</span><span class="dv">91</span>)<span class="op">;</span>
  96     <span class="va">anim</span>.<span class="at">loopOnload</span>()<span class="op">;</span>
  97     <span class="kw">var</span> player <span class="op">=</span> <span class="kw">new</span> <span class="at">Controle</span>(anim)<span class="op">;</span>
  98     <span class="va">player</span>.<span class="at">connect</span>()<span class="op">;</span>
  99 <span class="op">}</span>)<span class="op">;</span>
 100 <span class="op">&lt;</span><span class="ss">/script&gt;</span>
 101 <span class="ss">&lt;!--</span><span class="sc">[...]</span><span class="ss">--&gt;</span>
 102 <span class="ss">&lt;div id=&quot;XXXX&quot;&gt;</span>
 103 <span class="ss">  &lt;img src=&quot;svg/ellipsographe</span><span class="fl">-1.</span>svg<span class="st">&quot; alt=&quot;</span>animation1<span class="st">&quot;/&gt;</span>
 104   <span class="op">&lt;</span>div <span class="kw">class</span><span class="op">=</span><span class="st">&quot;message&quot;</span> id<span class="op">=</span><span class="st">&quot;XXXX_message&quot;</span><span class="op">&gt;</span><span class="va">Chargement</span>...<span class="op">&lt;</span><span class="ss">/div&gt;</span>
 105 <span class="ss">  &lt;div id=&quot;XXXX_boutons&quot;&gt;&lt;/div</span><span class="op">&gt;</span>
 106 <span class="op">&lt;</span><span class="ss">/div&gt;</span></code></pre></div>
 107 <p>dont l'affichage est :</p>
 108 <div id="XXXX">
 109 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>
 110 <div id="XXXX_message" class="message">
 111 Chargement...
 112 </div>
 113 <div id="XXXX_boutons">
 114
 115 </div>
 116 </div>
 117 <h4 id="chargement-différé">Chargement différé</h4>
 118 <p>On peut laisser le chargement d'une animation à la demande en créant une fonction Javascript.</p>
 119 <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">charge_anim2</span>() <span class="op">{</span>
 120   <span class="kw">var</span> a <span class="op">=</span> <span class="kw">new</span> <span class="at">Animation</span>(<span class="st">&#39;anim2&#39;</span><span class="op">,</span><span class="st">&#39;svg/ellipsographe-&#39;</span><span class="op">,</span><span class="dv">1</span><span class="op">,</span><span class="dv">91</span>)<span class="op">;</span>
 121   <span class="va">a</span>.<span class="at">loopOnload</span>()<span class="op">;</span>
 122   <span class="kw">var</span> b <span class="op">=</span> <span class="kw">new</span> <span class="at">Controle</span>(a)<span class="op">;</span>
 123   <span class="va">b</span>.<span class="at">connect</span>()<span class="op">;</span>
 124 <span class="op">}</span></code></pre></div>
 125 <p>Fonction qui sera liée à l'<em>événement</em> <code>onclick</code> d'un bouton proposant justement le chargement de l'animation...</p>
 126 <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;anim2&quot;</span><span class="ot"> style=</span><span class="st">&quot;...&quot;</span><span class="kw">&gt;</span>
 127  <span class="kw">&lt;img</span><span class="ot"> src=</span><span class="st">&quot;../ellipsographe/svg/ellipsographe-1.svg&quot;</span><span class="ot"> alt=</span><span class="st">&quot;animation1&quot;</span><span class="ot"> style=</span><span class="st">&quot;...&quot;</span><span class="kw">/&gt;</span>
 128  <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;message&quot;</span><span class="ot"> id=</span><span class="st">&quot;anim2_message&quot;</span><span class="kw">&gt;</span>Ellipsographe<span class="kw">&lt;/div&gt;</span>
 129  <span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;anim2_boutons&quot;</span><span class="kw">&gt;</span>
 130    <span class="kw">&lt;button</span><span class="ot"> onclick=</span><span class="st">&quot;charge_anim2();&quot;</span><span class="kw">&gt;</span>Charger l&#39;animation<span class="kw">&lt;/button&gt;</span>
 131  <span class="kw">&lt;/div&gt;</span>
 132 <span class="kw">&lt;/div&gt;</span></code></pre></div>
 133 <p>Dans le même temps, le <em>style</em> des éléments englobants a été adapté.</p>
 134 <div id="anim2" style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
 135 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
 136 <div id="anim2_message" class="message">
 137 Ellipsographe
 138 </div>
 139 <div id="anim2_boutons">
 140 <button onclick="charge_anim2()">
 141 Charger l'animation
 142 </button>
 143 </div>
 144 </div>
 145 <h3 id="les-paramètres">Les paramètres</h3>
 146 <p>L'objet <code>Animation</code> ne possède que deux propriétés configurables, autres que celles (4) qui lui sont passées en argument.</p>
 147 <p>• <strong>delai</strong> <em>(valeur par défaut : 50)</em> — C'est la durée, en millisecondes, entre deux images.</p>
 148 <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> a <span class="op">=</span> <span class="kw">new</span> <span class="at">Animation</span>(<span class="st">&#39;anim&#39;</span><span class="op">,</span><span class="st">&#39;svg/pre&#39;</span><span class="op">,</span><span class="dv">1</span><span class="op">,</span><span class="dv">100</span>)<span class="op">;</span>
 149 <span class="va">a</span>.<span class="at">delai</span> <span class="op">=</span> <span class="dv">200</span><span class="op">;</span>
 150 <span class="va">a</span>.<span class="at">loopOnload</span>()<span class="op">;</span></code></pre></div>
 151 <p>Ceci fixera le défilement à 5 images/s. Un <em>player</em> comme ceux que nous vous proposons ci-dessous peut modifier cette valeur.</p>
 152 <p>• <strong>pad</strong> <em>(valeur par défaut : 0)</em> — 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.</p>
 153 <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> a <span class="op">=</span> <span class="kw">new</span> <span class="at">Animation</span>(<span class="st">&#39;anim&#39;</span><span class="op">,</span><span class="st">&#39;svg/pre&#39;</span><span class="op">,</span><span class="dv">1</span><span class="op">,</span><span class="dv">100</span>)<span class="op">;</span>
 154 <span class="va">a</span>.<span class="at">pad</span> <span class="op">=</span> <span class="dv">3</span><span class="op">;</span>
 155 <span class="va">a</span>.<span class="at">loopOnload</span>()<span class="op">;</span></code></pre></div>
 156 <p>Les images chargées seront, successivement, <code>svg/pre001.svg</code>, <code>svg/pre002.svg</code>, ..., <code>svg/pre100.svg</code>.</p>
 157 <h2 id="les-players">Les <em>players</em></h2>
 158 <p>Le fichier <code>SVGAnimation.js</code> contient le constructeur <code>Controle</code> qui est la base des <em>players</em>. S'il est invoqué directement, il fournit un contrôle <em>simpliste</em> de l'animation, comme cela a été vu <a href="#côté-javascript">ci-dessus</a>.</p>
 159 <h3 id="svgplayerone.js"><code>SVGPlayerOne.js</code></h3>
 160 <p>Pour utiliser un <em>player</em> plus <em>sophistiqué</em>, il faut surcharger la méthode <code>Initialisation</code> de l'objet <code>Controle</code>. Pour plus de détails sur les <em>players</em>, nous vous invitons à consulter la page dédiée.</p>
 161 <p>L'idée que nous présentons ici est de construire un objet JavaScript qui mettra des boutons de contrôle (lecture, stop, etc.).</p>
 162 <p>Ceci peut se faire de la façon suivante :</p>
 163 <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">SVGPlayerOne</span>(a) <span class="op">{</span> <span class="co">// déclaration de l&#39;objet</span>
 164   <span class="va">Controle</span>.<span class="at">call</span>(<span class="kw">this</span><span class="op">,</span>a)<span class="op">;</span> <span class="co">// construit à partir de l&#39;objet Controle</span>
 165   <span class="va">SVGPlayerOne</span>.<span class="va">prototype</span>.<span class="at">connect</span> <span class="op">=</span> <span class="va">Controle</span>.<span class="va">prototype</span>.<span class="at">connect</span> <span class="co">// et de</span>
 166   <span class="co">// la méthode connect du Controle</span>
 167 <span class="op">}</span></code></pre></div>
 168 <p>Une fois déclaré un tel objet, il suffit de surcharger la méthode <code>Initialisation</code> de l'objet <code>Controle</code> fourni dans <code>SVGAnimation.js</code>. Dans l'exemple ci-dessous, on « vide » la <code>div</code> <code>XXXX_message</code>, et on ajoute des boutons à la <code>div</code> <code>XXXX_boutons</code> qui réagissent aux <code>onclick</code> pour lancer les fonctions JavaScript adéquates définies dans le fichier <code>SVGAnimation.js</code>.</p>
 169 <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// Surcharge de la méthode [Initialisation]</span>
 170 <span class="va">SVGPlayerOne</span>.<span class="va">prototype</span>.<span class="at">Initialisation</span> <span class="op">=</span> <span class="kw">function</span>() <span class="op">{</span>
 171   <span class="kw">var</span> a <span class="op">=</span> <span class="kw">this</span>.<span class="at">a</span><span class="op">;</span> <span class="co">// l&#39;animation courante</span>
 172   <span class="kw">var</span> self <span class="op">=</span> <span class="kw">this</span>.<span class="at">me</span><span class="op">;</span> <span class="co">// le player</span>
 173   <span class="va">a</span>.<span class="va">image</span>.<span class="va">style</span>.<span class="at">display</span> <span class="op">=</span> <span class="st">&#39;inline&#39;</span><span class="op">;</span>
 174   <span class="va">a</span>.<span class="va">message</span>.<span class="va">parentNode</span>.<span class="at">removeChild</span>(<span class="va">a</span>.<span class="at">message</span>)<span class="op">;</span> <span class="co">// on supprime la</span>
 175       <span class="co">//balise d&#39;id=XXXX_message</span>
 176   <span class="kw">var</span> play <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">&#39;button&#39;</span>)<span class="op">;</span> <span class="co">// on crée un bouton</span>
 177   <span class="va">play</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">&quot;SVGplay playBtn&quot;</span><span class="op">;</span> <span class="co">// ajout de classe pour le style</span>
 178   <span class="va">play</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">&quot;Play&quot;</span><span class="op">;</span> <span class="co">// on y met du texte</span>
 179   <span class="va">play</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">action</span> <span class="op">=</span> <span class="kw">true</span><span class="op">;</span> <span class="va">a</span>.<span class="at">rotate</span>(<span class="va">self</span>.<span class="at">a</span>)<span class="op">};</span> <span class="co">// on</span>
 180       <span class="co">// associe une fonction JS</span>
 181   <span class="co">// on recommence</span>
 182   <span class="kw">var</span> stop <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">&#39;button&#39;</span>)<span class="op">;</span>
 183   <span class="va">stop</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">&quot;SVGplay stopBtn&quot;</span><span class="op">;</span>
 184   <span class="va">stop</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">&quot;Stop&quot;</span><span class="op">;</span>
 185   <span class="va">stop</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">action</span> <span class="op">=</span> <span class="kw">false</span><span class="op">;};</span>
 186   <span class="kw">var</span> debut <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">&#39;button&#39;</span>)<span class="op">;</span>
 187   <span class="va">debut</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">&quot;SVGplay debutBtn&quot;</span><span class="op">;</span>
 188   <span class="va">debut</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">&quot;Début&quot;</span><span class="op">;</span>
 189   <span class="va">debut</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">action</span> <span class="op">=</span> <span class="kw">false</span><span class="op">;</span> <span class="va">a</span>.<span class="at">first</span>(<span class="va">self</span>.<span class="at">a</span>)<span class="op">};</span>
 190   <span class="kw">var</span> fin <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">&#39;button&#39;</span>)<span class="op">;</span>
 191   <span class="va">fin</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">&quot;SVGplay finBtn&quot;</span><span class="op">;</span>
 192   <span class="va">fin</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">&quot;Fin&quot;</span><span class="op">;</span>
 193   <span class="va">fin</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">action</span> <span class="op">=</span> <span class="kw">false</span><span class="op">;</span> <span class="va">a</span>.<span class="at">last</span>(<span class="va">self</span>.<span class="at">a</span>)<span class="op">};</span>
 194   <span class="kw">var</span> moins <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">&#39;button&#39;</span>)<span class="op">;</span>
 195   <span class="va">moins</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">&quot;SVGplay moinsBtn&quot;</span><span class="op">;</span>
 196   <span class="va">moins</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">&quot;-&quot;</span><span class="op">;</span>
 197   <span class="va">moins</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">delai</span> <span class="op">=</span> <span class="va">a</span>.<span class="at">delai</span> <span class="op">&gt;</span> <span class="dv">2000</span> <span class="op">?</span> <span class="dv">2000</span> : <span class="va">a</span>.<span class="at">delai</span> <span class="op">*</span> <span class="fl">1.414</span><span class="op">};</span>
 198   <span class="kw">var</span> plus <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">&#39;button&#39;</span>)<span class="op">;</span>
 199   <span class="va">plus</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">&quot;SVGplay plusBtn&quot;</span><span class="op">;</span>
 200   <span class="va">plus</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">&quot;+&quot;</span><span class="op">;</span>
 201   <span class="va">plus</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">delai</span> <span class="op">=</span> <span class="va">a</span>.<span class="at">delai</span> <span class="op">&lt;</span> <span class="dv">30</span> <span class="op">?</span> <span class="dv">30</span> : <span class="va">a</span>.<span class="at">delai</span> / <span class="fl">1.414</span><span class="op">};</span>
 202   <span class="co">// placement des boutons</span>
 203   <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(play)<span class="op">;</span>
 204   <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(stop)<span class="op">;</span>
 205   <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(debut)<span class="op">;</span>
 206   <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(fin)<span class="op">;</span>
 207   <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(moins)<span class="op">;</span>
 208   <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(plus)<span class="op">;</span>
 209 <span class="op">}</span></code></pre></div>
 210 <p>Un fois déclaré tout ceci (le mieux étant dans un fichier externe), on associe le <em>player</em> <code>SVGPlayerOne</code> à l'animation de la même façon que le <em>player</em> <code>Controle</code> :</p>
 211 <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> anim <span class="op">=</span> <span class="kw">new</span> <span class="at">Animation</span>(<span class="st">&#39;anim2&#39;</span><span class="op">,</span><span class="st">&#39;svg/ellipsographe-&#39;</span><span class="op">,</span><span class="dv">1</span><span class="op">,</span><span class="dv">91</span>)<span class="op">;</span>
 212 <span class="va">anim</span>.<span class="at">loopOnload</span>()<span class="op">;</span>
 213 <span class="kw">var</span> player <span class="op">=</span> <span class="kw">new</span> <span class="at">SVGPlayerOne</span>(anim)<span class="op">;</span>
 214 <span class="va">player</span>.<span class="at">connect</span>()<span class="op">;</span></code></pre></div>
 215 <script type="text/javascript">
 216   function charge_anim3() {
 217     var anim = new Animation('anim3','../ellipsographe/svg/ellipsographe-',1,91);
 218     anim.loopOnload();
 219     var player = new SVGPlayerOne(anim);
 220     player.connect();
 221   }
 222 </script>
 223 <div id="anim3" style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
 224 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
 225 <div id="anim3_message" class="message">
 226 Ellipsographe
 227 </div>
 228 <div id="anim3_boutons">
 229 <button onclick="charge_anim3()">
 230 Charger l'animation
 231 </button>
 232 </div>
 233 </div>
 234 <p>Le fichier <code>SVGPlayerOne.js</code> est fourni à la racine du projet SVGAnimation.</p>
 235 <h2 id="exemples-dutilisation">Exemples d'utilisation</h2>
 236 <div class="row">
 237 <div class="col-md-4">
 238 <p><a href="//melusine.eu.org/syracuse/G/svganimation-exemples/mvtretrograde/"
 239 alt="lien vers l'exemple"><img src="img/mvtretrograde.png"
 240 alt="Image de l'exemple" style="width: 100%;"/></a></p>
 241 </div>
 242 <div class="col-md-8">
 243 <p>Animation avec le <em>player</em> <code>SVGPlayerButtons</code> et une factorisation avec MetaPost du matériel qui se répète sur chaque image. Le fond est mis en <em>background</em> de la balise englobante, permettant ainsi d'alléger l'animation.</p>
 244 </div>
 245 </div>
 246 <div class="row">
 247 <div class="col-md-4">
 248 <p><a href="//melusine.eu.org/syracuse/G/svganimation-exemples/delaunay/"
 249 alt="lien vers l'exemple"><img src="img/delaunay.png"
 250 alt="Image de l'exemple" style="width: 100%;"/></a></p>
 251 </div>
 252 <div class="col-md-8">
 253 <p>Fabrication de l'animation à partir d'un fichier PDF transformé en fichiers SVG grâce au programme <code>pdf2svg</code>.</p>
 254 <p>Animation avec le <em>player</em> <code>SVGPlayerButtons</code>. L'animation est une animation de construction d'un maillage, le contrôle se fait donc image par image.</p>
 255 <p>Le player est donc paramétré pour n'afficher que les boutons de <em>début</em> et <em>fin</em> d'animation, ainsi que l'avance et le recule <em>image par image</em>.</p>
 256 <p>L'affichage des boutons est personnalisé grâce à du code CSS.</p>
 257 </div>
 258 </div>
 259 </div>
 260 <div id="tdm-doc" class="tdm-loc">
 261   <div id="tdm-titre">SVGAnimation (documentation)</div>
 262   <ul>
 263   <li><a href="#installation">Installation</a></li>
 264   <li><a href="#principe">Principe</a><ul>
 265   <li><a href="#la-famille-dimages">La famille d'images</a></li>
 266   </ul></li>
 267   <li><a href="#lutilisation">L'utilisation</a><ul>
 268   <li><a href="#côté-html">Côté HTML</a></li>
 269   <li><a href="#côté-javascript">Côté JavaScript</a></li>
 270   <li><a href="#les-paramètres">Les paramètres</a></li>
 271   </ul></li>
 272   <li><a href="#les-players">Les <em>players</em></a><ul>
 273   <li><a href="#svgplayerone.js"><code>SVGPlayerOne.js</code></a></li>
 274   </ul></li>
 275   <li><a href="#exemples-dutilisation">Exemples d'utilisation</a></li>
 276   </ul>
 277   <div id="tdm-nav"></div>
 278 </div>
 279 <div id="tdm-ctl"></div>