Doc: les paramètres et quelques petites modifications

diff --git a/doc/Makefile b/doc/Makefile
index 1656d52..c4fdd58 100644 (file)
--- a/doc/Makefile
+++ b/doc/Makefile
@@ -4,4 +4,4 @@ TEX = $(patsubst %.text,%.tex,$(TXT))
 
 html: $(HTM)
 $(HTM) : %.html : %.md
-       pandoc -s --ascii --toc --template page-html.tmpl --email-obfuscation=references -f markdown -t html $< > $@
+       pandoc -s  --toc --template page-html.tmpl --email-obfuscation=references -f markdown -t html $< > $@

diff --git a/doc/index.xml b/doc/index.xml
index 1717411..3c39560 100644 (file)
--- a/doc/index.xml
+++ b/doc/index.xml
@@ -1,4 +1,4 @@
-<page encoding="UTF-8" date="11 août 2011">
+<page encoding="UTF-8">
   <titre>Documentation du projet SVGAnimation</titre>
   <contenu f="page.html"/>
   <auteur>Syracuse</auteur>

diff --git a/doc/page.html b/doc/page.html
index 4ce29b5..1c10097 100644 (file)
--- a/doc/page.html
+++ b/doc/page.html
@@ -1,5 +1,4 @@
 <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">
@@ -23,69 +22,70 @@
     });
 </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>
+<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>
+<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>
 <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, 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.
+Les différents exemples se charge 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.
 </p>
 <p>
-Nous pr&#233;sentons, dans la section XX, le code qui permet de charger l'animation sur demande.
+Nous présentons, dans la section <a
+href="#chargement-différé">Chargement différé</a>, le code qui permet de charger l'animation sur demande.
 </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>
+<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>
 <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>
-<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>
+<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>
 <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> suivi d'un nombre (indice), celui-ci pouvant &#234;tre formater de diff&#233;rente fa&#231;ons :</p>
+<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>
 <pre><code>monfichier-1.svg  monfichier-2.svg monfichier-3.svg ...</code></pre>
 <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>
+<p>Nous verrons comment gérer le formatage de l'indice des images dans les sections suivantes.</p>
 <div class="alert alert-info">
 <p>
-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.
+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.
 </p>
 </div>
 <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 :</p>
+<h3 id="côté-html">Côté HTML</h3>
+<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>
 <ul>
-<li>une balise <code>img</code> contenant un image <code>svg</code> qui servira de vignette &#224; l'animation;</li>
-<li>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;</li>
+<li>une balise <code>img</code> contenant un image <code>svg</code> qui servira de vignette à l'animation;</li>
+<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>
 <li>une balise <code>div</code> avec l'identifiant <code>id=&quot;XXXX_boutons&quot;</code>.</li>
 </ul>
-<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>
+<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>
 <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 pour permettre &#224; l'animation de se jouer.</p>
+<h3 id="côté-javascript">Côté JavaScript</h3>
+<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>
 <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>
+<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>
 <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>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>
 <p><code>anim.loopOnload()</code> permet le chargement de l'animation.</p>
-<p>Une fois celle-ci charg&#233;e, 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>
+<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>
 <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>
+<p>Nous verrons par la suite comment personnaliser le contrôle de la lecture de l'animation.</p>
+<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>
 <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>Bien sûr, ceci nécessite le chargement, dans la page HTML, de la librairie <code>JQuery</code>.</p>
+<h4 id="le-résultat">Le ré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>
@@ -113,22 +113,23 @@ Chargement...
 
 </div>
 </div>
-<p>Il est possible de diff&#233;rer le chargement de l'animation en cr&#233;ant une fonction Javascript.</p>
+<h4 id="chargement-différé">Chargement différé</h4>
+<p>On peut laisser le chargement d'une animation à la demande en créant une fonction Javascript.</p>
 <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>
   <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>
   <span class="va">a</span>.<span class="at">loopOnload</span>()<span class="op">;</span>
   <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>
   <span class="va">b</span>.<span class="at">connect</span>()<span class="op">;</span>
 <span class="op">}</span></code></pre></div>
-<p>Fonction qui sera li&#233;e &#224; l'<em>&#233;v&#233;nement</em> <code>onclick</code> d'un bouton proposant, &#224; l'internaute, le chargement de l'animation...</p>
+<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>
 <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;margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px&quot;</span><span class="kw">&gt;</span>
  <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;width:330px;height:240px&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;anim2_message&quot;</span><span class="kw">&gt;</span>Ellipsographe<span class="kw">&lt;/div&gt;</span>
  <span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;anim2_boutons&quot;</span><span class="kw">&gt;&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;&lt;/div&gt;</span>
 <span class="kw">&lt;/div&gt;</span></code></pre></div>
