Les bases de l'ActionScript 3 » General

La géométrie dans Flash

tannoy — Tue, 15 Jul 2008 12:37:56 +0000

Utilisation de la géométrie en ActionScript 3 (AS3)

Le but de cet article est d'étudier les différentes fonctionnalités en rapport avec la géométrie dans Flash.
Le package flash.geom contient des classes qui définissent des objets géométriques, tels que des points, des rectangles et des matrices de transformation. Ces classes ne fournissent pas nécessairement de fonctionnalité par elles-mêmes ; néanmoins, elles sont utilisées pour définir les propriétés des objets utilisés dans d'autres classes.

Toutes les classes de géométrie se basent sur la notion selon laquelle les emplacements à l'écran sont représentés comme un plan en deux dimensions. L'écran est traité comme un graphique plat avec un axe horizontal (x) et un axe vertical (y). Tout emplacement (ou point) à l'écran peut être représenté sous la forme d'une paire de valeurs x et y, appelées coordonnées de cet emplacement.

Le point d'origine, coordonnées 0, 0, de la scène de travail est le coin haut gauche de la séquence.

Les valeurs sur l'axe x augmentent en allant vers la droite et diminuent en allant vers la gauche. Néanmoins, contrairement aux systèmes de coordonnées classiques, dans ActionScript, les valeurs sur l'axe y augmentent en allant vers le bas et diminuent en allant vers le haut de l'écran.

Utilisation de la classe Point

Un objet Point définit une paire de coordonnées cartésiennes. Il représente un emplacement dans un système de coordonnées à deux dimensions, dans lequel x est l'axe horizontal et y l'axe vertical.

Le constructeur de la classe Point prend en paramètres la valeur de la coordonnée x et la valeur de la coordonnée y.

COPIER-COLLER

Actionscript:

var point1:Point = new Point(20, 60);

On rencontre très souvent des scripts dans lesquels nous avons besoin de mémoriser les coordonnées de départ d'un objet d'affichage. Classiquement, les développeurs vont créés 2 variables numériques et stocker les valeurs d'origine de notre objet.

Il pourrait être plus judicieux de mémoriser ces coordonnées dans un seul objet, un objet de type Point.

Les coordonnées sont ensuite accessibles avec les propriétés x et y de la classe Point.

COPIER-COLLER

Actionscript:

var origineCarreBleu:Point = new Point(carreBleu.x, carreBleu.y);//coordonnées d'origine du carré bleu
trace(origineCarreBleu.x, origineCarreBleu.y);

Calculer la distance entre 2 points

La méthode distance() de la classe Point va nous permettre de calculer la distance entre 2 points dans un espace de coordonnées. Cette méthode est une méthode statique, c'est-à-dire que c'est une méthode qui s'applique à la classe et non à une instance de classe.

Cette méthode attend 2 objets Point en paramètres et renvoie une valeur numérique.

COPIER-COLLER

Actionscript:

//Distance entre le carre rouge et le carre vert
var coordonneesRouge:Point = new Point(carreRouge.x, carreRouge.y); //coordonnées du carré rouge
var coordonneesVert:Point = new Point(carreVert.x, carreVert.y); //coordonnées du carré vert
var distanceRougeVert:Number = Point.distance(coordonneesRouge, coordonneesVert);
trace(distanceRougeVert);

Le cas des espaces de coordonnées différents

Dans le cas où deux objets se trouvent dans deux conteneurs d'affichage différents, ils n'utiliseront pas le même espace de coordonnées. Nous devrons donc convertir les coordonnées locales en coordonnées globales en utilisant la méthode localToGlobal() de la classe DisplayObject.

Dans l'exemple suivant, nous allons créer 2 champs de texte, le premier sera ajouté à la scène et le second sera ajouté dans un conteneur Sprite. Le premier champ de texte sera donc dans l'espace de coordonnées global alors que le second sera lui dans l'espace de coordonnées local au Sprite.

Pour calculer la distance entre les 2 champs de texte, nous utiliserons la méthode localToGlobal() sur le 2^ème champ de texte afin de convertir l'objet point des coordonnées de ce texte (locales) vers les coordonnées de la scène (globales).

