Animation d'une page Web avec Javascript et SVG
image/svg+xml

Dans ce cours vous allez apprendre à créer une animation dans une page web en utilisant des outils gratuits...

Plan du cours

  • étape n°1 : Dessiner les objets de votre graphique
  • étape n°2 : Donner des identifiants à vos objets
  • étape n°3 : Animer vos objets grâce à javascript
  • étape n°4 : Insérer le tout dans une page html
  • étape n°5 : Pour finir des travaux pratiques

Les outils dont vous allez avoir besoin

  • Un outil pour dessiner votre graphique : Inkscape
  • Un outil pour taper votre script : Notepad++

Navigateurs qui supportent les outils utilisés dans ce cours

  • Firefox à partir de la version 4.0
  • Chrome à partir de la version 7.0
  • Internet Explorer à partir de la version 9.0

Prérequis

Pour aborder ce cours il vous faut des notions de programmation.

Une connaissance des bases du html et du javascript (ou de la programmation orientée objet) sont souhaitables, mais sinon vous êtes là pour apprendre...

Exemple



Ci-dessous exemple d'animation que vous serez capable de créer à fin du cours.

Un texte est caché dans le dessin...

Dans le cadre de l'animation se trouve un rond jaune, un texte caché et une forme grise. Ces formes ont été dessinées avec Inkscape. Grâce à un programme javascript le soleil disparaît et le nuage foncé se déplace.

Pour régler l'excursion du mouvement du nuage, entrez une valeur entre 10 et 100

image/svg+xml Vous avez trouvé l'aide : survolez le soleil, ou cliquez le nuage !

Dessiner

Vos premiers pas avec Inkscape

Réalisons notre dessin :

  1. Démarrer Inkscape
  2. Dessiner un Cercle (raccourci : F5), fixer un fond bleu et pas de contour
  3. Dessiner un Rectangle à droite du cercle (raccourci : F4), fixer le fond rouge et un contour noir
  4. Prenez l'outil de sélection (raccourci : F1)
  5. Sélectionner les deux éléments
  6. Aligner les deux éléments : menu Objet > Aligner et distribuer... > Centrer selon axe horizontal
  7. Ajouter un texte au dessus du cercle : "Hello world !"
  8. Sélectionner le texte et le cercle
  9. Aligner les deux éléments : Aligner les bords gauche
  10. Sélectionner tous les éléments de votre dessin
  11. Adapter la taille du document à votre dessin :
    • Menu Fichier > Propriétés du document
    • Dans le cadre "Dimensions personnalisés" cliquer sur " + Redimensionner la page au contenu"
    • Régler une marge de 10 pixels
    • Puis cliquer sur "Ajuster la page au dessin ou à la sélection"
  12. Enfin... Enregister votre dessin sous le format SVG (Scalable Vector Graphics) dans votre répertoire de travail : Fichier > Enregistrer sous... > premier_dessin.svg

Si c'est le cas félicitations !!!
Sinon encore un petit effort...

Infos complémentaires

Inkscape est un logiciel libre de dessin vectoriel sous licence GNU/GPL. Il a pour but de devenir un puissant outil d’édition graphique tout en étant entièrement conforme avec les standards XML, SVG et CSS du W3C.

Pour plus d'information...

Une image vectorielle est une image numérique composée d'objets géométriques individuels (segments de droite, polygones, arcs de cercle, etc.) définis chacun par divers attributs de forme, de position, de couleur, etc. Elle se différencie de cette manière des images matricielles (ou « bitmap »), plus volumineuse, dans lesquelles on travaille sur des pixels.

Pour plus d'information...


Une démo de l'utilisation de Inkscape :


Identifier



Identifions les éléments de notre dessin :

  1. Pour cela sélectionner un objet... le rond par exemple
  2. Clic droit > Propriétés de l'objet
  3. Donner une valeur à l'identifiant (Id), par exemple... "rond" et cliquer sur Définir. Ne fermer pas la boîte de dialogue...
  4. Sélectionner le rectangle et changer son Id : "rectangle"
  5. Pour le texte il convient de faire une étape supplémentaire : transformer notre texte en ... texte
    Inkscape traite les objets créés avec l'outil "texte" comme des objets graphiques. Si l'objectif est de modifier le contenu du texte de manière dynamique il faut tout d'abord le convertir en texte :
    • Sélectionner le texte
    • Menu Texte >
    • Convertir en texte
    • Vous pouvez alors modifier l'Id de l'élément texte : soyons fous appelons le... "texte"
  6. Fermer la boîte de dialogue "Propriétés de l'objet"

