> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Programmation

> AS / Flash / Flex

> Introduction à l'ActionScript

> Annexes

> Rotation d'un clip vers la souris

> Lecture du tutoriel

Rotation d'un clip vers la souris

Par

SuprazZz

Mise à jour : 08/07/2010

4 613 visites depuis 7 jours, dont 38 sur ce chapitre classé 39/786

Ce sujet est aussi traité dans le cours.

La rotation d'un clip vers la position de la souris est un effet souvent utilisé. Il permet de faire bouger les yeux des personnages, ou de créer des effets de traînée derrière la souris.

Dans notre exemple, nous allons utiliser une flèche toute bête qui indique la position de la souris.

Retour en haut

Sommaire du chapitre :

Création du clip
Explication géométrique
Le code

Retour en haut

Création du clip

Il vous faut d'abord dessiner une flèche.
Dessinez-là indiquant le côté droit de votre écran, c'est important pour la suite !
Important aussi : positionnez le point d'ancrage au milieu de la flèche, pour qu'elle puisse tourner autour de cet axe.

Transformez-la en clip que vous nommerez dans l'onglet propriété : flèche (tout bêtement)

Retour en haut

Explication géométrique

Nous allons voir un peu plus en détail comment faire en sorte que la flèche se tourne vers la souris.

Pour cela, nous allons faire appel à vos connaissances en trigonométrie (sinus, cosinus, tangente...). Si vous n'en avez jamais entendu parler, patientez un peu, votre prof de maths vous montrera tout ça bien assez tôt.

Plantons déjà le décor avec les données qu'on a :

Maintenant, voyons si vous ne reconnaissez pas quelque chose de connu...
Vous avez trouvé ?
La solution consiste à tracer un simple triangle rectangle :

Et là, vous devez reconnaître une formule trigonométrique, en français :

tangente (angle) = (côté opposé) / (côté adjacent)

Ce qui revient à écrire la formule sur le schéma.
Avec
Dy = _ymouse - this._y
Dx = _xmouse - this._x

Une fois qu'on arrive à faire le lien avec son cours de maths, ça paraît beaucoup plus simple.

Retour en haut

Le code

Bref : nous avons l'explication mathématique, nous avons le clip fleche, maintenant passons au code.

Nous connaissons déjà Dx et Dy, l'inconnue de l'équation est donc _rotation.

Le problème vient de la fonction tangente... Il faut utiliser la fonction réciproque qui correspond à Math.atan2 en Flash.

L'équation devient donc _rotation = Math.atan2(Dy/Dx);

Un dernier problème sur notre chemin, atan2 renvoie l'angle en radians et _rotation demande un angle en degrés.

Pour convertir en degrés un angle connu en radians, il faut le diviser par PI / 180.

On a donc enfin l'expression qu'on va écrire dans Flash (avec this correspondant au clip que l'on fait tourner):

Code : Actionscript

1	this._rotation = Math.atan2(_ymouse-this._y, _xmouse-this._x)/(Math.PI/180);

Et il nous faut utiliser l'événement onMouseMove ou onEnterFrame :

Code : Actionscript

1
2
3

fleche.onEnterFrame = function() {
        this._rotation = Math.atan2(_ymouse-this._y, _xmouse-this._x)/(Math.PI/180);
}

Retour en haut

Et sous vos yeux ébahis, le résultat :

Flèche dirigée par la souris

Retour en haut

Retour en haut

6 commentaires pour "Rotation d'un clip vers la souris"

Note moyenne : 3.24 / 4 (137 votes)

Pseudo	Commentaire
Anonyme	# Posté le 23/04/2006 à 16:02:14
	J'attendais un vrai big tuto sur l'action script bah je suis servis merci pour toi aller un petit 20
Foxhound	# Posté le 24/04/2006 à 15:44:25
TF2 > * Études : UTBM	20/20 ! JEE developer
saturn1	# Posté le 02/04/2008 à 22:30:03
	Comment te dire . Bon je te le dis en AS Code : ActionScript - Afficher / masquer les numéros de ligne var gg:Array = new Array("g", "e", "n","i","a","l"); trace(gg[0]+gg[1]+gg[2]+gg[3]+gg[4]); Rien à dire parfait pour débuter!! ET MERDE POUR TA PREPA !!! AHAHAHHA Secret (cliquez pour afficher) prepa...il veut se suicider?
viraynaud	# Posté le 18/05/2008 à 16:01:18
Hello world! Ville : Marseille Pays : France métropolitaine Études : IUT Clermont 1	bravo et merci. C'est LE tuto qui m'a lancée en AS... maintenant j'attends une réponse de prizee pour un stage!!! un grand merci!!!
belkhadir	# Posté le 18/04/2010 à 11:12:18
Ville : Kenitra Pays : Maroc	merveileux lecon