Cette méthode attend en paramètres un objet Point correspondant aux coordonnées à convertir.

COPIER-COLLER

Actionscript:

//Conversion de coordonnées locales en coordonnées globales
var texte1:TextField = new TextField(); // 1er champ de texte
texte1.text = "1er texte";
addChild(texte1); // le texte est ajouté à la scène
texte1.x = texte1.y = 50; // le texte est positionné aux coordonnées 50,50 par rapport à la scène
var texte2:TextField = new TextField(); // 2ème champ de texte
texte2.text = "2ème texte";
var sprite:Sprite = new Sprite();// le conteneur du 2ème champ de texte
sprite.addChild(texte2); // le texte 2 est ajouté dans le sprite
addChild(sprite); // le conteneur est ajouté à la scène
sprite.x = sprite.y = 200; //le conteneur est positionné aux coordonnées 200,200 par rapport à la scène
var pointTexte1:Point = new Point(texte1.x, texte1.y); //Coordonnées globales du texte 1
var pointTexte2:Point = new Point(texte2.x, texte2.y); //Coordonnées locales du texte 2 par rapport à son parent
trace(pointTexte2.x, pointTexte2.y); //affichage de 0, 0
pointTexte2 = texte2.localToGlobal(pointTexte2); //Conversion des coordonnées locales en coordonnées globales
trace(pointTexte2.x, pointTexte2.y); //affichage de 200, 200
var distanceTexte:Number = Point.distance(pointTexte1, pointTexte2);
trace(distanceTexte);

Autres utilisations

La classe Point pourra être aussi utilisée dans les méthodes des classes suivantes :

DisplayObjectContainer
BitmapData
Matrix
Rectangle

Utilisation de la classe Rectangle

Un objet Rectangle définit une zone rectangulaire. Un objet Rectangle a une position définie par les coordonnées x et y de son angle supérieur gauche, une propriété width définissant sa largeur et une propriété height définissant sa hauteur.

Le constructeur prend en paramètres ces 4 valeurs.

COPIER-COLLER

Actionscript:

var zone1:Rectangle = new Rectangle(50, 50, 220, 110); //zone rectangulaire de 220 pixels de large, 110 pixels de haut, positionnée aux coordonnées 50, 50

Cas d'utilisation

Recouvrement de 2 objets

La méthode intersects() de la classe Rectangle va vous permettre de savoir si 2 rectangles se recouvrent. Cette méthode peut-être utilisée pour savoir si 2 objets d'affichage (clip, sprite, image...) se recouvrent.

En effet, la méthode getBounds() de la classe DisplayObject renvoie un objet de type Rectangle correspondant à la délimitation rectangulaire de l'objet d'affichage. En récupérant la délimitation de 2 objets, on peut ensuite savoir s'ils se recouvrent en utilisant la méthode intersects() de la classe DisplayObject.

La méthode intersects() renvoie un booléen (true ou false).

Nous allons utiliser ces méthodes avec trois carrés dont 2 (le bleu et le vert) qui se recouvrent.

COPIER-COLLER

Actionscript:

//Cas d'utilisation
var delimitationBleu:Rectangle = carreBleu.getBounds(this); // delimitation rectangulaire du carré bleu
trace(delimitationBleu.x, delimitationBleu.y, delimitationBleu.width, delimitationBleu.height);
var delimitationRouge:Rectangle = carreRouge.getBounds(this); // delimitation rectangulaire du carré rouge
trace("Est-ce que le carré bleu recouvre le carré rouge ? Réponse : " + delimitationBleu.intersects(delimitationRouge));
var delimitationVert:Rectangle = carreVert.getBounds(this); // delimitation rectangulaire du carré vert
trace("Est-ce que le carré bleu recouvre le carré vert? Réponse : " + delimitationBleu.intersects(delimitationVert));

Copie d'une zone d'une image

