Aller au menu - Aller au contenu

Icône Texturisation

Mise à jour : 13/01/2009
Difficulté : Intermédiaire Intermédiaire Creative Commons BY-SA
95 visites depuis 7 jours, dont 1 sur ce chapitre classé 583/786
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.
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire

Rappels

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, eh bien normalement, vous ne savez pas (ou bien ça ne sert à rien de lire ce chapitre ^^ ).
Déformations de clips

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.

Transformation

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().

Créer les clips

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 un 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...).

Déformer un clip

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 : Actionscript
1
2
import flash.geom.Transform
import flash.geom.Matrix


Intéressons-nous à la classe Matrix(). Doc officielle.

La matrice d'un clip ressemble à ça :
$ \begin{bmatrix}   a  &  b  &  tx \\   c  &  d  &  ty \\   0  &  0  &  1 \end{bmatrix}$
o_O Euh, mais j'ai aucune connaissance en matrices moi, c'est grave ?


Mais non, ne vous inquiétez pas.
Alors, voyons à quoi correspondent ces lettres :

LettreExemple matriceRésultatDescription
clip de base $ \begin{bmatrix}   1  &  0  &  0 \\   0  &  1  &  0 \\   0  &  0  &  1 \end{bmatrix}$ Original Matrice par défaut d'un clip...
a $ \begin{bmatrix}   2  &  0  &  0 \\   0  &  1  &  0 \\   0  &  0  &  1 \end{bmatrix}$ Largeur Cette propriété multiplie la largeur du clip
d $ \begin{bmatrix}   1  &  0  &  0 \\   0  &  2  &  0 \\   0  &  0  &  1 \end{bmatrix}$ Hauteur Même chose que a mais pour la hauteur du clip
tx $ \begin{bmatrix}   1  &  0  &  20 \\   0  &  1  &  0 \\   0  &  0  &  1 \end{bmatrix}$ Déplacement x Position (en pixels) du clip en horizontal par rapport au coin supérieur gauche
ty $ \begin{bmatrix}   1  &  0  &  0 \\   0  &  1  &  20 \\   0  &  0  &  1 \end{bmatrix}$ Déplacement y Même chose que tx mais sur l'axe vertical
b $ \begin{bmatrix}   1  &  1  &  0 \\   0  &  1  &  0 \\   0  &  0  &  1 \end{bmatrix}$ Inclinaisons y Cette propriété incline notre clip en vertical
c $ \begin{bmatrix}   1  &  0  &  0 \\   1  &  1  &  0 \\   0  &  0  &  1 \end{bmatrix}$ Inclinaisons x 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ébrouillions 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 : Actionscript
1
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. :)

Application d'un clip sur une face

Bon : on passe maintenant à 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 :p ).
Puis on la fera s'exécuter chaque fois que l'on voudra faire tourner des points :
Code : Actionscript
1
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 : Actionscript
1
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 : Actionscript
1
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. :p
Largeur.Hauteur
Voilà : nous savons comment obtenir la largeur voulue mais maintenant, il faut diviser par la largeur de notre clip :
Code : Actionscript
1
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 :
Inclinaisons yInclinaisons x.
Puis on divise :
Code : Actionscript
1
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
1
trans.matrix = matrix


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.

Ajuster les niveaux

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 on verra donc 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, 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 pour un centre 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 $\vec{x},\vec{y}$, notre point était toujours 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, ça 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 enregistrer 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 : Actionscript
1
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 dû 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 :o ).
Bon, voilà : vous en savez presque autant que moi sur la 3D.
À vous maintenant d'explorer les différentes classes de Flash pour améliorer le système.
Chapitre précédent Sommaire

Partager

3 commentaires pour "Texturisation"
Note moyenne : 3.40 / 4 (5 votes)
Pseudo Commentaire
Hors ligne HammHetfield # Posté le 13/09/2008 à 13:55:02
Parse error
Avatar

Fort dommage que l'on ne puisse pas voir au début ou à la fin, le résultat que l'on peut obtenir...

Portfolio de webdesign
Je ne suis pas disponible pour réaliser des projets/commandes/demandes ou quoi que ce soit.

La section recrutement existe et les designers qui cherchent des projets y vont aussi, envoyer des MPs ne sert pas à grand chose hormis déranger ceux qui ne sont pas intéressés ou disponibles !
 
Hors ligne skity # Posté le 18/02/2010 à 12:13:46

C'est vraiment dommage que la version d'action script utilisé ne soit pas préciser car il y a un GROS mélange entre le 2.0 et le 3.0 dans l'ensemble du tutorial. C'est très perturbant pour les débutants comme moi car ces deux langages sont relativement differents ! (Ca vas que je ne suis pas trop bête pour découvrir par moi même ....)
Hors ligne Blackline # Posté le 07/08/2011 à 03:56:33
Nova Prospekt.
Avatar
Flux RSS

C'est seulement du 2.0. il utilise Flash Macro 8. Une ancienne Version. qui ne comprend que le AS 2.0

"La chimie c'est la croissance, la désintégration, et la transformation. C'est tout simplement de la magie." Walter White

 

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.