var player = new Controle(anim);
player.connect();
}
+ function charge_anim2() {
+ var a = new Animation('anim2');
+ a.loopOnLoad();
+ var b = new Controle(a);
+ b.connect();
+ }
$(window).load(function() {
anim = new Animation('XXXX','../ellipsographe/svg/ellipsographe-',1,91);
anim.loopOnload();
<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 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> puis d'un nombre (indice), 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> 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>
</div>
<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>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"> 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>
+<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é à 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>
+<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">'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="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">"XXXX_message"</span><span class="op">></span><span class="va">Chargement</span>...<span class="op"><</span><span class="ss">/div></span>
<span class="ss"> <div id="XXXX_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>
+<p>dont l'affichage est :</p>
<div id="XXXX">
<img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>
<div id="XXXX_message" class="message">
</div>
</div>
+<p>Il est possible de différer le chargement de l'animation 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">'anim2'</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ée à l'<em>événement</em> <code>onclick</code> d'un bouton proposant, à l'internaute, le chargement de l'animation...</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">"anim2"</span>
+<span class="ot"> style=</span><span class="st">"margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px"</span><span class="kw">></span>
+ <span class="kw"><img</span><span class="ot"> src=</span><span class="st">"../ellipsographe/svg/ellipsographe-1.svg"</span><span class="ot"> alt=</span><span class="st">"animation1"</span><span class="ot"> style=</span><span class="st">"width:330px;height:240px"</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">"anim2_message"</span><span class="kw">></span>Ellipsographe<span class="kw"></div></span>
+ <span class="kw"><div</span><span class="ot"> id=</span><span class="st">"anim2_boutons"</span><span class="kw">><button</span><span class="ot"> onclick=</span><span class="st">"charge_anim2();"</span><span class="kw">></span>Charger l'animation<span class="kw"></button></div></span>
+<span class="kw"></div></span></code></pre></div>
+<p>On peut en profiter pour adapter le <em>style</em> des élé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>
var player = new Controle(anim);
player.connect();
}
+ function charge_anim2() {
+ var a = new Animation('anim2');
+ a.loopOnLoad();
+ var b = new Controle(a);
+ b.connect();
+ }
$(window).load(function() {
anim = new Animation('XXXX','../ellipsographe/svg/ellipsographe-',1,91);
anim.loopOnload();
### La famille d'images
Les différentes images composant l'animation doivent se nommer avec un
-*prefixe* puis d'un nombre (indice), celui-ci pouvant être
+*prefixe* suivi d'un nombre (indice), celui-ci pouvant être
formater de différente façons :
monfichier-1.svg monfichier-2.svg monfichier-3.svg ...
* 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"`
+ 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é
### 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
+nécessaire d'ajouter un peu de code JavaScript pour permettre à l'animation
de se jouer.
#### Construire l'objet `Animation`
`anim.loopOnload()` permet le chargement de l'animation.
-Une fois celle-ci chargé, il faut en permettre la lecture qui se fait
+Une fois celle-ci chargée, 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 :
</div>
~~~~~~~
-dont le résultat est :
+dont l'affichage est :
<div id="XXXX">
<img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>
</div>
+Il est possible de différer le chargement de l'animation en créant une fonction Javascript.
+
+~~~~~~~ { .javascript }
+function charge_anim2() {
+ var a = new Animation('anim2');
+ a.loopOnLoad();
+ var b = new Controle(a);
+ b.connect();
+}
+~~~~~~~
+
+Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant, à
+l'internaute, le chargement de l'animation...
+
+~~~~~~~ { .html }
+<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>
+</div>
+~~~~~~~
+
+On peut en profiter pour adapter le *style* des éléments englobants.
<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 id="anim2_boutons"><button onclick="charge_anim2">Charger l'animation</button></div>
</div>
+
### Les paramètres
## Les *players*
Projets / svganimation.git / commitdiff
Les fichiers de Syracuse sont mis à
disposition (sauf mention contraire) selon les termes de la