Plusieurs postes sont disponibles chez Nmédia!Amène ton talent, on fournit le plaisir!

Un éditeur d’animations HTML5

31 août 2011Par David Malo
Catégories :

Le domaine de l’animation 2D est encore assez actif de nos jours. Le nombre de courtes animations disponibles sur les sites Internet tels que Newgrounds ou encore Albino Blacksheep est assez incroyable et démontre, une fois de plus, le talent de certains animateurs 2D.

Depuis plus d’une dizaine d’années, lorsque quelqu’un crée ses propres animations 2D, il se tourne fort probablement vers la solution Adobe Flash. Ce logiciel auteur permet facilement d’importer ou de dessiner des images pour ensuite les animer avec des images-clés. Cette technique est tellement populaire qu’elle est utilisée non seulement sur Internet, mais également à la télévision pour des séries comme Atomic Betty et Bob’s Burgers. Mais, est-ce que cette tendance serait sur le point de changer?

Tout le monde sait que plus les nouvelles technologies (HTML5 et CSS3) évoluent, moins il y a de raisons d’utiliser Flash. En effet, la nouvelle version de HTML propose déjà beaucoup de fonctionnalités autrefois uniquement accessibles à l’aide d’un plug-in Flash externe. Ce plug-in n’est d’ailleurs pas disponible pour les utilisateurs de la gamme de produits iTouch, iPhone et iPad.

Alors, qu’adviendra-t-il des animations Flash si répandues sur le Web? Google nous a déjà proposé le logiciel Swiffy, petit utilitaire qui convertit une animation Flash en HTML5 et JavaScript. Cet utilitaire est très pratique pour les courtes animations pas très compliquées, mais il comporte plusieurs contraintes.

[img]swiffy.jpg|500||true|Swiffy|[/img]

Swiffy accepte seulement les fichiers « .swf » de 1024 Ko et moins, ce qui est très peu. Il n’accepte pas les pistes audio présentes dans les fichiers, ne tolère aucune interaction, et cause également un certain ralentissement dans les animations.

Ainsi, convertir un fichier Flash (.swf) en animation HTML5, ce n’est pas l’idéal. Il vaudrait mieux créer des animations directement en HTML5 et, à ma connaissance, il n’y a pas de logiciel permettant de le faire… facilement. Jusqu’à tout récemment, il fallait écrire entièrement à la main les animations voulues. C’est un processus très long et bien moins efficace que l’interface What You See Is What You Get de Flash. Mais, est arrivé ensuite Adobe Edge! Eh oui! Les propriétaires de la technologie Flash d’Adobe se font eux-mêmes… compétition!

[img]edge-557x200.gif||||Adobe Edge|[/img]

J’ai donc passé quelques minutes à expérimenter ce nouveau logiciel et voici mes premières impressions.

Tout d’abord, dans son état actuel, le logiciel ressemble beaucoup plus à After Effects plutôt que Flash, non seulement en matière de présentation visuelle, mais aussi dans la façon de créer les animations. Dans Flash, le plan de montage chronologique est divisé par numéros d’images, alors que dans Edge, il est divisé en fractions de seconde. La manière dont fonctionnent les calques est également différente que dans Flash. De plus, il y a les animations qui sont beaucoup plus intuitives et faciles d’accès. Donc, en matière de facilité d’utilisation, Edge marque des points. Par contre, en ce qui concerne le contenu, c’est, hélas, bien différent.

En effet, dans Edge, on peut créer des animations de base très facilement. Ces animations s’appliquent sur la position, la taille, l’opacité, la rotation et la perspective d’une image. Il y a quelques petits effets de transition que l’on peut attacher à ses animations, mais rien de plus. Puis, on ne peut pas créer des graphiques aussi facilement que dans Flash. Les seules options proposées sont donc : d’écrire du texte, de créer un rectangle ou d’importer une image. Il n’y a donc pas de dessins, pas de masques, pas d’ajout d’audio et aucune option d’interactivité pour l’instant.

Une fois l’animation créée, on n’a qu’à la sauvegarder et le logiciel crée automatiquement une page HTML sur laquelle se retrouvera l’animation. Cette animation est composée de balises <div> qui sont animées grâce aux animations CSS3 et JavaScript. Vous aviez bien lu, des animations avec des <div> et non avec des <canvas>! Fait étonnant pour un produit qui se dit « utiliser des standards HTML5 », car il semble, finalement, en utiliser très peu… Cependant, il y a bel et bien une réponse aux questions que l’on peut se poser face à ce choix. Mark Anders, employé chez Adobe, a affirmé que les performances du <canvas> ne sont pas efficaces sur les navigateurs mobiles pour l’instant. Il a également exprimé que c’est le fruit d’une longue réflexion et qu’Adobe est toujours à l’écoute des développeurs. Alors, qui sait? Peut-être qu’à l’ère des téléphones intelligents plus performants viendra un Adobe Edge avec <canvas>!

Ce qu’Adobe Edge réalise, il le fait bien, car c’est quand même notable pour un produit qui est en phase Developer Preview (avant même les phases alpha et beta). Il sera intéressant de voir ce que le logiciel Edge deviendra au fur et à mesure qu’Adobe ajoutera de plus en plus d’options. Nostradamus ne l’avait peut-être pas prédit, mais la fin de Flash est proche!

Autres articles pertinents

Voir tous les articles