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,t) {
   7     var anim = new Animation(i,p,a,b,t);
   8     anim.loopOnload();
   9   }
  10 </script>
  11 <p><strong>Participants :</strong> Chupin Maxime, Sarlat Jean-Michel.</p>
  12 <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>
  13 <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>
  14 <h2 id="installation">Installation</h2>
  15 <p>Le fichier <code>SVGAnimation.js</code> (que l'on supposera dans le r&#233;pertoire <code>js</code>) est &#224; charger dans la page <code>html</code> en mettant les lignes suivantes :</p>
  16 <pre><code>&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js&quot;&gt;&lt;/script&gt;
  17 &lt;script type=&quot;text/javascript&quot; src=&quot;js/SVGAnimation.js&quot;&gt;&lt;/script&gt;</code></pre>
  18 <p>La librairie <code>SVGAnimation.js</code> d&#233;pend de <code>JQuery</code>, il faut donc charger charger cette biblioth&#232;que JavaScript avant.</p>
  19 <h2 id="lobjet-animation">L'objet <code>Animation</code></h2>
  20 <div id="anim1" style="margin:10px auto;padding:10px;width:660px;border:2px solid #AAA;border-radius:4px">
  21 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:660px;height:480px"/>
  22 <div id="anim1_message" class="message">
  23 Ellipsographe
  24 </div>
  25 <div id="anim1_boutons">
  26 <button onclick="charge('anim1','../ellipsographe/svg/ellipsographe-',1,91,'boutons');">
  27 Charger l'animation
  28 </button>
  29 </div>
  30 </div>
  31 <h3 id="les-param&#232;tres">Les param&#232;tres</h3>
  32 <h2 id="les-players">Les <em>players</em></h2>
  33 <h3 id="svgplayerone.js"><code>SVGPlayerOne.js</code></h3>
  34 <h3 id="svgplayerbuttons.js"><code>SVGPlayerButtons.js</code></h3>
  35 </div>
  36 <div id="TDM" class="tdm">
  37 <div style="text-align:center">
  38   <a href="javascript:tdmgauche();">&larr;</a>&nbsp;<b>Sections</b>&nbsp;<a href="javascript:tdmdroite();">&rarr;</a>
  39 </div>
  40  <ul>
  41  <li><a href="#installation">Installation</a></li>
  42  <li><a href="#lobjet-animation">L'objet <code>Animation</code></a><ul>
  43  <li><a href="#les-param&#232;tres">Les param&#232;tres</a></li>
  44  </ul></li>
  45  <li><a href="#les-players">Les <em>players</em></a><ul>
  46  <li><a href="#svgplayerone.js"><code>SVGPlayerOne.js</code></a></li>
  47  <li><a href="#svgplayerbuttons.js"><code>SVGPlayerButtons.js</code></a></li>
  48  </ul></li>
  49  </ul>
  50 </div>
  51 <div style="clear:both"></div>