Animations HTML5 : MotionComposer et Radi

Nicolas Furno |
Les outils permettant de créer des animations HTML5 facilement sont à la mode… Hype [1.0.3 – US – 23,99 € – Tumult Inc.] a ouvert la voie (lire : Hype : un outil de création HTML5), suivi par Adobe et son Edge (lire : Edge : l'outil de création HTML5 d'Adobe enfin en bêta). En voici encore deux autres, aux fonctions assez proches.

MotionComposer [1.0b6 – 76 Mo – Français – Mac OS X 10.5 – 130 €] est un outil développé par Aquafadas qui permet de réaliser des animations en Flash et en HTML5. Le logiciel fonctionne comme un logiciel de présentation, sur la base de diapositive, mais avec la notion de temps qui s'ajoute pour chaque diapositive. Il suffit de créer une étape, ajouter/déplacer des éléments et l'animation sera automatiquement créée. Pour aller plus loin, un inspecteur sur le côté est rempli d'options et paramètres.

motion composer

La même animation est lisible dans un navigateur traditionnel et sur les terminaux mobiles, iOS comme Android. Le logiciel génère la version Flash et la version HTML5 en même temps et vous incite à placer les deux sur le serveur. En fonction de l'appareil qui affichera l'animation, l'une ou l'autre solution sera choisie. Certains effets seront par contre réservés au Flash, mais MotionComposer l'indique clairement dans son interface. L'application est capable de mettre en ligne directement sur votre serveur les fichiers et vous pourrez intégrer l'animation à une page web sous la forme d'un iFrame.

Motion Composer

Radi [0.6.2 – 11,5 Mo – US – Mac OS X 10.5 – Gratuit pendant la bêta] se charge lui aussi de réaliser des animations en HTML5, mais son approche est très différente. Si MotionComposer se prenait facilement et rapidement en main, Radi nécessite une phase d'apprentissage plus sérieuse. En contrepartie, il est beaucoup plus souple, avec un accès permanent au code et la possibilité de régler très finement les animations. Le logiciel est aussi capable d'éditer les formes vectorielles avec uniquement des droites dans cette version néanmoins.

Radi

