Avec Wick Editor, on va pouvoir programmer des petits codes en javascript pour déclencher des actions : changer de frames quand on clique sur l’écran par exemple !
Le javascript est un langage de programmation qui permet notamment de créer des pages web dynamiques ! Ici, on va s’en servir pour créer de l’interactivité ou encore contrôler l’animation depuis le code.
Tu as deux types de scripts possibles :
Pour les scripts spécifique à un objet, la première chose à faire est de rendre l’objet « interactif » en en faisant un clip ou un bouton.
Regarde les trois exemples plus bas pour comprendre comment modifier un objet quand on appuie sur une touche ou quand on passe la souris dessus et comment transformer un objet en bouton !
On a trois étapes pour le bouton :
On peut ensuite le programmer ! Pour aller à une autre frame par exemple :
Tu peux mettre un nombre pour choisir à quelle frame aller ou tu peux directement lui dire :
Tu peux aussi préciser si l’animation continue ou s’arrête à cette nouvelle frame :
Pour changer la largeur d’un objet quand on appuie sur la touche ‘A’ par exemple :
IF veut dire SI en anglais et entre les parenthèses, on note ce que l’on veut vérifier. Ici on a donc : si la touche pressée est la touche ‘a’.
Si la condition est vraie, tout ce qui est noté entre les accolades {…} va se faire !
Dans la section « Object » on va pouvoir trouver les bouts de code pour modifier ce que l’on a sélectionné.
Pour changer la largeur, on va cliquer sur ‘width’ (qui veut dire largeur en anglais) et on va l’augmenter de 20 par exemple !
Note : le terme « this » veut dire « l’objet du script ». En notant un point après : « this.quelquechose » on peut aller chercher et modifier ce quelque chose. Ici, on va chercher la largeur.
Les autres interactions avec des touches du clavier :
Pour changer l’opacité d’un objet si la souris le touche ou non par exemple :
Note : L’opacité est un nombre compris entre 0 et 1 ! 0 l’objet est invisible, 1 on le voit !
‘Mouseleave’ se déclenche quand la souris arrête de toucher un objet. Quand c’est le cas, on met l’opacité à 1 pour voir correctement l’objet !
Les autres interactions avec la souris :
On peut maintenant commencer le code !
Note : En programmation textuelle, on note les textes (mots, phrases) entre guillemets ! Ça permet de faire la différence avec les mots-clés du code ou les noms de variable par exemple.
Il ne nous reste plus qu’à afficher notre variable dans notre texte !