Editeur d’actions

Rechercher
Edge Animate Guide d'utilisation
S’applique à : Edge Animate

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

La fenêtre contextuelle Actions a été repensée ; elle est désormais bien plus conviviale pour les concepteurs. Avec le nouvel éditeur d’actions, il n’est plus nécessaire d’écrire autant de code, il est dont plus facile d’ajouter des fonctions d’interactivité. L’interface est également plus accessible pour les concepteurs, qui peuvent créer des animations de précision plus rapidement et avec moins d’efforts. Vous pouvez ajouter des objets et configurer des actions JavaScript afin d’intégrer à votre animation des éléments basés sur des événements.

Le nouvel éditeur d’actions vous guide visuellement dans les différentes étapes permettant d’affecter des actions à des cibles. Il vous permet d’ajouter des actions basées sur des événements JavaScript et de sélectionner les cibles dans la même fenêtre.  

Avec le nouvel éditeur de code, l’ajout d’actions aux éléments se fait désormais en 2 étapes simples :

  1. Choisir une action – Si vous connaissez son nom, vous pouvez rechercher l’action à l’aide de la zone de recherche. Dans le cas contraire, sélectionnez une catégorie pour voir les actions qu’elle comporte et cliquez sur celle qui vous intéresse.
  2. Sélectionner une cible – Les cibles sont regroupées sous la zone Scène.
    1. Cliquez sur Scène pour afficher les éléments cible.
    2. Double-cliquez sur l’élément cible.

Remarque : lorsque vous cliquez sur Scène, une sous-catégorie Symboles peut s’afficher si votre composition comporte des symboles. Pour en savoir plus sur les symboles, reportez-vous à la section Création d’animations imbriquées à l’aide de symboles.

Les actions sont regroupées selon les catégories suivantes :

  • Niveau de la page
  • Niveau de la composition
  • Clic
  • Souris
  • Mouvement tactile
  • Glissement
  • Scénario 
  • Symbole

 

 

Afin de mieux comprendre comment ajouter des actions à un élément, examinons l’exemple ci-après.

  1. Prenons le cas d’un élément de texte « Hello » affiché sur un élément de type ellipse.  

  2. Pour modifier le texte, cliquez sur {} en regard de l’élément de texte dans le scénario. Sélectionnez « click ».

    • Choisissez une action : sélectionnez « Texte ». L’élément « Modifier le texte » est la sous-action correspondante dans la colonne adjacente.
    • Sélectionnez une cible : choisissez « Scène ». Double-cliquez sur l’élément de texte cible dans la colonne adjacente.

  4. Le code JavaScript correspondant s’affiche dans l’éditeur de code.  Modifiez le champ « Nouveau texte » de manière à indiquer « Hello World » dans le code.

  5. Fermez la fenêtre contextuelle de code. Appuyez sur Ctrl + Entrée pour voir le résultat des modifications. Le texte « Hello World » est maintenant affiché.

L’éditeur d’actions offre également les améliorations suivantes pour vous aider à créer plus facilement et plus rapidement des animations élaborées :

  • Ajout de données audio : vous pouvez ajouter des éléments audio à vos animations. Pour plus d’informations, reportez-vous à la section Ajout de données audio aux animations.
  • Ajout de données vidéo : vous pouvez ajouter des éléments vidéo à vos animations. Pour plus d’informations, reportez-vous à la section Ajout d’une vidéo à une animation.
  • Ajout d’hyperliens vers des articles DPS : vous pouvez ajouter des hyperliens reliant les éléments d’une composition à des articles Adobe DPS. Pour plus d’informations, reportez-vous à la section Création d’hyperliens vers des articles Adobe DPS.
  • Ajout de fragments de code : si vous réutilisez souvent certaines parties de code, enregistrez-les sous forme de fragments. Vous pouvez ensuite les insérer en un seul clic et les modifier en fonction de vos besoins.

Fragments de code

Dans l’éditeur d’actions, cliquez sur « + » en regard de Mes fragments de code, puis sur l’une des options suivantes :

  • Créer

Cliquez pour écrire votre propre code et l’enregistrer sous forme de fragment de code. Lorsque vous cliquez sur cette option, une fenêtre de code s’affiche. Saisissez votre code, cliquez sur Enregistrer, puis donnez un nom au fragment de code.

  • Ajouter depuis la sélection

Cliquez pour enregistrer la partie sélectionnée du code en tant que fragment de code. Donnez un nom au fragment de code dans l’éditeur d’actions (par exemple, MonFragment_1). Vous pouvez sélectionner ce fragment de code pour ajouter l’action à l’élément concerné.

 

Insertion de fragments de code

  1. Dans la fenêtre de code de l’éditeur d’actions, cliquez à l’endroit où vous souhaitez insérer le fragment de code.
  2. Cliquez sur Mes fragments de code.
  3. Sélectionnez le fragment souhaité dans la liste (par exemple, MonFragment_1 comme illustré sur la figure). Le fragment de code enregistré est inséré au point d’insertion dans la fenêtre de code.