Les classes rectangle et Point sont aussi utilisées lors de la copie d'une zone d'une image. En effet, la méthode copyPixels() de la classe BitmapData prend notamment en paramètres un objet Rectangle et un objet Point.

L'objet Rectangle correspond à la zone rectangulaire de pixels qui sera copiées. Cet objet Rectangle définira les coordonnées x et y du point d'origine de la copie par rapport à l'image initiale et la largeur et hauteur de la zone copiée.

L'objet Point correspond au point d'origine dans la copie à partir duquel seront copiés les pixels.

COPIER-COLLER

Actionscript:

//Cas d'utilisation : copie de pixels
var pixelsDisney:Disney = new Disney(300, 201); //La classe Disney correspond à la classe auto-générée depuis l'image cars.jpg de la bibliothèque
var imageDisney:Bitmap = new Bitmap(pixelsDisney); // Objet d'affichage des pixels
addChild(imageDisney); //affichage de l'image dans la scène
var copiePixelsDisney:BitmapData = new BitmapData(142, 105); // objet de 142 pixels de large et de 105 pixels de hauteur dans lequel les pixels seront copiés
var zoneImage:Rectangle = new Rectangle(158, 96, copiePixelsDisney.width, copiePixelsDisney.height); // Cette zone rectangulaire est une zone de 142 pixels de large, 105 pixels de haut et la copie des pixels sera effectué à partir des coordonnées 158, 96 par rapport au coin haut gauche de l'image.
var pointCollage:Point = new Point(0,0); //Les pixels seront collés au point de coordonnées 0,0 de l'objet BitmapData
copiePixelsDisney.copyPixels(pixelsDisney, zoneImage, pointCollage); //copie d'une zone de pixels.
var newDisney:Bitmap = new Bitmap(copiePixelsDisney);// objet d'affichage de la copie des pixels
newDisney.y = 220; //positionnement de la copie sous l'image d'origine
addChild(newDisney); //affichage de la copie

Autres utilisations

La classe Rectangle pourra être aussi utilisée dans les méthodes des classes suivantes :

DisplayObject
BitmapData
PrintJob
Sprite
TextField
Transform

Mise à jour du Flash Player

tannoy — Thu, 20 Dec 2007 07:51:33 +0000

Adobe a annoncé au début du mois la mise à disposition de Flash Player 9 Update 3.

Les améliorations :

Support des standards, H.264 et HE-AAC, pour l'audio/vidéo HD
Vidéo plein écran pour la majorité des navigateurs et des OS
Support du multi-core pour améliorer les rendus
Support de l'accélératio matériel

Téléchargez Flash Player 9 Update 3

;)

Adobe Flash Player 10, codename "Astro"

tannoy — Fri, 12 Oct 2007 11:21:09 +0000

La prochaine version majeure de Flash Player, nom de code "Astro", a pu être aperçue lors de l'Adobe Max 2007

Les nouvelles fonctionnalités :

Gestion avancée du texte :
Prise en charge des langages bi-directionnels (Hébreu, Arabe...), présentation du texte sur plusieurs colonnes...
Effets 3D
Filtres et effets personnalisés

Retrouvez Astro sur les labs d'Adobe :
Adobe Flash Player 10 : Astro

;)

Affichage de la date et de l’heure

tannoy — Thu, 05 Apr 2007 22:05:49 +0000

Afficher la date et l'heure en ActionScript 3 (AS3)

La date et l'heure que calcule ActionScript sont basées sur le paramétrage de la date et l'heure de l'ordinateur du client.
Nous allons utiliser la classe Date pour récupérer la date et l'heure.

Nous utiliserons ensuites les propriétés de la classe Date pour récupérer l'année, le mois, le jour, l'heure, les minutes et les secondes. Cependant, le mois et le jour sont renvoyés en tant que valeurs numériques. Nous utiliserons donc des tableaux pour stockés les mois et les jours en tant que chaînes de caractères.

COPIER-COLLER

Actionscript:

const MOIS:Array = new Array("Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre");
const JOURS:Array = new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");

L'affichage se fera dans deux champs de texte dynamiques.

COPIER-COLLER

Actionscript:

