Ah, le détail qui tue...
[svganimation.git] / 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) {
7 var anim = new Animation(i,p,a,b);
8 anim.loopOnload();
9 var player = new Controle(anim);
10 player.connect();
11 }
12 function charge_anim2() {
13 var a = new Animation('anim2','../ellipsographe/svg/ellipsographe-',1,91);
14 a.loopOnload();
15 var b = new Controle(a);
16 b.connect();
17 }
18 $(window).load(function() {
19 anim = new Animation('XXXX','../ellipsographe/svg/ellipsographe-',1,91);
20 anim.loopOnload();
21 player = new Controle(anim);
22 player.connect();
23 });
24 </script>
25 <p><strong>Participants :</strong> Chupin Maxime, Sarlat Jean-Michel.</p>
26 <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>
27 <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>
28 <div class="alert alert-warning">
29 <p>
30 Les diff&#233;rents exemples se charge en cliquant sur le bouton d&#233;di&#233;. Ceci <strong>n'est pas</strong> le comportement par d&#233;faut, c'est du code JavaScript qui permettra de choisir quand l'animation se charge. Il s'agit d'&#233;viter de charger toutes les animations pr&#233;sentes sur cette page, cela serait bien trop lourd.
31 </p>
32 <p>
33 Nous pr&#233;sentons, dans la section XX, le code qui permet de charger l'animation sur demande.
34 </p>
35 </div>
36 <h2 id="installation">Installation</h2>
37 <p>Le fichier <code>SVGAnimation.js</code> (que l'on supposera dans un r&#233;pertoire nomm&#233; <code>js</code>) est &#224; charger dans la page <code>html</code> en mettant les lignes suivantes :</p>
38 <pre><code>&lt;script type=&quot;text/javascript&quot; src=&quot;js/SVGAnimation.js&quot;&gt;&lt;/script&gt;</code></pre>
39 <h2 id="principe">Principe</h2>
40 <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>
41 <h3 id="la-famille-dimages">La famille d'images</h3>
42 <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>
43 <pre><code>monfichier-1.svg monfichier-2.svg monfichier-3.svg ...</code></pre>
44 <p>ou, autre exemple :</p>
45 <pre><code>monfichier-001.svg monfichier-002.svg monfichier-003.svg ...</code></pre>
46 <p>Nous verrons comment g&#233;rer le formatage de l'indice des images dans les sections suivantes.</p>
47 <div class="alert alert-info">
48 <p>
49 L'id&#233;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.
50 </p>
51 </div>
52 <h2 id="lutilisation">L'utilisation</h2>
53 <h3 id="c&#244;t&#233;-html">C&#244;t&#233; HTML</h3>
54 <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>
55 <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>
56 <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>
57 <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>
58 <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;anim1_message&quot;</span><span class="kw">&gt;</span>Chargement<span class="kw">&lt;/div&gt;</span>
59 <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>
60 <span class="kw">&lt;/div&gt;</span></code></pre></div>
61 <h3 id="c&#244;t&#233;-javascript">C&#244;t&#233; JavaScript</h3>
62 <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>
63 <h4 id="construire-lobjet-animation">Construire l'objet <code>Animation</code></h4>
64 <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>
65 <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>
66 <span class="va">anim</span>.<span class="at">loopOnload</span>()<span class="op">;</span></code></pre></div>
67 <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>
68 <p><code>anim.loopOnload()</code> permet le chargement de l'animation.</p>
69 <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>
70 <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>
71 <span class="va">anim</span>.<span class="at">loopOnload</span>()<span class="op">;</span>
72 <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>
73 <span class="va">player</span>.<span class="at">connect</span>()<span class="op">;</span></code></pre></div>
74 <p>Nous verrons par la suite comment personnaliser le contr&#244;le de la lecture de l'animation.</p>
75 <p>Tout ceci n'est toujours pas suffisant car il faut ex&#233;cuter ce code JavaScript. Ceci peut &#234;tre fait gr&#226;ce &#224; <code>JQuery</code> par exemple, en ex&#233;cutant ces quatre lignes de code &#224; l'ouverture de la fen&#234;tre :</p>
76 <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>
77 <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>
78 <span class="va">anim</span>.<span class="at">loopOnload</span>()<span class="op">;</span>
79 <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>
80 <span class="va">player</span>.<span class="at">connect</span>()<span class="op">;</span>
81 <span class="op">}</span>)<span class="op">;</span></code></pre></div>
82 <p>Bien s&#251;r, ceci n&#233;cessite le chargement, dans la page HTML, de la librairie <code>JQuery</code>.</p>
83 <h4 id="le-r&#233;sultat">Le r&#233;sultat</h4>
84 <p>Tout ceci donne le code suivant</p>
85 <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>
86 <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>
87 <span class="kw">&lt;script</span><span class="ot"> type=</span><span class="st">&quot;text/javascript&quot;</span><span class="kw">&gt;</span>
88 <span class="at">$</span>(window).<span class="at">load</span>(<span class="kw">function</span>() <span class="op">{</span>
89 <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>
90 <span class="va">anim</span>.<span class="at">loopOnload</span>()<span class="op">;</span>
91 <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>
92 <span class="va">player</span>.<span class="at">connect</span>()<span class="op">;</span>
93 <span class="op">}</span>)<span class="op">;</span>
94 <span class="op">&lt;</span><span class="ss">/script&gt;</span>
95 <span class="ss">&lt;!--</span><span class="sc">[...]</span><span class="ss">--&gt;</span>
96 <span class="ss">&lt;div id=&quot;XXXX&quot;&gt;</span>
97 <span class="ss"> &lt;img src=&quot;svg/ellipsographe</span><span class="fl">-1.</span>svg<span class="st">&quot; alt=&quot;</span>animation1<span class="st">&quot;/&gt;</span>
98 <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>
99 <span class="ss"> &lt;div id=&quot;XXXX_boutons&quot;&gt;&lt;/div</span><span class="op">&gt;</span>
100 <span class="op">&lt;</span><span class="ss">/div&gt;</span></code></pre></div>
101 <p>dont l'affichage est :</p>
102 <div id="XXXX">
103 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>
104 <div id="XXXX_message" class="message">
105 Chargement...
106 </div>
107 <div id="XXXX_boutons">
108
109 </div>
110 </div>
111 <p>Il est possible de diff&#233;rer le chargement de l'animation en cr&#233;ant une fonction Javascript.</p>
112 <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>
113 <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>
114 <span class="va">a</span>.<span class="at">loopOnload</span>()<span class="op">;</span>
115 <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>
116 <span class="va">b</span>.<span class="at">connect</span>()<span class="op">;</span>
117 <span class="op">}</span></code></pre></div>
118 <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>
119 <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>
120 <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>
121 <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>
122 <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>
123 <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>
124 <span class="kw">&lt;/div&gt;</span></code></pre></div>
125 <p>On peut en profiter pour adapter le <em>style</em> des &#233;l&#233;ments englobants.</p>
126 <div id="anim2" style="margin:10px auto;padding:10px;width:350px;border:2px solid #AAA;border-radius:4px">
127 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
128 <div id="anim2_message" class="message">
129 Ellipsographe
130 </div>
131 <div id="anim2_boutons">
132 <button onclick="charge_anim2">
133 Charger l'animation
134 </button>
135 </div>
136 </div>
137 <h3 id="les-param&#232;tres">Les param&#232;tres</h3>
138 <h2 id="les-players">Les <em>players</em></h2>
139 <h3 id="svgplayerone.js"><code>SVGPlayerOne.js</code></h3>
140 <h3 id="svgplayerbuttons.js"><code>SVGPlayerButtons.js</code></h3>
141 <h2 id="exemples-dutilisation">Exemples d'utilisation</h2>
142 </div>
143 <div id="TDM" class="tdm">
144 <div style="text-align:center">
145 <a href="javascript:tdmgauche();">&larr;</a>&nbsp;<b>Sections</b>&nbsp;<a href="javascript:tdmdroite();">&rarr;</a>
146 </div>
147 <ul>
148 <li><a href="#installation">Installation</a></li>
149 <li><a href="#principe">Principe</a><ul>
150 <li><a href="#la-famille-dimages">La famille d'images</a></li>
151 </ul></li>
152 <li><a href="#lutilisation">L'utilisation</a><ul>
153 <li><a href="#c&#244;t&#233;-html">C&#244;t&#233; HTML</a></li>
154 <li><a href="#c&#244;t&#233;-javascript">C&#244;t&#233; JavaScript</a></li>
155 <li><a href="#les-param&#232;tres">Les param&#232;tres</a></li>
156 </ul></li>
157 <li><a href="#les-players">Les <em>players</em></a><ul>
158 <li><a href="#svgplayerone.js"><code>SVGPlayerOne.js</code></a></li>
159 <li><a href="#svgplayerbuttons.js"><code>SVGPlayerButtons.js</code></a></li>
160 </ul></li>
161 <li><a href="#exemples-dutilisation">Exemples d'utilisation</a></li>
162 </ul>
163 </div>
164 <div style="clear:both"></div>

Licence Creative Commons Les fichiers de Syracuse sont mis à disposition (sauf mention contraire) selon les termes de la
Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.