Doc: Description du fonctionnement *minimal*, code HTML et JavaScript. Suppression...

diff --git a/doc/page.html b/doc/page.html
index eb62d50..c150281 100644 (file)
--- a/doc/page.html
+++ b/doc/page.html
@@ -1,4 +1,5 @@
 <div>
 <div>

+<!--<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">
 <script type="text/javascript" src="../SVGAnimation.js"></script>
 <script type="text/javascript" src="../SVGPlayerOne.js"></script>
 <script type="text/javascript">


@@ -8,13 +9,19 @@
     var player = new Controle(anim);
     player.connect();
   }
     var player = new Controle(anim);
     player.connect();
   }

+  $(window).load(function() {
+    a1 = new Animation('anim1','../ellipsographe/svg/ellipsographe-',1,91);
+    a1.loopOnload();
+    b1 = new Controle(a1);
+    b1.connect();
+    });

 </script>
 <p><strong>Participants :</strong> Chupin Maxime, Sarlat Jean-Michel.</p>
 <p><strong>Interface du d&#233;p&#244;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>
 <p>L'objectif est de d&#233;velopper, en particulier, du code Javascript afin de pr&#233;senter des animations de fichiers SVG produits, en particulier, par MetaPost. Ce d&#233;veloppement n'&#233;tant pas tout &#224; fait pr&#233;d&#233;termin&#233;, il sera constitu&#233; &#224; partir de l'exploration de diff&#233;rents sc&#233;narios de pr&#233;sentation de ces animations et des modes de construction des fichiers SVG.</p>
 <div class="alert alert-warning">
 <p>
 </script>
 <p><strong>Participants :</strong> Chupin Maxime, Sarlat Jean-Michel.</p>
 <p><strong>Interface du d&#233;p&#244;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>
 <p>L'objectif est de d&#233;velopper, en particulier, du code Javascript afin de pr&#233;senter des animations de fichiers SVG produits, en particulier, par MetaPost. Ce d&#233;veloppement n'&#233;tant pas tout &#224; fait pr&#233;d&#233;termin&#233;, il sera constitu&#233; &#224; partir de l'exploration de diff&#233;rents sc&#233;narios de pr&#233;sentation de ces animations et des modes de construction des fichiers SVG.</p>
 <div class="alert alert-warning">
 <p>

-Les diff&#233;rents exemples se charge en cliquant sur le bouton d&#233;di&#233;. Ceci <strong>n'est pas</strong> le comportement par d&#233;faut. Il s'agit d'&#233;viter de charger toutes les animations pr&#233;sentes sur cette page, cela serait bien trop lourd.
+Les diff&#233;rents exemples se charge en cliquant sur le bouton d&#233;di&#233;. Ceci <strong>n'est pas</strong> le comportement par d&#233;faut, c'est du code JavaScript qui permettra de choisir quand l'animation se charge. Il s'agit d'&#233;viter de charger toutes les animations pr&#233;sentes sur cette page, cela serait bien trop lourd.

 </p>
 <p>
 Nous pr&#233;sentons, dans la section XX, le code qui permet de charger l'animation sur demande.
 </p>
 <p>
 Nous pr&#233;sentons, dans la section XX, le code qui permet de charger l'animation sur demande.