var date_txt:TextField = new TextField();
addChild(date_txt);
var heure_txt:TextField = new TextField();
heure_txt.y = 100; addChild(heure_txt);

Nous utiliserons un Timer pour mettre à jour l'affichage toutes les secondes. Une instance de la classe Date sera créée.
Nous récupérerons l'année grâce à la propriété fullYear.
Nous récupérerons le mois grâce à la propriété month. Cependant, cette propriété renvoie un nombre entre 0 (janvier) et 11 (décembre). Nous utiliserons donc ce nombre pour récupérer l'index correspondant dans le tableau des mois.
Nous récupérerons le jour dans le mois grâce à la propriété date.
Nous récupérerons le jour dans la semaine grâce à la propriété day. Cependant, cette propriété renvoie un nombre entre 0 (dimanche) et 6 (samedi). Nous utiliserons donc ce nombre pour récupérer l'index correspondant dans le tableau des jours.

COPIER-COLLER

Actionscript:

// on crée un objet Timer avec en paramètres le délai puis le nombre d'événements diffusés
var myTimer:Timer = new Timer( 1000, 0 ); //on souhaite exécuter une action toutes les 1000 millisecondes.
// A chaque appel du Timer (toutes les 1000 millisecondes),
function onAffichage( pEvt:TimerEvent ):void
{
var temps:Date = new Date(); //création de l'instance de la classe Date
var annee:uint = temps.fullYear; //récupération de l'année
var mois:String = MOIS[temps.month]; //récupération du nom du mois dans le tableau MOIS
var numJour:uint = temps.date; //récupération du numéro du jour dans le mois
var jour:String = JOURS[temps.day]; //récupération du nom du jour dans le tableau JOURS
date_txt.text = jour + " " + numJour + " " + mois + " " + annee; //affichage du calendrier dans le champ de texte
}
myTimer.addEventListener( TimerEvent.TIMER, onAffichage ); //Toutes les 1000 millisecondes, le timer exécute l'événement TIMER et donc en réponse, la fonction onAffichage est exécutée.
myTimer.start(); //démarrage du timer

Afin d'avoir un affichage cohérent, nous allons devoir ajouter un 0 devant les heures, minutes et secondes inférieures à 10. Nous allons pour cela créer une fonction, qui retournera sous forme de chaîne de caractères l'affichage correct des heures, minutes et secondes.

COPIER-COLLER

Actionscript:

function reglage( valeur:uint ):String
{
var retour:String = "";
if(valeur<10)
{
retour = "0"+valeur;
}
else
{
retour = String(valeur);
}
return retour;
}

Dans la fonction onAffichage, nous récupérerons les heures grâce à la propriété hours.
Nous récupérerons les minutes grâce à la propriété minutes.
Nous récupérerons les secondes grâce à la propriété seconds.

COPIER-COLLER

Actionscript:

// on crée un objet Timer avec en paramètres le délai puis le nombre d'événements diffusés
var myTimer:Timer = new Timer( 1000, 0 );//on souhaite exécuter une action toutes les 1000 millisecondes.
// A chaque appel du Timer (toutes les 1000 millisecondes),
function onAffichage( pEvt:TimerEvent ):void
{
var temps:Date = new Date(); //création de l'instance de la classe Date
var annee:uint = temps.fullYear; //récupération de l'année
var mois:String = MOIS[temps.month]; //récupération du nom du mois dans le tableau MOIS
var numJour:uint = temps.date; //récupération du numéro du jour dans le mois
var jour:String = JOURS[temps.day]; //récupération du nom du jour dans le tableau JOURS
date_txt.text = jour + " " + numJour + " " + mois + " " + annee; //affichage du calendrier dans le champ de texte
var heure:String = reglage( temps.hours ); //récupération et transformation éventuelle des heures
var minute:String = reglage( temps.minutes ); //récupération et transformation éventuelle des minutes
var seconde:String = reglage( temps.seconds ); //récupération et transformation éventuelle des secondes heure_txt.texte = heure + ":" + minute + ":" + seconde;
}
myTimer.addEventListener( TimerEvent.TIMER, onAffichage ); //Toutes les 1000 millisecondes, le timer exécute l'événement TIMER et donc en réponse, la fonction onAffichage est exécutée.
myTimer.start(); //démarrage du timer

