<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">
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é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érents exemples se charge en cliquant sur le bouton dédié. Ceci <strong>n'est pas</strong> le comportement par défaut. Il s'agit d'éviter de charger toutes les animations pré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ésentons, dans la section XX, le code qui permet de charger l'animation sur demande.
</div>
<h2 id="installation">Installation</h2>
<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><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></code></pre>
-<p>La librairie <code>SVGAnimation.js</code> dépend de <code>JQuery</code>, il faut donc charger cette bibliothèque JavaScript avant.</p>
+<pre><code><script type="text/javascript" src="js/SVGAnimation.js"></script></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 à 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 à 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érentes images composant l'animation doivent se nommer avec un <em>prefixe</em> suivit d'un tiret puis d'un nombre (celui-ci pouvant être formater de différente façons).</p>
+<p>Les différentes images composant l'animation doivent se nommer avec un <em>prefixe</em> puis 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</p>
+<p>ou, autre exemple :</p>
<pre><code>monfichier-001.svg monfichier-002.svg monfichier-003.svg ...</code></pre>
<p>Nous verrons comment gérer le formatage de l'indice des images dans les sections suivantes.</p>
<div class="alert alert-info">
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="lobjet-animation">L'objet <code>Animation</code></h2>
-<p>La librairie <code>SVGAnimation</code> définit le <em>prototype</em> javascript <code>Animation</code>. Pour l'utiliser il faut dé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ô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 : * une balise <code>img</code> contenant un image <code>svg</code> qui servira de vignette à l'animation; * une balise <code>div</code> avec l'identifiant <code>id="XXXX_message"</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. * une balise <code>div</code> avec l'identifiant <code>id="XXXX_boutons"</code></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"><div</span><span class="ot"> id=</span><span class="st">"anim1"</span><span class="kw">></span>
+ <span class="kw"><img</span><span class="ot"> src=</span><span class="st">"svg/ellipsographe-1.svg"</span><span class="ot"> alt=</span><span class="st">"animation1"</span><span class="kw">/></span>
+ <span class="kw"><div</span><span class="ot"> class=</span><span class="st">"message"</span><span class="ot"> id=</span><span class="st">"anim1_message"</span><span class="kw">></span>Chargement<span class="kw"></div></span>
+ <span class="kw"><div</span><span class="ot"> id=</span><span class="st">"anim1_boutons"</span><span class="kw">></div></span>
+<span class="kw"></div></span></code></pre></div>
+<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 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é à 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">'XXXX'</span><span class="op">,</span><span class="st">'svg/ellipsographe-'</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é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é, 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">'XXXX'</span><span class="op">,</span><span class="st">'svg/ellipsographe-'</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ô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">'XXXX'</span><span class="op">,</span><span class="st">'svg/ellipsographe-'</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û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"><script</span><span class="ot"> src=</span><span class="st">"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"</span><span class="kw">></script></span>
+<span class="kw"><script</span><span class="ot"> type=</span><span class="st">"text/javascript"</span><span class="ot"> src=</span><span class="st">"../SVGAnimation.js"</span><span class="kw">></script></span>
+<span class="kw"><script</span><span class="ot"> type=</span><span class="st">"text/javascript"</span><span class="ot"> src=</span><span class="st">"../SVGPlayerOne.js"</span><span class="kw">></script></span>
+<span class="kw"><script</span><span class="ot"> type=</span><span class="st">"text/javascript"</span><span class="kw">></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">'XXXX'</span><span class="op">,</span><span class="st">'svg/ellipsographe-'</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"><</span><span class="ss">/script></span>
+<span class="ss"><!--</span><span class="sc">[...]</span><span class="ss">--></span>
+<span class="ss"><div id="anim1"></span>
+<span class="ss"> <img src="svg/ellipsographe</span><span class="fl">-1.</span>svg<span class="st">" alt="</span>animation1<span class="st">"/></span>
+ <span class="op"><</span>div <span class="kw">class</span><span class="op">=</span><span class="st">"message"</span> id<span class="op">=</span><span class="st">"anim1_message"</span><span class="op">></span>Chargement<span class="op"><</span><span class="ss">/div></span>
+<span class="ss"> <div id="anim1_boutons"></div</span><span class="op">></span>
+<span class="op"><</span><span class="ss">/div></span></code></pre></div>
+<p>dont le ré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">
-<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>
-<h3 id="lutilisation">L'utilisation</h3>
<h3 id="les-paramètres">Les paramè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">
<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ô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>
<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
Projets / svganimation.git / blobdiff
Les fichiers de Syracuse sont mis à
disposition (sauf mention contraire) selon les termes de la