Accueil | Tutoriaux

Tutoriaux : Des yeux qui suivent le déplacement du curseur
 

1. Introduction


L'animation ci-dessous est composée d'une centaine de clips : des yeux suivent le déplacement de votre curseur. L'objectif de ce tutoriel est de créer plus simplement deux yeux qui fixent le curseur ou un clip en déplacement sur la scène.
2. Dans la bibliothèque
 

1) Dans votre bibliothèque, créez un nouveau clip que vous nommez "cercle" : placez en son centre un cercle (remplissage vide) de 30 pixels de diamètre.

2) Dans votre bibliothèque, créez un nouveau clip que vous nommez "pupille" : placez en son centre un disque (cercle plein !) de 10 pixels de diamètre.

3) Dans votre bibliothèque, créez un troisième et dernier clip que vous nommez "oeil" : placez en son centre une occurrence du clip "cercle" puis, sur un autre calque, placez en son centre une occurrence du clip "pupille". Dans le panneau "propriétés", nommez cette occurrence "pupille_mc".

Rappels : les noms qui figurent dans la bibliothèque de l'animation "cercle", "pupille" et "oeil" n'ont aucune importance. Vous pouvez les modifier à souhait, ils ne servent qu'à organiser votre bibliothèque. En revanche, soyez très attentif au respect de l'orthographe des noms d'occurrence comme "pupille_mc" : ce nom interviendra dans la programmation de l'animation...

3. Sur la scène principale

Votre bibliothèque contient désormais 3 clips, le clip "oeil" contenant une occurrence du clip "cercle" et du clip "pupille". La scène principale est encore vide, donc si on veut une animation il va bien falloir y déposer des clips !

Sur la scène principale, déposez 2 occurrences du clip "oeil" et, dans le panneau "propriétés" nommez respectivement ces 2 occurrences "oeil_mc1" et "oeil_mc2". Placez ces deux clips où bon vous semble. Sur un autre calque, à l'aide des outils de dessin, tracez un visage autour des 2 yeux : vous pouvez faire bien mieux que moi en y passant plus de 2 minutes et 30 secondes...

Tout est en place, il ne reste plus qu'à se lancer dans le code : c'est la phase que je préfère !
4. Le code et l'animation obtenue


Dans le panneau "action" de l'image n°1 de la scène principale, placez le code suivant. Déplacez votre curseur à l'intérieur du rectangle et observez le déplacement des pupilles.

 

function rotation() {
var dx = _xmouse - this._x;
var dy = _ymouse - this._y;
var angle = Math.atan2(dy, dx);
this.pupille_mc._x = 10*Math.cos(angle);
this.pupille_mc._y = 10*Math.sin(angle);
} 
 
oeil_mc1.onEnterFrame = rotation;
oeil_mc2.onEnterFrame = rotation;

 

5. Le code et quelques commentaires
 
Création d'une fonction qui sera appelée à chaque image par chaque oeil.
function rotation() {
 
La variable dx représente la différence entre l'abscisse du curseur et l'abscisse du clip.
var dx = _xmouse - this._x;
 
La variable dy représente la différence entre l'ordonnée du curseur et l'ordonnée du clip.
var dy = _ymouse - this._y;
 
La variable angle représente l'angle formé par l'axe des abscisses et le vecteur de coordonnées (dx ; dy).
var angle = Math.atan2(dy, dx);
 
On définit l'abscisse de l'occurrence "pupille_mc". La valeur 10 a été choisie pour que le disque qui représente la pupille soit tangent au cercle qui représente le contour de l'oeil : cette valeur est en fait la différence entre les rayons de ces deux cercles (15 - 5 = 10). Si vous voulez un oeil plus grand ou une pupille d'une taille différente, il suffit de modifier les clips de la bibliothèque et d'adapter le code...
this.pupille_mc._x = 10*Math.cos(angle);
 
On définit de même l'ordonnée de l'occurrence "pupille_mc".
this.pupille_mc._y = 10*Math.sin(angle);
 
Fin de la fonction
}
 
Chaque occurrence du clip "oeil" appelle à chaque image la fonction "rotation".
oeil_mc1.onEnterFrame = rotation;
oeil_mc2.onEnterFrame = rotation;

6. Petite variation

Dans l'animation précédente les pupilles suivent le déplacement du curseur. On peut également faire en sorte que les pupilles suivent le déplacement d'un clip qui se trouve sur la scène principale.

Le cercle rouge se déplace en suivant la ligne bleue : ce déplacement est réalisé à l'aide d'une simple interpolation de mouvement et d'un calque de guide. Le cercle rouge possède un nom d'occurence : "cercle_mc". Dans la fonction "rotation", il suffit de modifier 2 lignes de code qui deviennent alors :

var dx = _root.cercle_mc._x - this._x;
var dy = _root.cercle_mc._y - this._y;

C'est tout pour aujourd'hui... Soyez sympa et n'hésitez pas à me signaler les erreurs qui se trouveraient dans ce tutoriel !
 
Accueil | Tutoriaux