Animations didactiques sans Flash

Ayant trouvé une présentation didactique des malheurs de la centrale de Fukushima (au Japon), j'ai cherché à comprendre comment réaliser de tels documents. Ne le sachant pas, j'ai interrogé autour de moi.

C'était "du Flash" (quoique l'on mette derrière ces mots)... et je n'ai pas l'outil qui permet d'en fabriquer, ni l'intention de l'utiliser non plus.

Ce qui suit est un parcours assez erratique à la découverte de solutions de remplacement libres.
Comme la messagerie électronique a été utilisée pour les échanges, le texte ci-dessous reprend largement le contenu de ceux-ci.
On va passer par différents endroits, donc XML et SVG (pléonasme diront certains).
Le chemin est ardu : il faut lire de nombreux documents, beaucoup de code.

Le document qui a tout fait démarrer

Ce qui suit se rapporte au contenu de l'animation située ici :

http://www.lemonde.fr/japon/infographie/2011/03/14/le-scenario-de-la-catastrophe-de-fukushima_1493124_1492975.html (je ne m'intéresse qu'au seul cadre intitulé : le scénario de l'accident, qui est accompagné de 5 boutons à cliquer).
Il faut activer le Javascript pour que cela marche.
Une telle infographie est un moyen d'explication efficace quand on s'adresse à un public qui a "l'intelligence visuelle".

