Le blog.

Créer des animations et transitions dans Adobe Edge Animate.

Plongez dans ce tutoriel et découvrez deux techniques faciles à prendre en main pour créer rapidement des animations Edge Animate : nous allons créer des transitions et animations avec le verrouillage, puis animerons le reste de notre composition en définissant des images-clés.

Après cette leçon, vous saurez utiliser Adobe Edge Animate pour créer des animations web de qualité !


Nous avons donc mis en place les différents fruits et légumes dans notre scène, accompagnés du texte d’accroche et du bouton d’action. Rien de dynamique pour l’instant, tout est fixe… Découvrons la force d’Adobe Edge Animate et apprenons à créer des animations.

Concept d’animation dans Adobe Edge Animate

Avant d’aborder les deux techniques existantes, expliquons les grandes lignes de fonctionnement d’une animation dans ce logiciel : une animation est en fait une transition d’un état à un autre. Ces états sont définis dans Adobe Edge Animate (et dans beaucoup d’autres logiciels d’animation) par des images-clés représentées par un petit losange présent un peu partout dans l’interface du logiciel.

Entre deux de ces losanges, Edge Animate va effectuer des transitions (représentées dans le scénario par des bandes de couleur). Un état initial suivi d’une transition pour arriver à un état final compose une animation. La force d’Edge Animate se trouve dans son automatisation des transitions et sa flexibilité.

  • automatisation car si les bons réglages sont activés, une nouvelle image-clé ajoutée engendrera automatiquement la génération d’une transition vers l’image-clé suivante ou précédente
  • flexibilité car les transitions et images-clés sont très facilement modifiables : clic, glisser-déposer ou déplacement vous permettent d’agir rapidement sur les valeurs en cours de transition, leur durée, le début et la fin de transition…

edge_animate_bouton_modeLes deux techniques que nous allons étudier créer automatiquement des animations entre deux images-clés car les deux boutons illustrés ci-contre sont activés : le Mode image-clé auto (première icone) va vous créer automatiquement des images-clés lorsque vous modifiez une propriété, que ce soit directement sur la scène avec les outils ou à travers le panneau Propriétés. Le Mode de transition automatique (seconde icone) générera tout seul les transitions lorsqu’une image-clé est ajoutée. Si vous voulez modifier une propriété globalement, pour toute votre animation, sans qu’une image-clé ou transition soit créée, il vous suffit de désactiver le bouton correspondant.

Après ce blabla explicatif, découvrons les deux techniques à notre disposition pour créer des animations.

Animer avec l’outil de verrouillage

edge_animate_verrouillageCe petit bouton active ou désactive le verrouillage dans votre ligne de temps. Une fois activé, les valeurs des propriété d’un élément sont enregistrés au moment spécifié alors que les valeurs de ces propriétés actuelles (au moment où la tête de lecture est placée) sont verrouillées.

Il faut donc penser à l’envers : placez votre tête de lecture à la fin de l’animation que vous voulez créer, et mettez en place l’élément à animé dans votre scène à son état final. Ensuite, déplacez la tête de lecture vers la gauche — dans le passé. Une bande de couleur bleue texturée de flèches devrait apparaître au-dessus de la tête de lecture.

A ce nouveau moment-temps, modifiez toutes les propriétés de l’élément afin de définir l’état initial. A chaque valeur de propriété modifiée, vous remarquerez qu’Adobe Edge Animate créée des bandes de couleurs et des images-clés : cela signifie que la propriété modifiée évolue au cours du temps et qu’une animation a été créée ! Magique, non ?

Les bandes de couleurs représentent les transitions entre deux images-clés.
Les bandes de couleurs représentent les transitions entre deux images-clés.

Animer à l’aide des images-clés

edge_animate_losangeCette technique est, selon moi, un peu plus flexible : elle consiste à enregistrer les valeurs des propriétés à modifier à des moments précis (par des images-clés). Les transitions entre chaque état seront créées automatiquement si le Mode de transition automatique est activé (cf explication ci-dessus).

Pourquoi plus flexible ? Car vous pouvez définir l’état initial d’un objet puis définir son état final ou inversement, puis ajouter une étape au milieu de cette transition créée.

Pas besoin d’activer le verrouillage, il faut tout simplement penser à placer le curseur au bon moment pour modifier les propriétés à animer. Placez la tête de lecture au moment ou vous souhaitez que votre animation commence et mettez en place l’élément à animer : placement, rotation, inclinaison, opacité…

Dans le panneau propriété, cliquez sur le losange à côté de chaque propriété que vous souhaitez modifier au cours du temps. Vous souhaitez faire glisser votre élément de la gauche vers la droite en augmentant son opacité ? Cliquez sur le losange à côté de la propriété Opacité et sur le losange à côté de la propriété X. Vous remarquerez qu’un losange apparaît également dans votre scénario à l’endroit — ou plutôt au moment — ou votre tête de lecture est placée. Cela signifie que la valeur que vous avez définie pour cette propriété à été enregistrée à ce moment spécifique. 