@@ -22,15 +29,13 @@ Nous pr&#233;sentons, dans la section XX, le code qui permet de charger l'animat
 </div>
 <h2 id="installation">Installation</h2>
 <p>Le fichier <code>SVGAnimation.js</code> (que l'on supposera dans un r&#233;pertoire nomm&#233; <code>js</code>) est &#224; charger dans la page <code>html</code> en mettant les lignes suivantes :</p>
 </div>
 <h2 id="installation">Installation</h2>
 <p>Le fichier <code>SVGAnimation.js</code> (que l'on supposera dans un r&#233;pertoire nomm&#233; <code>js</code>) est &#224; charger dans la page <code>html</code> en mettant les lignes suivantes :</p>

-<pre><code>&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js&quot;&gt;&lt;/script&gt;
-&lt;script type=&quot;text/javascript&quot; src=&quot;js/SVGAnimation.js&quot;&gt;&lt;/script&gt;</code></pre>
-<p>La librairie <code>SVGAnimation.js</code> d&#233;pend de <code>JQuery</code>, il faut donc charger cette biblioth&#232;que JavaScript avant.</p>
+<pre><code>&lt;script type=&quot;text/javascript&quot; src=&quot;js/SVGAnimation.js&quot;&gt;&lt;/script&gt;</code></pre>

 <h2 id="principe">Principe</h2>
 <h2 id="principe">Principe</h2>

-<p>Le principe est simple : on dispose d'un ensemble d'images au format SVG qui constituent, par une suite chronologique, une animation &#224; visionner. La libraire <code>SVGAnimation</code> permet de visionner cette animation dans une page HTML.</p>
+<p>Le principe est simple : on dispose d'un ensemble d'images au format SVG qui constituent, par une suite chronologique, une animation &#224; visionner. La libraire <code>SVGAnimation</code> permet de visionner cette animation dans une page HTML gr&#226;ce &#224; JavaScript.</p>

 <h3 id="la-famille-dimages">La famille d'images</h3>
 <h3 id="la-famille-dimages">La famille d'images</h3>

-<p>Les diff&#233;rentes images composant l'animation doivent se nommer avec un <em>prefixe</em> suivit d'un tiret puis d'un nombre (celui-ci pouvant &#234;tre formater de diff&#233;rente fa&#231;ons).</p>
+<p>Les diff&#233;rentes images composant l'animation doivent se nommer avec un <em>prefixe</em> puis d'un nombre (indice), celui-ci pouvant &#234;tre formater de diff&#233;rente fa&#231;ons :</p>

 <pre><code>monfichier-1.svg  monfichier-2.svg monfichier-3.svg ...</code></pre>
 <pre><code>monfichier-1.svg  monfichier-2.svg monfichier-3.svg ...</code></pre>

-<p>ou</p>
+<p>ou, autre exemple :</p>

 <pre><code>monfichier-001.svg  monfichier-002.svg monfichier-003.svg ...</code></pre>
 <p>Nous verrons comment g&#233;rer le formatage de l'indice des images dans les sections suivantes.</p>
 <div class="alert alert-info">
 <pre><code>monfichier-001.svg  monfichier-002.svg monfichier-003.svg ...</code></pre>
 <p>Nous verrons comment g&#233;rer le formatage de l'indice des images dans les sections suivantes.</p>
 <div class="alert alert-info">


@@ -38,24 +43,82 @@ Nous pr&#233;sentons, dans la section XX, le code qui permet de charger l'animat
 L'id&#233;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.
 </p>
 </div>
 L'id&#233;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.
 </p>
 </div>

-<h2 id="lobjet-animation">L'objet <code>Animation</code></h2>
-<p>La librairie <code>SVGAnimation</code> d&#233;finit le <em>prototype</em> javascript <code>Animation</code>. Pour l'utiliser il faut d&#233;clarer</p>
-<div id="anim1" style="margin:10px auto;padding:10px;width:350px;border:2px solid #AAA;border-radius:4px">
-<img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
+<h2 id="lutilisation">L'utilisation</h2>
+<h3 id="c&#244;t&#233;-html">C&#244;t&#233; HTML</h3>
+<p>La librairie <code>SVGAnimation</code> d&#233;finit le <em>prototype</em> javascript <code>Animation</code>. Pour l'utiliser il faut d&#233;clarer une balise HTML <code>div</code> avec un identifiant (<code>id</code>) unique. Choisissons pour l'exemple <code>XXXX</code>. &#192; l'int&#233;rieur de ces balises, il faut : * une balise <code>img</code> contenant un image <code>svg</code> qui servira de vignette &#224; l'animation; * une balise <code>div</code> avec l'identifiant <code>id=&quot;XXXX_message&quot;</code> o&#249; <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 &#224; afficher avant le chargement de l'animation. * une balise <code>div</code> avec l'identifiant <code>id=&quot;XXXX_boutons&quot;</code></p>
+<p>En supposant que les images SVG se trouvent dans un r&#233;pertoire nomm&#233; <code>svg</code>, voici un exemple d'une telle structure :</p>
+<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>
+  <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>
+  <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>
+  <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>
+<span class="kw">&lt;/div&gt;</span></code></pre></div>
+<h3 id="c&#244;t&#233;-javascript">C&#244;t&#233; JavaScript</h3>
+<p>Une fois qu'on a la structure HTML pr&#233;sent&#233;e ci-dessus, il est n&#233;cessaire d'ajouter un peu de code JavaScript permettre &#224; l'animation de se jouer.</p>
+<h4 id="construire-lobjet-animation">Construire l'objet <code>Animation</code></h4>
+<p>Le <em>constructeur</em> du prototype JavaScript s'utilise, pour l'exemple donn&#233; &#224; la section pr&#233;c&#233;dente, de la fa&#231;on suivante :</p>
+<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>
+<span class="va">anim</span>.<span class="at">loopOnload</span>()<span class="op">;</span></code></pre></div>
+<p><code>XXXX</code> est l'identifiant de la balise <code>div</code> HTML <em>englobante</em>, <code>svg/ellipsographe-</code> est le pr&#233;fixe dont on a parl&#233; plus haut, <code>1</code> est l'indice de la premi&#232;re image &#224; animer, et <code>91</code> l'indice de la derni&#232;re.</p>
+<p><code>anim.loopOnload()</code> permet le chargement de l'animation.</p>
+<p>Une fois celle-ci charg&#233;, il faut en permettre la lecture qui se fait gr&#226;ce &#224; un nouvel objet nomm&#233; <code>Controle</code>. Ce contr&#244;le s'utilise en fait comme ceci :</p>
+<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>
+<span class="va">anim</span>.<span class="at">loopOnload</span>()<span class="op">;</span>
+<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>
+<span class="va">player</span>.<span class="at">connect</span>()<span class="op">;</span></code></pre></div>
+<p>Nous verrons par la suite comment personnaliser le contr&#244;le de la lecture de l'animation.</p>
+<p>Tout ceci n'est toujours pas suffisant car il faut ex&#233;cuter ce code JavaScript. Ceci peut &#234;tre fait gr&#226;ce &#224; <code>JQuery</code> par exemple, en ex&#233;cutant ces quatre lignes de code &#224; l'ouverture de la fen&#234;tre :</p>
+<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>
+    <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>
+    <span class="va">anim</span>.<span class="at">loopOnload</span>()<span class="op">;</span>
+    <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>
+    <span class="va">player</span>.<span class="at">connect</span>()<span class="op">;</span>
+<span class="op">}</span>)<span class="op">;</span></code></pre></div>
+<p>Bien s&#251;r, ceci n&#233;cessite le chargement, dans la page HTML, de la librairie <code>JQuery</code>.</p>
+<h4 id="le-r&#233;sultat">Le r&#233;sultat</h4>
+<p>Tout ceci donne le code suivant</p>
+<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>
+<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>
+<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;../SVGPlayerOne.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span>
+<span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="kw">&gt;</span>
+<span class="at">$</span>(window).<span class="at">load</span>(<span class="kw">function</span>() <span class="op">{</span>
+    <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>
+    <span class="va">anim</span>.<span class="at">loopOnload</span>()<span class="op">;</span>
+    <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>
+    <span class="va">player</span>.<span class="at">connect</span>()<span class="op">;</span>
+<span class="op">}</span>)<span class="op">;</span>
+<span class="op">&lt;</span><span class="ss">/script&gt;</span>
+<span class="ss">&lt;!--</span><span class="sc">[...]</span><span class="ss">--&gt;</span>
+<span class="ss">&lt;div id=&quot;anim1&quot;&gt;</span>
+<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>
+  <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;anim1_message&quot;</span><span class="op">&gt;</span>Chargement<span class="op">&lt;</span><span class="ss">/div&gt;</span>
+<span class="ss">  &lt;div id=&quot;anim1_boutons&quot;&gt;&lt;/div</span><span class="op">&gt;</span>
+<span class="op">&lt;</span><span class="ss">/div&gt;</span></code></pre></div>
+<p>dont le r&#233;sultat est :</p>
+<div id="anim1">
+<img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>

 <div id="anim1_message" class="message">
 Ellipsographe
 </div>
 <div id="anim1_boutons">
 <div id="anim1_message" class="message">
 Ellipsographe
 </div>
 <div id="anim1_boutons">

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

 Charger l'animation
 </button>
 </div>
 </div>
 Charger l'animation
 </button>
 </div>
 </div>