Facile non ??

Infos complémentaires

Id est un mot réservé qui signifie "identifiant" à l'interieur d'un même document il doit être unique (il caractérise un et un seul élément).

En HTML il se place dans les balises et permet (entre autres) à javascript de venir sélectionner un élément particulier (Javascript dirait : "Qu'on m'amène l'élément qui s'appelle Id="toto" que je lui change sa couleur !")


Identifions notre dessin :

Il reste un chose très important à faire : Donner un Id à votre dessin...

  • menu Edition > Editeur XML (tout en bas)
  • sélectionner l'Id de la racine et modifier le. Personnellement j'ai remplacé "svg7458" par "svgroot"
  • cliquer sur "Définir" et fermer la boîte de dialogue


Vous pouvez enfin sauvegarder votre fichier. Maintenant analysons le contenu de "premier_dessin.svg"

> Ouvrir le fichier avec Notepad++ (Clic droit sur le fichier >> Edit with Notepad++)

Parcourir le fichier à la recherche des lignes suivantes (vous devriez trouver les mêmes lignes... aux balises html prêt) : 

[...]
width="376.77457"
height="242.17862"
id="svgroot"
[...]
sodipodi:type="arc"
id="cercle"
sodipodi:cx="180"
sodipodi:cy="380.93362"
sodipodi:rx="71.428574"
sodipodi:ry="71.428574"
[...]
[...]
x="109.09375"
y="256.45419"
id="texte"
[...]
id="tspan8075">Hello world !

Si c'est le cas féliciations !!!
Sinon encore un petit effort...

Animer



Créons notre premier fichier javascript :

premier_script.js


  1. Créer un nouveau fichier dans Notepad++ et sauvegarder le sous le nom premier_script.js

    La fonction document.getElementById() permet de rechercher dans le document un élément dont l'identifiant est passé en paramètre. Cette fonction renvoie une "référence", c'est à dire un lien vers l'élément. Pour chercher dans notre document une référence vers l'élément cercle nous utiliserons :

    var ref_cercle=document.getElementById('cercle');
    • document est la référence du document qui a lancé le script. Par exemple si le script est lancé dans une page html, document représente l'ensemble du contenu de la page.
    • 'cercle' entre les parenthèses est un texte alors que ref_cercle à gauche du signe égal est une variable que nous créons avec le mot clef var.
    • ref_cercle est la référence de l'objet cercle, il va nous permettre de travailler sur l'objet cercle.

  2. Bien, maintenant que nous tenons le cercle passons à l'action :

    Tout d'abord nous allons utiliser une fonction qui va surveiller les événements qui arriveront sur l'objet cercle. Les événements sont par exemple un clic (click), le passage de la souris au dessus de l'objet (mouseover), la sortie de la souris de la surface de l'objet (mouseout).

    Pour surveiller les événements de type click sur l'objet cercle nous utiliserons la fonction addEventListener() associée à la référence ref_cercle

     ref_cercle.addEventListener('mouseover', XXX , true);

    Cela signifie que nous surveillons les événements de type mouseover sur l'objet référencé par ref_cercle.

    XXX sera la fonction que nous appliquerons sur l'objet. Par exemple la fonction : 

     function(){ref_cercle.style.opacity="0";}

    Nous réglons ainsi l'opacité à 0, c'est à dire transparent !

    ref_cercle.addEventListener('mouseover', function()
{
ref_cercle.style.opacity="0";
}, true);

  3. Pour éviter que le cercle reste invisible il est judicieux de le faire réapparaître lorsque la souris sort de sa surface : 
    ref_cercle.addEventListener('mouseout', function()
{
ref_cercle.style.opacity="1";
}, true);

  4. Maintenant que votre fichier premier_script.js est complet il faut assembler toutes les briques du puzzle. Dans votre répertoire vous devez avoir deux fichiers : premier_script.js et premier_dessin.svg. Il faut y ajouter la bibliothèque svghelper.js (cliquer droit >> Enregistrer la cible sous...).


Solution premier_script.js

Eléments importants :

  • var
  • document
  • getElementById()
  • addEventListener()
  • click
  • mouseover
  • mouveout
  • style.opacity

Insérer



