Il existe deux façons de créer un projet Edge Animate. La première option consiste simplement à cliquer sur Créer dans l’écran d’accueil. Un projet Edge Animate vierge sera alors immédiatement créé. La deuxième méthode de création d’un projet Edge Animate consiste à utiliser le menu Fichier. Il suffit de cliquer sur Fichier, puis sur Nouveau pour obtenir exactement le même résultat.

Remarque :

Nous pouvons également utiliser le raccourci clavier : Ctrl + N (pour Windows) ou Commande + N (pour Mac).

Quelle que soit la méthode choisie, un nouveau projet sera désormais ouvert dans Edge Animate. Au début, ce projet vous paraîtra vide, car il se compose essentiellement d’un seul symbole de scène vierge. Cette scène représente le seul élément HTML que nous pouvons localiser dans le fichier HTML généré par Edge Animate lors de son enregistrement, comme le montre la capture d’écran suivante :

Enregistrer

Cette option enregistre le document actif s’il a déjà été enregistré dans le système de fichiers, ou invite l’utilisateur à indiquer un nom de fichier et un emplacement pour enregistrer le document, s’il s’agit d’un nouveau projet.

Remarque :

Le raccourci clavier pour cette option est Ctrl + S (pour Windows) ou Commande + S (pour Mac).

Enregistrer sous…

Cette option offre la même fonctionnalité qu’Enregistrer, mais demande toujours à l’utilisateur d’indiquer un nom de fichier et un emplacement dans une boîte de dialogue système. Cela s’avère utile lors de l’enregistrement de versions distinctes du même projet, ou si vous souhaitez simplement enregistrer le projet à un nouvel emplacement.

Remarque :

Le raccourci clavier pour cette option est Ctrl + Maj + S (pour Windows) ou Commande + Maj + S (pour Mac).

Dans le cas d’un nouveau projet, une boîte de dialogue système s’affiche pour les deux options. Nous voyons dans la capture d’écran précédente que nous enregistrons en fait un fichier .html. Il est important de savoir que pour les projets Edge Animate, lorsque nous travaillons dans l’environnement de création Edge Animate, nous travaillons vraiment en temps réel avec le contenu généré.

Outils de mise en forme et d’assistance

Lorsque vous travaillez avec un élément sur la scène, il est utile de disposer d’outils qui vous aident à effectuer la mise en forme et le positionnement des éléments en question. Edge Animate est équipé d’un certain nombre d’outils qui nous assistent dans cette tâche : l’outil Préférences de mise en forme, les Règles et les Repères.

Outil Préférences de mise en forme

L’outil Préférences de mise en forme nous permet de prendre des décisions concernant les propriétés par défaut de certains types d’éléments lors de leur création ou de leur importation. L’outil lui-même est situé sur la barre d’outils, à droite des nuanciers de couleur par défaut. Il se présente sous la forme d’une petite règle dans la barre d’outils et indique la mise en forme :

Lorsque cet outil est activé, la petite incrustation qui apparaît permet de définir un certain nombre de préférences de mise en forme pour le projet en cours. La plupart de ces préférences concernent l’unité de mesure des éléments, à savoir en pixels ou en pourcentages :

Remarque :

Ces choix n’affectent que les nouveaux éléments créés dans notre composition ou récemment importés dans cette dernière. Les éléments actuellement en place conservent leurs paramètres.

Le tableau suivant détaille les choix qui s’offrent à nous lorsque nous définissons les préférences de mise en forme pour une composition Edge Animate. Bien que les unités utilisées pour le positionnement horizontal et vertical, la largeur et la hauteur correspondent à la même description, ce sont des valeurs distinctes. Vous pouvez d’ailleurs vous en rendre compte lorsque vous ajustez ces paramètres sur la scène.

Préférence Description
Alignement de l’angle Sélectionne l’angle sur lequel effectuer l’alignement par défaut.
Unités de position horizontale Permettent de basculer entre les pixels et les pourcentages pour les nouveaux éléments.
Unités de position verticale Permettent de basculer entre les pixels et les pourcentages pour les nouveaux éléments.
Unités de largeur Permettent de basculer entre les pixels et les pourcentages pour les nouveaux éléments.
Unités de hauteur Permettent de basculer entre les pixels et les pourcentages pour les nouveaux éléments.
Utiliser la balise « img » pour les images Lors de l’importation d’images, utilisez le type de balise img.
« auto » pour la largeur d’image Lors de l’importation d’images, définissez la largeur sur « auto ».
« auto » pour la hauteur d’image Lors de l’importation d’images, définissez la hauteur sur « auto ».

Règles

Lorsqu’elles sont activées, les Règles sont définies le long de l’axe supérieur gauche de la scène du projet, comme c’est le cas pour les autres applications de création Adobe. Elles vous aident à visualiser les mesures entre les éléments, la relation avec le point d’alignement de la scène, l’alignement des éléments, et bien plus encore.

Les Règles servent également à générer et positionner les Repères manuels, que nous allons examiner dans la section suivante.

Remarque :

Pour activer ou désactiver les règles, choisissez l’option Règles dans le menu Affichage de l’application, ou utilisez les raccourcis clavier : Ctrl + R (pour Windows) ou Commande + R (pour Mac).

Repères

