Le blog.

Apprendre à utiliser Adobe Edge Animate.

Si vous souhaitez créer des animations web fluides et modernes, ne cherchez plus : Adobe Edge Animate est l’outil parfait pour ça ! Ce premier tutoriel vidéo présente l’interface générale du logiciel et les outils à disposition. Nous aborderons également la mise en place des différents éléments dans notre scène : découvrez comment importer des images, insérer du texte et créer des formes dans Adobe Edge Animate.


Depuis 2011, Adobe Edge Animate permet aux designers de créer des contenus animés (bannières, slideshows…) en utilisant les standards et technologies modernes du web : HTML5, CSS et Javascript. Utilisant la librairie jQuery, les animations réalisées sont fluides, utilisant des transitions et modifications CSS.

Mais si vous n’avez encore jamais utilisé Adobe Edge Animate, l’interface peut paraître un peu effrayante : pas d’inquiétude, nous allons décortiquer cette sombre interface et expliquer les divers panneaux et outils à notre disposition pour pouvoir créer de sublimes animations dans nos prochains tutoriels.

La timeline, ou ligne de temps

edge_animate_timelineC’est l’outil central d’Edge Animate : si vous avez déjà utilisé Flash ou des logiciels vidéo comme After Effects, vous ne serez pas perdus !

La timeline illustre, dans une frise chronologique, les modifications effectuées au fil du temps. La ligne verticale rouge indique à quel moment vous êtes placé, et donc quel état va être modifié.

Chaque ligne correspond à un élément de votre animation (texte, image, forme…). Le petit triangle tout à gauche du nom de l’élément permet d’ouvrir et fermer la chronologie de l’élément en question, pour visualiser en détails les différentes propriétés qui sont animées au cours du temps.

edge_animate_animation_tomatePar exemple, sur l’image ci-dessus, on peut voir que plusieurs propriétés de l’élément tomate sont animées au fil du temps, illustrées par des bandes roses. Par contre, l’animation de la propriété Haut (le positionnement vertical de la tomate) s’effectue sur une période légèrement plus longue que les animations de Gauche et Rotation.

La bibliothèque

edge_animate_bibliothequeC’est là que sont stockés les éléments qui sont à votre disposition dans votre animation. Attention : la bibliothèque ne représente pas les éléments affichés dans votre scène, mais les éléments importés qui peuvent être utilisés.

Ajouter des graphiques à l’aide du +. D’un simple glisser-déposer sur la scène, votre élément devient visible dans votre animation et un calque est créé dans le panneau Eléments et également dans votre ligne de temps.

Les éléments (ou calques)

edge_animate_elements

Appelés éléments dans Adobe Edge Animate, il est plus logique de les nommer calques si vous connaissez Photoshop ou Illustrator.

Chaque élément de cette fenêtre peut être réorganisé dans la hiérarchie proposée pour passer les calques au dessus ou en dessous des autres, en premier ou arrière plan. Les 2 icônes à gauche du nom reflètent les deux mêmes icônes à gauche des éléments dans la timeline : l’oeil offre la possibilité d’afficher ou cacher un calque et le cadenas verrouille sa position, empêchant la sélection du calque sur la scène. Pratique si vous avez un élément en premier plan qui est déjà positionné : une fois verrouillé, vous pourrez sélectionner des éléments placés derrière lui pour les positionner sans interférer avec ce dernier.

Le panneau Propriétés

edge_animate_proprietesIl va de pair avec la ligne de temps. Dans la timeline, les propriétés des éléments sont modifiées d’un point-temps A à un point-temps B. C’est donc dans ce panneau propriétés que l’on définit les propriétés initiales et finales des éléments durant une animation.

Vous remarquerez que les propriétés à disposition sont en fait des propriétés CSS : largeur, hauteur, positionnement, mise à l’échelle, rotation… En comprenant cela, on comprend le pouvoir d’Adobe Edge Animate : le Javascript généré par le logiciel créée (tout simplement ?) des transitions entre plusieurs états d’éléments HTML, transitions faites sur des propriétés CSS. On obtient donc des animations fluides utilisant des technologies natives et modernes du web.

Les outils

edge_animate_outil

Nous avons vu comment importer des images à travers la bibliothèque. Les outils à disposition permettent de créer des formes simples (rectangle à angles droits, rectangle aux coins arrondis, rond et ellipse) et d’ajouter des éléments textuels.

Enfin, les 3 premières icônes permettent quant à elles de manipuler vos éléments : un outil de sélection simple permet de déplacer vos éléments, l’outil de transformation vous simplifie les démarches pour faire pivoter, augmenter ou diminuer la taille d’un élément et modifier ses inclinaisons. L’outil d’ecrêtage vous aide à replacer des graphiques à l’intérieur de leur contenant, pour rogner des images par exemple.

Le panneau Code

edge_animate_code

Grandement intégré dans Edge Animate, le Javascript et jQuery font partie intégrante de votre animation, que vous le sachiez ou non ! La fenêtre Code vous permet d’ajouter des événements qui prendront effet durant le déroulement de votre animation : lecture, arrêt, ouverture de lien, changement de texte, affichage ou masquage d’un élément… n’importe quelle interaction Javascript peut être écrite dans cette fenêtre.

Si vous êtes curieux et intéressés par les possibilités Javascript des animations dans Adobe Edge Animate, je vous invite à lire l’API JavaScript d’Edge Animate 1.5 dans la documentation officielle du logiciel.

Petit mais costaud

A l’aide des quelques panneaux et outils que l’on vient de décrire, Adobe Edge Animate nous offre une interface claire pour animer des éléments au cours du temps. Les possibilités actuelles sont très vastes : avec un peu d’imagination, vous pouvez créer des animations complexes en peu de temps, comme je l’ai fait sur Pourquoi-WordPress.fr.

A l’heure où j’écris, Edge Animate manque cependant de quelques fonctionnalités pour sérieusement concurrencer  les fonctionnalités de Flash : insertion de vidéo, prise en charge de graphiques SVG ou des canvas HTML5, gestion de l’audio… mais je suis persuadé que ces fonctionnalités verront le jour dans le logiciel. Son point fort étant l’utilisation poussée et l’influence du Javascript, il est cependant possible d’intégrer des fonctionnalités manquantes manuellement avec un peu de code.

La présentation étant faite, nous allons plonger dans l’animation de nos fruits et légumes et étudier le moteur d’animation d’Edge Animate. Restez connectés à ce  blog pour découvrir la suite !

Soyez le premier à publier un commentaire.

Laisser un commentaire