Hippo Animator | 16 Couleurs

J’ai déjà évoqué auparavant les solutions disponibles pour la création d’animations HTML5 comme Adobe Edge Animate, Sencha Animator, Purple, Hype, Radi, A5 HTML5 Animator, Hippo Animator, Mugeda, MotionComposer et même Flash Professional. J’ai récemment pris connaissance de deux nouvelles alternatives sur lesquelles nous allons nous pencher tout de suite :

E-anim (Windows uniquement, version d’essai gratuite, licence à 10 euros) se veut une solution tout-en-un de création et même d’hébergement d’animations. A l’origine utilisant la technologie Flash, il propose également l’export vers l’HTML5 à présent. Avec sa prise en compte de l’interactivité qui permet de réaliser de petits programmes, le logiciel semble très puissant et devrait offrir beaucoup de possibilités à qui saura se plonger dans la documentation et les très nombreux exemples… L’interface n’est en effet pas vraiment intuitive, ou du moins très « personnelle » dans sa manière de faire les choses et de présenter l’information. On note quelques lacunes pour une utilisation purement axée sur l’animation : malgré tous mes efforts je n’ai pas été en mesure de faire boucler une animation (l’option pour cela ne donnant pas l’effet escompté) ni d’ajouter de l’easing aux animations. En outre, il est surprenaent de ne pas pouvoir directement visualiser l’animation dans l’éditeur, mais de devoir chaque fois compiler un SWF qui s’affichera dans une nouvelle fenêtre, avec quelques secondes perdues à la clé. Difficile dans ces conditions de réaliser des animation très léchées.

Easy WebContent Presenter (en ligne, gratuit pour l’instant) est quant à lui dans l’esprit de MotionComposer, à savoir plutôt une alternative à PowerPoint (donc orientée « diapo ») qu’un logiciel d’animation classique. On y trouve néanmoins une vraie timeline avec des clés à placer dessus. Comme de plus en plus souvent, il s’agit d’un outil complètement en ligne, utilisable via un navigateur internet et sauvegardant les créations dans le cloud. L’interface est claire et d’apparence très professionnelle. Les fonctionnalités de base sont là, même si on relève quelques manques ou limitations (entre autres : précision limitée au dixième de seconde et impossibilité de dupliquer une clé). Un choix d‘easings assez complet est disponible en double-cliquant sur une clé, malheureusement il faut le faire pour chaque paramètre (coordonnées, dimensions, rotation…), ce qui devient vite fastidieux. J’émettrai les mêmes réserves qu’auparavant au sujet du caractère purement en ligne du logiciel : si cela rend la diffusion des animations plus simple (voir mon animation ici), des problèmes de confidentialité peuvent se poser, et surtout quid du devenir des données en cas de suspension définitive du service ? Il ne semble en effet pas possible de télécharger un fichier d’animation complet, ce qui est plutôt ironique pour un format ouvert comme le HTML5.

Enfin, saluons l’initiative de Hippo Studios qui diffuse gratuitement la version 1.8 de leur logiciel Hippo Animator (Windows uniquement). Le programme est sans fioritures mais permet de réaliser des animations simplement avant éventuellement de passer à la version 2 (dont j’avais parlé auparavant), payante mais aux fonctionnalités beaucoup plus étendues. Des logiciels évoqués dans ce billet, c’est sans conteste le plus homogène et facile à prendre en main.

Voir aussi :

J’avais l’an dernier recensé les solutions disponibles pour l’animation HTML5 plutôt orientée jeu et dans un esprit assez proche de ce que propose Flash (timeline, clés, tweening…).

HTML5 a depuis continué son développement et 2012 a vu l’apparition de nouveaux outils conçus spécifiquement pour l’animation HTML5. Premier constat, la plupart des solutions nouvelles sont le fruit de petites structures qui voient une opportunité à saisir dans le décollage d’un nouveau standard et la redistribution des cartes à venir si Adobe n’arrive pas cette fois à s’imposer. Deuxième constat, si la première vague d’outils ciblait le marché MacOS en priorité voire en exclusivité, tous les nouveaux entrants de cette année proposent une version Windows de leur logiciel. La preuve peut-être que la technologie devient réellement grand public et n’est plus principalement motivée par une réaction plus ou moins épidermique de l’écosystème Mac vis à vis de Flash.

A5 HTML5 Animator (Windows uniquement, version d’évaluation gratuite pour 10 jours, puis licence à 120 euros) : A5 HTML5 Animator est une nouveauté développée par les allemands de Soft Evolution et éditée par Data Becker (version francaise ici), distributeur du célèbre (et controversé) DemoMaker au début des années 90. Le logiciel fait bonne impression pour une première version. L’interface est claire et d’apparence très professionnelle, mais un peu lente par moment. Les fonctionnalités de base sont là et permettent de réaliser des animations rapidement. Malheureusement on regrette quelques absences importantes, comme le contrôle précis des pivots ou de l’easing. L’impossibilité de copier/coller des clés est également pénalisante, tout comme le nombre d’images par seconde bloqué à 10 qui rend difficile la création d’animations précises. Plus d’informations et tutoriels ici.