Les Repères sont utilisés conjointement avec les Règles pour tracer et positionner plus précisément des éléments sur la scène.
Ils peuvent également servir à délimiter les zones où dessiner des éléments, à l’aide d’outils tels que l’outil Rectangle ou l’outil Rectangle arrondi :

Pour créer un Repère, vérifiez que les Règles ont été activées et sont visibles dans le panneau Scène. Cliquez sur une règle et faites glisser le nouveau Repère le long de cet axe spécifique. Une fois que le Repère est positionné exactement à l’endroit souhaité, relâchez le bouton de la souris pour déposer le Repère.

Une fois que le Repère est placé, il peut rester un Repère pixellisé ou être transformé en Repère en pourcentage afin de venir compléter les outils de mise en forme réactive. Pour convertir un Repère pixellisé en Repère en pourcentage, placez le curseur sur le Repère et faites un clic droit. Nous disposons désormais de l’option Convertir le repère en pourcentage. Le Repère apparaît alors plus bleu sarcelle que violet pour le distinguer du Repère pixellisé. Le redimensionnement de la scène déplace également le Repère, car il est maintenant positionné en fonction du pourcentage et non des pixels absolus.

Pour supprimer un Repère, il suffit de cliquer dessus et de le refaire glisser dans une Règle. Les Repères peuvent être verrouillés à partir de la zone Affichage du menu de l’application. L’alignement peut également être contrôlé à partir du menu Affichage.

Repères commentés

Lorsque les Repères commentés sont activés, si vous faites glisser des éléments autour de la scène, des repères temporaires s’affichent pour vous aider à positionner les éléments. Ces repères seront alignés sur les autres éléments ou disposés de sorte à s’aligner sur certains aspects de la scène elle-même. Dans la capture d’écran suivante, par exemple, des Repères commentés apparaissent lorsqu’un élément est déplacé vers le centre de la scène, nous informant que nous serons en mesure de centrer l’objet s’il est déposé à cet endroit.

Remarque :

Les Repères commentés peuvent être désactivés à partir du menu de l’application sous Affichage | Repères commentés. Raccourci clavier : Ctrl + U (pour Windows) ou Commande + U (pour Mac).

Importation d’actifs externes

Outre la création d’éléments de texte et vectoriels de base dans une composition Edge Animate, nous avons également la possibilité d’importer des actifs externes en vue de les utiliser dans un projet.

Ces actifs peuvent avoir été préparés dans une autre application telle qu’Adobe Photoshop, Illustrator ou Fireworks.
En règle générale, nous ne voulons pas nous contenter d’utiliser ces actifs importés comme de simples formes générées par Edge Animate, mais cela dépend du projet.


Les types de fichiers qui peuvent être importés dans Edge Animate sont les suivants :

  • SVG (Scalable Vector Graphics)
  • PNG (Portable Network Graphics)
  • JPEG (Joint Photographic Experts Group)
  • GIF (Graphics Interchange Format)

Importation d’images bitmap

Une fois qu’un fichier d’image est importé dans un projet Edge Animate, il peut être manipulé, animé et scripté comme n’importe quel autre élément. Pour importer un fichier d’image bitmap dans Edge Animate, effectuez les actions suivantes :

  1. Accédez au menu de l’application Edge Animate.
  2. Sélectionnez Fichier | Importer….
  3. Une fenêtre de navigateur de fichiers système s’affiche. Recherchez le fichier .png, .gif ou .jpg que vous souhaitez importer.
  4. Sélectionnez le fichier et cliquez sur Ouvrir.
  5. Le fichier sera alors placé sur la scène et également ajouté au projet Bibliothèque sous Actifs. A partir de là, nous pouvons ajouter plusieurs instances de cet actif à la scène.

Remarque :

Notez que, comme pour les fichiers SVG, l’instance de fichier bitmap placée sur la scène utilisera les dimensions exactes du fichier importé lui-même ; elle risque donc de chevaucher les limites de la scène. Pour résoudre ce problème, vous pouvez manipuler l’élément à l’aide du panneau Propriétés.

Maintenant que l’actif d’image bitmap a été importé et qu’une instance de cet actif se trouve sur la scène, nous pouvons utiliser les outils Sélection et Transformation pour effectuer des manipulations telles que le redimensionnement, la mise à l’échelle et l’inclinaison, comme nous le faisons avec des éléments de texte ou de rectangle. Toutefois, contrairement aux éléments vectoriels, la création d’artefacts visibles, de blocs et d’autres déformations se produisent avec les objets bitmap.

Remarque :

Il est également possible de simplement glisser-déposer un fichier .jpg, .png ou .gif depuis l’explorateur de fichiers du système d’exploitation vers la scène. Cette action aura le même effet que celui décrit ci-dessus lors de l’utilisation de la commande Importer... de l’application, mais nous serons en mesure de placer précisément l’image importée sur la scène lors de l’action Glisser-déposer.

Animation dans Edge Animate

Il existe beaucoup d’applications qui permettent à l’utilisateur de composer des séquences animées. Les utilisateurs d’Adobe Edge Animate peuvent avoir l’habitude d’utiliser d’autres programmes tels que Director, Flash Professional, After Effects, ou même Photoshop. Toutes ces applications gèrent l’animation de manière légèrement différente, mais elles ont toutes en commun certains aspects de leurs techniques d’animation et de leurs outils.

