Ajout d’une interactivité de base

Rechercher

Dernière mise à jour le

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.

Aperçu de la leçon

Dans cette leçon, vous apprendrez à réaliser ce qui suit :

Comprendre l’interactivité
Travailler avec la syntaxe JavaScript
Reconnaître la relation entre JavaScript, jQuery et l’API Edge Animate
Différentier des déclencheurs, événements et actions
Ajouter des déclencheurs au scénario
Insérer des étiquettes
Créer des actions pour répondre à des événements
Contrôler le comportement de la tête de lecture du scénario
Afficher et modifier le script à l’aide du panneau Code
Utiliser des commentaires pour annoter le code
Afficher et masquer des éléments afin d’intégrer une rétroaction visuelle pour des boutons
Contrôler des éléments animés
Personnaliser le curseur de la souris

L’exécution de cette leçon prendra environ deux heures. Avant de commencer, téléchargez le contenu Lesson05.

fig05-00 — Laissez vos spectateurs explorer votre composition et devenir des participants actifs. Utilisez des panneaux intuitifs et des fragments de code intégrés provenant d’Adobe Edge Animate pour ajouter des actions afin de créer des expériences interactives attrayantes axées sur les utilisateurs.

Prise en main

Pour commencer, visualisez le guide de voyage que vous allez créer à mesure que vous apprendrez à créer des projets interactifs dans Adobe Edge Animate.

Double-cliquez sur le fichier 05End.html dans le dossier Lesson05/05End pour lire la composition dans un navigateur.

Le projet est une galerie interactive de photos montrant des images de la Birmanie. Les spectateurs peuvent regarder ce court diaporama qui se lit automatiquement, puis revient au début. Ils peuvent également cliquer sur n’importe quelle image miniature sur le côté gauche de la scène pour accéder directement à une image donnée. À l’aide de la souris, survolez le bouton triangulaire du haut pour visualiser le déroulement d’une légende.

Dans cette leçon, vous allez créer des boutons interactifs dotés de surbrillances et apprendre à insérer le code adéquat afin d’indiquer à Edge Animate l’emplacement vers lequel déplacer la tête de lecture sur le scénario pour afficher une image ou animation particulière.
Fermez le fichier 05End.html et quittez votre navigateur.
Dans le dossier Lesson05/05Start, double-cliquez sur le fichier 05Start Edge Animate pour ouvrir le fichier de projet initial dans Edge Animate.

Le fichier comprend tous les actifs déjà placés sur la scène, ainsi que les transitions entre chaque image sur le scénario. La scène a déjà été correctement dimensionnée. Dans cette leçon, vous allez rendre interactive cette animation linéaire.
Choisissez Fichier > Enregistrer sous. Nommez le fichier 05_workingcopy et enregistrez-le dans le dossier 05Start. L’enregistrement d’une copie de travail garantit que le fichier original de départ sera disponible si vous souhaitez recommencer.

À propos des compositions interactives

Les compositions interactives évoluent en fonction des actions du spectateur. Par exemple, un clic sur un bouton par le spectateur pourrait afficher un graphisme différent comportant des informations supplémentaires. L’interactivité peut être simple, tel qu’un clic sur un bouton, comme elle peut être plus complexe, impliquant différents types d’interactions avec le même élément — par exemple, survoler un bouton avec le curseur de la souris, cliquer sur le bouton et déplacer le curseur de la souris hors du bouton sont trois événements distincts qui peuvent chacun résulter en différentes modifications visuelles sur la scène.

Dans Edge Animate, vous utilisez JavaScript pour atteindre une interactivité. JavaScript est un script standard et répandu pour les navigateurs Web. JavaScript s’exécute sur des navigateurs d’ordinateurs de bureau ainsi que sur des périphériques tels que des tablettes et des téléphones portables.

Si vous n’avez aucune notion de JavaScript ou ne savez pas comment rédiger du code, pas de panique ! Adobe Edge Animate propose une interface simple destinée à ajouter un code JavaScript à vos compositions et à intégrer des fonctions interactives courantes. Une fois que vous serez plus confiant dans la rédaction de la syntaxe du script, vous pourrez commencer à approfondir vos connaissances et à personnaliser l’interactivité.

Dans cette leçon, vous allez apprendre à créer une navigation non linéaire, ce qui signifie que l’animation n’a pas à être lue directement du début à la fin et s’arrêter là. Vous ajouterez un code qui est déclenché lorsque la tête de lecture atteint un certain point dans le temps.

Vous ajouterez également du code qui déplace la tête de lecture à différents emplacements du scénario afin d’afficher des éléments spécifiques. Vous apprendrez aussi à faire en sorte que des éléments sur la scène répondent à différentes interactions à l’aide du curseur de la souris.

Exploitation du langage JavaScript

JavaScript est un langage de rédaction de scripts qui permet d’ajouter des fonctionnalités supplémentaires à une page Web. Un nombre important d’éléments d’interface courants sur des sites Web, tels que menus déroulants, cases à cocher ou zones de recherche, sont créés au travers du langage JavaScript. Edge Animate utilise également JavaScript pour alimenter son interactivité, ainsi que les animations et autres effets.

Où réside le langage JavaScript

Même sans l’ajout d’une interactivité à votre composition, votre projet dépend de JavaScript. Le code JavaScript est contenu dans plusieurs documents de texte distincts qui portent l’extension de fichier « .js ». Regardez les fichiers associés à votre composition Edge Animate, 05_workingcopy. Le dossier nommé edge_includes comprend quatre fichiers JavaScript :

edge.0.1.6.min.js
jquery-1.7.1.min.js
jquery.easing.1.3.js
json2_min.js

Ces fichiers contiennent le code de base nécessaire à toute composition Edge Animate. Il existe également des fichiers JavaScript supplémentaires, qui sont uniques à votre projet. Ces fichiers sont situés en dehors du dossier edge_includes et sont nommés automatiquement sur la base du nom de votre fichier Edge Animate. Ils sont nommés comme suit :

05_workingcopy_edge.js
05_workingcopy_edgeActions.js
05_workingcopy_edgePreload.js

Lorsque votre navigateur Web ouvre votre projet Edge Animate pour la première fois, il charge le code JavaScript afin que toutes les fonctionnalités soient disponibles lors de la lecture du projet. L’ensemble du code est organisé en fonctions, qui regroupent des commandes. Dans la mesure où chaque fonction possède un nom unique, vous pouvez déclencher les commandes simplement en faisant référence au nom de la fonction. Les programmeurs disent qu’une fonction est « appelée », ou que le navigateur « appelle » une fonction.

jQuery et l’API Edge Animate

Bien que JavaScript soit utile, il est censé contrôler tous les détails d’une page Web, ce qui est puissant mais souvent maladroit et compliqué. C’est là que jQuery et l’API Edge Animate deviennent pratiques. jQuery est une bibliothèque JavaScript open-source qui fournit un moyen convivial de sélectionner, contrôler et animer des éléments dans un navigateur. jQuery n’est pas un autre langage, mais tout simplement un ensemble de fonctions JavaScript bien écrites. Si vous examinez à nouveau les fichiers JavaScript dans le dossier edge_includes, vous constaterez que deux de ces fichiers sont, en fait, des fichiers pour jQuery.

Aux côtés de jQuery, Edge Animate fournit des fonctions supplémentaires qu’il a construites pour vous. La bibliothèque de fonctions JavaScript qu’Edge Animate a construites pour votre usage constitue l’API (Application Programming Interface) Edge Animate.

