Accueil | Tutoriaux

Tutoriaux : rotation d'un clip autour d'un point
 
1. Introduction
 

Comme d'habitude ce tutoriel répond (enfin je l'espère...) à une question précise d'un utilisateur de flash : "Comment coder la rotation d'un clip (ici un carré rouge) autour d'un centre (ici une croix) ?".

Dans l'animation ci-contre, vous pouvez déplacer le centre de rotation et faire varier deux paramètres qui caractérisent la rotation du carré autour de la croix : le paramètre "rayon" dont le nom est suffisamment explicite et le paramètre "dangle" qui permet de changer le sens et la vitesse de rotation.

Commençons par quelques brefs rappels mathématiques...
 
2. Rappels mathématiques
 

Nous sommes au collège en classe de troisième et nous étudions le chapitre "trigonométrie"... Soit M un point situé sur un cercle de centre O et de rayon r. On note respectivement x et y l'abscisse et l'ordonnée du point M dans un repère orthogonal d'origine O. L'angle formé par l'axe des abscisses et le rayon OM est noté a. Une relation mathématique lie les grandeurs x, y, r et a... relation indispensable pour atteindre notre objectif donc il faut s'accrocher !

x = r.cos(a)
y = r.sin(a)

Pour faire tourner le point M, il suffit donc de faire varier l'angle a entre 0 et 6.28 (2 fois la valeur de pi : nous travaillons en radians et non en degrés).
 
3. Dans la bibliothèque
 

1) Dans la bibliothèque de votre animation, créez un nouveau symbole et placez en son centre un carré de 10 pixels de largeur. Placez une occurrence de ce clip à un endroit quelconque de la scène principale et dans le panneau "propriétés" nommez cette occurrence "carre" (sans accent, je déteste les accents dans le code...).

2) Dans la bibliothèque de votre animation, créez un nouveau symbole et placez en son centre une croix de 10 pixels de largeur. Placez une occurrence de ce clip au centre de la scène principale et dans le panneau "propriétés" nommez cette occurrence "croix". Tout est en place, passons au code !
 
3. Le code et l'animation
 

Dans le panneau "action" de l'image clé n°1 de la scène principale, placez le code ci-dessous et publiez l'animation : vous obtiendrez l'animation ci-contre.

rayon = 80;
angle = 0;
dangle = 0.05; 
 
onEnterFrame = function() {
carre._x = croix._x + rayon*Math.cos(angle);
carre._y = croix._y + rayon*Math.sin(angle);
angle += dangle;
}

 
4. Le code avec ses commentaires
 
On définit une variable "rayon" dont la valeur sera constante au cours de l'animation. Notre carré décrira une trajectoire circulaire dont le rayon sera égal à 80 pixels.
rayon = 80;
 
On définit une variable "angle" dont la valeur initiale est égale à zéro. A chaque image de l'animation cette valeur sera modifiée.
angle = 0;
 
J'ai mes petites habitudes : "angle" est un paramètre qui varie et je note "dangle" la variation du paramètre "angle". "d" comme "delta" qui représente une variation infinitésimale en physiques. Si "dangle" est positif le carré tourne dans le sens des aiguilles d'une montre. Si "dangle" est négatif, le sens de rotation est inversé. Le carré tournera d'autant plus vite que la valeur absolue de "dangle" sera grande. Modifiez les valeurs des paramètres "rayon" et "dangle", publiez l'animation et observez les modifications...
dangle = 0.05;
 
Voici une fonction qui sera appelée à chaque image.
onEnterFrame = function() {
 
On définit l'abscisse de l'occurrence qui s'appelle "carre" et pour cela on utilise les rappels mathématiques !
carre._x = croix._x + rayon*Math.cos(angle);
 
On définit l'ordonnée du clip "carre".
carre._y = croix._y + rayon*Math.sin(angle);
 
Cette ligne de code est identique à : angle = angle + dangle. Autrement dit, on ajoute la valeur "dangle" à la variable "angle".
angle += dangle;
 
fin de la fonction et de ce tutoriel
}
 
5. Remarques
 

Pour faire varier la vitesse de rotation du carré, vous avez deux options :

- vous pouvez modifier la valeur du paramètre "dangle" ;

- vous pouvez modifier la cadence de l'animation (nombre d'images par seconde).
 
Accueil | Tutoriaux