Comme de nombreux programmes d’animation numérique, Edge Animate emploie le concept « d’interpolation » entre les images-clés. Dans une animation classique basée sur les cellules, un animateur principal trace certaines images-clés pour une séquence d’animation, tandis que les cadres situés entre ces images-clés sont créés par un apprenti ou des membres de l’équipe d’animation situés à un niveau inférieur dans la hiérarchie. L’objectif est de toujours créer une transition en douceur entre chaque image-clé créée par l’animateur principal, générant ainsi une séquence d’animation terminée.

Dans Edge Animate, ce processus s’effectue par programmation. Au fur et à mesure que les images-clés sont placées le long du scénario, Edge Animate enregistre les modifications des valeurs de propriété sous forme de transitions à l’emplacement de la tête de lecture (à un instant donné). En tant qu’auteurs, nous avons la possibilité supplémentaire de fournir au moteur d’interpolation des jeux d’instructions basés sur diverses équations d’accélération. Cela permet un flux plus naturel entre les images-clés et peut également servir à obtenir certains effets comme un mouvement élastique ou de rebond.

Scénario Edge Animate

Le scénario est l’endroit où sont orchestrés tous les mouvements dans une composition Edge Animate. Le scénario lui-même partage des concepts et des constructions avec d’autres applications Adobe, notamment Flash Professional et After Effects.

Remarque :

Contrairement au scénario basé sur les cadres dans Flash Professional, le scénario Edge Animate se base uniquement sur le temps.

Commandes de lecture

Les commandes de lecture dans Edge Animate sont toutes regroupées dans l’angle supérieur gauche ou le panneau Scénario. Ces commandes permettent d’accéder rapidement aux nombreuses options de lecture disponibles par l’intermédiaire du scénario.

Heure

Dans Edge Animate, l’heure est indiquée au format décimal standard (mm:ss.ddd) et s’affiche sous cette forme dans la commande Heure. Lorsque la tête de lecture se déplace le long du scénario, les informations contenues dans cet écran sont mises à jour en conséquence. Un utilisateur peut faire défiler la commande vers la gauche ou vers la droite pour régler l’heure actuelle, ou simplement cliquer dessus afin de la rendre modifiable.

Notez que les commandes d’heure dans Edge Animate sont en fait regroupées le long de la scène et sont accessibles directement sous ce panneau. Les commandes sont également subdivisées pour permettre de modifier séparément l’heure de la tête de lecture (en jaune) et celle du verrouillage (en bleu), lorsqu’elles sont activées.

Options du scénario

Ces options peuvent être activées ou désactivées selon les besoins du moment, car elles exécutent tout un ensemble de fonctions liées au scénario.

Ces options sont les suivantes :

  • Mode image-clé auto (K) : cette option permet à Edge Animate de générer automatiquement des images-clés pour diverses propriétés alors qu’elles sont ajustées le long du scénario. Lorsque ce mode n’est pas sélectionné, les images-clés doivent être insérées manuellement.
  • Mode transition auto (X) : lorsque ce mode est activé, Edge Animate est informé qu’il doit utiliser des transitions immédiates entre les réglages de propriété d’élément lors de leur animation.
  • Activer/Désactiver le verrouillage (P) : active ou désactive le verrouillage. Nous aborderons le verrouillage plus en détail prochainement.

Un certain nombre d’options figurent également au bas du scénario :

  • Afficher uniquement les éléments animés : lorsque cette option est sélectionnée, seuls les éléments dont les propriétés sont animées s’affichent dans le scénario. Les éléments statiques (tels qu’une image d’arrière-plan, par exemple) sont masqués.
  • Alignement du scénario : active ou désactive l’alignement du scénario.
  • Afficher la grille : active ou désactive la grille du scénario et permet de définir les unités d’espacement de la grille.

En savoir plus sur la commande Afficher la grille

Nous pouvons également définir l’espacement de la grille en cliquant sur la petite flèche située immédiatement à droite de cette icône, afin d’accéder à une petite liste d’options. Nous pouvons choisir d’afficher les lignes de la grille sur certaines mesures dans le scénario.

Commandes du scénario

En général, nous utilisons principalement quatre commandes dans le scénario : la tête de lecture, le verrouillage, le zoom et un ensemble de commandes de grille. Le fonctionnement de ces commandes varie énormément, car certaines sont utilisées pour la lecture, certaines pour l’animation et d’autres sont simplement là pour améliorer notre flux de travaux global. Cependant, toutes sont très utiles.

Tête de lecture

La tête de lecture est le plus grand des deux éléments du scénario. Elle est représentée par une ligne rouge qui indique l’heure actuelle. Nous pouvons cliquer sur la tête de lecture et la faire défiler vers l’arrière ou l’avant pour modifier l’heure actuelle. Lorsqu’une animation est en cours de lecture via Edge Animate, la tête de lecture se déplace en suivant l’heure en cours.

Remarque :

Normalement, la tête de lecture et le verrouillage sont synchronisés. Si tel n’est pas le cas, ils peuvent être resynchronisés via le menu de l’application : Scénario | Activer/Désactiver le verrouillage.

Verrouillage

