Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox
Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par lilive (Olivier Tarasse), le 04 mars 2010

Navigation:
[ Introduction ]
Présentation des matrices et de la multiplication
Les matrices c'est super, mais à quoi ça sert?
Utilisation des matrices en Actionscript
Anticiper le résultat de la transformation géométrique par une matrice
Matrices et translations
Transformations successives par matrices
Exemples d'applications avec les matrices
Matrix, x, y, scaleX, scaleY, et rotation
Conclusion

Les matrices de transformation affine du plan (Matrix en Actionscript)

Dans ce tutoriel nous allons voir comment utiliser les matrices pour effectuer des transformations géométriques sur des objets en 2 dimensions, en infographie: déplacements, changement d'échelle, rotation, symétrie, inclinaisons.

Nous allons voir les bases mathématiques nécessaires pour comprendre les matrices, puis leur utilisation en Actionscript 3. Les programmeurs en Actionscript 2 pourront également suivre toutes les explications. La classe Matrix est à peu de chose près la même dans les deux versions du langage. Les programmeurs dans d'autres langages pourront profiter de toute la partie théorique.

Le problème qui peut se poser avec les matrices est qu'il faut avoir fait des maths assez longtemps (après le baccalauréat en France) pour en avoir entendu parler dans ses études. Ce n'est pas que ce soit un sujet spécialement difficile, mais voilà, si on ne connaît pas la théorie il est un peu difficile de s'en sortir seul.

Pour pouvoir suivre ce tutoriel il vous faut savoir faire des additions, des multiplications, et savoir comment on repère les points du plan avec un système de coordonnées (x,y). Si vous connaissez tout cela, je crois que vous ne devriez pas rencontrer de difficulté. Si vous êtes encore peu sûrs de vous avec ces notions de points dans le plan et de coordonnées, vous devriez commencer par là, et revenir ici plus tard, si besoin.

On pourrait sûrement faire un tutoriel plus court sur l'utilisation des matrices en Actionscript, et passer sur la théorie pour aller directement à la pratique. J'ai choisi d'expliquer la théorie. Du coup le tutoriel est plus long, mais je pense que l'avantage est qu'il donne les moyens de maîtriser complètement ce qu'on peut faire avec les matrices.

En Actionscript 3, il est possible très simplement d'agir sur l'affichage des objets en jouant sur leurs coordonnées (propriétés x et y), leur échelle horizontale et verticale (scaleX et scaleY), et leur angle de rotation (propriété rotation). Les propriétés équivalentes en Actionscript 2 sont _x, _y, _xscale, _yscale et _rotation. Avec ceci il est possible de réaliser les transformations géométriques les plus communes. Pourquoi alors s'embêter avec les matrices :) ? Parce-que dans certains cas elles vont énormément simplifier les choses, et que dans d'autres cas on ne pourra simplement pas les éviter. Alors pour vous allécher voici quelques exemples commentés d'utilisation des matrices, avant d'attaquer pour de bon.

Exemples


Incliner une image

Le premier avantage des matrices en Actionscript, c'est qu'elles permettent de jouer sur l'inclinaison des objets. Il n'est pas possible de faire sans pour réaliser le résultat suivant (passez la souris sur l'image pour l'incliner):

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.


Rotation autour d'un autre point que le point d'alignement

Pour faire pivoter un objet, il faut connaître l'angle de rotation qu'on veut lui donner, et également le point autour duquel il va pivoter. en Actionscript, la propriété rotation permet de modifier très simplement l'angle que fait l'objet avec l'horizontale. Par contre, sans les matrices, il est assez difficile de modifier le point de pivot, même s'il est mathématiquement possible d'agir sur les coordonnées x et y de l'objet pour y arriver, avec des notions de trigonométrie. Avec les matrices, pas besoin de savants calculs.

Déplacez la souris sur l'image de départ (l'image grisée) pour définir le point autour duquel elle doit pivoter. Le résultat est immédiatement appliqué sur l'image en rotation.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Application inspirée de cette discussion du forum.

Nous réaliserons ceci au paragraphe 7


Zoomer sur un point d'une image

Un autre problème que l'on peut rencontrer est la question de “zoomer” sur un point précis d'une image. Si les propriétés scaleX et scaleY d'Actionscript permettent de facilement changer l'échelle de l'image, il est parfois plus délicat de calculer les coordonnées x et y à donner à l'image pour que le zoom se fasse sur le point voulu. Là encore, les matrices offrent un moyen simple de s'en sortir.

Cliquez sur la loupe que vous voulez utiliser, puis cliquez sur l'image avec la loupe:

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

(Icônes des loupes crées par FatCow Web Hosting, licence Creative Commons (Attribution 3.0 United States))

Avec les matrices le calcul prend trois lignes de code. Sans elles il en faut beaucoup plus. Nous réaliserons cette application au paragraphe 7


Utiliser avec les BitmapData

Pour finir, notons qu'il est difficile d'éviter les matrices quand on travaille avec la méthode draw des BitmapDatas d'Actionscript. Cette méthode permet de dessiner sur une image avec une autre image. Voici une petite réalisation qui le fait. Il ne s'agit pas là d'un même objet qui a été affiché de multiples fois, en laissant le soin à Flash de générer l'image résultante de leurs superpositions, mais bien d'une seule image sur laquelle un “pinceau” a été appliqué plusieurs fois. Cliquer sur le bouton pour voir le dessin se refaire.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

L'avantage de cette façon de procéder, c'est qu'une fois l'image crée, Flash n'a plus à recalculer le résultat. C'est une optimisation souvent indispensable.


C'est parti!

Après ce petit aperçu, que l'on pourrait enrichir à l'envie, si vous estimez que les matrices peuvent être l'outil qu'il vous faut, et bien… c'est parti!


Page suivante >>