JavaScript, jQuery et l’API Edge Animate peuvent être considérés comme représentant différentes couches de contrôle. L’API Edge Animate représente la couche de contrôle supérieure, la plus superficielle, jQuery est la couche intermédiaire, alors que la couche JavaScript principale forme la couche la plus profonde. Une analogie utile est le contrôle d’une automobile. L’API Edge Animate représente les commandes que vous voyez lorsque vous êtes assis dans le siège du conducteur : le volant, la pédale de frein et la pédale d’accélération. Elles permettent de conduire la voiture sans avoir besoin de connaître son fonctionnement interne. Conçues à partir d’une combinaison de leviers, de cadrans et d’arbres, elles permettent de simplifier le contrôle de votre véhicule. Ces leviers, cadrans et arbres représentent le niveau de contrôle de jQuery. Au niveau le plus fin, vous disposez de JavaScript, représenté par les différents écrous, boulons et engrenages.

Tout comme il est bien plus facile de conduire une voiture avec le volant et la pédale d’accélérateur, le contrôle de votre composition Edge Animate est bien plus aisé avec l’API Edge Animate. Cependant, dans les deux cas, il n’y a aucune raison pour laquelle vous ne pourriez pas bricoler avec les commandes de niveau plus profond pour bénéficier d’une expérience plus personnalisée. Vous pouvez commencer le codage en jQuery et JavaScript pour réaliser votre propre interactivité. Vous avez juste besoin d’être sûr que vous êtes un mécanicien compétent, ou maîtrisez parfaitement JavaScript !

Dans cette leçon, vous allez d’abord apprendre à ajouter une interactivité à l’aide de l’API Edge Animate. Plus tard, à mesure que vous gagnerez en confiance et en confort, vous progresserez davantage et insérerez un peu de code jQuery pour apporter des effets plus sophistiqués.

Déclencheurs, événements et actions

Edge Animate utilise des actions, déclencheurs et événements pour intégrer du code JavaScript dans votre composition.

Les actions sont les opérations que peut effectuer Edge Animate, ce qui, compte tenu du langage JavaScript complet à sa disposition, représente énormément de choses. Les actions peuvent aller du chargement d’un lien hypertexte à la modification d’une propriété visuelle spécifique d’un élément sur la scène, en passant par le stockage d’une information dans une variable pour une récupération ultérieure.

Les déclencheurs sont des actions qui sont placées le long du scénario. Lorsque la tête de lecture atteint le déclencheur, les actions sont exécutées. Utilisez des déclencheurs lorsque vous souhaitez que le code soit synchronisé par votre animation et non par une commande de l’utilisateur.

Les événements sont des choses qui se déroulent dans une composition et auxquelles Edge Animate peut répondre par une action. En règle générale, les événements sont générés par l’utilisateur, tels que le clic d’un bouton de souris, une pression sur une touche ou l’inclinaison d’un appareil portable. Cependant, des événements peuvent également se produire automatiquement. Par exemple, le moment où la composition est prête (lorsque l’ensemble des actifs et des bibliothèques de code a été téléchargé) constitue un événement. Les événements sont toujours associés à des actions. Lorsqu’un événement se produit, une action (ou un ensemble d’actions) est exécutée.

Déclencheurs de scénario

Les déclencheurs forment le moyen le plus simple d’ajouter du code à votre composition Edge Animate. Les déclencheurs sont exécutés automatiquement lorsque la tête de lecture les atteint sur le scénario. Vous pouvez disposer de plusieurs déclencheurs au cours du scénario. L’intervalle de temps minimum entre deux déclencheurs est de 1/1000e de seconde mais, en pratique, vous n’aurez jamais besoin ou ne souhaiterez jamais que des actions soient exécutées d’une manière si rapprochée.

Création d’une boucle

Dans le cas de ce diaporama sur la Birmanie, vous insérerez un déclencheur à la fin du scénario pour que la tête de lecture retourne automatiquement au début, en créant ainsi une boucle.

Cliquez sur le bouton Zoom sur le scénario pour ajuster au bas du scénario.

L’animation de diaporama entière apparaît dans l’espace disponible situé dans le panneau Scénario.
Déplacez la tête de lecture jusqu’à la fin du diaporama, à 0:10 secondes.
Dans le panneau Scénario, cliquez sur le bouton Insérer un déclencheur situé sur la ligne Actions du haut. Vous pouvez également choisir Scénario > Insérer un déclencheur ou appuyer sur les touches Ctrl+T (Windows) ou Commande+T (Mac OS).

Une icône ayant la forme d’un losange entouré d’accolades apparaît sur le scénario à la valeur 0:10 secondes. L’icône représente un déclencheur.

Un panneau comportant un grand champ blanc de saisie de texte et une colonne d’options de fragment de code s’affiche sur le côté droit. Le panneau est intitulé Trigger@10000ms, faisant référence à la position du déclencheur à 10 000 millisecondes, ou 10 secondes.
Sélectionnez le contenu du script en cours.

Le script actuel, //insérer le code ici, est appelé un commentaire. Les commentaires commencent toujours par deux barres obliques inverses et sont des descriptions du code. Les commentaires n’apportent pas de fonctions et n’augmentent pas significativement la taille de fichier de votre composition.
Dans le menu de fragments de code sur le côté droit du panneau, sélectionnez l’option Lire à partir de.

Un nouveau code apparaît dans le panneau, remplaçant ainsi le commentaire existant. Le nouveau code s’affiche avec ses propres commentaires qui décrivent sa fonction. Le code, sym.play(1000);, déplace la tête de lecture vers un point spécifique dans le temps sur le scénario et démarre la lecture.
Remplacez la valeur 1000 entre parenthèses dans le code par 0.

Le nombre entre parenthèses de la commande play() représente l’heure à laquelle la tête de lecture se déplacera. Puisque vous souhaitez que la tête de lecture se déplace au début du scénario à 0:00 secondes, entrez 0 dans les parenthèses de la commande play().
Fermez le panneau et prévisualisez votre projet dans un navigateur en appuyant sur les touches Ctrl+Entrée (Windows) ou Commande+Retour (Mac OS).

La lecture du diaporama s’exécute et se répète lorsqu’elle atteint la fin à 10 secondes.

Remarque :

Le nombre entre parenthèses de la commande play() s’appelle l’argument. Il donne des informations de commande supplémentaires pour la rendre plus précise. Dans cet exemple, il indique à la commande à quel point en millisecondes dans le temps doit démarrer la lecture. Les commandes peuvent comporter plusieurs arguments, séparés par des virgules. À mesure que vous apprenez un nombre plus élevé de commandes, vous apprenez également de quels arguments elles ont besoin.

Modification de déclencheurs

La modification du script pour vos déclencheurs est simple et facile. Le panneau qui s’est affiché lors de l’ajout du déclencheur est toujours disponible pour des modifications, ajouts ou suppressions.

Pour modifier un déclencheur, double-cliquez sur l’icône de déclencheur sur le scénario.
Le panneau de script s’ouvre et affiche le déclencheur ; vous pouvez alors modifier l’argument, supprimer le code ou ajouter un nouveau code à partir des options de fragment de code sur le côté droit du panneau.
Pour déplacer un déclencheur, cliquez sur l’icône de déclencheur et déplacez-la vers une nouvelle position sur le scénario.
Le déclencheur est déplacé vers un autre emplacement afin que les actions soient exécutées lorsque la tête de lecture atteint une nouvelle position dans le temps.
Pour supprimer un déclencheur, sélectionnez-le sur le scénario et appuyez sur la touche Supprimer.

Le déclencheur est supprimé du scénario.

Remarque :

Options d’affichage du panneau de script : le panneau de script qui s’ouvre lors de l’ajout d’un déclencheur propose plusieurs options destinées à simplifier l’affichage du code. Le menu d’options dans l’angle supérieur droit comporte trois choix qui contrôlent ce qui est affiché.