Le verrouillage est une commande propre à Edge Animate. Il permet de verrouiller l’état en cours des propriétés d’élément pendant un certain temps, tout en utilisant la tête de lecture pour déterminer à quel moment l’animation doit se terminer. Le curseur de verrouillage peut être positionné avant ou après l’heure indiquée par la tête de lecture, mais il indique toujours le point de départ de l’animation, la tête de lecture indiquant la fin. La modification des propriétés d’élément alors que le verrouillage n’est pas synchronisé va créer une animation de ces propriétés commençant au curseur de verrouillage et se terminant à l’emplacement de la tête de lecture. Nous pouvons ainsi créer rapidement et librement une animation qui est étroitement contrôlée dans le scénario.

Remarque :

Pour synchroniser ou désynchroniser rapidement le verrouillage à partir de la tête de lecture, nous pouvons cliquer deux fois sur la tête de lecture pour basculer entre les deux états. Nous pouvons également utiliser le raccourci clavier (P) pour accomplir cette tâche, ou même utiliser la commande correspondante dans le scénario.

Lorsque le verrouillage est activé, la direction de l’animation est indiquée par une bande de chevrons de couleur dans le scénario. La couleur sera jaune ou bleu, selon la direction du mouvement ; le bleu indique un mouvement vers la gauche du curseur de verrouillage, tandis que le jaune indique un mouvement vers la droite.

Commandes de zoom

Il existe deux commandes de zoom dans Edge Animate, qui nous permettent de développer ou de réduire le scénario. L’une est le bouton Zoom sur le scénario pour ajuster, qui apparaît sous la forme de deux flèches dans l’angle inférieur droit du scénario. Elle permet de développer ou de réduire la taille du scénario visible pour l’adapter à la largeur du panneau Scénario. Elle peut fournir un bon aperçu de l’ensemble de l’animation.

La deuxième commande est un curseur qui apparaît directement à droite et permet à l’utilisateur de contrôler manuellement l’échelle du scénario pour s’adapter à la tâche qu’il essaie spécifiquement d’accomplir à un moment donné.

Images-clés

A l’instar de leur représentation dans After Effects, les images-clés dans Edge Animate apparaissent le long du scénario sous forme de petits losanges. Contrairement aux images-clés dans Flash Professional, les images-clés Edge Animate sont directement liées à la propriété en cours de modification et non à l’élément lui-même. Cela permet des ajustements précis de propriété dans le scénario pour un élément donné. Elles constituent un moyen très flexible et puissant d’animer les propriétés d’élément sélectionnées !

Il existe un certain nombre de raccourcis clavier dans Edge Animate, qui facilitent la navigation dans le scénario, en particulier lors du passage d’une image-clé à l’autre.

Commande Raccourci
Accéder à l’image-clé précédente Ctrl + Flèche vers la gauche (Windows), Commande + Flèche vers la gauche (Mac)
Accéder à l’image-clé suivante Ctrl + Flèche vers la droite (Windows), Commande + Flèche vers la droite (Mac)

Création de mouvement

L’animation de propriétés d’élément dans Edge Animate est assez simple. Dans cette section, nous allons passer en revue un certain nombre de méthodes de base pour animer des éléments dans le scénario Edge Animate. Une fois en utilisant seulement la tête de lecture et une autre, en utilisant la tête de lecture associée au verrouillage. En effectuant la même animation à l’aide des deux méthodes, nous aurons une idée des différents styles de flux de travaux proposés par Edge Animate lors de l’animation des propriétés d’élément.

Remarque :

Notez que la plupart des éléments n’apparaissent pas dans le scénario tant que leurs propriétés ne sont pas réellement modifiées. Cela tient au fait qu’il n’y a aucune raison d’encombrer le scénario, si aucun élément n’est réellement animé.

Insertion d’images-clés

Il existe un certain nombre de mécanismes qui nous permettent d’insérer des images-clés dans notre composition : le panneau Propriétés, le menu de l’application, les boutons d’image-clé du scénario ou le menu contextuel. Avant de continuer, jetons un coup d’œil à chacune de ces méthodes.

Ajout d’images-clés via le panneau Propriétés

Lorsqu’un élément est sélectionné, nous pouvons positionner la tête de lecture sur le scénario et consulter le panneau Propriétés pour insérer nos images-clés. Vous observez qu’un petit losange figure en regard de la plupart des valeurs de propriété. En cliquant sur cette commande d’image-clé, nous insérons manuellement une image-clé pour cette propriété à l’emplacement actuel de la tête de lecture pour l’élément sélectionné.

Ajout d’images-clés à partir du menu de l’application

Lorsqu’un élément est sélectionné, nous pouvons positionner la tête de lecture sur le scénario et consulter le menu de l’application pour insérer nos images-clés. Il suffit d’accéder au menu et de choisir Scénario | Ajouter une image-clé, puis de sélectionner le type d’image-clé à ajouter, en fonction de la propriété pour laquelle nous voulons définir une image-clé.

Remarque :

Un raccourci clavier n’est pas affecté par défaut à toutes les propriétés, mais nous pouvons facilement effectuer cette opération pour les propriétés couramment utilisées, si nous le souhaitons. Pour ce faire, il faut utiliser le menu de l’application : Modifier | Raccourcis clavier...