-<h3 id="lutilisation">L'utilisation</h3>

 <h3 id="les-param&#232;tres">Les param&#232;tres</h3>
 <h2 id="les-players">Les <em>players</em></h2>
 <h3 id="svgplayerone.js"><code>SVGPlayerOne.js</code></h3>
 <h3 id="svgplayerbuttons.js"><code>SVGPlayerButtons.js</code></h3>
 <h3 id="les-param&#232;tres">Les param&#232;tres</h3>
 <h2 id="les-players">Les <em>players</em></h2>
 <h3 id="svgplayerone.js"><code>SVGPlayerOne.js</code></h3>
 <h3 id="svgplayerbuttons.js"><code>SVGPlayerButtons.js</code></h3>

+<h2 id="exemples-dutilisation">Exemples d'utilisation</h2>

 </div>
 <div id="TDM" class="tdm">
 <div style="text-align:center">
 </div>
 <div id="TDM" class="tdm">
 <div style="text-align:center">


@@ -66,14 +129,16 @@ Charger l'animation
  <li><a href="#principe">Principe</a><ul>
  <li><a href="#la-famille-dimages">La famille d'images</a></li>
  </ul></li>
  <li><a href="#principe">Principe</a><ul>
  <li><a href="#la-famille-dimages">La famille d'images</a></li>
  </ul></li>