L’option Afficher les numéros de ligne permet d’afficher des numéros séquentiels en regard de chaque ligne de code de sorte que vous, et les autres développeurs qui partagez le script, puissiez localiser avec précision le code.
L’option Taille de la police permet de contrôler la taille d’affichage (Petite, Moyenne ou Grande) du texte dans le script. L’option par défaut est Petite.
L’option Inclure les commentaires de fragments de code permet de joindre automatiquement des commentaires au code que vous ajoutez à partir des options de fragment de code sur le côté droit du panneau.

En sus de ces options d’affichage, vous pouvez cliquer sur la bordure verticale qui divise la zone blanche de script du menu de fragments de code afin de réduire le menu pour laisser plus de place à votre code. Cliquez à nouveau sur le diviseur pour développer le menu.

Étude de votre syntaxe

Examinons de plus près le code que vous avez ajouté dans le déclencheur pour en apprendre davantage sur la syntaxe JavaScript, ou la façon dont les mots et la ponctuation fonctionnent ensemble. La syntaxe constitue la grammaire d’un langage de programmation.

Si vous n’êtes pas familier avec le code de programmation ou la rédaction de scripts, le code JavaScript inséré par Edge Animate peut être difficile à déchiffrer. Cependant, une fois que vous comprendrez la syntaxe de base, vous trouverez plus facile de suivre un script.

Le code qui figure dans votre déclencheur à 10 000 millisecondes apparaît comme suit :

sym.play(0);

