Notre code marche, mais il a un gros défaut.
En effet pour faire tourner un seul clip, nous avons besoin de 2 variables, celle qui contient le
rayon et celle qui contient l'
angle.
Donc si nous voulons ajouter d'autres clips, nous allons devoir utiliser d'autres variables, et vous vous en doutez, ce n'est pas l'idéal.
Nous allons voir une autre manière pour réaliser les mêmes actions, celle-ci est un peu plus difficile d'utilisation, mais a l'avantage de ne pas mobiliser de variables, ce qui simplifiera notre code par la suite.
En fait, dans notre premier algorithme, on augmente (ou diminue) la valeur de la variable
angle, puis on recalcule les coordonnées.
Dans notre nouvel algorithme, nous allons calculer les nouvelles coordonnées de notre clip sans connaître la valeur de l'angle, ni le rayon de départ.
Bon : c'est un peu flou mais, comme toujours, je vais vous expliquer tout ça en détails.
Supposons le schéma suivant : notre clip se trouve au point
, mais l'angle
nous est inconnu :
Nous savons que les coordonnées du point
.
Si maintenant nous voulons augmenter l'angle
a de 5 degrés par exemple pour faire tourner notre clip.
Nous obtiendrons un point
de coordonnées
.
Or, souvenez-vous du chapitre sur la trigonométrie, à la fin je vous ai donné 2 formules à apprendre :
Si on les applique à notre exemple, on obtient donc :
Et si l'on regarde bien les formes obtenues, on remarque qu'aucune valeur ne nous est inconnue ; en effet :
- nous pouvons très facilement obtenir la valeur du cosinus et du sinus de 5 ;
- la valeur du cosinus et du sinus de correspond à l'abscisse et l'ordonnée de notre point .
Nous avons donc gagné, nous avons déterminé les coordonnées du point
uniquement avec les coordonnées du point
et de l'angle qui sépare nos deux points (5 degrés dans notre exemple).
Passons maintenant à l'application en ActionScript.
Nous allons créer une fonction qui recevra en paramètre l'angle de rotation, puis nous allons calculer les nouvelles coordonnées de notre clip, et enfin nous allons appliquer ces nouvelles valeurs à notre clip.
Code : Actionscript1
2
3
4
5
6
7
8 | function rotation(angle:Number):Void{
var cosAngle:Number = Math.cos(conversion_radians(angle));
var sinAngle:Number = Math.sin(conversion_radians(angle));
var newX:Number = clip._x*cosAngle-clip._y*sinAngle;
var newY:Number = clip._y*cosAngle+clip._x*sinAngle;
clip._x = newX;
clip._y = newY;
}
|
À ce niveau, si vous testez l'animation (déjà, le clip devrait tourner ; si ce n'est pas le cas, revérifiez votre code et relisez le chapitre
), vous devriez remarquer que le clip prend pour centre le point de coordonnées (0,0) ; or nous, nous voulons que la rotation soit effectuée autour du point de coordonnées (100,100).
Pour cela, nous allons devoir ajouter les coordonnées du centre à celles de notre clip.
Mais, une chose importante : nous allons aussi devoir les soustraire, lors du calcul des nouvelles coordonnées, pour que les formules restent cohérentes.
Nous obtiendrons le code suivant :
Code : Actionscript1
2
3
4
5
6
7
8 | function rotation(angle:Number):Void{
var cosAngle:Number = Math.cos(conversion_radians(angle));
var sinAngle:Number = Math.sin(conversion_radians(angle));
var newX:Number = (clip._x-centreX)*cosAngle-(clip._y-centreY)*sinAngle;
var newY:Number = (clip._y-centreY)*cosAngle+(clip._x-centreX)*sinAngle;
clip._x = centreX+newX;
clip._y = centreY+newY;
}
|
1
2
3 | this.onEnterFrame = function(){
rotation(5) // 5 en degrés, la conversion en radians est faite dans notre fonction.
}
|
Voilà, les variables
rayon et
angle ne nous sont plus utiles, nous pouvons donc les supprimer :
var rayon:Number = 100
var angle:Number = 0
Une dernière petite modification : si nous supprimons ces variables, nous ne pouvons plus les utiliser lors du 'placement' initial de notre clip.
Nous allons le faire manuellement, de façon à ce qu'il soit à 100 pixels de notre point de centre :
Code : Actionscript1
2 | clip._x = centreX + 100;
clip._y = centreY + 0;
|
Voilà : nous en avons terminé pour ce chapitre ; pour ceux qui se seraient emmêlé les pinceaux, je mets à votre disposition un récapitulatif du code mais pour votre formation, je vous conseille fortement de chercher un peu par vous-mêmes vos erreurs.
Dans la vie courante, on n'a pas tout le temps un gentil tutoriel à sa disposition.
Secret (cliquez pour afficher)Code : Actionscript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 | function conversion_radians(degre:Number):Number{
return degre/180*Math.PI;
}
function rotation(angle:Number):Void{
var cosAngle:Number = Math.cos(conversion_radians(angle));
var sinAngle:Number = Math.sin(conversion_radians(angle));
var newX:Number = (clip._x-centreX)*cosAngle-(clip._y-centreY)*sinAngle;
var newY:Number = (clip._y-centreY)*cosAngle+(clip._x-centreX)*sinAngle;
clip._x = centreX+newX;
clip._y = centreY+newY;
}
var centreX:Number = 100;
var centreY:Number = 100;
var clip:MovieClip = this.attachMovie('boule','mc_boule',1);
clip._x = centreX + 100;
clip._y = centreY + 0;
this.onEnterFrame = function(){
rotation(5)
}
|
Rotation 2D
kaham
. Ce ne sont que des variables et des coordonnées. Si sa reste comme sa jusqu'à la fin du tutoriel je vais pouvoir suivre. 
Trouvez une formation
Suggestions
Flux RSS News
Twitter
Facebook