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é

Ajout d’interactivité
Paul Trani

Définition d’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.

Utilisation de 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

Ajout d’é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’).

Ajout de 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

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