[Plan du site]
Vous êtes ici ---
> Le Site du Zéro
> Les tutoriels
> Non-Officiels
> Programmation
> ActionScript / Flash / Flex
> Introduction à la 3D > Introduction à la 3D via la trigonométrie > Texturisation
> Lecture du tutoriel
Texturisation
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)
Dans ce chapitre, nous allons réutiliser notre cube sur lequel nous allons 'coller' des faces.
En fait nous allons replacer et déformer des clips, pour qu'ils s'adaptent à nos faces.
Normalement si vous avez déjà lu
ce chapitre, vous savez déjà déplacer/déformer des clips.
Mais si je vous demande de transformer votre clip comme ceci pour qu'il s'adapte à notre face et bien, normalement, vous ne savez pas (ou bien ça ne sert à rien de lire ce chapitre

).
En fait quand vous ouvrez la fenêtre de transformation dans Flash, vous connaissez ces différentes propriétés :
- _x
- _y
- _width
- _height
- _xscale
- _yscale
- _rotation
Mais vous pouvez remarquer qu'il y a une transformation que vous ne savez pas faire via l'ActionScript :
incliner.
En fait, il n'existe pas directement de propriété qui nous le permette. Nous allons être obligés d'utiliser une autre méthode : la classe Flash.geom.Matrix().
Pour cet exercice, nous allons avoir besoin de 6 images (je vous laisse les trouver

).
Peu importe leur taille, elle seront redimensionnées automatiquement.
Bon, maintenant il faut les importer dans notre document :
Fichier => Importer => Importer dans la bibliothèque.
Puis nous allons convertir ces images en MovieClip :
Insertion => Nouveau symbole (ctrl + F8)
Puis sélectionnez clip et validez.
Maintenant dans notre clip, insérez notre image qui se trouve dans la bibliothèque (ctrl + L).
Il faut bien placer l'image aux coordonnées (0,0), sinon il y aura des problèmes lorsque nous déformerons le clip.
Dernière manipulation : dans la bibliothèque faites clic droit => liaison, puis cochez exporter pour ActionScript et donnez-lui pour nom de liaison 'clip1'.
Répéter ces opérations pour les 6 clips (en changeant bien les noms de liaison, clip1, clip2, clip3...).
Pour faire cela nous allons avoir besoin de deux classes ; au début de votre animation recopiez ces deux lignes qui servent à importer dans notre document les deux classes que nous allons utiliser :
Code : Actionscript1
2 | import flash.geom.Transform
import flash.geom.Matrix
|
Intéressons-nous à la classe 'Matrix()'.
Doc officielle.
La matrice d'un clip ressemble à ça :

Euh, mais j'ai aucune connaissance en matrice moi, c'est grave ?
Mais non ne vous inquiétez pas.
Alors, voyons à quoi correspondent ces lettres :
| Lettre. | Exemple matrice. | Résultat. | Description. |
|---|
| clip de base |
 |
 |
Matrice par défaut d'un clip... |
| a |
 |
 |
Cette propriété multiplie la largeur du clip. |
| d |
 |
 |
Même chose que 'a' mais pour la hauteur du clip. |
| tx |
 |
 |
Position (en pixels) du clip en horizontal par rapport au coin supérieur gauche. |
| ty |
 |
 |
Même chose que pour 'tx' mais sur l'axe vertical. |
| b |
 |
 |
Cette propriété incline notre clip en vertical. |
| c |
 |
 |