Utilisation des boutons d’image-clé du scénario

Lorsqu’un élément est sélectionné, nous pouvons positionner la tête de lecture sur le scénario et consulter la partie gauche du panneau Scénario pour insérer nos images-clés. Les propriétés auxquelles sont actuellement affectées une image-clé apparaissent regroupées sous un élément dans le scénario. Une petite icône figure à droite du nom de ces propriétés existantes, qui permet d’ajouter de nouvelles images-clés pour la propriété en question.

Pour ajouter de nouvelles images-clés aux propriétés qui n’apparaissent pas sous un élément, il suffit de cliquer avec le bouton droit sur le nom de l’élément et de choisir Ajouter une image-clé pour les insérer.

Utilisation du clic droit pour l’insertion d’une image-clé

Lorsqu’un élément est sélectionné, nous pouvons positionner la tête de lecture sur le scénario et consulter la scène elle-même pour insérer nos images-clés. Il suffit de cliquer avec le bouton droit sur un élément existant de la scène à cet endroit du scénario, puis de choisir Ajouter une image-clé pour insérer l’une des propriétés disponibles pour cet élément.

Animation à l’aide de la tête de lecture

Nous allons maintenant réaliser une animation simple d’un élément en le déplaçant d’un côté de la scène à l’autre, tout en effectuant une rotation et une modification de la couleur à l’aide de la tête de lecture et du panneau Propriétés.

  1. Créez un projet Edge Animate et enregistrez-le sur votre disque local.

  2. Ajustez la scène comme suit à l’aide du panneau Propriétés :

    • Largeur de la scène : 600 pixels
    • Hauteur de la scène : 350 pixels
    • Couleur d’arrière-plan : #000000
    • Débordement : masqué
  3. A l’aide de l’outil Rectangle, tracez un élément sur la scène. Etant donné que nous allons modifier ses propriétés au cours de l’étape suivante, ne vous souciez pas de ses dimensions, ni de sa forme.

  4. Pour chacune des propriétés répertoriées, effectuez les réglages suivants dans le panneau Propriétés :

    • Emplacement X : 20 pixels
    • Emplacement Y : 230 pixels
    • Largeur (taille) : 100 pixels
    • Hauteur (taille) : 100 pixels
    • Couleur d’arrière-plan : #c0c0c0
  5. En continuant à utiliser le panneau Propriétés, cliquez sur le losange de l’image-clé en regard des propriétés Emplacement, Couleur d’arrière-plan et Rotation. Une image-clé sera alors définie pour chaque propriété dans le scénario.

  6. Vérifiez que les propriétés Image-clé auto sont sélectionnées dans le scénario. Puisque nous avons déjà marqué chacune de ces propriétés à l’aide des images-clés initiales, les ajustements effectués au fil du temps seront automatiquement retouchés.

  7. Notre projet doit maintenant se présenter comme indiqué dans la capture d’écran suivante. Nous sommes prêts à poursuivre cet exercice.

  8. Faites glisser la tête de lecture vers le marqueur de règle intitulé 0:04 et relâchez-la.

  9. Sélectionnez maintenant l’élément à l’aide de l’outil Sélection et modifiez les propriétés suivantes dans le panneau Propriétés :

    • Emplacement X : 480 pixels
    • Couleur d’arrière-plan : #900000
    • Rotation : 480 degrés
  10. Notez que des barres de transition apparaissent désormais dans le scénario avec un autre ensemble d’images-clés à la fin de notre séquence d’animation.

  11. Nous pouvons maintenant soit faire défiler le scénario en faisant glisser la tête de lecture vers l’avant ou vers l’arrière, soit appuyer sur le bouton Lecture pour afficher l’intégralité de la séquence. Une fois lu, l’élément doit se déplacer de la gauche vers la droite de la scène, passant alors du gris au rouge. L’état final qui en résulte est affiché dans la capture d’écran suivante :

    Remarque :

    Notez que les propriétés d’un élément peuvent être retouchées et ainsi modifiées au fil du temps, comme nous l’avons fait ici.

Animation à l’aide du verrouillage

