Animate : interaction HTML5 et JS

naviguer vers une page web au clic
Le clic sur un symbole ouvre une page web externe (ou un fichier html)
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)

Naviguer d’une écran à l’autre
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


 Lancer la lecture du scénario au clic
Dans cet exemple le clic sur le symbole lance la lecture de la timeline qui était arrêtée.
Notez : Le code javascript simple est généré par l’assistant
exemple de rendu de « lecture de scénario au clic »


Lancer la lecture et l’arrêt d’un clip au clic

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 »

Naviguer d’un écran à l’autre de manière progressive
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).
exemple de rendu « naviguer d’un écran à l’autre » au clic sur un bouton

 

 

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)