Ressources Magic Makers

 

Site en maintenance

 
Nous sommes actuellement entrain de mettre à jour les ressources de ce site.
Pendant la mise à jour vous pouvez retrouver tous les nouveaux contenus sur le site
 

https://lp-magicmakers.fr/

 
 

Créer son animation interactive avec Wick Editor

Ajouter de l'interactivité

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 !

C'est quoi le javascript ?

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 :

    • le Default pour toute l’animation (stopper l’animation par exemple)
    • des scripts événements (quand une touche est appuyée, la souris cliquée, etc)

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 !

Créer un bouton

  • On commence par définir une forme comme un bouton et modifier la timeline pour les différentes étapes de ce bouton.

On a trois étapes pour le bouton :

    • par défaut
    • quand la souris est dessus
    • quand il est cliqué
  • Tu peux modifier chacune des étapes comme tu le souhaites ! Par exemple :

On peut ensuite le programmer ! Pour aller à une autre frame par exemple :

  • On peut utiliser le script Default pour stopper l’animation là où on est :
  • Et modifier le script événement déjà sur notre bouton (« quand le bouton est cliqué ») en lui disant par exemple d’aller à la première frame : 

Tu peux mettre un nombre pour choisir à quelle frame aller ou tu peux directement lui dire :

    • d’aller à la suivante avec gotoNextFrame()
    • d’aller à la précédente avec gotoPrevFrame(). 

Tu peux aussi préciser si l’animation continue ou s’arrête à cette nouvelle frame :

    • gotoAndStop(1) pour l’arrêter
    • gotoAndPlay(1) pour continuer l’animation

Interaction avec une touche du clavier

Pour changer la largeur d’un objet quand on appuie sur la touche ‘A’ par exemple :

  • On commence par définir un clip et créer un nouveau script pour notre dessin :
  • on choisit la condition « if (key) » qui permet de vérifier si la touche souhaitée a bien été appuyée.

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 !

  • Pour finir, on va donc noter dans les accolades ce que l’on veut 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 :

Interaction avec la souris

Pour changer l’opacité d’un objet si la souris le touche ou non par exemple :

  • On commence par définir un clip et créer un nouveau script pour notre dessin :
  • On diminue l’opacité de 0,2 pour que le dessin disparaisse petit à petit

Note : L’opacité est un nombre compris entre 0 et 1 ! 0 l’objet est invisible, 1 on le voit !

  • On crée un nouveau script pour le remontrer quand la souris ne le touche plus !

‘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 : 

Récupérer l'input de l'utilisateur pour changer un texte

  • On commencer par rassembler nos formes : le dessin de la bulle et le texte pour créer une seule forme et on la renomme
  • On en fait ensuite un clip !
  • Quand on double clique sur la forme, on peut l’éditer et donner un nom au texte pour le retrouver dans le code

On peut maintenant commencer le code !

  • On a besoin d’une variable pour stocker ce que tapes l’utilisateur. Pour créer une variable pour l’animation, on utilise la notation : « project.nom-de-la-variable« . Et on dit ce que c’est ! Ici notre variable va contenir du texte, on va donc écrire  » « .

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.

  • On peut maintenant crée le script pour l’événement « une touche est pressée ». On a besoin de savoir si l’utilisateur a appuyé sur entrée pour valider son texte, sinon on ajoute la touche qu’il a choisi à notre variable.

Il ne nous reste plus qu’à afficher notre variable dans notre texte ! 

  • On va reprendre l’événement « une touche est pressée » mais pas pour notre objet, pour notre frame directement. Si on appuie sur entrée, on affiche le texte « bienvenue -nom tapé par l’utilisateur- » !