16 Couleurs

16 Couleurs – graphisme & jeu vidéo

L’animation HTML5 avec Flash Professional

10 Commentaires

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 Swiffy

Animation HTML5 par Toolkit for CreateJS

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.

Auteur : HP

Professionnel de l'industrie vidéoludique depuis 14 ans, j'écris principalement sur l'infographie, le business des jeux vidéo et la demoscene.

10 réflexions sur “L’animation HTML5 avec Flash Professional

  1. merci pour ce post

  2. 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?

    • 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.

  3. Pingback: Quels logiciels pour l’animation HTML5 ? (3) | 16 Couleurs

  4. Pingback: Quels logiciels pour l’animation HTML5 ? (2) | 16 Couleurs

  5. Pingback: Quels logiciels pour l’animation HTML5 ? (1) | 16 Couleurs

  6. 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!

  7. Pingback: L’animation HTML5/WebGL avec Flash Professional CC 2014 – la méthode officielle ! | 16 Couleurs

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s