Le script complet :

COPIER-COLLER

Actionscript:

const MOIS:Array = new Array("Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre");
const JOURS:Array = new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");
var date_txt:TextField = new TextField(); addChild(date_txt);
var heure_txt:TextField = new TextField();
heure_txt.y = 100;
addChild(heure_txt);
function reglage( valeur:uint ):String
{
var retour:String = "";
if(valeur<10) {
retour = "0"+valeur;
}
else
{
retour = String(valeur);
}
return retour;
}
// on crée un objet Timer avec en paramètres le délai puis le nombre d'événements diffusés
var myTimer:Timer = new Timer( 1000, 0 ); //on souhaite exécuter une action toutes les 1000 millisecondes.
// A chaque appel du Timer (toutes les 1000 millisecondes),
function onAffichage( pEvt:TimerEvent ):void
{
var temps:Date = new Date(); //création de l'instance de la classe Date
var annee:uint = temps.fullYear; //récupération de l'année
var mois:String = MOIS[temps.month]; //récupération du nom du mois dans le tableau MOIS
var numJour:uint = temps.date; //récupération du numéro du jour dans le mois
var jour:String = JOURS[temps.day]; //récupération du nom du jour dans le tableau JOURS
date_txt.text = jour + " " + numJour + " " + mois + " " + annee; //affichage du calendrier dans le champ de texte
var heure:String = reglage( temps.hours ); //récupération et transformation éventuelle des heures
var minute:String = reglage( temps.minutes ); //récupération et transformation éventuelle des minutes
var seconde:String = reglage( temps.seconds ); //récupération et transformation éventuelle des secondes
heure_txt.text = heure + ":" + minute + ":" + seconde;
}
myTimer.addEventListener( TimerEvent.TIMER, onAffichage ); //Toutes les 1000 millisecondes, le timer exécute l'événement TIMER et donc en réponse, la fonction onAffichage est exécutée.
myTimer.start(); //démarrage du timer

;)

Déplacement d’un visuel avec les flèches du clavier

tannoy — Thu, 31 Aug 2006 12:07:23 +0000

Déplacer un dessin avec les flèches du clavier en ActionScript 3 (AS3)

Nous allons utiliser pour gérer le déplacement d'un objet, la classe KeyboardEvent. Nous verrons ici l'événement keyDown (l'appui sur une touche).
Dans la fonction qui sera exécutée en réponse de l'événement, nous allons tester le code de la touche du clavier afin de définir les différentes interactions à réaliser.

COPIER-COLLER

Actionscript:

// Objet de dessin
var rectangle:Sprite = new Sprite();
// Remplissage du rectangle avec du bleu
rectangle.graphics.beginFill(0x0000FF);
// Dessin du rectangle
rectangle.graphics.drawRect(50, 200, 100, 30);
// Déplacement du rectangle à la souris
function deplacement(evt:KeyboardEvent):void
{
// Test de la touche utilisée
switch(evt.keyCode)
{
// déplacement vers la gauche
case Keyboard.LEFT:
evt.target.x-=5;
break;
// déplacement vers le haut
case Keyboard.UP:
evt.target.y-=5;
break;
// déplacement vers la droite
case Keyboard.RIGHT:
evt.target.x+=5;
break;
// déplacement vers le bas
case Keyboard.DOWN:
evt.target.y+=5;
break;
// pas de déplacement
default :
evt.target.x+=0;
}
}
// Affichage du rectangle
this.addChild(rectangle);
// Focus sur le rectangle pour qu'il puisse être actif
stage.stageFocusRect = false; // Le rectangle jaune du focus est supprimé pour tous les objets
stage.focus = rectangle;
// Ecouteur de l'événement keyDown sur le rectangle
rectangle.addEventListener(KeyboardEvent.KEY_DOWN, deplacement);

;)