16 Couleurs

16 Couleurs – graphisme & jeu vidéo

Quels logiciels pour l’animation HTML5 ? (1)

21 Commentaires

Avec Google, Microsoft, Facebook, Amazon et évidemment Apple en partisans affichés, tout indique qu’HTML5 va jouer à l’avenir un rôle prépondérant pour le web (thanks, Captain Obvious). Même si son impact sur le secteur du jeu vidéo dépendra de ses performances et surtout de la minimisation des problèmes de compatibilité entre navigateurs, certains titres démontrent déjà les capacités ludiques d’HTML5, comme Warimals, BioLab Disaster ou Pirates Love Daisies.

La promesse d’HTML5 est à la fois très simple et très ambitieuse : permettre la création d’applications en ligne réellement universelles, compatibles aussi bien avec un iPhone qu’une tablette Android, un netbook Linux ou un PC Windows. En pratique, les choses s’avèrent complexes à mettre en œuvre, mais on peut espérer des progrès à mesure que la technologie gagnera en maturité. À terme je pense que Flash sera privilégié pour les jeux plus complexes, en 3D notamment, et HTML5 pour les titres visuellement plus simples mais qui pourront toucher un public plus large.

En matière de création graphique, même si la suprématie actuelle de Flash pour le contenu « riche » sur le web sera de plus en plus contestée, la flexibilité et l’étendue des ses outils d’animation ne sera pas facile à remplacer. En attendant un hypothétique export de Flash vers HTML5, quels outils sont disponibles aujourd’hui pour réaliser des animations HTML5 ? Je n’ai pris en compte que les logiciels au concept proche de celui de Flash (keyframes placées sur une timebar, avec interpolation pour les frames intermédiaires). Voici une liste non exhaustive de l’offre proposée aujourd’hui sur le marché :

  • Adobe Edge (Mac/Windows, preview gratuite) : Adobe a été long à réagir, probablement tiraillé entre la crainte de faire du tort à Flash et celle de rater le coche de l’HTML5. Edge est néanmoins en train d’être finalisé (la preview 3 est sortie en septembre) et devrait être le pendant HTML5 de Flash.

    Adobe Edge

  • Sencha Animator (Mac/Windows, 140 €) : Sencha est une société dédiée aux applications web et elle propose une solution pour l’animation HTML5 et au delà, la création d’applications complètes.

    Sencha Animator

  • Purple (Mac, 16 €) : La petite société allemande Purple propose un logiciel qui semble intuitif et doté de bonnes idées comme l’import natif d’images au format PSD.

    Purple (source image : purpleanimator.com)

  • Hype (Mac, 21 €) : Hype fut l’un des premiers entrants sur le marché, et il paraît logiquement être l’un des plus aboutis à l’heure actuelle.

    Hype (source image : tumultco.com)

  • Radi (Mac, bêta gratuite) : En plus de l’aspect animation, Radi se présente également comme une solution complète pour la création de graphisme vectoriel.

    Radi (source image : radiapp.com)

A voir aussi :

 

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.

21 réflexions sur “Quels logiciels pour l’animation HTML5 ? (1)

  1. M’intéressant au sujet de près, j’ai apprécié le contenu de cet article. Je me permets une petite suggestion pour alimenter l’article datant d’octobre 2011 : il existe un nouvel outil que je viens de tester en version bêta, qui s’appelle A5 HTML5 Animator : http://www.a5-animator.com/. On peut le tester gratuitement. En attendant les prochaines nouveautés et de nouvelles évolutions dans le domaine…

    • Merci pour cette information ! Je ne connaissais pas A5 HTML5 Animator et ça paraît intéressant. Je vais l’essayer et je pense que j’aurai l’occasion d’en parler dans un prochain article à propos des nouveautés dans le domaine de l’HTML5.

  2. Une pierre de plus à l’édifice : moi j’ai testé Motion Composer, qui est très simple à utiliser et permet d’exporter en HTML5 et en Flash
    http://www.aquafadas.com/fr/motioncomposer/

    • Merci pour l’information, je vais aussi regarder en quoi consiste MotionComposer.

      Vous pourriez être plus transparente avec le fait que vous travaillez pour Aquafadas, personnellement ca ne me choque pas que vous cherchiez à faire connaître votre produit, surtout s’il est bon.

  3. et s’il fallait en choisir un, lequel adopteriez-vous ?
    J’ajoute que dans une certaine mesure, Keynote d’Apple est aussi capable de générer des animations pour un site web sans Flash.

    • Je suis en train de tester la dernière vague de logiciels d’animation HTML5 qui n’étaient pas disponibles lors de la rédaction de ce billet et pour l’instant je dirais qu’Adobe Edge Animate (qui a bien évolué en un an) et le nouveau A5 HTML5 Animator semblent être les solutions les plus professionnelles pour un usage dédié à l’animation.

      Je ne connais pas vraiment Keynote, mais je pense qu’il joue dans une autre catégorie, puisque le concept de diapos (à l’opposé des logiciels qui utilisent le concept de timeline, comme Flash) ne permet pas un contrôle très poussé en matière d’animation.

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

  5. Pingback: L’animation HTML5 avec Flash Professional | 16 Couleurs

  6. Il manque aparament aussi le célébre logiciel e-anim qui sort maintenant ces animation aussi bien en swf ou format html5 avec de nombreuse possibilité , comme pouvoir héberger directement son animation en 1 clique , possibilité de créé des barres d’outils ……….
    enfin bon je vous le conseil vraiment , la version payante et à 10 euros pour 1 ans comprenant l’hébergement et les mise à jours gratuite.
    http://www.e-anim.com/

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

  8. Pingback: De l'intérêt des transitions pour concentrer l'attention « InterfacesRiches.fr InterfacesRiches.fr

  9. bonjour mais comment installer la nouvelle version

  10. Oui E anim a l’air intéressant mais compliqué pour l’installation

  11. je parlais de la version E anim que Globe avait posté

  12. Pingback: lire De l’intérêt des transitions pour concentrer l’attention | itlaia

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

  14. et aussi, pour compléter cette liste : http://www.loxiastudio.com, plein de modèles prêts à l’emploi, pas besoin de connaître html/css, et gratuit

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