Création d'une interacivité par écouteur d'événement avec Fals en ActionScript AS3

Création d'une interactivité par écouteur d'événement avec Flash en ActionScript AS3

Il existe un seul et unique modèle évènementiel en ActionScript 3.

• Ce modèle évènementiel est basé sur le modèle de conception Observateur.
• Les trois acteurs de ce nouveau modèle événementiel sont : le sujet (source de l'événement), l'événement, et l'écouteur qui a pour mission d'écouter et de vérifier un événement spécifique (actions souris, pression touche clavier, cadence de l'animation,...) auprès d'un ou plusieurs sujets.

A cette écouteur, on va associer une fonction (déclencher une animation, stopper une tête de lecture, charger/décharger un clip, modifier la couleur d'une occurrence,...) qui sera exécutée quand l'événement se produira.

• Nous pouvons avoir autant d'écouteurs que nous le souhaitons.
• Plusieurs écouteurs peuvent écouter le même événement.
• Un seul écouteur peut être souscrit à différents événements.

Nos écouteurs sont dépendants du sujet, ils y ont souscrit. Le sujet ne connaît rien des écouteurs, il sait simplement s'il est observé ou non à travers sa liste interne d'écouteurs. Lorsque celui-ci change d'état un événement est diffusé, nos écouteurs en sont notifiés et peuvent alors réagir. Tout événement diffusé envoie des informations aux écouteurs leur permettant d'être tenus au courant des modifications et donc de rester à jour en permanence avec le sujet.

SYNTAXE SCRIPT AS3 D'UN ECOUTEUR

monClip.addEventListener (Event.ENTER_FRAME, maFonction);

function maFonction (evt:Event):void{

fait cela;

}

En ActionScript 3, lorsque nous souhaitons ne plus écouter un événement, nous utilisons la méthode removeEventListener dont voici la signature :

monClip.removeEventListener (Event.ENTER_FRAME, maFonction);

Le premier paramètre appelé type attend le nom de l'événement auquel nous souhaitons nous désinscrire, le deuxième attend une référence à la fonction écouteur.

Liste TUTORIAL FLASH

Script Flash pour dessiner dynamiquement des formes avec ActionScipt AS3

Script Flash pour dessiner dynamiquement des formes avec ActionScipt AS3

Créez une nouvelle animation AS3 nommée « formes.fla ». Nous allons y dessiner différentes formes vectorielles uniquement en code AS3.

Associez-lui la classe de document « formes ».

Créez le fichier de code AS3 « formes.as ».
Dans ce fichier importez les classes « Sprite » et « Shape » :

package {

import flash.display.Sprite;

import flash.display.Shape;

Créez la classe publique « formes » liée à la classe « Sprite » :

public class formes extends Sprite {

Puis la fonction constructeur publique « formes » :

public function formes():void {

Le fichier est prêt à recevoir le code pour tracer dynamiquement les différentes formes vectorielles.

RAPPEL SUR LE CODAGE DES COULEURS ACTIONSCRIPT EN AS3

Pour obtenir le codage d'une couleur particulière : récupérez le code hexadécimal
dans la palette de couleur de l'interface Flash,
puis remplacez le signe # en tête par « 0x » (zéro x).

SCRIPT FLASH 3 POUR TRACER UNE LIGNE DROITE EN ACTIONSCRIPT AS 3

On va créerune nouvelle occurrence de l'objet Shape, nommée « ligneD »

var ligneD:Shape = new Shape ();

On définit l'épaisseur et la couleur de la ligne :

ligneD.graphics.lineStyle(2, 0x000000);

On précise les coordonnées du premier point de la ligne :

ligneD.graphics.moveTo(450, 50);

Celles du second point :

ligneD.graphics.lineTo(400, 300);

On ajoute l'occurrence à la liste d'affichage :

addChild(ligneD);

SCRIPT FLASH 3 POUR TRACER UN RECTANGLE EN ACTIONSCRIPT AS 3

On créé une nouvelle occurrence d'objet Shape nommée « rectangle » :

var rectangle:Shape = new Shape();

On définit la couleur de remplissage du rectangle :

rectangle.graphics.beginFill(0x0000FF);

On trace le rectangle en précisant dans les arguments : les coordonnées du point supérieur gauche puis la largeur et la hauteur du rectangle :

rectangle.graphics.drawRect(300,100,100,50);

On ajoute l'occurrence à la liste d'affichage :

addChild(rectangle);

SCRIPT FLASH 3 POUR TRACER UN RECTANGLE AVEC CONTOUR ET COINS ARRONDIS EN ACTIONSCRIPT AS3

On créé une nouvelle occurrence d'objet Shape nommée « rectRond » :

var rectRond:Shape = new Shape();

On définit l'épaisseur et la couleur du contour :

rectRond.graphics.lineStyle(4, 0x0000FF);

On définit la couleur de remplissage du rectangle :

rectRond.graphics.beginFill(0xFF3F8E);

Définition des paramètres du rectangle avec « drawRoundRect » : coordonnées du coin supérieur gauche, largeur, hauteur puis largeur et hauteur des bords arrondis :

rectRond.graphics.drawRoundRect (40,250,80,120,25,25);

On ajoute l'occurrence à la liste d'affichage :

addChild(rectRond);

SCRIPT FLASH CS 3 POUR TRACER UN TRIANGLE ROUGE EN ACTIONSCRIPT AS3

Pour tracer un triangle rouge, on créé une nouvelle occurrence d'objet Shape nommée « triangle » :

var triangle:Shape = new Shape();
triangle.graphics.beginFill(0xFF0000);

coordonnées du point de démarrage :

triangle.graphics.moveTo(50, 50);

coordonnées du point 2 :

triangle.graphics.lineTo(50, 150);

coordonnées du point 3 :

triangle.graphics.lineTo(150, 50);

coordonnées du point de départ pour le rejoindre :

triangle.graphics.lineTo(50, 50);
addChild(triangle);

SCRIPT FLASH POUR TRACER UN CERCLE JAUNE EN ACTIONSCRIPT AS3

On créé une nouvelle occurrence d'objet Shape nommée « cercle » :

var cercle:Shape = new Shape();
cercle.graphics.beginFill(0xE4CF12);

On détermine avec « drawCircle » les coordonnées du centre, puis le rayon du cercle :

cercle.graphics.drawCircle (200,150,60);
addChild(cercle);

SCRIPT FLASH CS3 Pour tracer une ellipse vert clair avec contour vert foncé EN ACTIONSCRIPT AS3

on créé une nouvelle occurrence de Shape nommée « ellipse » :

var ellipse:Shape = new Shape();

on définit l'épaisseur et la couleur du contour :

ellipse.graphics.lineStyle(2, 0x10701A);

on définit la couleur du remplissage :

ellipse.graphics.beginFill(0x1FD831);

on définit avec « drawEllipse » les coordonnées du coin supérieur gauche du rectangle qui contient l'ellipse, puis la largeur et la hauteur de cette ellipse:

ellipse.graphics.drawEllipse (200, 300, 150, 60);
addChild(ellipse);

SCRIPT FLASH CS3 POUR TRACER UNE LIGNE COURBE VERTE EN ACTIONSCRIPT AS3

On créé une nouvelle occurrence de Shape nommée « ligneC » :

var ligneC:Shape = new Shape ();

On définit l'épaisseur et la couleur de la ligne :

ligneC.graphics.lineStyle(2, 0x00FF00);

On définit les coordonnées du point de départ :
ligneC.gr
ligneC.graphics.moveTo(200, 50);

On définit les paramètres de la ligne courbe avec « curveTo » :

ligneC.graphics.curveTo(250,-20, 300,50);
addChild(ligneC);

curveTo :

Les paramètres de la ligne « moveTo » définissent tout d'abord les coordonnées du point de départ.

ligneC.graphics.moveTo(200, 50);

Les deux derniers paramètres de la commande « curveTo » sont les coordonnées du point d'arrivée. Les deux premiers ont les coordonnées du point de courbure du second point de la courbe. Il s'agit des coordonnées de l'extrémité du vecteur qui définit la courbure de l'arc.

ligneC.graphics.curveTo(250,-20, 300,50);

Sur le même principe on va tracer une lune mauve avec un contour violet:

var lune:Shape = new Shape();

lune.graphics.lineStyle(3,0x502E74);
lune.graphics.beginFill(0x8B5ABE);
// point de départ de coordonnées 400, 200

lune.graphics.moveTo(400, 200);

// point d'arrivée de coordonnées 400, 300
lune.graphics.curveTo(300, 250, 400, 300);
// retour au point 400, 200, avec un autre point de contrôle qui permet de tracer une seconde courbe
lune.graphics.curveTo(350, 250, 400, 200);

addChild(lune);

SCRIPT FLASH CS3 CODE COMPLET EN ACTIONSCRIPT AS3

package {

import flash.display.Sprite;
import flash.display.Shape;

public class formes extends Sprite {
public function formes():void {

// tracé d'une ligne droite noire
var ligneD:Shape = new Shape ();
// épaisseur et couleur
ligneD.graphics.lineStyle(2, 0x000000);
// point 1
ligneD.graphics.moveTo(450, 50);
// point 2
ligneD.graphics.lineTo(400, 300);
addChild(ligneD);

// tracé d'un rectangle bleu
var rectangle:Shape = new Shape();
rectangle.graphics.beginFill(0x0000FF);
// position coin supérieur gauche, puis largeur et hauteur
rectangle.graphics.drawRect(300,100,100,50);
addChild(rectangle);

// tracé d'un rectangle à bords arrondis avec contour
var rectRond:Shape = new Shape();
rectRond.graphics.lineStyle(4, 0x0000FF);
rectRond.graphics.beginFill(0xFF3F8E);
rectRond.graphics.drawRoundRect (40,250,80,120,25,25);
addChild(rectRond);

// tracé d'un triangle rouge
var triangle:Shape = new Shape();
triangle.graphics.beginFill(0xFF0000);
// point de démarrage
triangle.graphics.moveTo(50, 50);
// point 2
triangle.graphics.lineTo(50, 150);
// point 3
triangle.graphics.lineTo(150, 50);
// point de départ
triangle.graphics.lineTo(50, 50);
addChild(triangle);

// tracé d'un cercle jaune
var cercle:Shape = new Shape();
cercle.graphics.beginFill(0xE4CF12);
// centre, rayon)
cercle.graphics.drawCircle (200,150,60);
addChild(cercle);
// tracé d'une ellipse verte
var ellipse:Shape = new Shape();
// trait vert foncé
ellipse.graphics.lineStyle(2, 0x10701A);
// remplissage vert clair
ellipse.graphics.beginFill(0x1FD831);
// point supérieur gauche, largeur, hauteur
ellipse.graphics.drawEllipse (200, 300, 150, 60);
addChild(ellipse);

// tracé d'une ligne courbe verte
var ligneC:Shape = new Shape ();
ligneC.graphics.lineStyle(4, 0x00FF00);
ligneC.graphics.moveTo(200, 50);
ligneC.graphics.curveTo(250, -20, 300,50);
addChild(ligneC);

// tracé d'une lune
var lune:Shape = new Shape();

lune.graphics.lineStyle(3,0x502E74);
lune.graphics.beginFill(0x8B5ABE);
// départ au point 400, 200
lune.graphics.moveTo(400, 200);
// point d'arrivée de coordonnées 400, 300
lune.graphics.curveTo(300, 250, 400, 300);
// retour au point 400, 200
lune.graphics.curveTo(350, 250, 400, 200);
graphics.endFill();

}

}

}

 

Tutoriel pour la construction d'un projet dans Flash AS3

Tutoriel pour la construction d'un projet dans Flash AS3

MODIFICATION DES INDEX AFFICHAGE AS3

Avant d'être ajouté à la liste d'affichage, un objet est considéré comme « objet d'affichage hors liste ».

Pour l'afficher on utilise les méthodes addChild ou addChildAt (qui permet de préciser son index d'affichage).

Donc en AS3 on peut créer un objet sans l'afficher immédiatement, ce qui permet d'optimiser le projet en gérant le préchargement, en différant l'affichage d'objets ...

Chaque animation AS3 contient une seule liste d'affichage. Les objets affichés sont contenus dans des DisplayObject (MovieClip ou Sprite, Shape...).

Certains de ces objets, les DisplayObjectContainer (MovieClip et Sprite) peuvent contenir plusieurs objets d'affichage, et donc une liste interne d'affichage : une liste d'objets enfants, sous forme d'un tableau interne.

L'index 0 de la liste d'affichage est le plus profond (la couche inférieure).

Le premier objet ajouté à la liste avec « addChild » prend l'index 0, le suivant l'index 1 etc... Pour gérer l'ordre d'empilement on utilise la méthode:

addChildAt (monObjet, index)

ou index est un entier positif.

Mais attention, si l'on utilise cette méthode il faut que l'index existe déjà, qu'il soit déjà occupé par un DisplayObject, sinon on obtiendra une erreur (le panneau de sortie indiquera: « L'index indiqué sort des limites. »). De plus aucune profondeur ne peut rester vide au sein de la liste d'affichage.

La liste d'affichage fonctionne comme une pile d'assiettes : si on enlève une assiette de la pile toutes les assiettes situées au-dessus descendent d'un niveau. C'est l'effet « effondrement des profondeurs ».

DÉPLACEMENT D'UN OBJET AFFICHAGE LISTE AS3

Exemple d'une liste de 8 objets, nous souhaitons déplacer l'objet d'index 1 à l'index 6.

Si nous ne connaissons pas le nom des objets nous pouvons écrire :

setChildIndex (getChildAt(1), 6);

Une fois l'objet d'index 1 enlevé la pile s'effondre, ensuite l'assiette est replacée à l'index 6, l'objet qui y était remonte à l'index 7.

Nous souhaitons déplacer l'objet d'index 5 à l'index 0 :

setChildIndex (getChildAt(5, 0);

Lorsqu'un objet est descendu les objets intermédiaires remontent dans la liste. La méthode

getChildIndex (monObjet)

permet de récupérer l'index d'un objet.

La méthode

setChildIndex (monObjet, index)

permet de placer monObjet à un index précis de la liste d'affichage

Chaque objet est créé dans un objet conteneur différent, donc chaque objet conteneur contient un seul élément situé à index 0 de sa liste d'affichage interne. Chaque objet conteneur est placé à un index différent de la liste d'affichage générale.

On peut connaître le nombre d'objets contenus dans la liste d'affichage grâce à la propriété:

numChildren

Tracez le nombre d'objets d'affichages dans le projet « perso_01 », puis dans « formes ».

Si vous créez plusieurs formes vectorielles dans l'interface de Flash, même si vous les placez sur des claques différents, toutes vos formes vectorielles sont automatiquement placées dans le même objet conteneur situé sur un seul index de la liste d'affichage générale. Donc les différentes formes ont des numéros d'index différents au sein de la liste interne de l'objet conteneur « Shape ».

Dans une animation flash, tracez plusieurs formes vectorielles puis tracez le nombre d'objets de la liste d'affichage.

Pour connaître l'index d'un objet dans un conteneur :

monConteneur.getChildIndex(monObjet);

ÉCHANGE DE PROFONDEUR AS3

la méthode:

swapChildren(monObjet1, monObjet2);

permet d'échanger les profondeurs entre 2 objets, sans bouger les autres éléments.

La méthode :

getChildAt (index)

renvoie le nom de l'occurrence associée à l'index spécifié.

Donc on peut aussi échanger les index de 2 occurrences par leurs seuls numéros d'index:

swapChildren (getChildAt(1), getChildAt(4))

PLACER OBJET AS3 AU-DESSUS DE TOUS LES AUTRES

addChildAt (monObjet, numChildren);

SUPPRESSION OBJET LISTE AFFICHAGE AS 3

La méthode removeChild (monObjet) ou removeChild (getChildAt(index)) permet de supprimer un objet de la liste d'affichage SANS LE DÉTRUIRE, l'objet redevient simplement « hors liste d'affichage ».

Nous verrons plus tard que pour supprimer un displayObject il faut passer ses références à null.

NOMMER DYNAMIQUEMENT OCCURRENCE FLASH CS3 AS3

Vous pouvez attribuer un nom d'occurrence à une occurrence créée dynamiquement :

var monClip:MovieClip = new MovieClip ();

monClip.name = « monOccurrence »;

addChild (monClip);

trace (monClip.name);

renvoie : monOccurrence

REMARQUE

- Par défaut un nom d'occurrence générique est affecté : instance1, instance2...

- Il est impossible de modifier la propriété « name » d'une occurrence nommée dans l'environnement auteur.
 

LISTE PRINCIPALE ET LISTES AFFICHAGES CONTENEURS AS3

Dans un projet « pile », nous allons créer dynamiquement 2 formes vectorielles, un rond et un carré, de couleurs différentes, superposées (leurs centres coïncident), à 80% de valeur d'alpha. Mais ces 2 formes seront elles-mêmes placées dans un même sprite.

Créer « pile.fla » et « pile.as ». Lier les 2.

Dans « pile.as », importez les classes Sprite et Shape.

package {

import flash.display.Sprite;

import flash.display.Shape;

Créez la classe publique et la fonction constructeur :

public class pile extends Sprite {

public function pile():void {

Créez ensuite une occurrence de sprite « cont1 » qui servira de conteneur aux deux formes vectorielles :

var cont1:Sprite = new Sprite();

Créez vos deux formes vectorielles dans deux nouvelles « shapes » :

// tracé d'un carré bleu

var carre:Shape = new Shape();

carre.graphics.beginFill(0x0000FF,.8);

carre.graphics.drawRect(170,170,60,60);

// tracé d'un rond bleu plus clair

var rond:Shape = new Shape ();

rond.graphics.beginFill(0x7268CA, .8);

rond.graphics.drawCircle(200,200,50);

Placez les 2 formes à l'intérieur du conteneur, en précisant leur index :

// placement du rond à l'index 0 du conteneur

cont1.addChildAt(rond,0);

// placement du carré à l'index 1 du conteneur

cont1.addChildAt(carre, 1);

Ajoutez le conteneur à la liste d'affichage principale:

addChild (cont1);

}

}

}

Testez: vous devez afficher votre cercle en fond, et le carré par dessus.

Combien y a-t-il d'objets dans la liste d'affichage principale ?

Pour le savoir: ajoutez une commande après la dernière ligne de code :

trace (numChildren);

testez : vous obtenez 1.

Combien y a-t-il d'objets dans la liste d'affichage interne de l'occurrence « cont1 » ?

Pour le savoir: ajoutez une commande après la dernière ligne de code :

trace (cont1.numChildren);

testez : vous obtenez 2.

En procédant ainsi on a bien nos 2 formes vectorielles imbriquées dans cont1 qui est le seul objet présent dans la liste d'affichage principale.

REMARQUES

Attention, il faut commencer par l'index 0 puis l'index 1 pour ajouter les 2 formes.

Vous pouvez utiliser un swapChildren pour inverser la superposition des 2 shapes, mais en pointant sur l'occurrence cont1. Testez la commande

cont1.swapChildren (rond, carre);

CODE COMPLET AS3

package {

import flash.display.Sprite;

import flash.display.Shape;

public class pile extends Sprite {

public function pile():void {

var cont1:Sprite = new Sprite();

var carre:Shape = new Shape();

carre.graphics.beginFill(0x0000FF,.8);

carre.graphics.drawRect(0,0,60,60);

var rond:Shape = new Shape ();

rond.graphics.beginFill(0x7268CA, .8);

rond.graphics.drawCircle(-30,-30,50);

// placement du rond à l'index 0 du conteneur

cont1.addChildAt(rond,0);

// placement du carré à l'index 1 du conteneur

cont1.addChildAt(carre, 1);

//placement du conteneur sur la scène

cont1.x = 100;

cont1.y = 100;

cont1.swapChildren (rond, carre);

// affichage du conteneur

addChild (cont1);

// affiche le nombre d'enfants de la liste principale

trace (numChildren);

// affiche le nombre d'enfants de la liste interne du sprite cont1

trace (cont1.numChildren);

}

}

}