Ajouter de l’interactivité à une animation

Préambule

Pour pouvoir suivre les explications de cette page, il est important que vous connaissiez le fonctionnement de l’animation dans Edge Animate, c’est à dire la manipulation d’un élément (le nommer et régler ses propriétés), et la création/gestion d’un Symbole.

Les différents types de scripts

Lorsque vous arrivez sur une page web, 2 cas de figure peuvent se produire :

  • vous devez cliquer sur un élément pour pouvoir déclencher une action.
  • une action ou une animation s’exécutent sans que l’internaute ait besoin de toucher son clavier ou sa souris.

Dans Edge Animate, ces 2 cas de figurent traduisent 4 types de scripts qui se trouvent à 4 endroits différents :

  • sur un élément,
  • dans un déclencheur,
  • dans un script d’animation,
  • dans un script de scénario.

Bien évidemment, l’énumération de ces 4 « types » de scripts n’évoque pas obligatoirement quelque chose pour vous, c’est pourquoi nous allons essayer de comprendre le rôle que joue chaque script dans une animation.

Le script sur un élément

Comme son nom l’indique, ce script est rattaché à un élément, c’est-à-dire à une image, un texte ou une forme sur la scène. Il sera déclenché lorsque l’événement associé au script et à l’élément se produira.

Toutes les évènements de type clic, survol, touché, etc sont généralement associé à une élément (ils peuvent dans certains cas être associé à la scène (stage)).

Le script dans un déclencheur

Le principe même d’Edge Animate est de réaliser des animations à l’aide de la fenêtre Scénario (la timeline). Lorsque la tête de lecture se déplace et atteint de ce fait certains instant (ex. : la 3e seconde depuis le début de l’animation), il est possible de déclencher un script, il s’agit dans ce cas d’un déclencheur.

Le script d’animation (sur la scène/stage)

Lorsqu’un script n’est pas déclenché par l’utilisateur en cliquant sur un élément, lorsqu’un script ne s ‘exécute pas au passage de la tête de lecture à un instant T, il reste la possibilité de placer un script sur la scène, c’est-à-dire rattaché à l’animation toute entière. Dans les deux premiers cas, il était facile de comprendre l’instant du déclenchement d’un script, en revanche, dans ce dernier cas, quel type de code est placé dans un script sur la scène.

La réponse à cette question est malheureusement un peu longue pour qu’elle soit développée dans cette partie introductive de la page, néanmoins, nous pouvons tout de même dire qu’il s’agit d’actions telles que l’initialisation de propriétés d’éléments (ex. au lancement de l’animation, masquer une élément, régler son opacité, jouer un son, etc), mais également l’association d’évènements à un élément (cela permet de rendre plus dynamique l’approche de la première méthode : Le script sur un élément).

Le script de scénario

Ce dernier type de script est particulier car il est étroitement lié à l’animation qui se joue dans la fenêtre Scénario. Comme nous l’avons vu, un déclencheur permet d’exécuter du code au passage de la tête de lecture à un instant T, mais que se passe-t-il si on interrompe une animation, ou lorsqu’elle est en cours de lecture, ou lorsqu’elle est relancée ou se termine ? Et bien c’est le rôle de ce type de scripts.

Maintenant que nous avons vu en détails les 4 types de scripts, découvrons les techniques qui permettent de placer un script aux différents endroits évoqués. Reprenons…

Le script sur un élément

Script d'élément Edge Animate

Comme vous pouvez le voir sur la copie d’écran ci-dessus, vous devez commencer par sélectionner un élément (1) sur la scène, par un simple clic dessus à l’aide de la flèche noire, avant de cliquer sur l’un des boutons d’insertion d’un script d’élément (2).

Il existe 3 endroits différents dans l’interface pour intégrer un script rattaché à un élément, tous les boutons ont le même effet, il affiche une fenêtre vous demandant de choisir un événement à associer à l’élément et au script que vous vous apprêtez à saisir.

Script d'élément Edge Animate

Le script dans un déclencheur

Script déclencheur Edge Animate

