Création de contenu interactif simple
Un certain nombre de types de documents Animate prennent en charge l'utilisation du code pour créer de l’interactivité. Nous examinerons ici plusieurs méthodes pour rendre le contenu interactif avec du code HTML5 Canvas.
Publié le
Dans Animate, plusieurs types de document utilisent la programmation pour prendre en charge l'interactivité.
Nous allons examiner plusieurs façons de rendre du contenu interactif avec HTML5 Canvas.
Dans Animate, nous avons deux calques : un calque d'arrière-plan — une texture herbeuse — et un calque de coccinelle.
Sur le calque de la coccinelle, nous avons une instance de séquence vidéo nommée « LadyBug ».
La première chose à faire pour la rendre interactive sera d'attribuer un nom d’instance à la coccinelle via le panneau Propriétés.
Nommons-la « bug ».
Très bien.
Le nom de l'instance LadyBug est maintenant « bug ».
Nous allons pouvoir désigner cette instance via JavaScript.
Pour ajouter un code d'interactivité, nous devrons utiliser le panneau Actions.
Cliquez sur Fenêtre > Actions pour ouvrir le panneau Actions.
Pour l'instant, nous n'avons aucun code.
Pour ajouter facilement du code dans un document JavaScript, utilisez l'option Ajout avec l'assistant.
Elle vous permet d'ajouter plusieurs actions très courantes à votre document.
Par exemple, pour faire pivoter le sujet, je peux choisir cette option, puis sélectionner l'objet auquel appliquer l'action.
Comme nous avons attribué à l'instance de clip LadyBug le nom d'instance « bug », Animate nous le propose automatiquement.
Je le sélectionne et je clique sur Suivant.
Pour finir, choisissons l'événement déclencheur.
Plusieurs événements sont proposés ici.
La plupart d'entre eux sont liés à la souris.
Choisissons En cas de clic de la souris, puis « bug » pour l'événement déclencheur.
Cliquons sur Finir et ajouter.
Quelques lignes de code sont ajoutées au contenu.
Vous noterez qu'il y a également des commentaires.
Je les sélectionne et je les supprime, car nous n'en avons pas besoin.
Ce code va s'exécuter et modifier la rotation de 30 unités à chaque clic sur la coccinelle.
Ce n'est pas tout à fait ce que nous voulons.
Ce que nous voulons, c'est que la coccinelle soit toujours tournée vers le curseur tandis que nous le déplaçons sur la scène.
Pour cela, nous allons devoir activer la souris sur la scène.
Sur la ligne 1, nous allons coller le code stage.enableMouseOver et lui attribuer une valeur de 30.
Il va activer la détection de survol sur la scène.
On peut ensuite y réagir avec une fonction similaire à celle-ci.
Supprimons la fonction actuelle et collons-en une nouvelle ici qui associe un événement de mouvement de souris à la scène, puis calculons les radians basés sur l'événement : les propriétés Y et X locales.
Nous allons ensuite calculer des degrés à partir de ces radians, puis les appliquer à la propriété bug.rotation.
Faisons un test.
Sélectionnons Contrôle > Tester.
Voici la coccinelle, qui commence à s'animer.
Dès que mon curseur apparaît sur la scène, elle le suit automatiquement, où que je le place, car elle obéit au code que nous venons de créer.
Le code que vous utilisez dans Animate peut être aussi simple ou complexe que vous le souhaitez.
Ce que vous avez appris :
Ajouter de l'interactivité à l'aide de l'assistant Actions
Présentateur