Nous allons maintenant effectuer l’exercice précédent en utilisant le verrouillage pour démontrer qu’il existe une autre façon de créer un mouvement dans Edge Animate.

  1. Créez un projet Edge Animate et enregistrez-le sur votre disque local.

  2. Ajustez la scène comme suit à l’aide du panneau Propriétés :

    • Largeur de la scène : 600 pixels
    • Hauteur de la scène : 350 pixels
    • Couleur d’arrière-plan : #000000
    • Débordement : masqué
  3. A l’aide de l’outil Rectangle, tracez un élément sur la scène. Etant donné que nous allons modifier ses propriétés au cours de l’étape suivante, ne vous souciez pas de ses dimensions, ni de sa forme.

  4. Pour chacune des propriétés répertoriées, effectuez les réglages suivants dans le panneau Propriétés :

    • Emplacement X : 20 pixels
    • Emplacement Y : 230 pixels
    • Largeur (taille) : 100 pixels
    • Hauteur (taille) : 100 pixels
    • Couleur d’arrière-plan : #c0c0c0
  5. Faites glisser la tête de lecture vers 0:04 dans le scénario.

  6. Maintenant, accédez au menu de l’application et sélectionnez Scénario | Activer/Désactiver le verrouillage. Le verrouillage ne sera alors plus synchronisé avec la tête de lecture. Le curseur de verrouillage est le petit bouton situé directement sous la tête de lecture lorsqu’ils ne sont pas synchronisés.

  7. Cliquez sur le curseur de verrouillage et faites-le glisser vers 0:00 dans le scénario. Les propriétés actuelles des éléments seront alors verrouillées à la position 0:00 sans qu’il soit nécessaire d’insérer manuellement des images-clés. Conservez la tête de lecture elle-même à la position 0:04.

  8. Sélectionnez maintenant l’élément à l’aide de l’outil Sélection et modifiez les propriétés suivantes dans le panneau Propriétés :

    • Emplacement X : 480 pixels
    • Couleur d’arrière-plan : #900000
    • Rotation : 480 degrés

    Notez que des barres de transition apparaissent désormais dans le scénario sans qu’il soit nécessaire de définir des images-clés.

  9. Accédez au menu de l’application et sélectionnez Scénario | Activer/Désactiver le verrouillage pour synchroniser le curseur de verrouillage. Nous pouvons également activer/désactiver le verrouillage via un raccourci clavier, comme indiqué plus haut dans ce chapitre.

  10. Nous pouvons maintenant soit faire défiler le scénario en faisant glisser la tête de lecture vers l’avant ou vers l’arrière, soit appuyer sur le bouton Lecture pour afficher l’intégralité de la séquence. Une fois lu, l’élément doit se déplacer de la gauche vers la droite de la scène, passant alors du gris au rouge.

    Remarque :

    Bien que dans ce cas le curseur de verrouillage ait été placé antérieurement à la tête de lecture dans notre scénario, cela n’est pas indispensable. Nous pouvons également placer le curseur de verrouillage postérieurement à la tête de lecture sans que le comportement ne s’en trouve modifié : les propriétés actuelles sont verrouillées à la position du curseur de verrouillage, tandis que les propriétés ajustées sont alignées sur la position de la tête de lecture.

Modification des transitions

Une fois qu’une transition est définie, elle peut être ajustée grâce à l’interaction de la souris via le scénario. Afin de régler le délai, la durée et la fin de la transition, il suffit de cliquer et de faire glisser les indicateurs visuels de transition dans le scénario lui-même.

Remarque :

Notez que les transitions peuvent être ajustées par objet ou par propriété, ce qui laisse une grande liberté lors de la définition du comportement du mouvement.

Délai de transition

Cette option détermine le moment où la transition doit commencer, qui est mesuré à partir du début du scénario global. Pour modifier cette valeur, vous pouvez déplacer la transition dans son intégralité, ou faire glisser le bord situé le plus à droite.

Durée de la transition

Ce paramètre représente le temps nécessaire à l’exécution de l’ensemble de la transition. Les transitions peuvent être facilement allongées ou raccourcies en faisant glisser le bord situé le plus à droite.

Fin de la transition

Il s’agit de l’heure à laquelle la transition prend fin dans le scénario.

Modification des propriétés d’élément en fonction de la transition

Pour sélectionner une transition afin de modifier les propriétés d’élément dans le panneau Propriétés, utilisez la souris afin de sélectionner un bloc de transition dans le scénario. Le curseur doit prendre l’aspect d’une petite main en forme de pince. Le fait de cliquer sur la transition provoquera sa mise surbrillance, ainsi que celle de ses images-clés.

Nous savons maintenant que l’élément est sélectionné et nous pouvons voir que le panneau Propriétés s’ajuste pour refléter les propriétés de cet élément à la position de la tête de lecture. Pour ajuster des propriétés, il suffit de déplacer la tête de lecture pour voir le panneau Propriétés s’adapter à ces changements.

Remarque :

Lorsque nous modifions le comportement d’accélération d’une transition, nous pouvons sélectionner la totalité du bloc de transition d’élément, ou nous pouvons choisir des transitions de propriété individuelles pour appliquer plusieurs types de transition au même élément. Cette procédure est assez souple.

Commandes d’accélération de transition

Vous avez peut-être remarqué que le mouvement obtenu par le biais des exemples présentés jusqu’ici constitue des transitions simples et linéaires entre deux valeurs. Pour rendre les transitions individuelles plus réalistes et dynamiques, nous avons également la possibilité d’affecter une large gamme d’équations d’accélération à nos transitions.

Adobe Edge Animate propose un vaste choix d’accélérations. La valeur par défaut est Linéaire, qui exprime simplement une transition de A vers B de façon totalement linéaire. Un algorithme d’accélération plus dynamique est souvent nécessaire pour exprimer un mouvement un peu plus réaliste, ou pour obtenir un effet spécifique. Edge Animate est livré avec pas moins de 32 choix d’accélérations pour offrir à l’utilisateur tout un ensemble d’options lors de la définition de l’accélération de transition.

Remarque :

Les algorithmes d’accélération de transition disponibles dans Edge Animate sont semblables à ceux qui se trouvent dans un grand nombre de bibliothèques ActionScript pour animer un contenu Flash Professional. Contrairement à Flash Professional, Edge Animate n’offre pas encore la possibilité de personnaliser ces paramètres prédéfinis.