Enfin, déplacez votre tête de lecture dans le futur, à l’endroit ou vous souhaitez terminer l’animation de votre élément. Cette fois, modifier les valeurs des propriétés auxquelles vous venez d’assigner des images-clés. Immédiatement, Adobe Edge Animate créée une nouvelle image-clé et génère une animation/transition entre les deux images-clés. Votre propriété est donc animée au cours du temps, de la valeur initiale définie précédemment à la valeur que vous venez d’entrer. Quoi de plus simple !

Cette technique peut être utilisée dans l’autre sens : au lieu de définir l’état initial puis final de votre élément comme on vient de le voir, vous pouvez suivre la même logique pour d’abord définir l’état final et ensuite l’état initial. N’oubliez pas de placer votre tête de lecture sur le moment à modifier pour créer des nouvelles images-clés.

Egayez vos animations avec des accelerations

edge_animate_acceleration_easingDans Adobe Edge Animate, les animations de base sont linéaires : cela signifie que l’évolution des valeurs des propriétés au cours du temps se fait à vitesse constante. Hors, un objet animé immédiatement et à la même vitesse durant la période d’animation parait très rigide et son animation semble superficielle. Heureusement, Edge Animate utilise jQuery Easing pour modifier le comportement d’une animation au cours du temps : animation lente au début, puis graduellement plus rapide, rebond, acceleration ou décélération … tout est possible !

Pour trouver l’acceleration parfaite, vous pouvez les visualiser et les tester dans votre navigateur ici ou .

Sachez qu’une acceleration peut être attribuée à l’ensemble des propriétés composant une animation (comportement par défaut) si vous sélectionnez la barre colorée principale placée en haut de toutes les barres colorées des animations de chaque propriété. En revanche, si vous ne sélectionnez qu’une seule bande colorée d’une propriété spécifique et appliquez une acceleration, elle ne sera effective que pour la propriété choisie.

Si vous avez apprécié ce tutoriel, faites-nous partager vos créations animées dans les commentaires ci-dessous !

10 commentaires ont été rédigés, ajoutez le votre.

  1. Muriel Répondre

    Bonjour,
    J’ai trouvé très clairs vos tutos qui m’ont été utiles pour prendre en main ce logiciel. Je viens du print et donc c’est une nouvelle logique pour moi. Je me heurte à une difficulté : Comment faire pour agrandir la largeur de la scène puis recentrer tous les éléments de l’animation (c’est pour qu’il y ait plus d’espace libre à gauche et à droite) sans que le changement de coordonnées ne bouleverse l’animation (décalages). Merci !

    • Pierre Répondre

      Bonjour Muriel,
      Content que ces articles vous plaisent !
      Pour agrandir la scène, il faut ne sélectionner aucun élément (cliquer sur le fond gris) et dans le panneau de Propriétés les dimensions de la scène seront éditable (cf http://img.saika.li/SaDu).
      Par contre en effet, vu que l’agrandissement se fait du coin supérieur gauche, il faudra recentrer vos éléments au risque de casser les animations. J’ai bien peur qu’il faille redéfinir les positions initiales/finales des animations !
      Vous pouvez par contre essayer de copier tous les éléments/animations et les coller sur une nouvelle scène ? Il serait bon d’essayer également dans le menu Edition > Collage spécial, différents « copier/coller » existent et pourraient vous aider.

  2. Muriel Répondre

    Bonjour,
    Merci pour votre réponse. J’ai essayé aussi en copiant sur une nouvelle scène, mais il faut modifier manuellement la valeur x de départ de chaque élément. C’est fastidieux.

    • Ismael13 Répondre

      Bonjour Muriel,

      Je pense qu’il faudrait d’abord selectionner toutes vos animations:
      > Soit en maintenant appuyer la souris (clic gauche sur la scène) puis glissez pour englober les animations.
      >Soit par la fenêtre éléments puis selectionner tous les élément de la scène.

      Puis

      Clic droit grouper les éléments dans une div.
      (De façon à ce que toutes les animations se déplace en même temps)

      Puis utiliser les repères commentés pour centrer. ( Menus> Affichage> repère commenté)
      Ce sont des repères qui apparaissent sur la scène couleur violette ou rose :)

      • Pierre Répondre

        Bon à savoir, merci Ismael !

        • Ismael13 Répondre

          De rien,
          C’est vous qui m’avait fait découvrir ce logiciel,
          J’ai suivi votre tuto (encore merci) et je me suis perfectionné par la suite…
          Donc en mon tour, je partage :)

  3. Muriel Répondre

    Merci de ce bon conseil, le groupement dans une div. améliore grandement les choses !

  4. Muriel Répondre

    Encore une question. Comment faire pour que dans le dossier d’export « images » pour le web il n’y ait que les images qui sont utilisées dans l’animation. Actuellement il y a dans ce dossier toutes les images que j’ai chargées dans la bibliothèque, ce qui est inutilement lourd. Merci !

    • Pierre Répondre

      J’ai beau cherché, hélas je n’ai pas trouvé telle fonctionnalité …

  5. Muriel Répondre

    Ce n’est sans doute pas très orthodoxe mais j’ai finalement copier tous les éléments et coller dans un nouveau document. Seules les images utiles se sont retrouvées dans la biblio et du coup dans le dossier d’export images.
    Merci encore à vous et bravo pour votre blog et vos réalisations !

Laisser un commentaire