Animate : interaction HTML5 et JS

Animate permet de créer ds animations complexes (à l’origine c’est un logiciel d’animation) mais il permet aussi de créer des interactions à l’aide d’un assistant au code ou en codant en javascript directement quand l’assistant ne suffit plus.

Ces interactions permettent de mettre en oeuvre des scénario interactifs de deux manières très différentes. On peut ainsi créer des récits avec un scénario à choix reliant des scènes animées permettant d’offrir au lecteur une histoire différente en fonction de ses choix. On peut également utiliser la timeline/scénario comme une succession d’écran et coder des interactions complexes permettant ainsi de créer des jeux publiables en HTML5 et JS.

Vous trouverez ici des tutoriels permettant de comprendre comment mettre en oeuvre un certain nombre d’interactions proposées par l’assistant ainsi que des exemples plus complexes intégrant ces différentes fonctionnalités. Vous trouverez aussi quelques fonctionnalités non disponible dans l’assistant et dont il faudra rédiger le code mais permettant de résoudre des problèmes « bloquants » lorsque l’on veut aller un peu plus loin.

 

Paramètres de publication du document HTML/JS

Interactions sans code (assistant)

L’assistant de création de code d’Animate permet de générer du javascript sans avoir besoin de rédiger le code. Il permet d’effectuer facilement un certain nombre d’actions grâce à des déclencheurs. On peut ainsi ouvrir une nouvelle page web, se déplacer dans la timeline qui peut alors se comporter comme une succession d’écrans dans la conception d’une application ou encore manipuler des objets en lançant la lecture d’un clip ou en déplaçant/faisant tourner ou positionnant un objet. En combinant ces possibilités on peut déjà concevoir de nombreux objets interactifs et animés publiables en HTML5 et Javascript.

Ouvrir une page web au clic : la clé pour un récit animé interactif

Le clic sur un symbole ouvre une page web externe (ou un fichier html) [go to Web Page]. Cette fonctionnalité est la plus efficace pour réaliser un récit avec un scénario à choix reliant des scènes animées permettant d’offrir au lecteur une histoire différente en fonction de ses choix. L’exemple ci-dessous montre l’enchainement des scène dans une histoire rédigée par nos étudiants avec entre chaque scène l’objet cliquable permettant de continuer la lecture du film interactif.


Notez : Le code javascript est généré par l’assistant

Naviguer vers une page web au clic

exemple de rendu « naviguer vers une page web au clic » (nb: la pelle de la pelle mécanique et le drapeau sont cliquables, les deux mènent au site d’Adobe)

Créer des interactions complexes dans un scénario : scénarisation multimédia et gamification.

La timeline (ou scénario) d’Animate peut être utilisée pour être lue comme une timeline de montage mais peut aussi être utilisiée comme une succession d’écrans (de moments) et le code permet alors de passer d’une frame à l’autre de manière non linéaire. Ci dessous vous trouverez des tutoriels interactifs faisant la démonstration de la focncionnalité mais aussi des exemples plus complexes permettant d’envisager des applications plus scénarisées.

go to And Stop/Play

Naviguer d’un écran à l’autre [go to And Stop]
Dans cet exemple on a deux versions du ventilateur. Sur une frame un ventilateur fixe, sur l’autre un clip d’animation ou le ventilateur tourne. le clic sur le On amène à la frame avec le clip animé le clic sur le Off amène à la frame avec le ventilateur fixe.
Notez : Le code javascript simple est généré par l’assistant
exemple de rendu « naviguer d’un écran à l’autre » au clic sur un bouton

On pourrait aussi imaginer avoir 4 états d’un paysage, sur le premier écran l’hiver avec de la neige qui tombe, un petit lapin qui traverse la scène, le second le printemps avec des fleurs qui s’ouvrent, le troisième l’été et le quatrième à l’automne et une feuille qui tourbillonne. Le clic sur un bouton de choix amènerait la tête de lecture à la frame correspondant à la saison voulue dans la quelle un clip d’animation tourne en boucle. Au fond c’est la même chose que d’ouvrir une page web au clic mais en ayant un seul fichier qui héberge tous les états. Cette méthode ne fonctionnerait pas pour un scénario arboré très complexe car le temps de chargement serait trop important (voir le tuto sur les paramètres de publication).

Dans l’exemple ci dessous, il s’agit de reconstituer un puzzle en cliquant à l’emplacement supposé des pièces. Il reprend les mêmes fonctionnalités de navigation vers une frame donnée et stop de la lecture mais en créant une impression très différente.

exemple de l’utilisation du gotoAndStop pour fabriquer un puzzle où l’on impose l’ordre de choix des pièces.

tutoriel textuel retraçant la création du puzzle

une variation du go to And stop est le go to And play qui une fois arrivé à la frame demandée continu la lecture de la timeline permettant d’intégrer par exemple une animation

