En écrivant notre code, vous avez sûrement remarqué que nos trois fonctions ne peuvent faire tourner qu'un seul et unique point.
Nous allons donc les modifier pour qu'elles puissent faire tourner n'importe quel point.
Pour cela, nous devons ajouter dans les paramètres de nos fonctions un MovieClip qui fera le lien vers le point que nous voulons traiter.
Code : Actionscript1
2
3
4
5
6 | function placer_clip(clip:MovieClip){
clip._x = 100
}
placer_clip(monClip)
// En exécutant la fonction, le MovieClip 'clip' va faire référence au MovieClip 'monClip'.
// Mais dans une ligne suivante, nous pouvons tout aussi bien exécuter la fonction 'placer_clip()' avec un autre MovieClip.
|
Dans notre cas, notre code sera modifié comme cela :
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 rotationZ(point:MovieClip,angle:Number):Void{ // ligne modifiée et importante
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;
var newY:Number = (point.y-centreY)*cosAngle+(point.x-centreX)*sinAngle;
point.x = centreX+newX;
point.y = centreY+newY;
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 point1:MovieClip = new MovieClip(); // ligne modifiée
point1.x = 0; // ligne modifiée
point1.y = 100; // ligne modifiée
point1.z = 0; // ligne modifiée
var clip:MovieClip = this.attachMovie('boule','mc_boule',1);
clip._x = point1.x // ligne modifiée
clip._y = point1.y // ligne modifiée
// clip.swapDepths(point1.z) // ligne modifiée
this.onEnterFrame = function(){
rotationZ(point1,5) // ligne modifiée et importante
}
|
Dans ce code, je n'ai fait apparaitre qu'une seule des trois fonctions ; il faudra faire les mêmes modifications pour chaque fonction (juste ajouter le paramètre, en fait
).
Maintenant si nous voulons ajouter un point, rien de plus simple :
Code : Actionscript1
2
3
4
5 | var point2:MovieClip = new MovieClip();
point2.x = 200;
point2.y = 100;
point2.z = 0;
// Par contre, il ne faut pas lui donner les mêmes coordonnées que le 'point1', sinon ils seront confondus et donc il y en a un qui ne nous servira à rien. ^^ (À moins qu'on lui applique des rotations différentes.)
|
Puis pour lui appliquer à lui aussi des rotations, il faut modifier la fonction qui s'exécute avec l'évènement
onEnterFrame :
Code : Actionscript1
2
3
4 | this.onEnterFrame = function(){
rotationZ(point1,5)
rotationZ(point2,2) // ligne ajoutée
}
|
Petite remarque : si nous voulons créer une forme qui puisse tourner, il faut que tous les points tournent à la même vitesse.
Et donc, contrairement à la boucle précédente, nous aurions plutôt ce code-ci :
Code : Actionscript1
2
3
4 | this.onEnterFrame = function(){
rotationZ(point1,5)
rotationZ(point2,5) // Même angle que pour le 'point1'.
}
|
Et l'avantage d'avoir nommé nos points comme cela, c'est que nous pouvons maintenant écrire une boucle qui va faire tourner tout nos
point :
Code : Actionscript1
2
3
4
5
6 | this.onEnterFrame = function(){
for(var i:Number = 1; i <= 2 ; i++){
rotationZ(this['point'+i],5)
}
}
// rotation de 'point1' puis de 'point2'
|
Ce code ne vous paraît peut-être pas très avantageux, mais je suis sûr que beaucoup d'entre vous auront compris qu'en changeant uniquement
i <= 2 par
i <= 5, nous allons faire tourner 5 points au lieu de 2 (si nous les avons créés précédemment, bien sûr).
Si vous avez testé le code précédent, vous avez sûrement remarqué que notre
clip ne simule le mouvement que d'un seul point.
Pour visualiser le deuxième, il faudrait créer un deuxième clip.
Avant de vous jeter dans cette tentative, je vais vous proposer une autre méthode.
Au lieu de visualiser les mouvements des points avec des clips, nous allons simplement relier les points entre eux.
Dans un premier temps, supprimons toutes les lignes qui deviennent inutiles, c'est-à-dire toutes les lignes qui créent et positionnent notre clip :
Code : Actionscript1
2
3
4 | var clip:MovieClip = this.attachMovie('boule','mc_boule',1);
clip._x = point1.x
clip._y = point1.y
// clip.swapDepths(point1.z)
|
Et dans les fonctions :
Code : Actionscript1
2
3
4
5 | clip._x = point.x;
clip._y = point.y;
// clip.swapDepths(point.z)
clip._xscale = point.z + 200
clip._yscale = point.z + 200
|
On a donc supprimé 19 lignes de notre script (4 + 3*5), c'est donc une bonne phase d'optimisation.
Maintenant, créons la fonction qui va relier nos deux points :
Code : Actionscript1
2
3
4
5
6 | function relier(){
this.clear()
this.lineStyle(1,0x000000,100)
this.moveTo(point1.x,point1.y)
this.lineTo(point2.x,point2.y)
}
|
Puis exécutons-la dans notre boucle :
Code : Actionscript1
2
3
4
5
6 | this.onEnterFrame = function(){
for(var i:Number = 1; i <= 2 ; i++){
rotationZ(this['point'+i],5)
}
relier() // ligne ajoutée
}
|
Bon : dans cette partie, on va mettre en pratique ce que nous venons de voir depuis le début de ce chapitre.
Nous allons créer un cube.
Alors, en premier, il faut savoir de combien de points nous aurons besoin pour créer un cube.
Secret (cliquez pour afficher)1 par somme, donc 8 points.
Au lieu d'écrire 8 fois les 4 lignes pour créer un point, je vous propose de créer une fonction qui exécutera une boucle 8 fois.
Pour les coordonnées des points, vous pouvez par exemple les enregistrer dans un tableau.
Code : Actionscript 1
2
3
4
5
6
7
8
9
10
11
12 | function init():Void{
var tabX:Array = new Array(50,150,150,50,50,150,150,50);
var tabY:Array = new Array(50,50,150,150,50,50,150,150);
var tabZ:Array = new Array(-50,-50,-50,-50,50,50,50,50);
for(var i:Number = 1 ; i <= 8 ; i++){
var clip:MovieClip = this.createEmptyMovieClip("point"+i,i);
clip.x = tabX[i-1];
clip.y = tabY[i-1];
clip.z = tabZ[i-1];
}
}
init() // On exécute la fonction
|
Maintenant que nous avons créé nos points, encore faut-il relier les bons entre eux. Pour cela il nous faut modifier la fonction
tracer().
Étant donné l'ordre dans lequel nous avons créé les points (en fonction de la position dans les tableaux), il faut relier le point1 au point2 puis au point3 et enfin au point4.
Pareil pour les points 5, 6, 7, 8.
Et enfin relier deux à deux les points 1, 2, 3, 4 aux points 5, 6, 7, 8.
Maintenant, votre code devrait se composer :
- d'une fonction conversion_radians() ;
- de trois fonctions de rotation ;
- d'une fonction tracer() ;
- d'une fonction init() ;
- des 3 lignes de définition du centre ;
- d'une ligne d'exécution de la fonction init() ;
- et d'une fonction attachée à l'événement onEnterFrame.
Vous pouvez tester, vous devriez avoir un joli cube qui tourne sur lui-même.
Flux RSS News
Twitter
Facebook