Les solutions pour la création d’animations en HTML5 peuvent être classées en deux catégories :
- Le recours à un logiciel spécifique pour la réalisation d’animations directement au format HTML.
- L’utilisation de Flash Professional pour la création du contenu, lequel sera ensuite exporté en HTML en lieu et place du traditionnel SWF.
J’ai couvert la plupart des solutions disponibles dans la première catégorie (Adobe Edge, Tumult Hype, Hippo Animator…) lors de précédents billets ici et ici.
Dans la deuxième catégorie on trouve entre autres Swiffy de Google et Toolkit for CreateJS, la solution officielle d’Adobe. Swiffy (plus de détails ici) est une extension gratuite qui après installation est accessible dans le menu Commands de Flash. Toolkit for CreateJS (plus de détails ici) , gratuit également, dispose lui de sa propre fenêtre, située dans Windows > Other > Toolkit for CreateJS.
J’ai testé les deux extensions avec une petite animation constituée d’éléments du défunt Country Story (© Playfish/EA) que j’avais réalisés il y a quelques années. Cliquez sur les images ci-dessous pour voir l’animation d’origine en SWF, celle en HTML convertie par Swiffy (Commands > Export as HTML5 (Swiffy)), et celle en HTML convertie par Toolkit for CreateJS (Windows > Other > Toolkit for CreateJS > Publish).
Animation SWF
Animation HTML5 par Swiffy
Animation HTML5 par Toolkit for CreateJS
La conversion semble fonctionner de manière satisfaisante dans les deux cas puisque le résultat est très proche de l’animation d’origine. On note juste l’absence d’anti-aliasing sur le masque sur l’image d’en haut et peut-être une vitesse un peu inférieure à celle du SWF.
Un des gros travers d’HTML5 est les soucis de compatibilité, et c’est malheureusement confirmé par ce petit test. L’animation créée par Toolkit for CreateJS s’affiche de manière incorrecte et extrêmement lente sur l’un des deux PC, pourtant avec la même version de Chrome, sur lesquels je l’ai testée. Sur iPad, les deux animations passent correctement avec Chrome et Safari, même si le framerate est poussif dans tous les cas (léger avantage pour Toolkit néanmoins). À noter également que Toolkit semble convertir les objets vectoriels en bitmaps, quand Swiffy les laisse tel quels.
La taille des fichiers est aussi largement supérieure à la solution Flash, puisque les animations HTML5 pèsent entre 100 et 120 ko contre 24 ko pour le SWF.
Malgré les petits soucis de compatibilité et l’inflation de la taille des fichiers, la création d’animation HTML5 avec Flash reste une solution très prometteuse puisqu’elle présente le gros avantage de pouvoir conserver un outil et une pipeline qui ont fait leurs preuves et qui sont maîtrisés par de nombreux infographistes et animateurs.
16 Couleurs 
28 février 2013 à 19:21
merci pour ce post
1 mars 2013 à 15:07
Je vous en prie. Content de voir que l’article est utile !
7 mai 2013 à 20:35
Merci beaucoup. Ce post m’a permis d’être convaincu par Swiffy, et je confirme, ça fonctionne parfaitement. Mais comment faire pour obtenir une animation sonorisée (réalisée dans Flash CS5.5 OSX) ? Swiffy gère très bien l’animation mais le son est ignoré. Une solution?
7 mai 2013 à 23:24
Merci pour votre commentaire et content que mon article vous ait été utile. Swiffy semble effectivement supérieur à la solution officielle d’Adobe, ce qui est un peu surprenant.
Je n’ai pas testé Swiffy ou Create JS avec du son mais je sais que ce dernier pose souvent problème avec le HTML5 et dépend beaucoup du navigateur utilisé. Ceci pourra peut-être vous aider : http://forums.adobe.com/message/4836866
Les choses vont probablement évoluer avec la sortie le mois prochain de Flash Professional CC qui promet un support complet de l’HTML5.
Pingback: Quels logiciels pour l’animation HTML5 ? (3) | 16 Couleurs
Pingback: Quels logiciels pour l’animation HTML5 ? (2) | 16 Couleurs
Pingback: Quels logiciels pour l’animation HTML5 ? (1) | 16 Couleurs
23 janvier 2014 à 13:38
Merci beaucoup pour ces tests et ces recherches, une vraie référence et un gain de temps pour moi qui suis justement dans ces questionnements!
23 janvier 2014 à 21:53
Merci pour votre commentaire ! La problématique est effectivement d’actualité pour beaucoup d’entre nous 🙂
Pingback: L’animation HTML5/WebGL avec Flash Professional CC 2014 – la méthode officielle ! | 16 Couleurs