Même chose que pour 'b' mais en horizontal. |
On remarque que l'inclinaison et la modification de la taille prennent en compte la taille du clip.
Il va donc falloir que nous nous débrouillons pour réussir à redimensionner précisément les clips.
Ex : si un clip fait 10 pixels de largeur et qu'on veut le redimensionner à 2 pixels, nous devrons définir la propriété 'a' sur 1/5 (pour diviser la taille par 5).
Dans le cas général (dimensions quelconques) nous retiendrons cela :
- a = largeurQueLonVeuxObtenir/largeurDuClip
Maintenant pour l'inclinaison c'est à peu près le même principe. Pour une inclinaison horizontale (propriété 'c'), si on veut que la face du bas soit décalée de 'X' pixels :
- c = DecalageQueLonVeuxObtenir/largeurDuClip
Maintenant intéressons-nous au 'Comment appliquer notre matrice à un clip'.
C'est ici que nous allons avoir besoin de la classe Transform() qui sert justement à appliquer des transformations à un clip.
Si vous avez bonne mémoire, et que vous avez lu le tutoriel de suprazZz, vous vous souviendrez peut-être que vous l'avez déjà utilisée pour appliquer une couleur à un clip.
Nous utiliserons la syntaxe suivante (il faut des connaissance en POO pour comprendre ce que font ces lignes, et ce n'est pas vraiment le but du tutoriel

) :
Code : Actionscript1
2
3
4
5
6
7
8
9 | import flash.geom.Matrix
import flash.geom.Transform
// Importation des deux Classes.
var mat:Matrix = new Matrix() // création de l'objet 'mat'.
mat.c = 1 // modification de la propriété 'c'.
// vous pouvez aussi modifier toutes les autres propriétés par le même principe.
var trans:Transform = new Transform(nomDoccurenceDeMonClip) // création de l'objet 'trans'.
trans.matrix = mat; // on applique notre nouvelle matrice à notre clip.
|
Voilà vous savez maintenant comment modifier un clip de manière avancée.
Bon, maintenant on passe à un exemple concret, nous allons habiller notre cube créé au chapitre précédent (si vous avez sauté ce chapitre, allez y faire un tour pour récupérer le code

).
Avant de pouvoir placer nos clips, encore faut-il les avoir créés sur la scène.
On va donc les créer (dans la fonction init() ça fera parfaitement l'affaire

).
Code : Actionscript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | 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]
}
for(var i:Number = 1 ; i <= 6 ; i++){ // On crée une boucle qui va se répéter 6 fois.
var clip:MovieClip = createEmptyMovieClip("clip"+i,10+i) // On crée un clip vide au niveau 10+i.
clip.attachMovie("clip"+i,"clip",1) // On attache dans le clip vide le clip qui contient notre image.
}
}
|
On va donc créer une fonction 'placer()' dans laquelle on placera les faces (non, sans blague

).
Puis on la fera s'exécuter chaque fois que l'on voudra faire tourner des points :
Code : Actionscript1
2
3 | function placer():Void{
// On place les faces.
}
|
Code : Actionscript 1
2
3
4
5
6
7
8
9
10
11 | onEnterFrame = function ():Void{
this.onEnterFrame = function(){
for(var i:Number = 1; i <= 8 ; i++){
rotationX(this['point'+i],5)
rotationY(this['point'+i],5)
rotationZ(this['point'+i],5)
}
}
tracer();
placer(); // Ligne ajoutée.
};
|
Maintenant que tout est en place, remplissons notre fonction placer().
Déjà on doit créer les objets de la classe Matrix et Transform.
Code : Actionscript1
2 | var matrix:Matrix = new Matrix()
var trans:Transform = new Transform(clip1) // Notre objet Transform pointe sur le premier clip, quand nous voudrons travailler sur le deuxième clip nous allons être obligés de recréer un objet Transform.
|
Puis nous modifions la position du coin supérieur droit de notre clip (sur le point1 pour ce clip-ci).
Code : Actionscript1
2 | matrix.tx = point1.x // positionnement en abscisse.
matrix.ty = point1.y // positionnement en ordonnée.
|
Maintenant nous allons voir les 4 lignes les plus difficiles du chapitre,

je vous ai donc fait des petits dessins.


Voilà, nous savons comment obtenir la largeur voulue mais maintenant il faut diviser par la largeur de notre clip :
Code : Actionscript1
2
3
4 | // dimension en largeur.
matrix.a = (point2.x-point1.x)/clip1.clip._width
// dimension en hauteur.
matrix.d = (point5.y-point1.y)/clip1.clip._height
|
Maintenant pour l'inclinaison :


