X-Git-Url: https://melusine.eu.org/syracuse/G/git/?a=blobdiff_plain;f=doc%2Fpage.html;h=4ce29b5f9e432e6d4f3c7ce6a89bcfe0924c4941;hb=bb219b859367d3cbc212b5d4ad0dfd3ba6356af5;hp=199dfa3dd3e8657f286d539ebe29b657ecdec5a7;hpb=8ca2616625ca0b62bf448f9a3868a48a23caf807;p=svganimation.git

diff --git a/doc/page.html b/doc/page.html
index 199dfa3..4ce29b5 100644
--- a/doc/page.html
+++ b/doc/page.html
@@ -1,5 +1,5 @@
 <div>
-<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>-->
+<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">
@@ -9,6 +9,12 @@
     var player = new Controle(anim);
     player.connect();
   }
+  function charge_anim2() {
+    var a = new Animation('anim2','../ellipsographe/svg/ellipsographe-',1,91);
+    a.loopOnload();
+    var b = new Controle(a);
+    b.connect();
+  }
   $(window).load(function() {
     anim = new Animation('XXXX','../ellipsographe/svg/ellipsographe-',1,91);
     anim.loopOnload();
@@ -33,7 +39,7 @@ Nous pr&#233;sentons, dans la section XX, le code qui permet de charger l'animat
 <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>
 <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> puis d'un nombre (indice), 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> suivi 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>
 <p>ou, autre exemple :</p>
 <pre><code>monfichier-001.svg  monfichier-002.svg monfichier-003.svg ...</code></pre>
@@ -45,7 +51,12 @@ L'id&#233;e d'une telle librairie est venue du fait que le logiciel MetaPost per
 </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 : * 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>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>
+<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>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>
 <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>
@@ -53,14 +64,14 @@ L'id&#233;e d'une telle librairie est venue du fait que le logiciel MetaPost per
   <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>
+<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>
 <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>
+<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>
 <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>
@@ -78,7 +89,6 @@ L'id&#233;e d'une telle librairie est venue du fait que le logiciel MetaPost per
 <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>
@@ -93,7 +103,7 @@ L'id&#233;e d'une telle librairie est venue du fait que le logiciel MetaPost per
   <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>
 <span class="ss">  &lt;div id=&quot;XXXX_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>
+<p>dont l'affichage est :</p>
 <div id="XXXX">
 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>
 <div id="XXXX_message" class="message">
@@ -103,13 +113,28 @@ Chargement...
 
 </div>
 </div>
+<p>Il est possible de diff&#233;rer le chargement de l'animation en cr&#233;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>
+<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">
 <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);">
+<button onclick="charge_anim2()">
 Charger l'animation
 </button>
 </div>