Le blog.

5 astuces et bonnes pratiques Adobe Edge Animate.

Comme beaucoup de logiciels Adobe, Edge Animate peut demander un peu de temps avant d’être parfaitement dompté. C’est pourquoi je partage ici quelques trucs et astuces que j’ai pris l’habitude d’effectuer lors de mes aventures avec ce logiciel d’animation web afin de pouvoir enseigner quelques bonnes pratiques de développeur Adobe Edge Animate que j’estime utiles.

Trucs et astuces pour agiliser et maîtriser la création d'animations web avec Edge Animate

Entre son interface et ses multiples fonctionnalités, Edge Animate est comme tous ses cousins logiciels Adobe : pas évident à maîtriser ! Alors afin de commencer sur de bonnes bases, découvrez ici quelques astuces d’intégrateur freelance Adobe Edge Animate qui, si vous les intégrez dans votre processus de création d’animations web, vous premettront de travailler efficacement, rapidement mais surtout sereinement.

Astuce n°1 : abusez des symboles

Selon la documentation officielle que fournit Adobe…

Un symbole est un objet artistique que vous pouvez réutiliser dans un document. Par exemple, si vous créez un symbole à partir d’une fleur, vous pouvez ajouter plusieurs instances de ce symbole à l’image sans devoir effectivement ajouter l’objet artistique complexe à maintes reprises. Chaque instance du symbole est liée au symbole dans le panneau Symboles ou à une bibliothèque de symboles. L’utilisation de symboles peut vous faire gagner du temps et réduire considérablement la taille du fichier.

Cette définition est très correcte et indique qu’un élément répété plusieurs fois dans une animation Edge Animate doit être transformé en symbole afin de simplifier sa duplication et ses modifications futures. Ainsi, 50 instances d’un même élément pourront toutes très rapidement être modifiées en éditant le symbole qui les compose.

Mais étant donné qu’un symbole possède sa propre ligne de temps, il est aussi très pratique d’utiliser des symboles pour sectoriser chaque partie d’une animation et profiter de plusieurs lignes de temps. Petite explication concrète…

Astuce 1.1 : un symbole par écran

Imaginez que votre animation soit une suite de plusieurs scènes toutes reliées les unes aux autres. Par souci d’organisation, j’ai l’habitude de stocker chaque animation (qu’on pourrait aussi appeler « écran » ou « slide ») dans son propre symbole : ainsi, chaque écran possède sa ligne de temps et ses calques qui le composent ne sont pas mélangés avec les éléments des autres écrans/slides.

Comment s'y retrouver au milieu de tous ses calques dans Adobe Edge Animate ?
Comment s’y retrouver au milieu de tous ses calques ?

La scène principale (le fameux Stage) n’est alors composée que de X symboles qui sont les différentes parties composant votre animation Edge Animate. C’est bien plus propre et bien plus clair pour s’y retrouver.

Les animations Edge Animate peuvent très rapidement accumuler bon nombre de calques et d’animations : cette technique s’avère alors très pratique pour séparer chaque partie de l’animation et ainsi avoir une vision plus limpide de chaque section. Les calques d’une partie ne sont pas mélangés avec ceux d’une autre partie, la timeline est donc simplifiée et il est bien plus simple de se repérer.

Besoin d’éditer une partie de votre animation ? Il suffit d’éditer le symbole en question et vous vous y retrouverez facilement car la liste des calques s’en verra réduite. Et si vous utilisez des actions Javascript, il sera également plus simple d’aller chercher dans la petite fenêtre Code d’Edge Animate car la sélection d’un élément se fera hiérarchiquement ; vous sélectionnerez d’abord les symboles des scènes avant d’aller chercher parmi les calques et symboles de cet écran, plutôt que d’avoir à sélectionner un symbole dans une liste sans fin…

Abusez donc des symboles aussi bien pour dupliquer des éléments répétés dans une scène, mais également pour créer de multiples scènes dans une animation parente pour éviter une seule et unique timeline pleine de calques et d’animations difficiles à maintenir.

Astuce 1.2 : utilisez le fond pour définir les limites larges d’un symbole