Radi est toujours en développement. La date de sortie de la version finale n'est pas connue, pas plus que son prix de vente.
Tags
#HTML5 #MotionComposer #Radi
avatar valdo404 | 
Radi a l'air nettement plus complet. +1 pour le second donc pour ses capacités d'animation. Je vais taper Adobe Edge pour voir.
avatar Wiman | 
Il y a également sencha animator qui existe depuis plusieurs mois et qui fonctionne très bien malgré son statut de beta.
avatar Bjeko | 
Ça bouge enfin du côté des substituts à Flash. J'apprécie la tendance, bien qu'on en soit qu'aux balbutiements. De ceux que j'ai essayé : (Edge, Hype, M.C..) Edge a largement ma préférence en matière d'interface et de possibilités. Par contre j'aimerais qu'il propose, comme M.C., la possibilité d'exporter en Flash, puisque pour le moment ce format reste encore le meilleur pour être sur d'être reconnu par les navigateurs "non-mobile", beaucoup d'utilisateurs étant encore sur de vieilles versions.
avatar Goldevil | 
Je suis assez content d'enfin voir des outils de dévelopement HTML5. J'ai néanmoins quelques bémols. Par expérience, la même animation en Flash et en HTML5 ne consomme pas du tout les mêmes ressources CPU. Sur Mac c'est moins sensible, mais sous Windows c'est flagrant. Un autre problème lié est la très grande variété de performances en HTML5 car les navigateurs sont forts différents. Le plugin Flash est unique quel que soit le navigateur utilisé. De toute manière l'écart ne se réduira jamais à néant, car Flash (ActionScript et MXML) est un langage précompilé en bytecode, comme Java. Javascript reste un langage interprété et un compilateur JIT ne peut rivaliser avec un vrai compilateur.
avatar ssssteffff | 
Un très bon "article" sur la bêtise de la prolifération de tels outils et usages : http://fullfuckingservice.tumblr.com/post/8357989756/reckless-web-practices-encourage-idiots
avatar Bjeko | 
@Goldevil : je suis entièrement d'accord. Je suis content que ces "générateurs d'HTML5" commencent à exister, dans le sens ou c'est mieux que rien, mais je considère qu'en matière de création d'animation pour le web c'est quand même un grand bond en arrière par rapport à Flash, à tout niveau. Sans parler de l'aspect créatif, infiniment moins riche, même au niveau technique c'est loin d'être le Pérou : la gestion du vectoriel de Flash permet d'exporter des anims 10 fois moins lourdes si on sait un peu utiliser le programme...
avatar YannK | 
@ ssssteffff C'est malheureusement tellement vrai. Mort à ces outils WYSIWYG qui, en plus de délivrer un code dégueulasse, encouragent les non-initiés à privilégier l'eye-candy au détriment de tout le reste. Désolé mais pour faire le bon choix, un choix en connaissance de cause, ce n'est pas en utilisant ces outils populistes qu'on va pouvoir le faire. Combien vont vouloir rentabiliser leur achat ? Combien vont vouloir foutre des animations HTML5 partout parce que ça fait "trop classe" ? Si tu ne connais pas la manière dont il fonctionne, si tu ne connais pas les contrecoups et que tu peux le balancer en quelques clics, tu n'es pas à même de prendre une décision sensée. D'autant que la grande tendance du moment, c'est le retour au minimalisme, qui fait paradoxalement bien plus classe qu'un site surchargé. On a vu ce que donnait le flash et on refait la même connerie : un site qui exploite des outils simples d'utilisation pour créer de plus en plus de sites full Flash simplistes qui auraient pu être faits avec les technos existantes… Bref, on ne va pas blâmer les boites qui sont là pour faire du pognon, mais force est de constater qu'ils fournissent un AK-47 a des personnes qui n'ont jamais tiré de leur vie…
avatar Hasgarn | 
@ ssssteffff et YannK : Je comprends votre point de vue. Mais, il ne faut oublier certaines choses en plus : tout le monde ne maîtrise pas le code. Faut-il donc laisser le html 5 aux initiés, et laisser ceux qui ont l'oeil dans la panade parce que le code, ben ça les agace ? De plus, un codeur peut-il être aussi rapide avec du code pur et mettre en place un animation complexe aussi rapidement qu'avec un éditeur ? (c'est une vraie question, même si je ne pense pas). Il y a des boîtes qui font du fric avec ce genre de logiciels, c'est clair, c'est le marché qui veut ça. Mais qu'en est-il des gens qui veulent faire du fric avec le html 5 ? Apprendre le code, vous conviendrez que c'est très long, et que certains professionnels n'ont pas le temps matériel de le faire, car ça ne dégage aucune rentabilité durant la période d'apprentissage du code. Par ailleurs, rien n'empêche un codeur de repasser derrière un éditeur pour optimiser le code. Perso, je vais avoir bientôt une formation Web, avec du code, certes, mais pas à mon avis au point de pouvoir créer un animation complète. Les logiciels comme cela prennent tout leur sens pour des gens comme moi. Il est évident qu'on ne fera jamais et si très complexe, mais les sites vitrines restent à notre portée. J'espère que vous comprenez mon point de vue. En passant, Motion Composer a l'air bien, mais il est vachement au dessus en terme de tarif. On n'a encore non plus de prix pour Edge, quoi qu'il en soit.
avatar ssssteffff | 
@Hasgarn, je comprends bien ton avis, et il n'est pas incompatible avec le mien. Le problème que je pointe du doigt n'est pas l'accessibilité de ce genre d'outils à des personnes non initiées, mais plutôt leur utilisation abusive. Rien ne sert de faire un site animé qui monopolise ton CPU, qu'est mal ordonné et qui n'apporte aucune plus value si c'est pour présenter du contenu basique. Ca alourdit le site et la navigation en pâtit. Le web est fait pour présenter des informations simplement, pas rendre épileptique en consultant un site dit "corporate" (qui ne se souvient pas des gifs qui ont envahi le web, puis les sites tout en flash au sein desquels la navigation est parfois fastidieuse). Je n'ai rien contre le HTML5 et les animations qu'il est désormais possible de faire, bien au contraire. Mais c'est bien l'utilisation abusive que je pointe du doigt au travers de l'article que j'ai cité (bien plus complet que mon pauvre commentaire :p). Certaines utilisations peuvent toutefois être justifiées bien entendu. En soit, les outils semblent plutôt bons, mais devraient être utilisés avec parcimonie.
avatar Hasgarn | 
@ ssssteffff : effectivement. C'est comme Photoshop : il y a un max d'outils et de features qui font penser au client que "c'est facile à faire". Finalement, il y a des outils qui sont mal exploité à cause d'une image véhiculée. Et ça déprécie le travail en même temps que ça le rend plus complexe.
avatar deckard82 | 
Moi je pense qu'il faut savoir se remettre en question et s'initier à ces nouveaux produits en vogue... Rien ne dit que dans 1 ou 2 ans, ils seront toujours d'actualités et auront remplacé Flash ou SilverLight mais en entreprise, surtout dans le domaine du web, je parie que ces logiciels feront partis des critères de sélections lorsqu'un poste sera crée... pour le bien être de la rentabilité de la société... Donc à surveiller de très près!
avatar poco | 
Bon étant surtout "utilisateur" du web (quelques notions de dev cependant en HTML, PHP, BdD), je vous donne mon humble avis. Pour moi lorsque je veux lire de l'info sur un site, rien n'est plus dérangeant que des animations qui défilent en continu (style pub La Redoute...). Donc j'installe des "anti-Flash" et autres gadgets. Lorsque je me rends sur un site d'une société et que c'est du tout Flash avec une belle Intro, musique, etc... Je ferme de suite la page. En tant que pro dans ces cas là, je suis agacé de voir qu'une boîte se la pète. Je cherche des infos produit/corporate/adresse/contacts pas une œuvre d'art (y'en a des très jolie faut le dire). Donc, ces outils HTML5, tout comme Flash, utilisés à bon escient (pédagogique, infographie, formulaire intelligent, petite animation non bouclée...), oui pourquoi pas, mais par pitié pour nos yeux et la bande passante que çà soit avec parcimonie Messieurs et Mesdames les Webdesigners.
avatar BioSS | 
Super, retournons à l'époque de Dreamweaver / Golive et faisons du front-end sans rien comprendre au code ! Vive l'HTML5 ! Quel retour en arrière par rapport à Flash…
avatar harisson | 
Il manque la composante SVG dans ce genre d'outil et puis bon javascript/actionscript ce ne sont pas des langages super super et je ne vois pas d'alternative intéressante se profiler (peut-être avec une norme ecmascript qui inclut un support d'autres langages de scripting).
avatar Domsou | 
En tant que développeur je dirai que pour produire du code il faut savoir coder. Le HTML n'est pas difficile à apprendre et à comprendre. Simplement cela demande du temps, de la patiente et de la persévérance. Et ce genre d'outils te propose de remplacer cela. Et c'est bien tentant. Au final le temps que tu ne passes pas sur l'apprentissage du langage tu le passes sur celui de l'outil, avec son formalisme, ses bugs et ses évolutions. Et en plus tu en deviens dépendant. Un conseil : prendre un bon éditeur (pour moi, Espresso), suivre des tutoriels (a list apart, Alsacreations, w3c school) et regarder du côté de jQuery. Les débuts sont laborieux mais après c'est super !

CONNEXION UTILISATEUR