Jusqu'à présent nous avons travaillé seulement en 2 dimensions, à savoir l'abscisse et l'ordonnée de notre clip.
Pour introduire la 3
e dimension, nous allons avoir besoin de créer un 3
e axe 'z' dit de 'profondeur'.
Pour un clip dans Flash, la valeur de z peut s'apparenter au 'niveau' auquel se situe le clip, mais nous verrons cela plus en détails plus tard.
Au lieu de travailler avec des clips comme jusqu'à présent, nous allons travailler avec des points, ces points possèderont 3 coordonnées (x,y,z).
Puis, pour visualiser le tout, nous allons affecter aux coordonnées de notre clip les coordonnées de notre point.
Euh... Mais pourquoi ne pas travailler directement avec les coordonnées de notre clip, alors ? Pourquoi introduire un point ?
Eh bien tout simplement parce que le clip nous sert seulement à visualiser les changements de coordonnées de notre point ; par la suite, vous pourrez tout simplement supprimer ce clip et relier 2 points par un
lineTo, pour visualiser les changements par exemple. Mais pour l'instant nous resterons avec notre clip, nous verrons le reste un peu plus tard.
Nous allons donc créer notre point :
Code : Actionscript1
2
3
4 | var point:MovieClip = new MovieClip(); // création d'un objet MovieClip
point.x = 0; // création de la variable x dans le MovieClip 'point'
point.y = 0; // création de la variable y
point.z = 0; // création de la variable z
|
Puis pour visualiser notre point (puisque par définition un point, c'est invisible
), nous allons attribuer au coordonnées de notre clip les valeurs de
point.x et de
point.y.
Code : Actionscript1
2 | clip._x = point.x
clip._y = point.y
|
Dans la logique où nous nous sommes placés, la variable
point.z représente la 'profondeur', cette notion est donc semblable à celle des niveaux dans Flash.
Nous pouvons donc aussi, si nous en avons besoin, modifier le niveau de notre clip avec la valeur de
point.z :
Code : Actionscript
Si vous savez le faire, vous pouvez aussi créer une classe Point(), ce qui me paraît plus strict comme script.
Dans le précédent chapitre, nous avons travaillé dans le plan défini par les vecteurs
.
Ce plan correspond à la surface de votre écran (plan bleu ci-dessous).
Mais toutes les considérations géométriques que nous avons vues précédemment sont aussi valides dans d'autres plans.
Prenons par exemple le plan défini par les axes
(le plan vert ci-dessus), et un point de coordonnées (x=100,y=100,z=0) qui servira de nouveau centre à la rotation de notre clip.
On peut très facilement faire tourner notre clip dans ce plan en apportant quelques modifications à notre code.
Comme nous l'avons vu plus haut, ajoutons notre point et modifions les coordonnées de notre clip en fonction des variables de notre point :
Code : Actionscript1
2
3
4
5
6
7
8
9 | var point:MovieClip = new MovieClip();
point.x = 100;
point.y = 100; // J'ai mis 100 pour que notre point ait la même ordonnée que pour 'rotation', j'aurais tout aussi bien pu mettre n'importe quoi d'autre puisque cette variable ne variera pas pour l'instant.
point.z = 100; // Notre clip est maintenant situé juste au-dessus de notre 'centre' de 'rotation'.
var clip:MovieClip = this.attachMovie('boule','mc_boule',1);
clip._x = point.x
clip._y = point.y
// Ici nous n'avons qu'un seul clip, nous n'avons donc pas besoin d'utiliser le 'swapDepths()', mais vous pouvez quand même le mettre si ça vous amuse.
// clip.swapDepths(point.z)
|
Nous devons aussi modifier la fonction
rotation pour qu'elle modifie les variables de notre
point et non plus directement les coordonnées de notre
clip.
Code : Actionscript 1
2
3
4
5
6
7
8
9
10 | function rotation(angle:Number):Void{
var cosAngle:Number = Math.cos(conversion_radians(angle));
var sinAngle:Number = Math.sin(conversion_radians(angle));
var newX:Number = (point.x-centreX)*cosAngle-(point.y-centreY)*sinAngle; // ligne modifiée
var newY:Number = (point.y-centreY)*cosAngle+(point.x-centreX)*sinAngle; // ligne modifiée
point.x = centreX+newX; // ligne ajoutée
point.y = centreY+newY; // ligne ajoutée
clip._x = point.x; // ligne modifiée
clip._y = point.y; // ligne modifiée
}
|
Maintenant, nous voulons que notre
point (et par conséquent aussi le
clip) tourne dans le plan défini par les vecteurs
, autour du point de coordonnées (x=100,y=100,z=0). Modifions notre code en conséquence :
Code : Actionscript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 | 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 = (point.x-centreX)*cosAngle-(point.z-centreZ)*sinAngle; // ligne modifiée (on a remplacé les variables de Y par les variables de Z)
var newZ:Number = (point.z-centreZ)*cosAngle+(point.x-centreX)*sinAngle; // ligne modifiée
point.x = centreX+newX;
point.z = centreZ+newZ; // ligne modifiée
clip._x = point.x;
clip._y = point.y; // Cette ligne n'a pas été modifiée, car dans le repère que nous avons choisi, l'ordonnée de notre clip correspondra toujours à la variable 'y' de notre 'point'. Cette ligne devient donc obsolète pour la rotation dans ce plan (puisque la valeur de 'point.y' ne change pas).
// clip.swapDepths(point.z) // Cette ligne est toujours inutile dans le cas où nous ne gérons qu'un seul clip.
}
var centreX:Number = 100;
var centreY:Number = 100;
var centreZ:Number = 0
var point:MovieClip = new MovieClip();
point.x = 100;
point.y = 100;
point.z = 100;
var clip:MovieClip = this.attachMovie('boule','mc_boule',1);
clip._x = point.x
clip._y = point.y
// clip.swapDepths(point.z)
this.onEnterFrame = function(){
rotation(5)
}
|
À ce stade, si vous testez votre animation, le clip devrait se déplacer sur l'axe
.
Mais bien sûr, la variation de
niveau sur l'axe
n'est pas visible.
Pour la mettre en évidence (et pour vous prouver que votre code marche bien
), il existe une infinité de méthodes, je vous propose donc de modifier la taille de notre clip pour donner un effet de 'loin' ou 'proche'.
À la fin de la fonction
rotation, ajoutez ce code :
Code : Actionscript1
2
3
4 | clip._xscale = point.z + 200
clip._yscale = point.z + 200
// On fait varier la taille (en %) de notre clip en fonction du 'niveau' (qui correspond à la valeur de 'point.z').
// Puisque la valeur de point.z varie entre -100 et 100 (puisqu'on s'est arrangé pour que le clip se situe à 100 du centre et que le centre est au 'niveau' 0 (z=0)), on y ajoute 200 pour obtenir un pourcentage entre 100 (taille normale) et 300 (taille triplée).
|
Alors ? Magnifique, n'est-ce pas ? Nous savons maintenant comment faire tourner notre
point dans 2 plans parallèles. Le faire tourner dans le 3
e plan ne nous posera donc aucun problème (juste quelques modifications du code).
Eh bien, prochaine étape, on combine les rotations.
Je viens de vous dire que vous étiez capables de créer la rotation dans le 3
e plan,
. Mais il me vient un doute,
allez : montrez-moi que vous avez tout compris. Faites les modifications nécessaires avant de lire le code.
(Toujours autour du même
centre, (x=100,y=100,z=0).)
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
20
21
22
23
24
25
26
27
28
29
30 | 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 newY:Number = (point.y-centreY)*cosAngle-(point.z-centreZ)*sinAngle;
var newZ:Number = (point.z-centreZ)*cosAngle+(point.y-centreY)*sinAngle;
point.y = centreY+newY;
point.z = centreZ+newZ;
clip._x = point.x;
clip._y = point.y;
// clip.swapDepths(point.z)
clip._xscale = point.z + 200
clip._yscale = point.z + 200
}
var centreX:Number = 100;
var centreY:Number = 100;
var centreZ:Number = 0
var point:MovieClip = new MovieClip();
point.x = 100;
point.y = 100;
point.z = 100;
var clip:MovieClip = this.attachMovie('boule','mc_boule',1);
clip._x = point.x
clip._y = point.y
// clip.swapDepths(point.z)
this.onEnterFrame = function(){
rotation(5)
}
|
Bon, eh bien maintenant, si on veut obtenir une rotation plus complexe, nous n'avons qu'à combiner les différentes
rotation que nous avons vues précédemment.
En fait si l'on regarde bien, la seule chose que nous avons modifiée pour passer de la deuxième rotation à la troisième, c'est la fonction
rotation. Nous allons donc récrire les 3 fonctions mais avec un nom différent pour chacune :
Code : Actionscript1
2
3
4
5
6
7
8
9 | function rotationX(){ // pour la rotation dans le plan (y,z)
}
function rotationY(){ // pour la rotation dans le plan (x,z)
}
function rotationZ(){ // pour la rotation dans le plan (x,y)
}
|
Si vous avez du mal, essayez de bien regarder où et comment nous avons modifié la fonction pour passer à la rotation dans le plan défini par les vecteurs
.
C'est exactement le même principe pour les 3 fonctions.
Voilà : si vous pensez avoir réussi, nous allons le vérifier tout de suite.
Nous allons appliquer à notre
point plusieurs mouvements de rotation :
Code : Actionscript1
2
3
4
5
6
7 | this.onEnterFrame = function(){
rotationY(5)
rotationX(5)
rotationZ(5)
// Pour mieux visualiser la rotation obtenue, je vous conseille de dessiner un cercle de 200 px de diamètre et de coordonnées (0,0).
// Si votre 'clip' sort de ce cercle, vous devez avoir un problème dans votre code.
}
|
Voilà, nous sommes maintenant capables de faire tourner un point dans plusieurs dimensions.
).
Flux RSS News
Twitter
Facebook