Comme vous pouvez le voir sur la copie d’écran ci-dessus, vous devez commencer par déplacer la tête de lecture à un instant T (1) avant de cliquer sur le bouton d’insertion d’un déclencheur (2) qui aura pour effet de placer un déclencheur dans la zone des déclencheurs (3).

Lorsque la fenêtre des déclencheurs s’ouvre, il ne vous reste plus qu’à saisir le code qui s’exécutera au passage de la tête de lecture à cet instant choisi.

Script déclencheur Edge Animate

Le script d’animation (sur la scène/stage)

Script d'animation Edge Animation

Comme vous pouvez le voir sur la copie d’écran ci-dessus, vous devez commencer par cliquer sur la scène (1) afin de ne sélectionner aucun élément avant de cliquer sur le bouton d’insertion d’un script de scène (2) dans la palette Propriétés. Vous pouvez également directement cliquer sur l’un des deux boutons situés à gauche des mots Stage (localisés dans la palette Éléments et/ou la fenêtre du Scénario (ou Timeline)).

Lorsque la fenêtre des scripts de la scène (Stage) s’ouvre, il ne vous reste plus qu’à sélectionner un événement avant de saisir le code qui s’exécutera en fonction de l’événement choisi.

Script d'animation Edge Animate

Comme vous pouvez le constater, il existe de nombreux évènements que nous développerons plus bas dans cette page.

Le script de scénario

Script de Scénario Edge Animate

Comme vous pouvez le voir sur la copie d’écran ci-dessus, vous devez simplement cliquer sur le bouton d’insertion d’un script de Scénario (Timeline). Vous obtenez alors une fenêtre dans laquelle vous pouvez sélectionner un des 4 évènements relatifs au déroulement de l’animation.

Script de Scénario Edge Animate

Rappelons que ces 4 évènements permettent de gérer les actions qui se déclencheront lorsque l’animation démarre sa lecture (play) lorsqu’elle est en cours de lecture (update), lorsqu’elle s’arrête (stop) et lorsqu’elle se termine (complete). Précisons également qu’il revient au même de placer un déclencheur à la fin de la transition la plus longue dans la fenêtre Scénario ou de définir un script de scénario avec l’événement complete. Dans ce dernier cas, l’avantage est de ne pas avoir à se soucier de la durée totale de l’animation et de ce fait de ne pas avoir à déplacer le déclencheur en cas de modification de la durée de l’animation.

Dans le cas où vous souhaiteriez exécuter du code durant la lecture d’une animation, l’événement update s’avérera très pratique/utile.

Les évènements

Comme nous l’avons évoqué plus haut dans cette page, il existe de nombreux évènements rattachés à un élément ou à la scène, c’est pourquoi nous allons revenir sur le rôle de chacun.

compositionReady : cet évènement est le plus important car c’est lui qui permet de contenir du code qui initialisera généralement les actions à exécuter au lancement de l’animation Edge Animate.

click, dblclick, mouseover, mousedown, mousemove, mouseup, mouseup, mouseenter et mouseleave : ces évènements se produisent lorsque l’utilisateur interagit avec l’interface de l’animation par le biais de la souris. Notez qu’il existe les évènements mouseenter et mouseover, utilisez ce dernier avec un élément qui contient des enfants afin qu’au survol sur chacun d’entre eux, l’événement déclenche une action.

touchstart, touchmove, touchend, swipeleft et swiperight : ces évènements se produisent lorsque l’utilisateur interagit avec l’interface sur un écran tactile de type smartphone ou tablette. Rappelons que les événement swipeleft et swiperight permettent de gérer l’effet de balayage, c’est-à-dire faire glisser le doigt vers la gauche ou vers la droite.

scroll : cet évènement se produit lorsque l’utilisateur fait appel à l’ascenseur.

keydown et keyup : ces évènements se produisent lorsque l’utilisateur appuie sur (et relâche) une touche du clavier.

orientationchange : cet évènement se produit lorsque l’utilisateur change l’orientation de la tablette pour la tenir dans le sens portait alors qu’il la tenait en mode paysage et inversement.

resize : cet évènement se produit lorsque l’utilisateur redimensionne la fenêter de son navigateur.

onError : cet évènement se produit lorsqu’une erreur se produit sur la page.

Les commentaires sont clos.