Logiciel, Technologie

Animer en HTML5 sans une ligne de code

Le HTML5, on en parle, on sait que ça va être crucial autour de nous et de nos métiers (et ça l’est déjà), même si ça semble loin (lire l’article HTML5 pour tous)

En publication numérique, on entend le terme HTML5 à chaque fois qu’on souhaite faire des choses plus avancée en matière de mise en page, interaction et animations.

Il existe des solutions pour générer ces animations sans connaître une seul ligne de code. Voici donc une sélection réduite, ainsi que mon préféré pour conclure.

Adobe Edge Animate

Adobe Edge Animate Adobe, leader du marché en terme d’animation avancée sur le web avec Flash Pro s’est retrouvé le bec dans l’eau lorsque Apple a annoncé à la sortie du premier iPhone que les formats Flash (les SWF et FLV) ne seraient pas supportés du fait de son absence d’optimisation qui vidait les batteries des périphériques mobiles à vitesse grand V, au bénéfice du HTML5 naissant.

Cet avis ne fut finalement pas le plus mauvais puisque Adobe a décidé cette année d’arrêter le développement de Flash Player pour périphériques mobiles, n’arrivant pas à le rendre moins gourmand en énergie.

Tout le monde s’attendait à voir Flash Pro évoluer vers un export HTML5 (chose qu’il sait faire depuis CS6…), mais la surprise fut l’annonce de Edge Animate, logiciel d’animation à part entière consacré au HTML5. Tout le monde pensa que ça signait l’arrêt de mort de Flash Pro, jusqu’avant l’été. Finalement, un sursaut de vie apparu en mai, comme l’explique Arzhur ici.

Edge Animate rentre dans l’abonnement Creative Cloud, reste quand à lui bien présent.

Mon avis : il conviendra à quelqu’un connaissant déjà un produit Adobe tels que Flash Pro ou After Effects, mais il est à mon goût trop complexe pour le peu qu’on peut faire pour le moment. Un graphiste normalement constitué aura aussi sans doute du mal à comprendre son fonctionnement. Je passe.
Le site de Edge

Aquafadas MotionComposer

Déjà concurrent d’Adobe sur le plan de la publication numérique, Aquafadas l’est aussi sur les outils d’animation HTML5. MotionComposer se veut simple d’utilisation, mais pas simpliste. Il fonctionne sur la base de diapositives et le logiciel interprète toutes les transitions d’objets entre chaque diapositive. Il exporte en Flash et HTML5 en produisant aussi un bout de code à insérer dans un site internet qui enverra automatiquement une de ces deux versions selon le périphérique qui le lit.

Mon avis : il me rappelle un peu le premier iMovie avec son système de diapos. Parfait pour des choses simples, mais se gâtent lorsque l’on veut sortir des sentiers battus. À une centaine d’euros, c’est déjà un très bon outil.
Le site internet de MotionComposer

Tumult Hype

Deux anciens d’Apple veulent créer un logiciel facile d’utilisation pour faire des animations complexes. On arrive à un ersatz de Keynote, bien foutu, facile à comprendre, bien qu’il ne soit qu’en anglais. La timeline est simplifiée comparée à celle de Edge et l’enregistrement d’action (déplacement, redimensionnement, rotation, opacité…) d’une simplicité enfantine. On est une étape au dessus des diapositives de Motion Composer sans aller jusqu’à la complexité de la timeline de Edge.

Mon avis : de loin ma solution préférée. Simple, efficace et si on veut aller plus loin, on peut (insertion de code javascript…). En plus pour 40 €, Hype est imbattable sur tous les fronts. Sauf qu’il n’existe que pour Mac.
[màj] La version 2.5 vient de sortir. Bourré de nouveauté, mais surtout traduite en français.
Le site de Hype


Il existe encore d’autres solutions, mais pour le moment, ce trio est celui de tête.

Publicités
Par défaut

3 réflexions sur “Animer en HTML5 sans une ligne de code

  1. Stephane dit :

    Merci beaucoup pour ce mini comparatif très utile. Après essais de Edge et Hype, effectivement Hype me semble être le meilleur outil. Intuitif, efficace et surtout, gros point positif pour moi, il gère la vidéo.
    Petite question: y a t il de nouveaux soft plus performants que Hype sortis depuis l’an dernier?

  2. Et pour réaliser des animations très simples avec images, effets de transitions et quelques textes, il y a aussi LoxiaStudio qui propose un service en ligne 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