Un petit plus pour vos jeux ou interfaces, un oeil (ou deux) qui suit votre curseur
du regard. Nous utiliserons pour ce tutoriel la position de la souris (en x et
y, soit _xmouse et _ymouse)
et la propriété _rotation des clips.
prérequis :
les grandes bases de la programmation
rien de particulier, autrement, mais connaître le fonctions des propriétés
de clips, ce n'est pas négligeable.
étape 1 - création de l'oeil
Dessinez votre oeil, simplement. Attention le placement de départ est important.
Dessinez un grand rond blanc, selectionnez le puis faites crtl + g (pour le grouper).
Créez de la même manière un petit rond noir (groupez également)
Selectionnez les deux ronds en même temps et faites ctrl + k (pour les placer
correctement)
Alignez sur les bords droits
et sur les centres horizontalement
, pour avoir le rond noir placé bien à droite.
Maintenant appuyez sur F8 (convertir en symbole), choisissez "clip"
et appelez votre oeil "oeil".
Bien sûr quand vous aurez compris le principe, vous ferez l'oeil que vous
voulez comme vous voulez, mais n'oubliez pas qu'il doit d'abord fixer le côté
droit bien horizontalement.
étape 2 - préparation du code
Les actions qui concernent l'oeil (suivre le curseur) doivent être éxecutées
continuellement au long de l'animation (et à chaque déplacement
du curseur)
Toutes les actions seront donc dans le clip oeil, dans l'évenement enterFrame
(à chaque boucle de l'animation)
écrivez en mode expert (ctrl + e) dans les actions de l'oeil (clic droit
> actions) onClipEvent(enterFrame){
// ici nous allons placer les actions
}
étape 3 - Pythagore
Un peu de pythagore (vite fait) pour comprendre
rappel
pythagore : dans un triangle rectangle ABC rectangle en A,
AB²+AC²=BC²
donc BC = racine(AB²+AC²)
Z est la distance entre le centre du clip ( point de rotation ) et la souris.
Nous l'obtiendrons en écrivant simplement Math.sqrt(x²+y²)
( ça c'est pythagore)
Math.sqrt est une racine carrée.
x est la distance sur l'axe des abscisses de la souris par rapport au centre
du clip , c'est a dire :
x = _root._xmouse - this._x;
yest la distance sur l'axe des ordonnées de la souris par rapport
au centre du clip , c'est a dire :
y = _root._ymouse - this._y;
z (voir précédement) n'est pas bien difficile à trouver :
z = Math.sqrt(x²+y²);
étape 4 - un peu de trigo
Pour obtenir l'angle A , on va chercher son cosinus.
rappel
cosinus (angle) = (longueur coté adjacent) / (longueur hypothenuse)
soit cos = x/z (dans notre cas)
donc
Pour trouver l'angle à partir d'un cosinus, flash a une fonction toute
prête (Math.acos): angle = Math.acos(cos);
Attention, la mesure de l'angle est en radians : on obtient un nombre compris
entre 0 et PI .
PI
180 °
angle en radian
angle en degres
Un produit en croix et hop : Angle en degrés = PI * angle en radians /
180
dans notre cas : angle = 180 * angle / Math.PI;
étape 5 - on fignole
Là , petit probleme , notre angle comprit entre 0 et 180, l'oeil ne se
déplacera que sur la partie en bas de la scène (nous on voudrait
bien qu'il fasse le tour complet)
nous allons determiner si l'angle obtenu est negatif ou positif, c'est là
que y (distance entre le centre et la souris sur l'axe des ordonnée ) va nous
servir , s'il est négatif , l'angle sera négatif.
On devra donc inverser cet l'angle. if(y<0) angle = -angle;
Maitenant il n'y a plus que a appliquer notre angle à la rotation du clip
: this._rotation = angle; en réumé : onClipEvent
(enterFrame) {
et sur les centres horizontalement 
, pour avoir le rond noir placé bien à droite.