Hippo Animator 2 (Windows et bêta pour Mac, version d’évaluation gratuite pour 30 jours, puis licence aux alentours de 40 euros) : Les développeurs britanniques de Hippo Studios proposent une solution abordable, compacte et tout en un pour l’animation HTML5. L’interface est facile d’accès mais manque un peu de fignolage comparée aux poids lourds du genre, comme Edge. Par contre, les outils d’animation sont complets et les animations s’affichent très fidèlement dans la plupart des navigateurs, IE6 y compris ! Surtout, Hippo Animator est à ma connaissance le seul outil qui permette d’importer des dessins vectoriels (ici au format SVG) et de les animer librement (redimensionnement avec ratio longueur/largeur variable) comme dans Flash. On trouve même aussi des outils de dessin vectoriel, mais encore très basiques comparés à Illustrator ou Inkscape. On appréciera les mises à jour très fréquentes, un peu moins le contrôle basique de l’easing (pas de ease in et ease out combiné pour l’instant) et la traduction française plus que bancale.

Mugeda (en ligne, preview gratuite pour l’instant) : Mugeda est quant à lui proposé par une start-up chinoise et se distingue par le fait qu’il s’agit d’une application purement en ligne. L’interface est très inspirée par celle de Flash (dont des raccourcis clavier identiques !) ce qui permet de trouver ses marques immédiatement. Mugeda se présente comme un logiciel purement d’animation et cette spécialisation lui permet d’offrir des fonctionnalités poussées dans ce domaine, avec une bonne gestion des clés et des pivots. Néanmoins, autant l’aspect « cloud » de Google Docs offre des avantages évidents, autant pour un logiciel de graphisme, le manque de réactivité et de flexibilité par rapport à un outil natif peut être un handicap. Le risque d’interruption ou de cessation du service n’est pas à négliger non plus, surtout si celui-ci provient d’une start-up, sans parler du danger en matière de propriété intellectuelle. De plus, dans sa version preview actuelle, Mugeda ne semble pas permettre d’exporter en HTML5 et les animations restent donc « prisonnières » du site web de la société. Difficile donc de le conseiller pour une utilisation intensive pour l’instant. Plus d’information et exemples ici.

MotionComposer (Windows et Mac, version de d’évaluation gratuite mais limitée, et licence à 109 euros) : Les Montpelliérains d’Aquafadas proposent une alternative un peu à part puisqu’il s’agit plutôt d’un éditeur de diaporama très complet plutôt que d’un logiciel d’animation classique. En rusant un peu, on peut réaliser des animations relativement riches mais l’utilisation du concept de diapo (comme dans Powerpoint) plutôt que de timeline pour représenter les différentes étapes de l’animation rend les choses rapidement compliquées (impossibilité d’observer chaque image de l’animation ou de copier des clés, par exemple), même si quelques fonctionnalités permettent de contourner certaines limitations. On note néanmoins un large choix d’easings et un bon contrôle des paramètres de chaque élément (alignement, dimensions, pivot). L’interface est aussi de bonne aloi, même s’il est un peu étrange qu’elle tourne en partie sous Flash. La version de démonstration ne permet pas l’export vers l’HTML, il n’est donc pas possible de juger du résultat final.

Adobe Edge (Windows et Mac, gratuit), testé l’an dernier, a bien évolué, ce qui justifie de s’y pencher une nouvelle fois. Il est en effet passé en version 1.0 et a été séparé en deux (la partie animation se nomme maintenant Edge Animate). Les outils d’animation offrent à présent les fonctionnalités de loin les plus complètes, en particulier le choix d’easings est sans concurrence pour l’instant. L’interface est bien pensée et très réactive mais reste complexe, ce qui fait qu’à l’usage le logiciel paraît beaucoup plus technique que Flash, par exemple. La bonne surprise, c’est qu’il est toujours disponible gratuitement et nécessite uniquement de s’inscrire au service Adobe Creative Cloud.

Enfin, une alternative radicale pour la réalisation d’animations HTML5 est de conserver Flash comme outil de création et d’utiliser HTML5 uniquement pour la lecture des animations SWF. Plusieurs solutions existent, comme CreateJS (supporté par Adobe), LWF (Lightweight SWF) par GREE, ou Shumway. Le sujet est assez complexe et justifierait un article dédié, donc je ne m’attarderai pas dessus aujourd’hui.

Voir aussi :