Naviguer d’un écran à l’autre de manière progressive [go to And Play]
Notez : Dans cet exemple on vide ou on rempli l’éprouvette en appuyant sur le + ou le – jusqu’à arriver au niveau maximum, moment ou le liquide devient cliquable et permet d’ouvrir une page web. Le résultat est obtenu en combinant des fractions de code générés par l’assistant de code. Cette navigation se fait en incrémentant ou décrémentant le numéro de la frame active et ne bloque pas si on appuie trop de fois sur le – ou le + (un autre tuto permettra de perfectionner). Attention ce tutoriel nécessite d’aller un peu plus loin que la simple utilisation de l’assistant au code.
exemple de rendu « naviguer d’un écran à l’autre » au clic sur un bouton
Manipuler des éléments

Lancer ou arrêter la lecture d’un clip, d’un son…

Lancer ou arrêter la lecture d’un clip ou d’un son au clic permet non seulement de lancer la lecture d’une animation en cliquant sur un bouton (par exemple le play d’une vidéo) mais il permet aussi qu’un visuel soit substitué à un autre au clic (on clique sur un bouton de fleur dans un arbre et il s’ouvre modifiant l’esthétique générale de la scène, ou comme dans l’exemple des 3 erreurs ci-après affichage de la réponse juste et l’incrémentation du compteur (on pourrait prolonger avec des faux sur les autres boules).

Le tuto ci-après explicite l’utilisation de cette fonctionnalité en démontrant le lancement de la lecture d’un clip (1fois, sans boucle) au clic sur un objet.

Lancer la lecture d’un clip au clic

Notez : Le code javascript simple est généré par l’assistant

On peut ainsi faire pousser une plante en cliquant sur son pot. A chaque clic sur le pot on refait pousser la plante

On peut aussi créer un jeu des x erreurs sur ce principe. Il suffit que le clic sur une boule déclenche la lecture du clip de la boule et la lecture du clip du compteur.

tutoriel retraçant la création du jeu des x erreurs

Lancer la lecture et l’arrêt d’un clip au clic et faire apparaitre et disparaitre des objets

Faire apparaître ou disparaitre des objets au clic sur un objet

Faire apparaitre ou disparaitre des objets permet d’éliminer de l’affichage écran un objet tout en pouvant le faire réapparaitre quand le scénario le nécessite (quand il doit à nouveau être cliquable par exemple).

Dans cet exemple on lance la lecture d’un clip en boucle en cliquant sur un bouton et on l’arrête en cliquant sur un bouton. Cela implique aussi de faire apparaitre et disparaitre des objets puisque l’on a un bouton lance l’animation et un bouton arrête l’animation qui se succèdent en fonction du cas.

exemple de rendu « lancer et arrêter la lecture d’un clip ou d’un son au clic »

Un autre exemple de l’utilisation de cette fonctionnalité est la création d’un puzzle où l’on peut librement choisir la pièce que l’on souhaite déplacer.

exemple du puzzle mais en ayant libre choix de la pièce a poser

On pourrait encore complexifier en ajoutant une visualisation de la pièce sélectionnée en combinant avec la lecture d’un clip au clic et une remise à zéro des autres clips quand un change d’avis et que l’on sélectionne une autre pièce sans l’avoir posée.

déplacer un objet au clic sur un autre

Faire déplacer un objet au clic permet par exemple de créer des boutons de déplacement (pour un jeu…).

Déplacer un objet au clic sur un autre

Dans cet exemple le vaisseau bouge au clic sur les flèches blanches dessinées dans l’interface.

Notez : Le code javascript simple est généré par l’assistant

exemple de déplacement d’un objet au clic

Il faudra bien entendu combiner cette fonctionnalité aux précédentes et ajouter une condition (sans l’aide de l’assistant) pour obtenir un jeu jouable (exemple du Flappy cube ci-dessous).

exemple d’un jeu façon flappy bird

Ce jeu est entièrement fabriqué avec Animate et l’assistant au code (sauf la vérification de l’emplacement du joueur par rapport aux obstacles)

Faire tourner un objet au clic sur un autre

Dans cet exemple on fait tourner un objet de 30 degré (sens horaire) à chaque clic sur le bouton en forme de +

Notez : Le code javascript simple est généré par l’assistant

exemple de rotation au clic sur un objet

Positionner un objet au clic

Interactions avec modification du code généré par l’assistant

Lancer la lecture et l’arrêt d’un son au clic
Dans cet exemple on lance la lecture d’un clip d’animation ou d’un fichier son (ou on l’arrête) en cliquant sur un symbole.
Notez : Le code javascript du lancement de lecture et de l’arrêt duc clip sont générés par l’assistant mais il faut modifier une partie du code à la main. Le code de chargement et de lancement de lecture d’un son doit être codé à la main (2 lignes de code).
exemple de rendu « lancer et arrêter la lecture d’un clip ou d’un son au clic »

 

 

Notez que le fichier html créé par Animate fait référence à un javascript en ligne. Si vous souhaitez vous émanciper de cet appel à un serveur extérieur vous pouvez télécharger le fichier createjs.min.js sur Github (https://github.com/CreateJS) et le placer dans votre dossier puis modifier le code html de votre fichier pour faire appel à la version locale du javascript.

Pour cela il suffit de modifier la ligne de code visible dans la copie d’écran ci-après (ligne 16)