- <li><a href="#lobjet-animation">L'objet <code>Animation</code></a><ul>
- <li><a href="#lutilisation">L'utilisation</a></li>
+ <li><a href="#lutilisation">L'utilisation</a><ul>
+ <li><a href="#c&#244;t&#233;-html">C&#244;t&#233; HTML</a></li>
+ <li><a href="#c&#244;t&#233;-javascript">C&#244;t&#233; JavaScript</a></li>

  <li><a href="#les-param&#232;tres">Les param&#232;tres</a></li>
  </ul></li>
  <li><a href="#les-players">Les <em>players</em></a><ul>
  <li><a href="#svgplayerone.js"><code>SVGPlayerOne.js</code></a></li>
  <li><a href="#svgplayerbuttons.js"><code>SVGPlayerButtons.js</code></a></li>
  </ul></li>
  <li><a href="#les-param&#232;tres">Les param&#232;tres</a></li>
  </ul></li>
  <li><a href="#les-players">Les <em>players</em></a><ul>
  <li><a href="#svgplayerone.js"><code>SVGPlayerOne.js</code></a></li>
  <li><a href="#svgplayerbuttons.js"><code>SVGPlayerButtons.js</code></a></li>
  </ul></li>

+ <li><a href="#exemples-dutilisation">Exemples d'utilisation</a></li>

  </ul>
 </div>
 <div style="clear:both"></div>
\ No newline at end of file
  </ul>
 </div>
 <div style="clear:both"></div>
\ No newline at end of file

diff --git a/doc/page.md b/doc/page.md
index a77c386..b05b46c 100644 (file)
--- a/doc/page.md
+++ b/doc/page.md
@@ -1,3 +1,4 @@
+<!--<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">
 <script type="text/javascript" src="../SVGAnimation.js"></script>
 <script type="text/javascript" src="../SVGPlayerOne.js"></script>
 <script type="text/javascript">


@@ -7,6 +8,12 @@
     var player = new Controle(anim);
     player.connect();
   }
     var player = new Controle(anim);
     player.connect();
   }

+  $(window).load(function() {
+    a1 = new Animation('anim1','../ellipsographe/svg/ellipsographe-',1,91);
+    a1.loopOnload();
+    b1 = new Controle(a1);
+    b1.connect();
+    });

 </script>
 
 
 </script>
 
 


@@ -23,7 +30,9 @@ SVG.
 
 <div class="alert alert-warning">
 <p>Les différents exemples se charge en cliquant sur le bouton
 
 <div class="alert alert-warning">
 <p>Les différents exemples se charge en cliquant sur le bouton

-dédié. Ceci **n'est pas** le comportement par défaut. Il s'agit
+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.</p>
 <p>Nous présentons, dans la section XX, le code qui permet de charger
 d'éviter de charger toutes les animations présentes sur cette page,
 cela serait bien trop lourd.</p>
 <p>Nous présentons, dans la section XX, le code qui permet de charger


@@ -32,29 +41,29 @@ l'animation sur demande.</p>
 
 ## Installation
 
 
 ## Installation
 

-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 :
+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 :

 
 

-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

     <script type="text/javascript" src="js/SVGAnimation.js"></script>
 
     <script type="text/javascript" src="js/SVGAnimation.js"></script>
 