Types d’accélération de transition

Alors qu’Edge Animate nous fournit un grand nombre de types d’accélération, beaucoup d’utilisateurs risquent de ne pas savoir à première vue quelle est leur finalité. Il est très simple de configurer un projet Edge Animate qui nous permet d’ajuster et de visualiser chacun de ces types d’accélération lorsqu’ils sont appliqués à une transition simple.

Remarque :

Presque tous les types d’accélération possèdent trois variantes : accélération, décélération et accélération/décélération simultanées.

Déplacement des transitions

Edge Animate rend très simple le déplacement des transitions en avant et en arrière sur le scénario. Il suffit d’utiliser le curseur de la souris pour saisir une transition (cliquez et maintenez le bouton de la souris enfoncé), puis de déplacer la souris vers l’arrière et l’avant dans le scénario jusqu’à ce que la transition apparaisse à l’emplacement souhaité. Relâchez le bouton de la souris pour terminer le déplacement.

Modification de la durée de la transition

Pour régler la durée d’une transition, il suffit de placer le curseur de la souris au début ou à la fin d’un bloc de transition jusqu’à ce que le curseur change pour indiquer que des ajustements sont possibles. Ensuite, effectuez un cliquer-glisser dans le scénario pour régler la longueur d’une transition spécifique. Nous pouvons également sélectionner plusieurs transitions de la même manière en utilisant la touche Maj tout en effectuant des sélections supplémentaires dans le scénario.

Remarque :

Le curseur se présente alors sous la forme de deux lignes avec des flèches pointant vers la gauche ou la droite lors du survol d’une transition que nous pouvons développer de cette façon.

Sélection d’images-clés de transition

Pour sélectionner des images-clés individuelles, il suffit de cliquer sur l’image-clé souhaitée et d’apporter la modification voulue. Parmi les options possibles, citons l’utilisation de la touche Supprimer du clavier pour supprimer les images-clés sélectionnées, ou la modification de la transition à l’aide du menu contextuel.

Remarque :

Le curseur prend alors la forme d’une petite main pointant vers un élément si une image-clé peut être sélectionnée. Bien sûr, il n’est pas possible d’interagir de quelque manière que ce soit avec des images-clés d’élément verrouillé.

Sélection de plusieurs transitions

Maintenez la touche Maj enfoncée pour sélectionner plusieurs images-clés. Un rectangle de sélection peut également être tracé sur plusieurs images-clés, mais il risque d’être imprécis, car il est très probable que des transitions complètes seront aussi sélectionnées.

Copie et collage d’images-clés

Lorsque des images-clés sont sélectionnées, nous pouvons facilement les copier et les coller d’un emplacement à un autre dans le scénario, en déplaçant la tête de lecture vers une autre position avant le collage. Ce mécanisme est parfait pour copier les propriétés exactes souhaitées et les répliquer dans le scénario.

Génération de transitions via des images-clés

Lorsque plusieurs images-clés sont sélectionnées, nous pouvons choisir de cliquer dessus à l’aide du bouton droit pour supprimer ou créer des transitions entre elles. Cela peut être utile si nous avons utilisé le mode de transition automatique, mais que nous avons ensuite décidé de conserver les images-clés tout en supprimant la transition entre elles, ou inversement.

Animation d’un en-tête de site Web

L’un des cas d’utilisation de base d’Adobe Edge Animate consiste à créer un en-tête de site Web doté d’animations simples. Nous allons créer une telle composition pour un projet d’enregistrement en studio portant le nom An Early Morning Letter, Displaced, dans lequel on souhaite voir s’animer les images de chaque publication dans l’en-tête lui-même. Heureusement, ils nous ont fourni tous les actifs nécessaires à la construction de cet en-tête animé.

Remarque :

Ces actifs sont inclus parmi les fichiers de ce chapitre et se trouvent dans le dossier nommé banner_assets.

Configuration de projet, importation d’actifs et présentation générale

La première étape de cette composition consiste à configurer notre projet Edge Animate, à importer tous les actifs et à les disposer sur la scène. Nous allons commencer par organiser les actifs sous leur forme définitive, tels qu’ils doivent apparaître à la fin de l’animation, une fois la lecture terminée. Le verrouillage rend relativement facile l’animation « à l’envers ».

  1. Créez un projet Edge Animate et enregistrez-le sur le disque local.

  2. Ajustez la scène comme suit à l’aide du panneau Propriétés :

    • Largeur de la scène : 940 pixels
    • Hauteur de la scène : 198 pixels
    • Couleur d’arrière-plan : #000000
    • Débordement : masqué
  3. Accédez au menu de l’application et sélectionnez Fichier | Importer... pour afficher un navigateur de fichiers.

  4. Sélectionnez tous les fichiers .png situés dans le dossier des actifs fourni et cliquez sur Ouvrir. Les fichiers sélectionnés sont placés sur la scène et également ajoutés au projet Bibliothèque.

  5. L’image d’arrière-plan est de la taille exacte de la scène elle-même et doit remplir toute cette zone.

  6. La pochette de l’album peut être disposée de manière uniforme au bas de la scène, comme on le voit dans la capture d’écran suivante. Nous pouvons utiliser la souris ou le panneau Propriétés pour organiser ces images. Espacez-les régulièrement.

  7. Enfin, nous devons ajouter un titre à cette animation d’en-tête. Nous allons utiliser l’outil Texte pour former le nom du projet en haut de l’en-tête. Choisissez maintenant l’outil Texte (T).

  8. Ajoutez un nouvel élément de texte à la scène et saisissez le terme An Early Morning Letter, Displaced dans le champ.

  9. Une fois cet élément de texte sélectionné, accédez au panneau Propriétés et effectuez les réglages suivants :

    • ID : Titre
    • Emplacement X : 16 pixels
    • Emplacement Y : 11 pixels
    • Nom de la police : Arial Black, Gadget, sans-serif
    • Taille de la police : 40 pixels
    • Couleur de la police : #bbbbbb
  10. Nous devrions maintenant avoir une composition qui se présente comme dans la capture d’écran suivante :

