Animate permet de créer des 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 œuvre 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 œuvre 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.
Dans cette pages vous trouverez :
- Tout ce qu’il faut savoir sur le paramétrage d’un document HTML5 publié avec Animate
- Quelles sont les possibilités de création d’interactions dans Animate (no-code, code, Composants HTML5 comme un lecteur vidéo ou des éléments de formulaires)
- Comment mettre en oeuvre des Scénarisation arborescente : créer des scénarios a embranchement (c’est à dire des récits avec des fins multiples de type livre dont on est le héros, des escapes games simples ou encore l’épisode Bandersnatch de BlackMiror) et diffuser des informations d’une page à l’autre (ouvrir une page web au clic et local/session Storage) (Interaction niveau 1)
- Réalisation d’interactions complexes permettant la réalisation de scénarisation multimédia avancées et de jeu (depuis des Infographie interactive, des modules d’apprentissages, jusqu’aux récits intégrants des mécaniques de jeu de type Escape Game avancés en passant par la création d’AdvertGamming – Interaction de niveau 2)
Publier un document HTML5 Canvas avec Animate
Interactions
interaction en javascript sans écrire le 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.
interaction en javascript en codant
Un certain nombre d’actions nécessiterons d’aller plus loin que l’utilisation de l’assistant au code (même s’il permet déjà beaucoup de choses). Animate permet de coder avec du code à portée locale (dans les frames) mais aussi de faire du code à portée globale et, bien entendu de les combiner. Vous allez pratiquer cette méthode surtout dans la partie Interaction de Niveau 2.
Composants HTML5
On peut ajouter des composants HTML dans Animate. Cela permet entre autre d’ajouter un lecteur vidéo (vidéo à partir d’une url ou directement dans votre ordinateur), des éléments de formulaires, des règles de mise en forme dans une feuille de style (à condition de maîtriser un peu le langage css)…
Pour en savoir plus sur les composants HTML pour le moment vous pouvez consulter la page d’aide d’Adobe : https://helpx.adobe.com/fr/animate/using/using-components-in-animate.html
Interaction de Niveau 1
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 d’un récit interactif.
Naviguer vers une page web au clic
Notez : Le code javascript est généré par l’assistant
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) Utiliser l’objet javascript localStorage/sessionStorage pour passer de l’information d’un fichier à l’autre
Ce document texte explique comment utiliser un sessionStorage pour enregistrer des choix dans un fichier/passage et s’en servir dans un fichier/passage suivant en remettant à zéro les données à chaque fermeture du navigateur.
Pour en savoir plus consulter l’excellent tutoriel de Grafikart
Interaction de niveau 2
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 utilisé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 cette fonctionnalité (assistant au code) mais aussi des exemples plus complexes permettant d’envisager des applications plus scénarisées.
go to And Stop/Play
Dans cet exemple (un peu idiot) 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.
Dans le second exemple (plus clair) on a 4 états d’un paysage, sur le premier écran l’hiver avec de la neige qui tombe, le second le printemps avec des fleurs qui s’ouvrent, le troisième l’été et le quatrième à l’automne. 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.
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
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.
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.
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 qui lance l’animation et un bouton qui arrête l’animation et que les deux se succèdent en fonction du cas. Le lancement du son est traité un peu plus bas dans ces tutoriels.
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.
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 / faire tourner 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…). Si votre déplacement est généré au clic sur un objet le code javascript simple est généré par l’assistant. Si ce sont les touches du clavier il faudra coder un peu à la « main ».
Position
Positionner un objet au clic
Conditions et détection des collisions
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).
Utiliser les touches du clavier pour déplacer un clip
Une fois ce tuto compris vous pourrez améliorer votre flappy bird en déplaçant le cube avec les flèches haut et bas de votre clavier par exemple. Pour connaitre quel nom porte un touche je vous conseille cet excellent site : https://www.toptal.com/developers/keycode .
Lire des contenus audio
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).