Puis on divise :
Code : Actionscript1
2
3
4 | // Inclinaison en hauteur.
matrix.b = (point2.y-point1.y)/clip1.clip._width
// Inclinaison en largeur.
matrix.c = (point5.x-point1.x)/clip1.clip._height
|
Pour conclure, on applique notre nouvelle matrice à notre clip1 :
Code : Actionscript
Voilà, pour résumer voici notre code pour repositionner le clip1 :
Code : Actionscript 1
2
3
4
5
6
7
8
9
10
11
12 | function placer():Void{
var matrix:Matrix = new Matrix()
var trans:Transform = new Transform(clip1)
matrix.tx = point1.x
matrix.ty = point1.y
matrix.a = (point2.x-point1.x)/clip1.clip._width
matrix.d = (point5.y-point1.y)/clip1.clip._height
matrix.b = (point2.y-point1.y)/clip1.clip._width
matrix.c = (point5.x-point1.x)/clip1.clip._height
trans.matrix = matrix
// Faites de même pour les 6 clips.
}
|
Pensez à ajouter les importations de fonctions au début de votre code.
Si vous avez testé votre animation, vous avez remarqué que les clips ont l'air bien placés mais il apparaissent un peu n'importe comment.
Cela est dû au fait que vos clips ont été créés à des niveaux fixes et donc on verra toujours le clip 6 au dessus du clip 5, 4 ou 3...
Nous allons donc (dans notre fonction placer()) cacher les clips qui ne devraient pas être visibles (via la propriété '_alpha').
Pour faire ça il existe plein de méthodes, j'ai choisi de vous en exposer une mais il y en a peut être d'autres qui sont meilleures ou plus simples à mettre en oeuvre.
Toute cette partie ne s'applique qu'à un cube qui tourne autour de son centre. Pour des formes ou un entre différent, il faudra donc éditer ce code ou bien même trouver une autre solution.
Pour réaliser ce code, je suis parti du constat que, quelle que soit la rotation de notre cube :
- on ne voit au maximum que 3 faces,
- et quand on voit 3 faces il n'y a qu'un seul sommet commun.
Le but est d'arriver à déterminer quel est ce sommet...
Je suis parti du principe qu'en général, la moitié des points avaient une variable 'z' négative (car centreZ = 0) et donc que l'autre moitié avait une variable 'z' positive.
Le point que nous cherchions était donc dans ce deuxieme groupe.
Puis j'ai remarqué que dans le plan défini par les vecteurs

, notre point était toujour plus proche du centre (dans notre cas (100,100)) que les autres.
J'ai donc créé une boucle qui fait des vérifications sur nos 8 points.
Si la variable 'z' du point est positive :
je compare la distance entre le point et le centre avec une variable 'dismin', si elle est plus petite, je l'enregistre dans la variable dismin, et j'enregistre le numero du point dans une autre variable.
En code ca nous donne ça :
Code : Actionscript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 | var dismin:Number = 1000 // Un grand nombre pour commencer.
var num:Number; // Variable pour enregistre le numéro du point.
var dis:Number;
var disX:Number;
var disY:Number;
for(var i:Number=1;i<=8;i++){ // boucle du point 1 au point 8.
var pts:MovieClip = this['point'+i] // Raccourci pour accéder à la variable this['point'+i];
if(pts.z > 0){ // si la variable 'z' est positive.
disX = pts.x-centreX // Raccourci pour avoir la distance en abscisse.
disY = pts.y-centreY // Raccourci pour avoir la distance en ordonnée.
dis = Math.sqrt(disX*disX+disY*disY) // Formule de Pythagore pour déterminer la longueur de l'hypoténuse d'un triangle rectangle.
if(dis < dismin){ // Si la distance est inférieure à 'dismin'.
dismin = dis // On actualise 'dismin'.
num = i // On sauvegarde le numéro du point.
}
}
}
|
Voilà, nous savons maintenant quel est ce point, nous n'avons plus qu'à actualiser la propriété _visible de nos 6 clips pour terminer :
Code : Actionscript1
2
3
4
5
6
7
8 | clip1._visible = (num == 1 || num == 2 || num == 5 || num == 6)
// Notre clip1 est situé entre les points 1, 2, 3 et 4. Donc si l'un d'eux est notre point principal, le clip devra être visible.
// Les '||' signifient 'ou', donc la formule (num == 1 || num == 2) nous renverra True si num=1 <souligne>ou</souligne> si num=2, sinon elle nous renverra False.
clip2._visible = (num == 2 || num == 3 || num == 6 || num == 7)
clip3._visible = (num == 3 || num == 4 || num == 7 || num == 8)
clip4._visible = (num == 4 || num == 1 || num == 8 || num == 5)
clip5._visible = (num == 1 || num == 2 || num == 3 || num == 4)
clip6._visible = (num == 5 || num == 6 || num == 7 || num == 8)
|
Voilà, c'est fini, vous pouvez tester.
Si tout marche bien magnifique, vous avez réussi

sinon, euh... vous avez du faire une erreur quelque part.

Et puis je n'ai pas trop envie de vous donner un récapitulatif, le but c'est d'avoir compris et non que l'animation marche (enfin un peu quand même aussi

).
Bon voilà, vous en savez presque autant que moi sur la 3D.
A vous maintenant d'explorer les différentes classes de Flash pour améliorer le système.