+<p>Pour utiliser un <em>player</em> plus <em>sophistiqué</em>, il faut surcharger la méthode <code>Initialisation</code> de l'objet <code>Controle</code>. Pour plus de détails sur les <em>players</em>, nous vous invitons à consulter la page dédiée.</p>
+<p>L'idée que nous présentons ici est de construire un objet JavaScript qui mettra des boutons de contrôle (lecture, stop, etc.).</p>
+<p>Ceci peut se faire de la façon suivante :</p>
+<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">SVGPlayerOne</span>(a) <span class="op">{</span> <span class="co">// déclaration de l'objet</span>
+ <span class="va">Controle</span>.<span class="at">call</span>(<span class="kw">this</span><span class="op">,</span>a)<span class="op">;</span> <span class="co">// construit à partir de l'objet Controle</span>
+ <span class="va">SVGPlayerOne</span>.<span class="va">prototype</span>.<span class="at">connect</span> <span class="op">=</span> <span class="va">Controle</span>.<span class="va">prototype</span>.<span class="at">connect</span> <span class="co">// et de</span>
+ <span class="co">// la méthode connect du Controle</span>
+<span class="op">}</span></code></pre></div>
+<p>Une fois déclaré un tel objet, il suffit de surcharger la méthode <code>Initialisation</code> de l'objet <code>Controle</code> fourni dans <code>SVGAnimation.js</code>. Dans l'exemple ci-dessous, on « vide » la <code>div</code> <code>XXXX_message</code>, et on ajoute des boutons à la <code>div</code> <code>XXXX_boutons</code> qui réagissent aux <code>onclick</code> pour lancer les fonctions JavaScript adéquates définies dans le fichier <code>SVGAnimation.js</code>.</p>
+<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// Surcharge de la méthode [Initialisation]</span>
+<span class="va">SVGPlayerOne</span>.<span class="va">prototype</span>.<span class="at">Initialisation</span> <span class="op">=</span> <span class="kw">function</span>() <span class="op">{</span>
+ <span class="kw">var</span> a <span class="op">=</span> <span class="kw">this</span>.<span class="at">a</span><span class="op">;</span> <span class="co">// l'animation courante</span>
+ <span class="kw">var</span> self <span class="op">=</span> <span class="kw">this</span>.<span class="at">me</span><span class="op">;</span> <span class="co">// le player</span>
+ <span class="va">a</span>.<span class="va">image</span>.<span class="va">style</span>.<span class="at">display</span> <span class="op">=</span> <span class="st">'inline'</span><span class="op">;</span>
+ <span class="va">a</span>.<span class="va">message</span>.<span class="va">parentNode</span>.<span class="at">removeChild</span>(<span class="va">a</span>.<span class="at">message</span>)<span class="op">;</span> <span class="co">// on supprime la</span>
+ <span class="co">//balise d'id=XXXX_message</span>
+ <span class="kw">var</span> play <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">'button'</span>)<span class="op">;</span> <span class="co">// on crée un bouton</span>
+ <span class="va">play</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">"SVGplay playBtn"</span><span class="op">;</span> <span class="co">// ajout de classe pour le style</span>
+ <span class="va">play</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">"Play"</span><span class="op">;</span> <span class="co">// on y met du texte</span>
+ <span class="va">play</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">action</span> <span class="op">=</span> <span class="kw">true</span><span class="op">;</span> <span class="va">a</span>.<span class="at">rotate</span>(<span class="va">self</span>.<span class="at">a</span>)<span class="op">};</span> <span class="co">// on</span>
+ <span class="co">// associe une fonction JS</span>
+ <span class="co">// on recommence</span>
+ <span class="kw">var</span> stop <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">'button'</span>)<span class="op">;</span>
+ <span class="va">stop</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">"SVGplay stopBtn"</span><span class="op">;</span>
+ <span class="va">stop</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">"Stop"</span><span class="op">;</span>
+ <span class="va">stop</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">action</span> <span class="op">=</span> <span class="kw">false</span><span class="op">;};</span>
+ <span class="kw">var</span> debut <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">'button'</span>)<span class="op">;</span>
+ <span class="va">debut</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">"SVGplay debutBtn"</span><span class="op">;</span>
+ <span class="va">debut</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">"Début"</span><span class="op">;</span>
+ <span class="va">debut</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">action</span> <span class="op">=</span> <span class="kw">false</span><span class="op">;</span> <span class="va">a</span>.<span class="at">first</span>(<span class="va">self</span>.<span class="at">a</span>)<span class="op">};</span>
+ <span class="kw">var</span> fin <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">'button'</span>)<span class="op">;</span>
+ <span class="va">fin</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">"SVGplay finBtn"</span><span class="op">;</span>
+ <span class="va">fin</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">"Fin"</span><span class="op">;</span>
+ <span class="va">fin</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">action</span> <span class="op">=</span> <span class="kw">false</span><span class="op">;</span> <span class="va">a</span>.<span class="at">last</span>(<span class="va">self</span>.<span class="at">a</span>)<span class="op">};</span>
+ <span class="kw">var</span> moins <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">'button'</span>)<span class="op">;</span>
+ <span class="va">moins</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">"SVGplay moinsBtn"</span><span class="op">;</span>
+ <span class="va">moins</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">"-"</span><span class="op">;</span>
+ <span class="va">moins</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">delai</span> <span class="op">=</span> <span class="va">a</span>.<span class="at">delai</span> <span class="op">></span> <span class="dv">2000</span> <span class="op">?</span> <span class="dv">2000</span> : <span class="va">a</span>.<span class="at">delai</span> <span class="op">*</span> <span class="fl">1.414</span><span class="op">};</span>
+ <span class="kw">var</span> plus <span class="op">=</span> <span class="va">document</span>.<span class="at">createElement</span>(<span class="st">'button'</span>)<span class="op">;</span>
+ <span class="va">plus</span>.<span class="at">className</span> <span class="op">=</span> <span class="st">"SVGplay plusBtn"</span><span class="op">;</span>
+ <span class="va">plus</span>.<span class="at">innerHTML</span> <span class="op">=</span> <span class="st">"+"</span><span class="op">;</span>
+ <span class="va">plus</span>.<span class="at">onclick</span> <span class="op">=</span> <span class="kw">function</span>()<span class="op">{</span><span class="va">a</span>.<span class="at">delai</span> <span class="op">=</span> <span class="va">a</span>.<span class="at">delai</span> <span class="op"><</span> <span class="dv">30</span> <span class="op">?</span> <span class="dv">30</span> : <span class="va">a</span>.<span class="at">delai</span> / <span class="fl">1.414</span><span class="op">};</span>
+ <span class="co">// placement des boutons</span>
+ <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(play)<span class="op">;</span>
+ <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(stop)<span class="op">;</span>
+ <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(debut)<span class="op">;</span>
+ <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(fin)<span class="op">;</span>
+ <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(moins)<span class="op">;</span>
+ <span class="va">a</span>.<span class="va">boutons</span>.<span class="at">appendChild</span>(plus)<span class="op">;</span>
+<span class="op">}</span></code></pre></div>
+<p>Un fois déclaré tout ceci (le mieux étant dans un fichier externe), on associe le <em>player</em> <code>SVGPlayerOne</code> à l'animation de la même façon que le <em>player</em> <code>Controle</code> :</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">'anim2'</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">SVGPlayerOne</span>(anim)<span class="op">;</span>
+<span class="va">player</span>.<span class="at">connect</span>()<span class="op">;</span></code></pre></div>
+<script type="text/javascript">
+ function charge_anim3() {
+ var anim = new Animation('anim3','../ellipsographe/svg/ellipsographe-',1,91);
+ anim.loopOnload();
+ var player = new SVGPlayerOne(anim);
+ player.connect();
+ }
+</script>
+<div id="anim3" 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="anim3_message" class="message">
+Ellipsographe
+</div>
+<div id="anim3_boutons">
+<button onclick="charge_anim3()">
+Charger l'animation
+</button>
+</div>
+</div>
+<p>Le fichier <code>SVGPlayerOne.js</code> est fourni à la racine du projet SVGAnimation.</p>