Ceci étant, imaginons que nous ayons à réaliser une telle infographie (une commande venue d'un journal qui paie bien !!!). Quels outils pour ?
- les dessins : !Draw, Inkscape,Open Office Draw, ...
- enchaîner les images et le texte :
+ powerpoint ou open office (mais cela ne marchera pas dans le navigateur)
+ Python (je saurais faire sous forme de vidéo, ou dans une fenêtre en local, mais pas au sein du navigateur)
+ BBC Basic (mais limitations avec le navigateur ???)
+ Javascript (je crois que c'est ce qui est utilisé, mais je ne saurais pas faire)

En application, voici une page qui relate l'accident de Tchernobyl :
http://www.astrosurf.com/luxorion/tchernobyl.htm
Elle contient un joli dessin qui ne demande qu'à être animé.

Vous feriez comment ?

Résumé des réponses

Basic et Python : non, pour des raisons de sécurité.
Javascript : c'est ce qui convient.
Malheur : c'est du flash (ce que je n'avais pas vu au début).

Un premier essai avec javascript

Le javascript, quand ce n'est pas un machin à faire suer le monde, a des côtés amusants.
Dans l'exemple suivant, il est utilisé comme substitut au basic, dans un jeu des couleurs du style "drapeaux nationaux".
L'avantage (???) est que le navigateur internet est utilisé comme terminal graphique universel. Que la machine cible soit un Mac, un Pétsé, un Cray (???) le résultat sera le même... sous réserve que la machine cible dispose d'un navigateur avec javascript.
Voir : http://lerautal.lautre.net/journal/javascript/3couleur.html

Si vous voulez lire le code, il faut le charger dans un éditeur.

Page de documentation sur JS : http://www.java2s.com/Code/JavaScriptReference/CatalogJavaScriptReference.htm

Exemple de code d'appel pour la gestion du rectangle de gauche (les signes plus grand et plus petit sont enlevés pour éviter les problèmes d'affichage :

<td width="33%"> <td> <input type="button" value="noir" onClick="function1gauche();"> </td> <td> <input type="button" value="bleu" onClick="function2gauche();"> </td> <td> <input type="button" value="vert" onClick="function3gauche();"> </td> </td>

Déclaration de l'identifiant pour le rectangle de gauche :

<table width="600"> <tr> <td id="un" width="33%" height="79"> un </td> .... </tr> </table>

Code javascript faisant le travail :

    function function1gauche() {
        document.all.un.bgColor = "black";
    }
    function function2gauche() {
        document.all.un.bgColor = "blue";
    }
    function function3gauche() {
        document.all.un.bgColor = "green";
    }

Rien de bien malin ici, mais au moins la démonstration qu'on pouvait le faire au sein du navigateur.

Positionnement avec les CSS

En HTML (avec styles) il est devenu possible de positionner précisément des "choses".
Voici une petite page "pédagogique" qui ne contient que du HTML (et même pas encore de javascript). http://lerautal.lautre.net/journal/javascript/position.html

Le code source, très simple est ici pour les curieux :

<html> <head> <title>L’attribut CSS position avec style</title> <style> IMG {position: absolute; height: 315; width: 246; top: 100; left = 0} IMG.deuxieme {top: 50; left : 280} IMG.troisieme {top: 260; left : 140} </style> </head> <body> <IMG src = "fable.jpg" > <IMG src = "fable.jpg" class = deuxieme > <IMG src = "fable.jpg" class = troisieme > </body> </html>

Une imitation minimaliste

Pour mémoire : il s'agit d'imiter l'animation Flash du Monde sur la panne de la centrale de Fukushima.
Un dessin original a été fait avec Inkscape.
Le "démonstrateur" ne contient que 3 pages en HTML avec CSS (mais ni flash ni javascript)
Il ne contient que des éléments graphiques (manque de temps pour le reste).
Voir ici :
http://lerautal.lautre.net/journal/javascript/simulation10.html

Visiblement, on peut déjà faire beaucoup ainsi.
Le code est facile à visualiser par (affichage / code source de la page) dans Firefox.

SVG, XML sont-ils la réponse ?

La page suivante est importante : elle montre qu'à partir d'un dessin au format SVG, d'un fond en PNG et de code Javascript il serait possible de reconstituer un équivalent de l'animation flash.

http://www.carto.net/svg/samples/canvas.shtml

Ceci étant, il y a beaucoup à faire pour comprendre puis transposer.
Ce que j'ai compris :
- Une image SVG est composée de différents objet graphiques clairement identifiés dans le code de la page.
- Avec Javascript, on peut agir pour afficher ou non tel élément graphique, reconstituant ainsi l'équivalent de calques affichés (ou non).

Découverte du SVG seul

Après ces quelques essais, un peu au hasard, il devient évident que l'on ne peut plus différer l'apprentissage "d'un peu de SVG", puisque c'est sur lui que repose le remplacement de Flash.

Dans ce qui suit, des animations faites uniquement avec SVG vont être montrées. Mais avant, une mise en garde :

Certains navigateurs tardent à s'adapter aux possibilités de SVG. Les seuls efficaces sont actuellement les dernières versions de :
Opera, Firefox (4), Chromium. Je n'ai pas pu essayer Internet Explorer (je suis sous Linux), mais les versions anciennes ne marcheront pas.

Le triangle qui suit une courbe

Rappel : utiliser Opera, Firefox (4), Chromium
Commençons par quelque chose d'étonnant :
http://lerautal.lautre.net/journal/sansflash/aiguille.svg

Remarquer en passant, puisque c'est du SVG, que l'on peut zoomer/dézoomer sans perte de qualité. Etonnant.

Si maintenant on examine le code source de la page, il y a matière à s'instruire.

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Cette partie définit un en-tête standard pour le format SVG.

<svg width="5cm" height="3cm" viewBox="0 0 700 300" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" >

Quelques définitions supplémentaires, en particulier les dimensions de la zone d'affichage.
Ce qui suit permet de réaliser le dessin et l'animation.
D'abord, le tracé du cadre du dessin :

<!-- le cadre --> # commentaire <rect x="1" y="1" width="690" height="298" # dimensions du rectangle fill="none" # pas de remplisssage de la courbe stroke="blue" # le trait est bleu stroke-width="4" # il est large de 4 pixels /> # fin de définition du rectangle

Puis la première courbe :
Celle-ci est définie par la position de ses extrémités et puis par les coordonnées des "poignées" qui étirent la courbure (courbe dite "de Bézier").

<path id="path1" # identifiant de la courbe d="M100,250 # position du premier point C 100,50 400,50 # position des poignées de contrôle de courbure 400,250" # position de l'extrémité de la courbe fill="none" stroke="blue" stroke-width="7.06" /> # déjà expliqué

Puis la seconde courbe :
Celle-ci est définie par la position de ses extrémités et puis par les coordonnées des "poignées" qui étirent la courbure (courbe dite "de Bézier").

<path id="path2" # identifiant (différent du premier) d="M400,250 C 500,50 550,50 600,250" fill="none" stroke="blue" stroke-width="7.06" />

Ce qui suit réalise le "miracle" de l'animation : on commence par définir un triangle puis on lui donne l'ordre de suivre la courbe appelée path1.

<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" # tracé du triangle. fill="yellow" stroke="red" stroke-width="7.06" > <animateMotion # mouvement animé dur="6s" # il dure 6 secondes repeatCount="indefinite" # il ne s'arrête jamais rotate="auto" > # il s'occupe tout seul des rotations <mpath xlink:href="#path1"/> # la coubre path1 sert de guide </animateMotion> # fin de définition de l'animation </path> # fin de définition du triangle

On fait la même chose pour le second triangle :

<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="blue" stroke="red" stroke-width="7.06" > <!-- Le triangle va suivre la courbe --> <animateMotion dur="4s" repeatCount="indefinite" rotate="auto" > <mpath xlink:href="#path2"/> </animateMotion> </path>

Et on finit la définition du fichier SVG :

</svg>

Expérimentation complémentaire

Une courbe a été dessinée à la main avec Inkscape et le code adapté pour réaliser de nouveau le déplacement du triangle.

http://lerautal.lautre.net/journal/sansflash/aiguille2.svg

Premier essai de rotation

Le mieux est d'aller voir la petite démonstration suivante :
http://lerautal.lautre.net/journal/sansflash/rotation1.svg
Attention : navigateur Chromium ou Opéra récents.

Le code source du fichier SVG est très simple et assez facile à comprendre.
D'abord l'en-tête du fichier :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Ensuite, on définit un rectangle coloré :

<rect # mot réservé pour définir un rectangle x="100" # coordonnées du coin haut-gauche y="100" height="100" # largeur width="100" # hauteur style="stroke:#ff0000; # couleur du contour (en hexa) fill: #0000ff"> # couleur de remplissage

Maintenant, les définitions qui provoquent le mouvement :

<animateTransform # mot réservé définissant l'animation attributeName="transform" # paramètre complémentaire du précédent begin="0s" # démarre tout de suite (au bout de 0 seconde) dur="10s" # la rotation complète dure 10 secondes type="rotate" # il s'agit d'une rotation from="0 150 150" # Angle=0, coordonnées du centre du carré au début to="360 150 150" # Angle=360, coordonnées du centre du carré à la fin repeatCount="indefinite" # répète tout le temps />

Enfin, les balises de "fin de balisage" qui complètent celles qui ont été "ouvertes" (analogie avec les parenthèses ouvrant/fermant).

</rect> # fin de définition du rectangle </svg> # fin de la définition du fichier SVG

Une illustration plus jolie de la rotation : le moulin à vent

Pour commencer, aller voir l'image animée suivante :
http://lerautal.lautre.net/journal/sansflash/moulin.svg
Attention : navigateur Chromium ou Opéra récents.

L'image comprend deux éléments :
- l'un est fixe : la tour du moulin
- l'autre tourne : les ailes.
Un résumé du code source est présenté ci-dessous.

Définition de la tour du moulin :
La définition de la tour est contenue dans la zone comprise entre "path" et "fin de path". L'élément porte un nom qui permet de faire appel à lui en cas de besoin : id="path2999"
Le path en mis dans une boîte de "hiérachie supérieure" par usage de la balise "g"
Cette "super boîte" porte aussi un nom : id="layer1".
Elle est positionnée de façon relative sur le dessin par "translate(....)".

<g transform="translate(-4.09375,-2.3125)" id="layer1"> <path d="M 52.888148,153.73787 156.7949,34.272105 # début du path 261.44385,153.73787 l -20.03916,0 12.61725,262.48815 L 64.763206,415.3847 75.153882,153.73787 z" id="path2999" # nom du path style="fill:#a0892c;stroke:#000000;stroke-width:2px;" /> # fin du path </g>

Les ailes du moulin : on retrouve une logique comparable à ce qui a été expliqué plus haut pour le carré tournant.

<g transform="translate(-4.09375,-2.3125)" id="layer2"> <path d="M 192.92832,2.8554383 ....139.65455,105.07213 z" id="path3005" style="fill:#5fbcd3;stroke:#000000;stroke-width:0.8px;" /> <!-- la rotation --> <animateTransform attributeName="transform" begin="0s" dur="6s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite" /> </g>

Le seul point qui paraît compliqué est le système de coordonnées relatives associé à "translate".

SVG seul et interaction avec la souris

On va utiliser ici la capture de l'évènement "mouseover", géré par SVG : le fait que le curseur de la souris passe au-dessus (ou sorte de) d'une zone géométrique définie.
Dans les illustrations suivantes, la zone de référence est un rectangle.

Voici d'abord une illustration simple :
http://lerautal.lautre.net/journal/sansflash/mouseover.svg
Pour interagir, amener le curseur de la souris au-dessus du rectangle jaune (ou rose).
Attention : navigateur Chromium ou Opéra récents.

Voici quelques éléments pour comprendre le code (celui-ci n'est présenté qu'en partie, mais on peut le capturer à partir de l'adresse http).

Définition des dimensions de l'image :

<svg height="200" width="400" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

Positionnement du premier bouton, couleur et changement de couleur en cas de "mouseover". Le bouton est positionné par "translate(...)" et un complément de décalage est ajouté par y="0" x="50".
Le bouton possède un identifiant et, en cas de "mouseover", il transmet le message "hint_button".
Les deux "animateColor" décrivent le temps de réaction ainsi que les changements de couleur en cas de "survol de la zone" (ou de fin de celui-ci).

<g transform="translate(10,20)"> <rect style="fill:yellow;" width="100" height="50" y="0" x="50" id="hint_button"> <animateColor fill="freeze" dur="0.1s" to="#f0f0f0" from="yellow" attributeName="fill" begin="mouseover"/> <animateColor fill="freeze" dur="0.1s" to="yellow" from="blue" attributeName="fill" begin="mouseout"/> </rect> </g>

Ici, quelques nouveautés :
style="display:none" qui déclare que, sans message reçu, le rectangle ne s'affiche pas.
begin=hint_button.mouseover et hint_button.mouseout correspondent à la réception des messages venant de la zone ci-dessus.
from="none" to="block" et from="block" to="none" sont des instructions antagonistes qui expliquent le comportement du rectangle : apparition ou disparition.
Relu avec attention, le code devrait vous paraître compréhensible.

<g transform="translate(-90,100)" style="display:none"> # par défaut, le rectangle ne s'affiche pas <rect style="fill:blue;" width="100" height="100" y="0" x="150"/> <animate fill="freeze" dur="0.1s" begin="hint_button.mouseover" from="none" to="block" attributeName="display"/> <animate fill="freeze" dur="0.1s" begin="hint_button.mouseout" from="block" to="none" attributeName="display"/>

Deux illustrations de ce même procédé

D'abord un dispositif pédagogique pour découvrir le vocabulaire relatif aux constituants d'une église.
C'est très simple, le code ne fait que 6,3 ko (image et interaction). C'est un exercice à terminer...

http://lerautal.lautre.net/journal/sansflash/eglisebouton1.svg

Une autre illustration ébauche l'apprentissage du vocabulaire anglais de la tête humaine. Le dessin complet a été réalisé avec Inkscape, mais seules deux interactions sont mises en place.

Voir ici :
http://lerautal.lautre.net/journal/sansflash/tete.svg

Compléments pour continuer à avancer

Maintenant qu'un minimum de savoir faire et de compréhension est acquis, il convient de réfléchir et d'arrêter de partir dans tous les sens : le code SVG ne me fait plus peur.
Encore faut-il disposer d'une documentation fiable ainsi que d'exemples illustrant l'utilisation de la syntaxe SVG.

Quelques URL pour se documenter et apprendre

http://svground.free.fr/index.php	Documentation en français, illustrée d'exemples.
http://pilatinfo.org/routines/couleurs.php3	Code des couleurs utilisables. Bien utile à l'usage.
http://www.yoyodesign.org/doc/w3c/svg1/indexlist.html	Une référence complète en français

Réaliser des dessins simples

Habituellement, j'utilise le logiciel libre Inkscape qui présente de nombreuses qualités. Il a le mérite, en plus, d'être disponible pour Windows, Mac OS X et Linux.
Voir par exemple ici : http://fr.wikipedia.org/wiki/Inkscape
Quand on veut récupérer le code SVG pour le modifier à la main, il faut penser à l'enregistrer au format "SVG simple" et non en "Inkscape SVG".

Ceci étant, on peut rechercher un outil plus simple, générant directement du code SVG simple. Un tel outil existe sur le web, et il est "proprement miraculeux" pour plusieurs raisons :
- il permet de zoomer en ligne pour vérifier tout de suite
- le code source SVG du dessin que l'on réalise peut être étudié en temps réel, voire modifié à la main.
Cet outil s'appelle SVGedit. Il est accessible en ligne ici, mais on peut aussi l'installer en local. Le code source étant disponible on peut le lire et essayer de le comprendre (c'est du SVG + javascript). http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html

Quelques vidéos, en toutes langues accessibles via Youtube en utilisant "svgedit" comme élément de recherche.

Autre éléments de réflexion, diverses pistes

Et maintenant ?

Une page signalée par Bruno, récapitulant des concepts et illustrations autour de SVG, Inkscape, Javascript, Ajax... En anglais hélas pour certains.
http://wiki.inkscape.org/wiki/index.php/Animation-%28Timeline%29 Très "nourrissant"... ne pas s'y noyer...

Une piste de travail en forme d'interrogation, venue de Mossoft, relative à l'application de SVG + Javascript en substitution de Flash pour réaliser de petit jeux :
http://jeux-flash.jeu-gratuit.net/jeux_inclassable/210.html
tu fais pareil en pas flash ?

C'est tout pour le moment...

---