+#### Construire l'objet `Animation`
+
+Le *constructeur* du prototype JavaScript s'utilise, pour l'exemple
+donné à la section précédente, de la façon
+suivante :
+
+~~~~~~~ { .javascript }
+var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
+anim.loopOnload();
+~~~~~~~
+
+`XXXX` est l'identifiant de la balise `div` HTML *englobante*,
+`svg/ellipsographe-` est le préfixe dont on a parlé plus haut, `1` est
+l'indice de la première image à animer, et `91` l'indice de la
+dernière.
+
+`anim.loopOnload()` permet le chargement de l'animation.
+
+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 :
+
+~~~~~~~ { .javascript }
+var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
+anim.loopOnload();
+var player = new Controle(anim);
+player.connect();
+~~~~~~~
+
+Nous verrons par la suite comment personnaliser le contrôle de la
+lecture de l'animation.
+
+Tout ceci n'est toujours pas suffisant car il faut exécuter ce code
+JavaScript. Ceci peut être fait grâce à `JQuery` par exemple, en
+exécutant ces quatre lignes de code à l'ouverture de la fenêtre :
+
+~~~~~~~ { .javascript }
+$(window).load(function() {
+ var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
+ anim.loopOnload();
+ var player = new Controle(anim);
+ player.connect();
+});
+~~~~~~~
+
+Bien sûr, ceci nécessite le chargement, dans la page HTML, de la
+librairie `JQuery`.
+
+
+
+
+
+#### Le résultat
+
+Tout ceci donne le code suivant
+
+~~~~~~~ { .html }
+<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">
+$(window).load(function() {
+ var anim = new Animation('XXXX','svg/ellipsographe-',1,91);
+ anim.loopOnload();
+ var player = new Controle(anim);
+ player.connect();
+});
+</script>
+<!--[...]-->
+<div id="XXXX">
+ <img src="svg/ellipsographe-1.svg" alt="animation1"/>
+ <div class="message" id="XXXX_message">Chargement...</div>
+ <div id="XXXX_boutons"></div>
+</div>
+~~~~~~~
+
+dont l'affichage est :
+
+<div id="XXXX">
+ <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1"/>
+ <div class="message" id="XXXX_message">Chargement...</div>
+ <div id="XXXX_boutons"></div>
+</div>
+
+
+#### Chargement différé
+
+On peut laisser le chargement d'une animation à la demande en créant une
+fonction Javascript.
+
+~~~~~~~ { .javascript }
+function charge_anim2() {
+ var a = new Animation('anim2','svg/ellipsographe-',1,91);
+ a.loopOnload();
+ var b = new Controle(a);
+ b.connect();
+}
+~~~~~~~
+
+Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant
+justement le chargement de l'animation...
+
+~~~~~~~ { .html }
+<div id="anim2" style="...">
+ <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="..."/>
+ <div class="message" id="anim2_message">Ellipsographe</div>
+ <div id="anim2_boutons">
+ <button onclick="charge_anim2();">Charger l'animation</button>
+ </div>
+</div>
+~~~~~~~
+
+Dans le même temps, le *style* des éléments englobants a été adapté.
+
+<div id="anim2" style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">