Toujours dans cette logique d’écrans-symboles et selon vos habitudes, il se peut que vous créiez un symbole à partir de plusieurs éléments/calques correctement placés dans votre scène. Cela fonctionne et s’avère pratique si l’élément le plus large est déjà présent lors de la création du symbole. En effet, Adobe Edge Animate définit les limites (taille) et l’origine (coin supérieur gauche) d’un symbole à sa création en fonction du calque situé le plus à gauche et celui le plus en haut. Si, en éditant le dit symbole, vous ajoutez d’autres calques situés en dehors de cette zone définie à la création du symbole, le magnétisme des règles du symbole ne prendra pas en compte la nouvelle origine, et la taille du symbole ne sera pas mise à jour.

Cela peut-être perturbant et parfois poser problème si votre symbole est en overflow:hidden par exemple.

L’origine (coin supérieur gauche) étant définie à la création, veillez à ajouter le calque le plus grand (si il couvre tout le fond par exemple) ou les calques des 4 bords (le plus en haut, le plus à droite, le plus en bas, le plus à gauche) avant de transformer un ou plusieurs calques en un symbole.

Lorsque je créée mes différents symboles d’écrans de mon animation, je prends l’habitude de glisser dans la scène l’image de fond couvrant toute la zone de mon animation. Même si ce fond n’est pas présent dans mon symbole, cela me permet d’avoir un écran faisant la même taille que mon animation ; le positionnement et magnétisme d’Edge Animate sera alors plus simple.

Astuce 1.3 : positionnez-vous correctement sur la timeline parente avant l’édition d’un symbole enfant

Vous remarquerez qu’en double-cliquant sur un symbole dans Adobe Edge Animate, son édition est simulée au moment T où vous êtes dans la scène parente.

Selon les synchronisations des différentes animations, il peut être utile de savoir cela afin de simuler en arrière-plan le moment où le symbole apparaîtra et s’animera. C’est surtout utile pour positionner correctement certains éléménts par rapport à ce qui se passe derrière, dans une autre animation.

Astuce n°2 : nommez vos calques

Nommer ses calques d'éléments d'animations web dans Adobe Edge AnimateJ’ai hésité à mentionner quelques choses d’aussi simple, mais cette petite astuce d’intégrateur Adobe Edge Animate est si efficace qu’elle en devient incontournable !
Attribuer un nom explicite à chaque calque dans vos animations Edge Animate vous permettra à l’avenir de retrouver rapidement et sans encombre tel ou tel élément d’une séquence.

Notez qu’en éditant le nom via la fenêtre Calques, vous éditerez aussi l’ID (identifiant) du dit élément.

Les éléments d’une animation web Edge Animate s’accumulent très vite. Prenez l’habitude de nommer vos calques et symboles correctement pour vous y retrouver plus tard, vous vous remercierez !

Astuce n°3 : incluez jQuery pour profiter de balises HTML dans du texte

Auparavant, Adobe Edge Animate intégrait lui-même sa propre version de jQuery. Depuis quelques versions, le logiciel d’animation web n’inclut plus jQuery. Si vous êtes un adepte de cette libraire Javascript, inclure jQuery à votre animation via l’onglet Scripts vous permettra de simplifier quelques travaux dans votre animation.

Grâce à jQuery, vous pourrez par exemple interpréter les balises HTML que vous ajouterez dans vos blocs de texte, via ces quelques lignes de code :


Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {
	$('.html').each(function(){
		$(this).html($(this).text());
	});
});
//Edge binding end

