Ajout d’interactivité avec JavaScript

Remarque :

À compter de novembre 2015, Edge Animate n’est plus activement développé. Pour plus d’informations, reportez-vous à la section Famille de produits Edge | Fin de développement.

Vous pouvez utiliser JavaScript pour ajouter de l’interactivité à vos compositions. Vous pouvez définir des actions pour chaque élément à l’aide d’un éditeur de code intégré et d’une bibliothèque de fragments de code. Les actions sont des fonctions qui peuvent être ajoutées pour gérer un événement unique.

Ajout d’interactivité

Paul Trani

Définir des actions

  1. Dans le Scénario, cliquez sur le bouton Actions d’ouverture, situé à gauche du nom d’un élément ou d’un symbole.

    Bouton Actions d’ouverture

    Vous pouvez également cliquer sur le bouton Actions d’ouverture situé à gauche du nom d’un élément ou d’un symbole dans le panneau Eléments.

  2. Sélectionnez un événement pour déclencher l’action.

    L’éditeur d’actions s’affiche sur la droite, avec un éditeur de code et une liste de fragments de code.

  3. Ecrivez le code de l’événement.

    Vous pouvez écrire votre propre code ou utiliser les fragments de code pour ajouter des fonctions courantes. Pour obtenir des informations de référence, reportez-vous au manuel Guide de l’API Edge Animate.

Utiliser l’éditeur de code

L’éditeur de code vous offre une vue complète du code JavaScript figurant dans votre projet. Il vous permet également d’afficher le code brut du fichier d’actions.

  1. Sélectionnez Fenêtre > Code.

    Vous pouvez également appuyer sur Ctrl+E (Windows) ou Cmd+E (Macintosh).

  2. Sélectionnez un événement ou un élément en cliquant sur l’icône Plus (+) située à gauche de Scène dans la barre latérale gauche.

  3. Pour modifier l’intégralité du fichier JavaScript, cliquez sur le bouton Code complet situé dans le coin supérieur droit du panneau.

    Bouton Code complet

Ajouter des étiquettes au Scénario

Vous pouvez insérer des étiquettes dans le Scénario et les utiliser comme références de temps dans les paramètres de fonction. Un nom d’étiquette peut être utilisé comme paramètre pour toute fonction de lecture en attente d’une valeur de code temporel. Les étiquettes vous permettent de créer des actions telles que la lecture ou la recherche d’un point dans le Scénario.

Pour ajouter une étiquette :

  1. Déplacez la tête de lecture vers l’emplacement de votre choix.

  2. Cliquez sur le bouton Insérer une étiquette situé dans le coin supérieur droit du Scénario.

    Bouton Insérer une étiquette

    Remarque :

    Vous pouvez également appuyer sur Ctrl+L (Windows) ou Cmd+L (Macintosh).

  3. Spécifiez un nom pour l’étiquette.

  4. Lorsque vous définissez une action pour un élément dans l’éditeur de code, utilisez le nom de l’étiquette comme paramètre pour les fonctions de lecture attendant une valeur de code temporel.

    Par exemple, au lieu de sym.play(1000), vous pouvez utiliser sym.play('monétiquette').

Ajouter des déclencheurs au Scénario

Vous pouvez placer des déclencheurs dans le Scénario pour exécuter le code JavaScript à un moment donné.

Pour ajouter un déclencheur :

  1. Déplacez la tête de lecture vers l’emplacement de votre choix.

  2. Cliquez sur le bouton Insérer un déclencheur situé dans le coin supérieur droit du Scénario.

    Bouton Insérer un déclencheur

    Remarque :

    Vous pouvez également appuyer sur Ctrl+T (Windows) ou Cmd+T (Macintosh).

    Le panneau Code s’affiche.

  3. Définissez l’action à exécuter au niveau du déclencheur. Pour obtenir des informations de référence, reportez-vous au manuel Guide de l’API Edge Animate.

Vous pouvez modifier le code du déclencheur à tout moment en cliquant deux fois sur l’icône du déclencheur dans le scénario.

Icône Déclencheur

En savoir plus

Logo Adobe

Accéder à votre compte