CATALOGUE Code & Data Apprendre ActionScript 3

Utiliser la Matrice de Transformation pour Dessiner des Motifs dans BitmapData

Retour à la formation
Chapitre 22 Leçon 5
Précédent
Suivant

Cette leçon explique comment dessiner un motif dans BitmapData en utilisant les propriétés de transformation de la matrice.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons apprendre à dessiner un motif dans BitmapData en utilisant une matrice de transformation. Nous allons nous concentrer principalement sur la translation. La méthode draw possède un deuxième paramètre de type matrix, qui contient toutes les transformations géométriques applicables sur un objet graphique telles que la rotation, l'échelle, l'inclinaison, et la translation.

Nous allons créer une instance de cette classe pour déplacer le motif en fonction de la position de la souris. Les propriétés tx et ty de cette matrice seront modifiées en utilisant les coordonnées de la souris définies par les propriétés mouseX et mouseY de l'objet root.

Nous observerons deux petits défauts : le motif se dessine vers la droite et vers le bas au lieu d'au centre, et rien ne se passe si on clique sans bouger la souris. Nous introduirons un léger décalage pour recentrer le motif et adapterons le code pour dessiner dès le premier clic.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de:

  • Apprendre à utiliser la matrice de transformation dans BitmapData.
  • Maitriser la translation pour dessiner des motifs à l'emplacement de la souris.
  • Comprendre les propriétés tx et ty.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez:

  • Avoir des connaissances de base en ActionScript.
  • Connaître les manipulations des objets graphiques dans Flash.
  • Comprendre les concepts de transformation géométrique.

Métiers concernés

Les applications professionnelles de cette technique incluent:

  • Développeur de jeux vidéo
  • Concepteur graphique
  • Animatrice 2D

Alternatives et ressources

Des alternatives à ActionScript pour manipuler des objets graphiques incluent:

  • HTML5 Canvas
  • SVG
  • WebGL

Questions & Réponses

La propriété mouseX est utilisée pour obtenir les coordonnées x de la souris par rapport au point de référence de l'objet root afin de positionner correctement le motif dessiné.
Les propriétés tx et ty de la matrice sont utilisées pour déplacer le motif en modifiant ses coordonnées pendant la translation.
Un décalage est introduit pour que le motif soit centré sur la souris, car par défaut, le motif se dessine à partir du coin supérieur gauche.