Insérons cette animation dans une page HTML


  1. Créer un nouveau fichier dans Notepad++, créer une page HTML basique et sauvegarder le fichier sous le nom premier_html.html

  2. Dans l'en-tête <head> de votre page insérer ces 2 scripts : 
    <script src="svghelper.js"></script>
<script>
onload=function(){
addScriptedSVG("balise_objet_svg","premier_dessin.svg","premier_script.js");
}
</script>
    Dans le corps de votre page insérer le div suivant : 
    <div id="balise_objet_svg"></div>
    Sauvegarder vos fichiers.

  3. Votre répertoire est maintenant complet, il doit contenir :

  4. Vous pouvez alors tester le résultat en ouvrant le fichier premier_html.html avec votre navigateur.

Structure d'une page HTML

<html>
  <head>
    <meta charset=utf-8 />
    <title>Le Titre</title>
    ICI LES REGLAGES DE LA PAGE
  </head>

  <body>
    ICI LE CONTENU DE LA PAGE
  </body>
</html>

Questionnaire d'auto-évaluation

1 - Inkscape est un :
logiciel de traitement d'images bitmap
logiciel de dessin vectoriel
logiciel de programmation javascript

2 - En HTML/Javascript l'Id est :
un numéro qui caractérise un objet
un identifiant qui peut être associé à plusieurs objets
un identifiant unique associé à un objet

3 - Javascript est un langage :
interprété
compilé
issu du java

4 - La fonction getElementById() renvoie :
le premier attribut d'un objet
tous les attibuts d'un objet
une référence vers un objet


Note : 0 / 4




Les bonnes réponses sont cachées ici !

TP


Travaux Pratriques n°1 : Vous devez réaliser l'animation cette page

Enoncé :

  • Le rond rouge doit disparaître lorsqu'on le survol.
  • Le texte doit être changé en "Bonjour le monde !" lorsqu'il est cliqué.
  • Le rectangle doit tourner autour de lui-même de 10° lorsqu'il est cliqué.

Encore une petite information : il est possible de modifier les attributs simples (position, largueur, hauteur) d'un objet svg en utilisant :

var x_val= parseFloat(ref_rectangle.attributes.x.value);
ref_rectangle.attributes.x.value="150";

Ah... J'oubliais ! Vous vous rappelez, lors de la deuxième étape nous avons choisi l'identifiant du document svg. Nous l'avions appelé (arbitrairement) "svgroot". Il va maintenant être nous être utile. En effet, pour effectuer des transformations plus élaborées (comme la rotation) il est nécessaire de sélectionner le document SVG dans son ensemble. A partir de là nous pouvons créer un outil "transformation" qui pourra s'appliquer aux objets de notre document.

Un bout de code pour vous aider à démarrer : 

  1. notre_document_svg = document.getElementById("svgroot");
  2. transformation_de_notre_svg = notre_document_svg.createSVGTransform();
  3. transformation_de_notre_svg.setRotate(alpha,centre_x,centre_y);
  4. ref_rectangle.transform.baseVal.appendItem(transformation_de_notre_svg);

Dans ce code on récupère la référence de notre document svg (1). On contruit l'outil "transformation" (2). On fixe les paramètres de la rotation de l'outil "transformation" (3). On applique "transformation" à notre rectangle (4).

Si vous utilisez Chrome comme navigateur, il faudra ajouter la ligne chromeWorkaround(transformation_de_notre_svg,ref_rectangle);. En effet, Chrome ne sait pas utiliser correctement la fonction setRotate()... pour l'instant.

Voilà... j'en ai déjà trop dit, à vous de jouer...

Les solution est cachée ici !

image/svg+xml Hello world !

Travaux Pratriques n°2 : Pour aller plus loin...

Enoncé : Vous devez réaliser l'animation de la page d'accueil image/svg+xml

Encore une petite information : Comment répéter des instructions périodiquement ? Il faut faire appel à la fonction setTimeout( fonction_X() , temps_Y) :

  • fonction_X est la fonction à réaliser périodiquement.
  • temps_Y est une durée en millisecondes.

setTimeout() doit être appelée dans fonction_X(), qui appellera la fonction setTimout, qui appellera fonction_X(), ... toutes les temps_Y millisecondes !

Exemple :

setTimeout("animation()",40);
function animation()
{
//ICI VOTRE CODE POUR DEPLACER VOTRE OBJET
setTimeout("animation()",40);
}