Animation d’éléments

Nous allons maintenant animer tous les éléments de la scène en utilisant la tête de lecture, le marquage et le panneau Propriétés.

Animation de l’arrière-plan

Nous allons créer une transition d’une durée de 00:07.000 minutes, qui se fondra dans l’élément d’arrière-plan tout en ajustant légèrement son échelle.

  1. A l’aide de l’outil Sélection, cliquez sur l’élément bg pour afficher ses propriétés.

  2. Dans le scénario, déplacez le curseur de verrouillage vers 00:07.000 et la tête de lecture vers 00:00.000.

  3. Effectuez les réglages suivants à l’aide du panneau Propriétés :

    • Echelle (liée) : 115 %
    • Opacité : 25 %
  4. Dans le scénario, cliquez sur la transition que nous venons de créer pour la sélectionner.

  5. Dans le scénario, remplacez la sélection pour l’accélération par Décélération | Sinus pour déterminer le mode de transition lors de la lecture. Laissez la valeur Linéaire pour les transitions d’échelle.

Animation de la pochette (procéder ainsi pour chaque image de pochette)

Pour chaque image, nous allons créer une transition d’une durée de 00:02.000 minutes, qui permet de faire glisser l’image à l’intérieur de l’écran, générant ainsi un rebond ludique avant son immobilisation. Nous allons échelonner les transitions de chaque image suivante pour commencer au milieu de la transition précédente, afin de créer une rafale de mouvements au sein de la composition.

  1. A l’aide de l’outil Sélection, cliquez sur l’élément fvm001 pour afficher ses propriétés.

  2. Dans le scénario, déplacez le curseur de verrouillage vers 00:02.090 et la tête de lecture vers 00:00.000.

  3. Effectuez le réglage suivant à l’aide du panneau Propriétés :

    • Emplacement X : 986 pixels
  4. Dans le scénario, cliquez sur la transition d’opacité que nous venons de créer pour la sélectionner.

  5. Dans le scénario, remplacez la sélection pour l’accélération par Décélération | Rebond pour déterminer le mode de transition lors de la lecture.

  6. Répétez les étapes précédentes pour chacune des autres images de la pochette de l’album.

    Remarque :

    Edge Animate inclut également une option qui permet de coller plusieurs éléments d’un objet dans un autre. Pour les transitions reproductibles comme celle-ci, on peut envisager d’utiliser les commandes Collage spécial sous le menu Modifier de l’application.

Animation du texte du titre

Nous allons créer une transition d’une durée de 00:05.500 minutes, qui se fondra dans l’élément de texte du titre.

  1. A l’aide de l’outil Sélection, cliquez sur l’élément Titre pour afficher ses propriétés.

  2. Dans le scénario, déplacez le curseur de verrouillage vers 00:06.000 et la tête de lecture vers 00:05.000.

  3. Effectuez le réglage suivant à l’aide du panneau Propriétés :

    • Opacité : 0 %
  4. Dans le scénario, cliquez sur la transition que nous venons de créer pour la sélectionner.

  5. Dans le scénario, remplacez la sélection pour l’accélération par Accélération | Cubique pour déterminer le mode de transition lors de la lecture.

Nous avons terminé !

Une fois que tous les éléments sont ajoutés à la scène, bien positionnés et animés correctement via les transitions, le scénario Edge Animate se présente comme dans la capture d’écran suivante :

Remarque :

Avec Edge Animate, il est facile de voir exactement ce qui se passe dans une composition grâce à des indicateurs de transition précis, qui correspondent aux propriétés d’élément.

Le résultat de notre bannière animée s’affiche dans un navigateur Web, comme illustré dans la capture d’écran suivante. Pour publier une composition Edge Animate dans le navigateur, nous pouvons choisir Fichier | Aperçu dans le navigateur dans le menu de l’application.

Résumé

Dans ce chapitre, nous avons examiné comment créer un mouvement dans Adobe Edge Animate à l’aide du scénario, de la tête de lecture, du verrouillage et du panneau Propriétés. Les utilisateurs qui ont l’habitude de se servir de Flash Professional ou d’After Effects seront probablement à l’aise avec la plupart de ces concepts et pourront se rendre compte de la façon dont ils ont évolué et se sont perfectionnés dans le cadre de leur mise en œuvre dans l’interface de l’application Edge Animate. Il est vraiment facile de créer et de modifier une animation dans une composition Edge Animate !

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne