Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
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 quels points.
Pour cela, nous devons ajouter dans les paramètres de nos fonction 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 seul 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 aurons 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 deuxieme il faudrait créer un deuxieme 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 sommes, 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().
Etant 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 de :
- Une fonction conversion_radians().
- Trois fonctions de rotations.
- Une fonction tracer().
- Une fonction init().
- Les 3 lignes de définition du centre.
- Une ligne d'exécution de la fonction init().
- Et une fonction attachée à l'événement 'onEnterFrame'.
Vous pouvez tester, vous devriez avoir un joli cube qui tourne sur lui même.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
135 Zéros connectés |
8 requêtes |
0.0287s (0.018s)