-<p>On peut en profiter pour adapter le <em>style</em> des &#233;l&#233;ments englobants.</p>
-<div id="anim2" style="margin:10px auto;padding:10px;width:350px;border:2px solid #AAA;border-radius:4px">
+<p>Dans le même temps, le <em>style</em> des éléments englobants a été adapté.</p>
+<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 id="anim2_message" class="message">
 Ellipsographe
@@ -139,7 +140,18 @@ Charger l'animation
 </button>
 </div>
 </div>
-<h3 id="les-param&#232;tres">Les param&#232;tres</h3>
+<h3 id="les-paramètres">Les paramètres</h3>
+<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>
+<p>• <strong>delai</strong> <em>(valeur par défaut : 50)</em> — C'est la durée, en millisecondes, entre deux images.</p>
+<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>
+<span class="va">a</span>.<span class="at">delai</span> <span class="op">=</span> <span class="dv">200</span><span class="op">;</span>
+<span class="va">a</span>.<span class="at">loopOnload</span>()<span class="op">;</span></code></pre></div>
+<p>Ceci fixera le défilement à 5 images/s. Un <em>player</em> comme ceux que nous vous proposons ci-dessus peut modifier cette valeur.</p>
+<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>
+<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>
+<span class="va">a</span>.<span class="at">pad</span> <span class="op">=</span> <span class="dv">3</span><span class="op">;</span>
+<span class="va">a</span>.<span class="at">loopOnload</span>()<span class="op">;</span></code></pre></div>
+<p>Les images chargées seront, successivement, <code>svg/pre001.svg</code>, <code>svg/pre002.svg</code>, ..., <code>svg/pre100.svg</code>.</p>
 <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>
@@ -155,9 +167,9 @@ Charger l'animation
  <li><a href="#la-famille-dimages">La famille d'images</a></li>
  </ul></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>
+ <li><a href="#côté-html">Côté HTML</a></li>
+ <li><a href="#côté-javascript">Côté JavaScript</a></li>
+ <li><a href="#les-paramètres">Les paramè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>

diff --git a/doc/page.md b/doc/page.md
index b1816df..0ef33ed 100644 (file)
--- a/doc/page.md
+++ b/doc/page.md
@@ -1,4 +1,3 @@
-<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">
@@ -41,8 +40,9 @@ 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
-l'animation sur demande.</p>
+<p>Nous présentons, dans la section <a
+href="#chargement-différé">Chargement différé</a>, le code qui permet de
+charger l'animation sur demande.</p>
 </div>
 
 ## Installation
@@ -91,7 +91,7 @@ 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 :
+faut&#8239;:
 
 * une balise `img` contenant un image `svg` qui servira de vignette à
   l'animation;
@@ -203,7 +203,10 @@ dont l'affichage est :
 </div>
 
 
-Il est possible de différer le chargement de l'animation en créant une fonction Javascript.
+#### Chargement différé
+
+On peut laisser le chargement d'une animation à la demande en créant une
+fonction Javascript.
 
 ~~~~~~~ { .javascript }
 function charge_anim2() {
@@ -214,8 +217,8 @@ function charge_anim2() {
 }
 ~~~~~~~
 
-Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant, à
-l'internaute, le chargement de l'animation...
+Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant
+justement le chargement de l'animation...
 
 ~~~~~~~ { .html }
 <div id="anim2"
@@ -226,9 +229,9 @@ l'internaute, le chargement de l'animation...
 </div>
 ~~~~~~~
 
-On peut en profiter pour adapter le *style* des éléments englobants.
+Dans le même temps, le *style* des éléments englobants a été adapté.
 
-<div id="anim2"  style="margin:10px auto;padding:10px;width:350px;border:2px solid #AAA;border-radius:4px">
+<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>
@@ -238,6 +241,30 @@ On peut en profiter pour adapter le *style* des éléments englobants.
 
 ### Les paramètres
 
+L'objet `Animation` ne possède que deux propriétés configurables, autres
+que celles (4) qui lui sont passées en argument.
+
+&bull; **delai** *(valeur par défaut : 50)* &mdash; C'est la durée, en millisecondes, entre deux images.
+
+~~~{.javascript}
+var a = new Animation('anim','svg/pre',1,100);
+a.delai = 200;
+a.loopOnload();
+~~~
+Ceci fixera le défilement à 5 images/s. Un *player* comme ceux que nous vous proposons ci-dessus peut
+modifier cette valeur.
+
+&bull; **pad** *(valeur par défaut : 0)* &mdash; 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.
+
+~~~{.javascript}
+var a = new Animation('anim','svg/pre',1,100);
+a.pad = 3;
+a.loopOnload();
+~~~
+Les images chargées seront, successivement, `svg/pre001.svg`, `svg/pre002.svg`, ..., `svg/pre100.svg`.
+
 ## Les *players*
 
 ### `SVGPlayerOne.js`