(Attention : le commentaire final « //Edge binding end » n’est pas qu’un simple commentaire Javascript, il est primordial pour ne pas qu’Edge Animate affiche une erreur.)

Autant de calques simplement pour avoir du texte en gras dans Adobe Edge Animate
Autant de calques simplement pour avoir du texte en gras ?

Dans la fenêtre Code (mode Code complet) de votre animation Edge Animate, ajoutez ces quelques lignes pour que jQuery cible tous les blocs possédant la classe CSS html et transforme le contenu du bloc en contenu HTML.
Vous pourrez ainsi truffer vos blocs de texte de balises HTML en tout genre (lien <a>, paragraphe <p>, liste <ul> ou <ol>, <hr> ou <div>…). Cette petite astuce est plus que pratique : plus la peine de créer des groupes de calques ou symboles composés d’une multitude de calques textuels pour faire apparaître quelques mots en gras, en italique ou un lien. Désormais, vous pouvez écrire votre propre HTML dans vos blocs de texte pour le formater facilement !

L'inconvénient...
L’inconvénient…

Le revers de la médaille : les balises extra que vous ajouterez dans votre bloc de texte ne seront pas interprétées directement dans le logiciel Adobe Edge Animate. Elles seront donc visibles et lisibles dans l’interface du logiciel. Il faudra donc faire preuve d’imagination et favoriser les tests en live de vos animations dans le navigateur web pour visualiser le résultat visuel réel d’une telle modification.

Astuce n°4 : ajoutez du CSS personnalisé dans vos animations Edge

En complément de l’astuce précédente, il est très utile de déclarer des stylisations CSS dans vos animations Edge Animate. C’est très simple à réaliser : tout en gardant votre animation ouverte (et fraîchement enregistrée) dans le logiciel d’Adobe, ouvrez le fichier index.html de cette dernière dans votre éditeur de code préféré. Dans le <head> du document, ajoutez dans une balise de style (<style>…</style>) les règles CSS à inclure dans votre animation. Une fois terminé, enregistrez le fichier index.html et revenez dans le logiciel Adobe Edge Animate où votre animation sera restée ouverte. Une fenêtre s’affichera ; le logiciel devrait remarquer les changements que vous avez effectués et vous demandera si cela est normal. En confirmant, l’animation se rechargera et vos stylisations CSS fraîchement ajoutées seront prises en compte dans cette dernière !

Ajouter une classe CSS à un élément dans Adobe Edge Animate
Ajouter une classe CSS à un élément

En ajoutant vos propres classes CSS sur les éléments de votre animation ou en incluant vos propres balises HTML dans des blocs de texte, vous pouvez alors facilement cibler vos éléments pour les styliser dans le CSS d’index.html.

Ajouter des styles CSS personnalisé dans vos animations Edge Animate
Ajouter votre balise avant le code Adobe Edge Runtime
Via le CSS ajouté dans index.html, vous pouvez désormais écraser les propriétés CSS définies dans Edge Animate mais également étendre les fonctionnalités du logiciel ne proposant pas toutes les options CSS dans son interface visuelle.

Astuce n°5 : gagnez du temps sur des tâches répétitives

N’oubliez pas que nous créons des animations purement web avec Adobe Edge Animate. Cela signifie que les éléments animés sont des balises HTML dont leurs propriétés CSS se voient évoluer au cours du temps grâce à du Javascript.

Ouvrez donc le fichier index_edge.js pour facilement dupliquer de nombreuses div et modifier des classes en vitesse. Les différents symboles, groupes et calques sont déclarés dans ce fichier Javascript assez clairement, tous encapsulés dans leur propre objet aux diverses propriétés.

Vous pouvez donc facilement :

  • éditer du texte via la propriété text
  • ajouter ou supprimer des classes CSS via la propriété userClass
  • modifier le positionnement ou la taille via la propriété rect
  • modifier l’ID d’un élément via la propriété id

… et cette liste est non-exhaustive !

Bonus : évitez tout accent dans les noms de fichier

Pas vraiment une astuce mais surtout un constat : Adobe Edge Animate est — hélas — pour l’instant assez instable et les bugs sont courants. C’est triste et énervant, mais c’est comme ça.
J’ai notamment remarqué que la présence d’accent dans un nom de dossier parent à votre animation peut rendre Edge totalement fou (« C++ Exception Error » ou « Une erreur s’est produite, veuillez enregistrer votre travail et redémarrer Edge Animate »).

Supprimer tout accent dans vos dossiers où est enregistré votre animation (et même les dossiers supérieurs) vous évitera bien des soucis. Evitez également de déplacer à la souris trop de calques à la fois mais préférez l’utilisation de vos flèches clavier (avec SHIFT enfoncé pour bouger vos calques de 10 pixels vers la gauche ou la droite).


J’espère que ces quelques astuces d’intégrateur d’animations Edge vous simplifieront désormais l’utilisation de ce logiciel. Faites comme moi et partagez avec nous vos meilleures découvertes Edge Animate en commentaire, ci-dessous !

Un commentaire a été rédigé, ajoutez le votre.

  1. Fred Perat Répondre

    merci !

Laisser un commentaire