Rotation d'un clip à l'aide de la souris

Convertir une variable de type String en variable de type Number

Le calque clips ne contient pour le moment que deux cadres texte.

Vous êtes invité(e) à compléter des champs de texte et à cliquer sur des boutons. 

L’écran ci-dessous pourra vous servir de modèle :

Présentation de la scène

Pour saisir du texte lors de l’animation, Animate propose un composant spécifique : TextInput (saisie de texte en français). Vous allez utiliser ce composant (nous n’entrerons pas dans les détails des composants ici, ce sera l’objet d’un chapitre à venir).

Glisser deux composants sur la scène

Le code déjà présent concerne les appareils tactiles ainsi...

Faire tourner un clip avec la souris

Un clip, nommé aimant et des cadres texte sont déjà en place sur la scène.

Une dizaine de lignes de code sont déjà présentes.

Vous désirez faire tourner l’aimant en glissant la souris autour de son centre.

Définissez d’abord un écouteur de type pressmove sur le clip aimant :

//Ecouteur et fonction 
this.aimant.addEventListener("pressmove", tourner.bind(this)) 

function tourner(e){ 
      e.currentTarget.offsetX = e.stageX/stage.scaleX - 
e.currentTarget.x; 
      e.currentTarget.offsetY = e.stageY/stage.scaleY - 
e.currentTarget.y; 
      absX=e.currentTarget.offsetX 
      ordY=e.currentTarget.offsetY 
      angle=(Math.atan2(ordY, absX)/Math.PI)*180 
      e.currentTarget.rotation=angle 
} 

L’écouteur sur l’aimant a pour but de déplacer l’aimant autour de son point central, vous aurez donc tout intérêt à utiliser la méthode offsetX/offsetY (cf. Glisser/déplacer chapitre Collisions). Cela vous permet d’obtenir les coordonnées de la souris par rapport au centre de l’aimant puis de calculer la valeur de rotation de l’angle en degrés.

//Ecouteur 
this.addEventListener("tick", actualiser.bind(this)) ; 
//Fonction 
function actualiser() { 
this.etiket1.text=Math.round(absX) 
this.etiket2.text=Math.round(angle) 
this.etiket3.text=Math.round(ordY) ...