-La librairie `SVGAnimation.js` dépend de `JQuery`, il faut donc charger cette bibliothèque JavaScript avant.

 
 ## 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
 
 ## 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.
+animation dans une page HTML grâce à JavaScript.

 
 ### La famille d'images
 
 Les différentes images composant l'animation doivent se nommer avec un
 
 ### La famille d'images
 
 Les différentes images composant l'animation doivent se nommer avec un

-*prefixe* suivit d'un tiret puis d'un nombre (celui-ci pouvant être
-formater de différente façons).
+*prefixe* puis d'un nombre (indice), celui-ci pouvant être
+formater de différente façons :

 
     monfichier-1.svg  monfichier-2.svg monfichier-3.svg ...
 
 
     monfichier-1.svg  monfichier-2.svg monfichier-3.svg ...
 

-ou
+ou, autre exemple :

 
     monfichier-001.svg  monfichier-002.svg monfichier-003.svg ...
 
 
     monfichier-001.svg  monfichier-002.svg monfichier-003.svg ...
 


@@ -68,19 +77,133 @@ abondamment pour la production d'animations.</p>
 </div>
 
 
 </div>
 
 

-## L'objet `Animation`
+## L'utilisation
+
+### Côté HTML

 
 La librairie `SVGAnimation` définit le *prototype* javascript
 
 La librairie `SVGAnimation` définit le *prototype* javascript

-`Animation`. Pour l'utiliser il faut déclarer
+`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 :
+
+~~~~~~~ { .html }
+<div id="anim1">
+  <img src="svg/ellipsographe-1.svg" alt="animation1"/>
+  <div class="message" id="anim1_message">Chargement</div>
+  <div id="anim1_boutons"></div>
+</div>
+~~~~~~~

 
 

-<div id="anim1" style="margin:10px auto;padding:10px;width:350px;border:2px solid #AAA;border-radius:4px">
-  <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
+### 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.
+
+#### 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 :
+
+~~~~~~~ { .javascript }
+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 :
+
+~~~~~~~ { .javascript }
+var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
+anim.loopOnload();
+var player = new Controle(anim);
+player.connect();
+~~~~~~~
+
+Nous verrons par la suite comment personnaliser le contrôle de la
+lecture de l'animation.
+
+Tout ceci n'est toujours pas suffisant car il faut exécuter ce code
+JavaScript. Ceci peut être fait grâce à `JQuery` par exemple, en
+exécutant ces quatre lignes de code à l'ouverture de la fenêtre :
+
+~~~~~~~ { .javascript }
+$(window).load(function() {
+    var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
+    anim.loopOnload();
+    var player = new Controle(anim);
+    player.connect();
+});
+~~~~~~~
+
+Bien sûr, ceci nécessite le chargement, dans la page HTML, de la
+librairie `JQuery`.
+
+
+
+
+
+#### Le résultat
+
+Tout ceci donne le code suivant
+
+~~~~~~~ { .html }
+<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);
+    anim.loopOnload();
+    var player = new Controle(anim);
+    player.connect();
+});
+</script>
+<!--[...]-->
+<div id="anim1">
+  <img src="svg/ellipsographe-1.svg" alt="animation1"/>
+  <div class="message" id="anim1_message">Chargement</div>
+  <div id="anim1_boutons"></div>
+</div>
+~~~~~~~
+
+dont le résultat est :
+
+<div id="anim1">
+  <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>

   <div class="message" id="anim1_message">Ellipsographe</div>
   <div class="message" id="anim1_message">Ellipsographe</div>

-  <div id="anim1_boutons"><button onclick="charge('anim1','../ellipsographe/svg/ellipsographe-',1,91);">Charger l'animation</button></div>
+  <div id="anim1_boutons"></div>

 </div>
 
 
 </div>
 
 

-### L'utilisation
+
+<div id="anim2"  style="margin:10px auto;padding:10px;width:350px;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','../ellipsographe/svg/ellipsographe-',1,91);">Charger l'animation</button></div>
+</div>
+

 
 ### Les paramètres
 
 
 ### Les paramètres
 


@@ -89,3 +212,5 @@ La librairie `SVGAnimation` définit le *prototype* javascript
 ### `SVGPlayerOne.js`
 
 ### `SVGPlayerButtons.js`
 ### `SVGPlayerOne.js`
 
 ### `SVGPlayerButtons.js`

+
+## Exemples d'utilisation