Le premier mot de l’instruction est sym. Lorsque l’instruction est sur le scénario principal, le mot sym représente la composition Edge Animate entière. Edge Animate est organisé autour de la notion de « symboles », et la racine, ou symbole de niveau de base, constitue la scène Edge Animate. Ce symbole de racine contient l’ensemble des éléments et animations dans votre composition Edge Animate : tout ce qui est situé sur le scénario ou la scène. Dans JavaScript, lorsque vous souhaitez faire quelque chose, vous identifiez en premier lieu l’objet que vous souhaitez contrôler. Dans ce cas, puisque votre but est d’influer sur le scénario de votre composition Edge Animate, la première chose qui est écrite dans le script est sym.
L’opérateur point (.) fournit un moyen d’accéder à diverses commandes pour l’objet que vous avez identifié (dans ce cas, sym). Les objets peuvent être des animations, du texte ou des concepts abstraits tels que la date ou des données spécifiques. Les objets disposent de propriétés, qui les décrivent, et de méthodes, qui sont les actions qu’ils peuvent effectuer. Dans votre déclencheur, la méthode de l’objet sym est play(). Le point sépare l’objet et sa méthode.
Comme en français, chaque parenthèse ouvrante doit avoir une parenthèse fermante correspondante, et cela s’applique également à JavaScript. Si vous ouvrez quelque chose, vous devez le fermer. Toutes les méthodes comportent des parenthèses. Votre méthode, play(), dispose de parenthèses ouvrante et fermante.
Chaque méthode peut posséder différents arguments entre les parenthèses, qui fournissent des informations supplémentaires. La méthode play() ne nécessite qu’un seul argument, qui indique à Edge Animate à quel moment dans le temps (en millisecondes) doit commencer la lecture. Les méthodes peuvent comporter plusieurs arguments, qui sont séparés par des virgules.
Certains arguments nécessitent un nombre, certains peuvent requérir un nom et d’autres peuvent demander les mots true (vrai) et false (faux). Chaque fois que vous entrez le nom d’un fichier ou une URL, utilisez des guillemets simples ou doubles. Les guillemets distinguent une valeur Chaîne, qui représente une séquence de caractères, des autres types de valeurs.
Vous pouvez ajouter des commentaires pour rappeler (à vous ou à d’autres) ce que vous réalisez avec différentes parties du script. Pour ajouter un commentaire d’une seule ligne, démarrez-le avec deux barres obliques (//). Pour entrer un commentaire multiligne, démarrez-le avec /* et terminez-le par */. Les commentaires sont ignorés par JavaScript et n’affectent en aucune façon votre code.
Le point-virgule à la fin de la ligne indique à JavaScript qu’il a atteint la fin d’une instruction complète et la fin d’une ligne de code. Un point-virgule agit comme un point dans une phrase.

Avouez que cela représente beaucoup d’informations dans une seule ligne de code ! Mais vous familiariser avec la syntaxe est la première étape pour vous extraire de derrière le volant et regarder sous le capot de votre voiture.

Événements et actions

Jusqu’ici, vous avez vu comment Edge Animate utilise des déclencheurs pour exécuter automatiquement JavaScript lorsque la tête de lecture atteint un certain point dans le scénario. Vous avez ajouté un déclencheur à la fin de l’animation pour créer une boucle. Les deux autres méthodes qui permettent à Edge Animate d’ajouter un code JavaScript sont les événements et les actions.

Les événements sont des occurrences qui se produisent dans Edge Animate, que ce dernier peut détecter et auxquels il peut répondre. Lorsqu’un événement est détecté, vous fournissez des actions en tant que réponse.

Il est utile de considérer les interactions en termes d’événements et d’actions. Lorsque vous cliquez sur un bouton de menu (événement), d’autres d’options peuvent devenir disponibles (actions). Lorsque vous survolez un bouton (événement), une icône triangulaire de lecture peut s’afficher sur celui-ci (actions). Dans la section suivante, vous allez ajouter des images miniatures à la scène. Lorsque l’utilisateur clique sur chaque vignette (événement), la tête de lecture se déplace vers une nouvelle position sur le scénario (actions) pour afficher une image particulière du diaporama du voyage.

Création des boutons

Un bouton est un indicateur visuel élémentaire représentant l’objet de l’interaction de l’utilisateur. L’utilisateur clique généralement sur un bouton, mais beaucoup d’autres types d’interactions sont possibles. Par exemple, des transformations, des double-clics et des déploiements sont possibles. Edge Animate fournit également des événements uniques à des appareils mobiles, tels que des gestes tactiles.

Vous commencerez avec l’événement le plus naturel et le plus courant, qui est le clic simple.

Ajout des vignettes

De petites versions recadrées des grandes images de la Birmanie vous sont fournies dans le dossier images.

Dans le panneau Bibliothèque, développez le dossier images au sein du dossier Actifs.
Faites glisser le fichier nommé button1_gray.jpg du panneau Bibliothèque vers la scène.

Une vignette en niveaux de gris d’un pêcheur s’affiche sur la scène, le scénario et le panneau Eléments.
Positionnez la vignette afin que son angle supérieur gauche se trouve dans l’angle supérieur gauche de la scène. Les coordonnées doivent être X=0, Y=0.
Faites glisser le fichier nommé button2_gray.jpg du panneau Bibliothèque vers la scène et positionnez-le juste en dessous de la première vignette. Vous pouvez utiliser les repères commentés pour vous aider à aligner automatiquement les images en place. Les coordonnées doivent être X=0, Y=80.

Deux vignettes en niveaux de gris figurent sur le côté gauche de la scène, l’une au-dessus de l’autre.
Faites glisser les trois autres vignettes en niveaux de gris du panneau Bibliothèque vers la scène, en positionnant successivement chacune sous la précédente.

Cinq vignettes au total doivent être maintenant empilées verticalement sur le côté gauche de la scène.

Ajout des événements

Chaque élément sur la scène peut disposer de ses propres événements et actions. Insérez le code pour des éléments individuels à partir de la colonne à gauche du scénario ou du panneau Eléments. Le bouton Ouvrir le panneau Actions est indiqué par un ensemble d’accolades.

Dans le scénario ou le panneau Eléments, cliquez sur le bouton Ouvrir le panneau Actions du premier élément miniature, button1_gray.

Le panneau de script de l’élément button1_gray s’affiche.

Un menu d’options s’ouvre automatiquement et affiche les événements disponibles pour l’élément button1_gray.
Sélectionnez la première option : click.

Edge Animate ajoute un onglet clic en haut du panneau avec un volet de script vide et des fragments de code disponibles sur la droite.

Remarque :

Lorsque vous ajoutez d’autres événements au même élément, des onglets supplémentaires apparaissent dans la partie supérieure du panneau de script.

Remarque :

Pour supprimer un événement (et tout code qui lui est associé), sélectionnez l’onglet spécifique de l’événement et cliquez sur le bouton Moins dans l’angle supérieur gauche du panneau de script.

Ajout des actions

Chaque événement doit avoir une action d’accompagnement, ou une réponse, à l’événement.

Placez le curseur sur la deuxième ligne du volet de script (après la première ligne de commentaires), puis choisissez l’option Arrêter à.

Edge Animate ajoute le code indiquant d’arrêter la tête de lecture à une position spécifique sur le scénario.
Entre les parenthèses de la méthode stop(), remplacez le nombre 1000 par 0.

La méthode stop() exige un nombre, en millisecondes, représentant sur le scénario le point auquel la tête de lecture se déplacera et s’arrêtera. Dans la mesure où cette première vignette en niveau de gris est celle des pêcheurs, vous souhaitez que la tête de lecture s’arrête à 0:00 seconde, le point auquel nous voyons l’image complète des pêcheurs sur la scène.

Remarque :

Puisque l’image du pêcheur reste sur le scénario jusqu’à 1,5 secondes, vous pouvez en fait utiliser n’importe quel nombre compris entre 0 et 1 500 pour la méthode stop() dans le cas de l’élément button1_gray, mais il est plus simple et plus facile d’être cohérent et de choisir le moment où l’image apparaît pour la première fois.
Fermez le panneau de script.

L’icône Actions d’ouverture de l’élément button1_gray est remplie, indiquant qu’un script est actuellement associé à cet élément.
Prévisualisez votre composition Edge Animate dans un navigateur en sélectionnant Fichier > Aperçu dans ce dernier, ou en appuyant sur les touches Ctrl+Entrée (Windows) ou Commande+Retour (Mac OS).
À tout moment au cours du diaporama, cliquez sur la première vignette en niveaux de gris.

Le diaporama s’arrête et affiche l’image des pêcheurs.

Finalisation de l’interactivité

Maintenant que vous avez terminé l’interactivité du premier bouton, ajoutez la même fonctionnalité pour le reste.

Dans le scénario ou le panneau Eléments, cliquez sur le bouton Ouvrir le panneau Actions du deuxième élément miniature, button2_gray.

Le panneau de script de l’élément button2_gray s’affiche.
Cliquez sur le bouton Plus dans l’angle supérieur gauche.

Un menu d’options s’ouvre et affiche les événements disponibles pour l’élément button2_gray.
Sélectionnez la première option : clic.

Edge Animate ajoute un onglet clic en haut du panneau avec un volet de script vide et des fragments de code disponibles sur la droite.
Placez le curseur sur la deuxième ligne du volet de script (après la première ligne de commentaires), puis choisissez l’option Arrêter à.

Edge Animate ajoute le code JavaScript indiquant d’arrêter la tête de lecture à une position spécifique sur le scénario.
Entre les parenthèses de la méthode stop(), remplacez le nombre 1000 par 2000.

La méthode stop() exige un nombre, en millisecondes, représentant sur le scénario le point auquel la tête de lecture se déplacera et s’arrêtera. Dans la mesure où la deuxième vignette en niveau de gris est celle des statues, vous souhaitez que la tête de lecture s’arrête à 0:02 seconde, le point auquel nous voyons l’image complète des statues sur la scène.
À l’aide de l’option Arrêter à, ajoutez des événements de clic semblables à toutes les autres images miniatures en niveaux de gris. N’oubliez pas de modifier comme suit les arguments de chaque méthode stop(), afin que la tête de lecture s’arrête à des moments différents pour afficher une image plus grande et unique sur la scène :
- La méthode stop() de l’élément button1_gray doit aller à 0 milliseconde.
- La méthode stop() de l’élément button2_gray doit aller à 2000 millisecondes.
- La méthode stop() de l’élément button3_gray doit aller à 4000 millisecondes.
- La méthode stop() de l’élément button4_gray doit aller à 6000 millisecondes.
- La méthode stop() de l’élément button5_gray doit aller à 8000 millisecondes.

Navigation dans le panneau Code

Votre diaporama de voyage est maintenant interactif, et les utilisateurs peuvent cliquer sur la composition pour visualiser n’importe laquelle des images. Toutefois, votre code semble être éparpillé entre plusieurs éléments différents. Comment pouvez-vous visualiser l’ensemble du code de votre composition Edge Animate ? La réponse se trouve dans le panneau Code, que vous pouvez ouvrir en choisissant Fenêtre > Code, ou en appuyant sur les touches Ctrl+E (Windows) ou Commande+E (Mac OS).

Affichage de votre code

Le panneau Code affiche l’intégralité du code dans votre composition Edge Animate : aussi bien le code généré automatiquement pour chaque projet que le code que vous insérez vous-même.

Choisissez Fenêtre > Code, ou appuyez sur les touches Ctrl+E (Windows)/Commande+E (Mac OS).

Le panneau Code s’affiche. Le panneau Code est semblable aux autres panneaux de script pour les déclencheurs, événements et actions.
Cliquez sur le bouton Code complet sur le côté droit du panneau pour basculer entre le mode Code complet et le mode non-Code complet.

En mode Code complet, Edge Animate affiche l’ensemble du code du fichier JavaScript de la composition Edge Animate. Faites défiler l’écran vers le bas pour visualiser le script de tous les éléments miniatures ainsi que le déclencheur. Le code que cela représente est contenu dans le fichier 05_workingcopy_edgeActions.js.

Dans un mode autre que Code complet, vous pouvez sélectionner le code des éléments individuels ou des déclencheurs sur la scène sur le côté gauche du panneau. En outre, une option permet de visualiser le code du Preloader, qui est actuellement désactivé parce que vous n’en avez pas encore ajouté. Les leçons ultérieures vous apprendront à ajouter un Preloader.
Dans un mode autre que Code complet, cliquez sur le bouton Plus aligné avec l’élément Scène.

Le menu hiérarchique qui s’affiche permet d’ajouter un événement à la scène elle-même, à l’un des éléments sur la scène, ou encore au scénario.
Si vous souhaitez supprimer un événement ou un déclencheur du panneau Code, cliquez avec le bouton droit sur l’événement ou le déclencheur dans la liste, puis sélectionnez Supprimer une action.
Que ce soit en mode Code complet ou mode non-Code complet, lorsque vous effectuez des ajouts ou modifications au script, ils sont enregistrés dans la composition.

Remarque :

Traitement des erreurs de code

L’utilisation des fragments de code fournis simplifie relativement l’ajout de code car le script est déjà correctement formaté. Tout ce que vous avez à faire est de remplacer des valeurs clés. Cependant, des bogues et fautes de frappe s’insinuent forcément, et le traitement des erreurs de code est un problème courant pour n’importe quel développeur, qu’il soit novice ou expert.

Edge Animate vous avertit immédiatement de la présence d’erreurs de code, en facilitant ainsi leur recherche et leur correction. En cas de présence d’une erreur de syntaxe dans toute partie du code, Edge Animate affiche un message d’erreur dans l’angle inférieur gauche du panneau Code. Par exemple, si vous supprimez accidentellement la parenthèse fermante de la méthode stop(), l’affichage vous indique l’emplacement de l’erreur. En outre, un point rouge apparaît en regard de la ligne de code concernée.

La notification d’erreur s’affiche également dans l’angle inférieur droit de la scène.

Remarque :

Cliquez sur l’icône de flèche située à la suite de la description de l’erreur pour accéder directement à la source de l’erreur dans le panneau Code afin de pouvoir y remédier. Les options Tout et Code dans l’affichage d’erreur déterminent si toutes les erreurs sont affichées (y compris les avertissements d’incompatibilités de fonction avec divers appareils, tels que les ombres de texte dans IE9), ou si seules sont affichées les erreurs de code.

Création d’étiquettes

Lorsque l’utilisateur clique sur une vignette, Edge Animate déplace la tête de lecture vers une nouvelle position sur le scénario, selon l’argument dans la méthode stop(). Cependant, imaginez que le client qui vous a commandé le développement de ce diaporama souhaite que la séquence entière se déroule un peu plus lentement. Il s’agit d’une tâche facile à réaliser parce que vous pouvez sélectionner tous les éléments sur le scénario et déplacer l’ensemble des animations et images clés afin d’allonger le temps total. Toutefois, cela provoque le changement de la position à laquelle s’affiche chaque image sur la scène, ce qui nécessite de modifier toutes les valeurs en millisecondes dans les méthodes stop().

Il existe une autre approche qui permettrait d’économiser du temps et des efforts. Plutôt que d’utiliser des valeurs fixes en millisecondes dans les méthodes stop(), vous pouvez utiliser des étiquettes qui font référence à des positions sur le scénario. Les étiquettes peuvent se déplacer avec votre animation, ce qui veut dire que l’augmentation ou la réduction de la durée de votre animation peut déplacer les étiquettes proportionnellement.

Ajout d’étiquettes

Les étiquettes apparaissent sur le panneau Scénario, sous les repères temporels et juste au-dessus de la couche Actions.

Déplacez la tête de lecture à 0:00 seconde.

L’image du pêcheur apparaît à 0:00 seconde.
Cliquez sur le bouton Insérer une étiquette ou appuyez sur les touches Ctrl+L (Windows) ou Commande+L (Mac OS).

Sur le scénario figure maintenant une étiquette nommée Label 1.
Renommez l’étiquette pêcheurs, puis appuyez sur la touche Entrée pour quitter l’édition de texte de l’étiquette.

L’étiquette nommée pêcheurs est maintenant associée à 0:00 seconde.
Ajoutez quatre autres étiquettes au scénario, chacune marquant le point de départ auquel s’affiche une image sur la scène.
- Insérez l’étiquette statues à 0:02 seconde.
- Insérez l’étiquette maisons à 0:04 seconde.
- Insérez l’étiquette moine à 0:06 seconde.
- Insérez l’étiquette femmes à 0:08 seconde.

Édition d’étiquettes

Une fois que vous avez inséré et nommé des étiquettes, plusieurs façons permettent des les modifier :

Pour renommer une étiquette, double-cliquez sur son nom sur le scénario.
Pour déplacer une étiquette, cliquez sur celle-ci et déplacez-la vers une nouvelle position sur le scénario.
Pour supprimer une étiquette, sélectionnez l’étiquette sur le scénario afin de la mettre en surbrillance, puis appuyez sur la touche Supprimer.
Pour couper, copier ou coller une étiquette, cliquez avec le bouton droit sur l’étiquette et choisissez l’option souhaitée, ou utilisez les commandes de clavier standard pour couper (Ctrl/Commande+X), copier (Ctrl/Commande+C) et coller (Ctrl/Commande+V).

Modification des références au scénario

Maintenant que le scénario contient des étiquettes, vous pouvez modifier les références dans le code JavaScript.

Choisissez Fenêtre > Code, ou appuyez sur les touches Ctrl+E (Windows)/Commande+E (Mac OS).

Le panneau Code s’affiche.
S’il n’est pas déjà sélectionné, cliquez sur le bouton Code complet pour afficher le panneau en mode Code complet.

L’ensemble du code pour les actions et événements de vignettes s’affiche dans la fenêtre de script unique.
Remplacez toutes les positions en millisecondes dans les méthodes stop() avec vos étiquettes. Les lignes de code suivantes doivent être modifiées :
- Remplacer sym.stop(0); par sym.stop("pêcheurs");
- Remplacer sym.stop(1500); par sym.stop("statues");
- Remplacer sym.stop(3500); par sym.stop("maisons");
- Remplacer sym.stop(5500); par sym.stop("moine");
- Remplacer sym.stop(7500); par sym.stop("femmes");
Remarque :

Veillez à utiliser des guillemets droits autour du nom de vos étiquettes. Les guillemets sont indispensables pour que JavaScript puisse identifier les noms en tant que chaîne (et non en tant que variable). Les guillemets droits et les guillemets courbes sont des caractères différents dans les langages HTML et JavaScript et ne sont pas interchangeables.
Prévisualisez votre composition Edge Animate dans un navigateur en sélectionnant Fichier > Aperçu dans celui-ci, ou en appuyant sur les touches Ctrl+Entrée (Windows) ou Commande+Retour (Mac OS).
À tout moment au cours du diaporama, cliquez sur les images miniatures.

Le diaporama s’arrête et affiche l’image sélectionnée.
Revenez à Edge Animate et sélectionnez tous les éléments sur le scénario en choisissant Sélection > Tout, ou en appuyant sur les touches Ctrl+A (Windows) ou Commande+A (Mac OS). Veillez à ce qu’aucun des éléments ne soit verrouillé.
Cliquez sur la dernière image-clé du dernier élément animé et déplacez-la sur le scénario. Faites glisser l’image clé vers la gauche pour diminuer la durée totale du diaporama.

À mesure que vous diminuez la durée de tous les éléments animés, les étiquettes se déplacent également proportionnellement, en conservant leur identification de ce qui est affiché sur la scène. Restaurez la durée totale de la composition sur 0:10 seconde.

Ajout d’une rétroaction visuelle

Dans la mesure où la plupart des éléments interactifs sur le Web disposent d’une rétroaction visuelle, il est important de fournir au lecteur des indices sur l’interactivité d’un élément particulier. Par exemple, un simple hyperlien sur une page Web changera fréquemment de couleur lorsque vous placez la souris dessus. Un bouton sera mis en surbrillance lorsque vous le survolez avec le pointeur de la souris et pourra sembler enfoncé lorsque vous cliquez dessus.

Vous pouvez créer ces interactions à l’aide d’une combinaison d’événements et d’actions dans Edge Animate. Vous ajouterez ensuite ces événements et actions aux vignettes pour obtenir une rétroaction visuelle.

Ajout des vignettes de survol

La première question que vous devriez poser est « quel effet visuel souhaitez-vous voir lorsqu’un utilisateur déplace sa souris sur les images miniatures ? ». Pour ce projet, vous allez coloriser des vignettes en niveaux de gris, et faire qu’une mise en surbrillance apparaisse autour des bordures. La première étape consiste à placer des versions colorisées des vignettes sur la scène.

Dans le sous-dossier images du dossier Actifs du panneau Bibliothèque, vous trouverez les versions couleur de chacune des cinq images miniatures, indiquées par le suffixe _color ajouté au nom de fichier.
Faites glisser le fichier button1_color.jpg de la bibliothèque vers la scène.
Utilisez les repères commentés pour positionner l’élément button1_color dans l’angle supérieur gauche, exactement au-dessus de sa version en niveaux de gris. Son emplacement doit être X=0, Y=0.
Faites glisser les quatre autres versions colorisées des vignettes vers la scène, en les positionnant exactement au-dessus de leurs équivalents en niveaux de gris. Toutes les vignettes couleur doivent être positionnées au-dessus de la pile du panneau Élément.

Les dimensions des versions colorisées et en niveaux de gris des vignettes sont exactement identiques.

Masquage des vignettes de survol

Dans la mesure où vous souhaitez afficher la version colorisée uniquement lorsque le curseur de la souris survole la vignette, vous devez en premier lieu masquer les vignettes colorisées. Vous pouvez masquer les éléments en changeant leur propriété Afficher sur Non.

Déplacez la tête de lecture à 0:00 seconde.
Maintenez la touche Maj enfoncée, puis sélectionnez tous les éléments miniatures colorisés.
Dans le panneau Propriétés, modifiez la propriété Afficher de Oui en Non.

Edge Animate insère une nouvelle image-clé sur le scénario pour tous les éléments sélectionnés à 0:00 seconde et ceux-ci disparaissent de la scène.

Insertion de l’événement mouseover

Chaque vignette en niveaux de gris contient un événement de clic. Vous devrez modifier chacun de ces éléments pour incorporer un événement mouseover. Un événement mouseover se produit lorsque l’utilisateur déplace le curseur de la souris sur l’élément sélectionné. Sur cet événement mouseover, vous afficherez les vignettes colorisées.

Dans le scénario ou le panneau Eléments, cliquez sur le bouton Ouvrir le panneau Actions du premier élément miniature, button1_gray.

Le panneau de script de l’élément button1_gray s’affiche. Les actions et l’événement click actuel apparaissent.
Cliquez sur le bouton Plus dans l’angle supérieur gauche et choisissez mouseover.

Edge Animate ajoute un onglet mouseover.
Placez le curseur sur la deuxième ligne du volet de script (après la première ligne de commentaires), puis choisissez l’option Afficher élément.

Edge Animate ajoute le code JavaScript pour afficher un élément. La partie en surbrillance du code est le nom de l’élément à afficher.
Remplacez le code en surbrillance par button1_color. Assurez-vous que les doubles guillemets droits restent autour du nom de l’élément.

L’instruction intégrale apparaît comme suit :

sym.$("button1_color").show();

Le signe dollar et les parenthèses forment la syntaxe jQuery et indiquent au navigateur l’élément à sélectionner. Dans cette instruction, l’élément nommé button1_color dans la composition Edge Animate actuelle est sélectionné, et la méthode appelée show() est exécutée.
Prévisualisez votre composition Edge Animate dans un navigateur en sélectionnant Fichier > Aperçu dans celui-ci, ou en appuyant sur les touches Ctrl+Entrée (Windows) ou Commande+Retour (Mac OS). Déplacez votre souris sur la première image miniature en niveaux de gris.

Dès que le curseur de la souris survole l’image miniature en niveaux de gris, la version colorisée apparaît. Dans la mesure où la version colorisée est située au-dessus de la version en niveaux de gris, vous voyez uniquement l’image colorisée.
Revenez à Edge Animate et insérez l’événement mouseover avec l’action Afficher élément pour les quatre boutons miniatures en niveaux de gris restants. Veillez à remplacer la partie de code en surbrillance avec la version colorisée correcte de la vignette.

Insertion de l’événement mouseout

Lorsque vous prévisualisez le projet Edge Animate, vous remarquerez que les vignettes deviennent colorisées lorsque vous passez la souris sur celles-ci, mais qu’elles restent en couleur, même une fois que vous avez retiré la souris. Afin que les vignettes puissent revenir à leur version en niveaux de gris, vous devez ajouter un événement supplémentaire : l’événement mouseout.

L’événement mouseout se produit lorsque le curseur sort d’un élément. Vous allez ajouter l’événement mouseout aux vignettes colorisées (et non aux vignettes en niveaux de gris) et associerez l’événement à une commande qui masque les versions colorisées. Le résultat : les versions colorisées disparaissent en laissant les versions en niveaux de gris à nouveau visibles.

Dans le scénario ou le panneau Eléments, cliquez sur le bouton Ouvrir le panneau Actions de l’élément miniature button1_color. L’élément est actuellement masqué sur la scène, mais vous pouvez toujours lui ajouter un script.

Le panneau de script de l’élément button1_color s’affiche.
Dans le menu contextuel qui apparaît, spécifiez mouseout pour l’événement.

Edge Animate ajoute un onglet mouseout.
Placez le curseur sur la deuxième ligne du volet de script (après la première ligne de commentaires), puis choisissez l’option Masquer élément.

Edge Animate ajoute le code JavaScript pour afficher un élément. La partie en surbrillance du code est le nom de l’élément à afficher.
Remplacez le code en surbrillance par button1_color. Assurez-vous que les doubles guillemets droits restent autour du nom de l’élément.

L’instruction intégrale apparaît comme suit :

sym.$("button1_color").hide();

Notez les similitudes entre les actions pour cet événement mouseout et le script précédent pour l’événement mouseover.
Prévisualisez votre composition Edge Animate dans un navigateur en sélectionnant Fichier > Aperçu dans celui-ci, ou en appuyant sur les touches Ctrl+Entrée (Windows) ou Commande+Retour (Mac OS). Déplacez votre souris sur la première image miniature en niveaux de gris.

Dès que le curseur de la souris survole l’image miniature en niveaux de gris, la vignette devient colorisée. Lorsque vous déplacez le curseur hors de l’image, le bouton semble revenir à la version en niveaux de gris.
Revenez à Edge Animate et insérez l’événement mouseout avec l’action Masquer élément pour les quatre boutons miniatures colorisés restants. Veillez à remplacer la partie de code en surbrillance avec la version colorisée correcte de la vignette.

Modification de l’événement click

Une dernière correction est nécessaire avant que l’ensemble des événements et actions fonctionnent ensemble. Vous avez peut-être remarqué qu’un clic sur les boutons ne déplace pas la tête de lecture comme vous le souhaitez. La raison est que les vignettes colorisées chevauchent leurs homologues en niveaux de gris, qui bloquent les événements click. La dernière étape consiste à supprimer l’événement click des vignettes en niveaux de gris et de les ajouter à la place aux vignettes colorisées.

Dans le scénario ou le panneau Eléments, cliquez sur le bouton Ouvrir le panneau Actions de chacun des éléments miniatures en niveaux de gris.
Cliquez sur l’onglet de l’événement click sur le panneau de script, puis cliquez sur le bouton Moins.

Edge Animate supprime l’événement click et l’ensemble de ses actions.
Dans le scénario ou le panneau Eléments, cliquez sur le bouton Ouvrir le panneau Actions de chacun des éléments miniatures colorisés.
Cliquez sur le bouton Plus dans l’angle supérieur gauche et choisissez l’option click pour l’événement.

Edge Animate ajoute un onglet d’événement click.
Choisissez l’option Arrêter et, comme précédemment, remplacez l’argument en millisecondes par l’étiquette correspondante sur le scénario.
Prévisualisez votre composition Edge Animate dans un navigateur en sélectionnant Fichier > Aperçu dans celui-ci, ou en appuyant sur les touches Ctrl+Entrée (Windows) ou Commande+Retour (Mac OS).

Vos boutons sont terminés. Lorsque vous déplacez la souris au-dessus d’eux, ils deviennent colorisés. Si vous déplacez la souris en dehors des éléments, ils reviennent à leur version en niveaux de gris, et lorsque vous cliquez dessus, Edge Animate affiche l’image correspondante à partir du diaporama.

Remarque :

Utilisation du panneau Code pour effectuer des modifications globales : apporter des modifications globales, comme vous l’avez fait dans cette tâche en supprimant tous les événements click d’un ensemble d’éléments, peut s’avérer ardu en raison de la nécessité de sélectionner et de modifier chaque élément. Toutefois, l’utilisation du panneau Code peut apporter un gain de temps appréciable si vous êtes prudent lors de la sélection et de la modification du code.

Ouvrez le panneau Code en choisissant Fenêtre > Code, ou en appuyant sur les touches Ctrl+E (Windows) ou Commande+E (Mac OS), puis choisissez le mode Code complet. Examinez le code de tous les événements click (qui sont appelés « click ») pour tous les éléments souhaités. Supprimez tout ce qui commence par les instructions qui incluent l’événement click et se termine par la fin de liaison //Edge.
Remarque :
Événements pour souris et appareils tactiles : la liste suivante décrit les événements disponibles que vous pouvez joindre à vos éléments d’interaction avec la souris ou un appareil tactile. Pour la plupart des utilisateurs, l’événement click ou touchstart sera suffisant pour tous les projets.

click, un événement qui se produit lorsque le bouton de la souris est enfoncé et relâché.

dblclick, un événement qui se produit lorsque le bouton de la souris est enfoncé et relâché deux fois en succession rapide.

mouseover, un événement qui se produit lorsque le curseur de la souris survole un élément.

mousedown, un événement qui se produit lorsque le bouton de la souris est enfoncé.

mousemove, un événement qui se produit chaque fois que le curseur de la souris se déplace à l’intérieur d’un élément.

mouseup, un événement qui se produit lorsque le bouton de la souris est relâché.

mouseout, un événement qui se produit lorsque le curseur de la souris sort d’un élément.

touchstart, un événement pour les appareils tactiles lorsqu’un utilisateur touche un élément.

touchmove, un événement pour les appareils tactiles qui se produit lorsque l’utilisateur touche un élément et déplace un doigt sur celui-ci.

touchend, un événement pour les appareils tactiles qui se produit lorsque l’utilisateur arrête de toucher un élément.

D’autres événements utilisateur tels que des pressions de touches du clavier sont également disponibles, mais pas pour des éléments individuels. Des pressions sur des touches sont associées à l’élément Scène, et vous explorerez celles-ci et d’autres types d’événements dans la leçon suivante.

Personnalisation du curseur de la souris

En sus de la rétroaction visuelle que vous pouvez fournir en changeant l’apparence du bouton lorsque l’utilisateur interagit avec celui-ci, vous pouvez également modifier l’aspect du curseur lui-même. Il peut souvent arriver que le curseur en forme de flèche par défaut sur un navigateur d’ordinateur portable ou de bureau prenne la forme d’une main (connu sous le nom de pointeur curseur) lorsqu’il survole un élément interactif ou un lien hypertexte. Vous pouvez choisir de modifier le curseur en pointeur, ou de choisir parmi des dizaines d’autres types de curseur.

Utilisation du pointeur

Le panneau Propriétés contrôle l’aspect du curseur et permet de sélectionner une icône personnalisée pour chaque élément.

Dans le panneau Scénario, définissez temporairement la propriété Afficher sur Oui pour les cinq éléments miniatures colorisés.

L’activation de la propriété Afficher permet de les sélectionner sur la scène.
Sélectionnez les cinq éléments miniatures colorisés, button1_color à button5_color.
Dans le panneau Propriétés, cliquez sur l’option Curseur et choisissez l’icône de pointeur.
Ramenez la propriété Afficher des cinq éléments miniatures colorisés sur Non.

Les éléments miniatures colorisés sont à nouveau masqués.
Prévisualisez votre composition Edge Animate dans un navigateur en sélectionnant Fichier > Aperçu dans celui-ci, ou en appuyant sur les touches Ctrl+Entrée (Windows) ou Commande+Retour (Mac OS).

Le curseur en forme de pointeur apparaît à chaque fois que vous cliquez sur les boutons ou les survolez avec la souris.

Remarque :

Vous pouvez uniquement modifier l’aspect du curseur pour chaque élément, et non pour chaque événement d’un élément.

Contrôle d’éléments animés

Jusqu’ici, vous avez ajouté un code JavaScript qui contrôlait le comportement de la tête de lecture et le masquage ou l’affichage d’éléments spécifiques. Vous pouvez également ajouter un code pour contrôler la lecture de symboles animés.

Les symboles, comme vous l’avez appris dans la leçon précédente, sont des objets indépendants que vous créez et qui peuvent disposer de leur propre animation interne. Avec le langage JavaScript, vous pouvez contrôler les animations de symbole afin de créer des interactions plus complexes. Par exemple, vous pouvez créer un bouton qui contrôle un spectaculaire déroulement animé ou la fermeture d’une carte. Ou encore, vous pouvez créer un bouton qui contrôle l’ouverture ou la réduction animée d’une zone d’informations supplémentaires. La carte et la zone d’informations supplémentaires ont alors le rôle de symboles qui se comportent indépendamment sur le scénario principal.

Pour votre diaporama de voyage interactif, vous allez ajouter un bouton sur la scène qui, lorsque survolé, s’anime avec élégance pour révéler des informations sur les images et la Birmanie.

Ajout du bouton et du symbole animé

Le bouton et le symbole animé ont déjà été créés pour vous et sont prêts à l’emploi dans la bibliothèque.

Dans le panneau Bibliothèque, développez la section Symboles, puis faites glisser le symbole moreinfo sur la scène. Positionnez le symbole moreinfo au point X=200, Y=0.

Le symbole moreinfo apparaît dans les panneaux Eléments et Scénario. Les courtes flèches de lecture sur le scénario affichent la durée de l’animation au sein du symbole (une longueur d’une seconde).
Dans le scénario, cliquez sur les options Lecture de l’élément moreinfo et choisissez Arrêter.

La lecture de l’animation interne du symbole ne se déroule pas sur le scénario principal.
Double-cliquez sur le symbole moreinfo sur la scène, puis appuyez sur la barre d’espacement pour visualiser l’animation dans le symbole.

Le symbole est constitué de deux courtes animations. Le long rectangle gris horizontal se développe, et au même moment, la zone de découpage d’un texte informatif se développe pour l’afficher.
Cliquez sur le bouton Scène en haut de la scène pour quitter votre symbole.
Faites glisser l’image triangle.png du dossier Actifs de la bibliothèque vers la scène. Positionnez l’élément de triangle au point X=484, Y=3, ou utilisez les repères commentés pour centrer l’élément sur l’élément moreinfo.

Lecture d’une animation de symbole

Le symbole est actuellement arrêté à 0 seconde. Vous allez ajouter un événement mouseover au bouton en forme de triangle qui indique au symbole de démarrer la lecture.

Dans le scénario ou le panneau Eléments, cliquez sur le bouton Ouvrir le panneau Actions de l’élément de triangle.

Le panneau de script du triangle s’affiche.
Choisissez mouseover pour l’événement.

Edge Animate ajoute un onglet d’événement mouseover.
Choisissez l’option Obtenir le symbole.

Edge Animate ajoute le code JavaScript pour sélectionner un symbole spécifique sur la scène. La partie en surbrillance du code est le nom du symbole à sélectionner.
Remplacez le code en surbrillance par moreinfo, afin de correspondre à l’élément moreinfo sur la scène. Assurez-vous que les doubles guillemets droits restent autour du nom de l’élément.

L’instruction intégrale apparaît comme suit :

var mySymbolObject = sym.getSymbol("moreinfo");

La première partie de cette instruction, var mySymbolObject, crée une variable pour la référence à votre symbole, afin que vous puissiez le contrôler.
Sur la ligne suivante dans le panneau de script, choisissez l’option Lire.

Edge Animate ajoute une instruction qui lit l’objet sym, ou le scénario principal. Toutefois, vous souhaitez que le symbole lise son animation, et non l’animation sur le scénario principal.
Remplacez sym par la variable mySymbolObject, qui fait référence à votre symbole.

L’instruction suivante apparaît comme suit :

mySymbolObject.play();

Remarque :

Vous pouvez combiner les deux instructions en une seule ligne comme suit, sym.getSymbol("moreinfo").play();.

Réinitialisation de l’animation du symbole

Maintenant, vous allez ajouter un événement mouseout pour l’élément de triangle afin de ramener sa tête de lecture à 0 seconde pour réinitialiser l’animation.

Dans le scénario ou le panneau Eléments, cliquez sur le bouton Ouvrir le panneau Actions de l’élément de triangle.

Le panneau de script du bouton moreinfo s’affiche.
Sélectionnez textClick sur le bouton Plus dans l’angle supérieur gauche et choisissez l’option mouseout pour l’événement.

Edge Animate ajoute un onglet d’événement mouseout.
Choisissez l’option Obtenir le symbole et remplacez le code en surbrillance par moreinfo.

L’instruction intégrale apparaît comme suit :

var mySymbolObject = sym.getSymbol("moreinfo");
Sur la ligne suivante dans le panneau de script, choisissez l’option Arrêter à.

Edge Animate ajoute une instruction qui arrête l’objet sym, ou le scénario principal. Toutefois, vous souhaitez que le symbole arrête son animation, et non l’animation sur le scénario principal.
Remplacez sym par la variable mySymbolObject, qui fait référence à votre symbole. Remplacez l’argument par défaut de 1000 millisecondes par 0.

L’instruction suivante apparaît comme suit :

mySymbolObject.stop(0);
Prévisualisez votre composition Edge Animate dans un navigateur en sélectionnant Fichier > Aperçu dans celui-ci, ou en appuyant sur les touches Ctrl+Entrée (Windows) ou Commande+Retour (Mac OS).

Lorsque vous survolez le bouton triangulaire en haut de la scène, le symbole moreinfo lit son animation, qui affiche le texte et la zone de texte. Un passage hors du bouton réduit l’affichage du texte et de la zone de texte.

Utilisation d’effets jQuery

L’API Edge Animate propose un bon équilibre entre puissance, flexibilité et simplicité d’utilisation pour intégrer une interactivité à vos conceptions et animations. L’insertion d’un script par un simple clic sur un bouton dans le panneau de script ne peut (quasiment) pas échouer. Cependant, l’ajout d’un peu de code jQuery à vos scripts peut souvent vous faciliter la tâche. Comme vous l’avez appris précédemment dans cette leçon, jQuery est une bibliothèque JavaScript qui a été écrite spécifiquement pour simplifier la sélection d’éléments sur une page Web et la création d’animations et de transitions. Il existe de nombreuses méthodes jQuery permettant d’animer des éléments, tels que le fondu à l’ouverture, le fondu à la fermeture, ainsi que des effets coulissants. Dans la mesure où Edge Animate est intégralement compatible avec JavaScript et jQuery, vous pouvez utiliser ces méthodes où bon vous semble. Examinons une méthode jQuery particulière, fadeToggle(). La méthode fadeToggle() anime la transparence d’un élément par un effet de fondu à l’ouverture ou à la fermeture, selon son état actuel. Si l’élément est transparent, il deviendra opaque. S’il est opaque, il deviendra transparent.

Dans une nouvelle composition Edge Animate, ajoutez un petit rectangle et une image sur la scène. Nommez le rectangle Rectangle, et l’image Image.
Dans le scénario ou le panneau Eléments, cliquez sur le bouton Ouvrir le panneau Actions de l’élément Rectangle.
Choisissez click pour l’événement.
Ajoutez l’instruction suivante pour l’événement click : sym.$("Image").fadeToggle()
C’est tout ! Prévisualisez votre composition dans un navigateur.

Lorsque vous cliquez sur le rectangle, Edge Animate utilise jQuery pour sélectionner l’image et exécute la méthode fadeToggle(). L’image devient transparente ou opaque via des clics alternés. jQuery réalise l’ensemble du travail de création de deux animations inversées sans besoin de créer manuellement des symboles, images clés ou mécanismes pour mémoriser l’état de l’image. jQuery est puissant et constitue un bon ajout à votre boîte à outils de concepteur-développeur. Vous pouvez afficher le fichier 05JQuery.an dans le dossier 05End_JQuery pour visualiser l’exemple complet.

Examen

Questions de l’examen

Quelle est la différence entre les actions, les déclencheurs et les événements, et comment sont-ils utilisés pour créer une interactivité dans Adobe Edge Animate ?
Quelle est la relation entre l’API Edge Animate, jQuery et JavaScript ?
Comment créer un bouton ?
Pourquoi utiliser des étiquettes, et où sont-elles situées ?
Qu’est-ce que le panneau Code, et en quoi est-il différent des panneaux destinés aux actions et déclencheurs ?
Que signifie le code sym dans l’API Edge Animate, et comment l’utiliser ?

Réponses à l’examen

Les actions, déclencheurs et événements constituent tous du code JavaScript qui permet de créer une interactivité dans Edge Animate. Les actions sont des commandes qui indiquent à Edge Animate d’exécuter une opération, comme masquer ou afficher un élément, ou encore charger un lien hypertexte. Les déclencheurs sont des actions qui sont placées sur le scénario afin qu’elles soient exécutées à un moment précis. Les événements sont des choses qui se déroulent dans une composition et auxquelles Edge Animate peut répondre par des actions.
Edge Animate utilise JavaScript pour proposer animation et interactivité. JavaScript est le langage de rédaction de script standard pour les navigateurs Web. jQuery est une bibliothèque de fonctions JavaScript bien écrites qui simplifient la sélection et l’animation d’éléments sur une page Web. L’API Edge Animate fournit des fonctions supplémentaires (basées sur JavaScript et jQuery) destinées à contrôler des éléments dans votre composition.
Un bouton est un indicateur visuel représentant l’objet de l’interaction de l’utilisateur. Vous pouvez concevoir un bouton en créant un élément sur la scène, puis en cliquant sur le bouton Ouvrir le panneau Actions dans le scénario ou le panneau Eléments afin d’ajouter un événement. Dans l’onglet d’événement qui s’ouvre, insérez les actions que vous souhaitez déclencher lorsque l’événement se produit.
Les étiquettes sont situées en haut du scénario. Les étiquettes identifient des points précis dans le temps qui permettent de faire référence, dans votre code JavaScript, à des noms d’étiquette, plutôt qu’à des valeurs fixes en millisecondes.
Le panneau Code, accessible en appuyant sur les touches Ctrl+E (Windows) / Commande+E (Mac OS), permet d’afficher l’ensemble du code JavaScript associé votre composition Edge Animate actuelle. Il montre également les erreurs éventuelles de code et leur emplacement dans le script. En revanche, les panneaux destinés à l’ajout de déclencheurs, événements et actions affichent uniquement le code pour l’élément associé, ou le point dans le temps.
Le mot sym représente la composition Edge Animate entière, lorsque l’instruction est sur le scénario principal. Edge Animate est organisé autour de la notion de « symboles », et la racine, ou symbole de niveau de base, constitue la scène Edge Animate. Ce symbole de racine contient l’ensemble des éléments et animations dans votre composition Edge Animate : tout ce qui est situé sur la scène ou le scénario. En JavaScript, lorsque vous souhaitez faire quelque chose, vous identifiez en premier lieu l’objet que vous souhaitez contrôler. Si vous souhaitez influer sur le scénario de votre composition Edge Animate, la première chose qui est écrite dans le script est sym.

Accéder à votre compte