Code complet Flash actionscript : liste principale et listes d'affichages des conteneurs dans AS3

La liste principale et les listes d'affichages des conteneurs dans AS3 

Dans un projet Flash AS3 « 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 fichiers FLASH et AS.

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 Flash actionscript : liste principale et listes d'affichages des conteneurs dans 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);

}

}

}

-->

Syntaxe ActionScript AS3 d'un écouteur

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 ActionScript AS3 d'un écouteur

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.

Code ActionScript AS3 pour déplacer un sprite avec l'aide des touches claviers

Code ActionScript AS3 pour déplacer un sprite avec l'aide des touches claviers

Nous allons continuer dans le même PROJET FLASH AS3 « pile », projet utilisant le principe des, LISTE PRINCIPALE et des LISTE AFFICHAGES CONTENEURS. afin de déplacer l'occurrence de sprite « cont1 » grâce aux touches clavier.

Code AS3 associé aux touches clavier :

• flèche gauche = 37
• flèche haut = 38
• flèche droite = 39
• flèche bas = 40
  

Principe du code AS 3 :

1. On initialise des variables booléennes à « false » pour chaque touche clavier.
2. On définit 3 écouteurs d'événements pour « touche enfoncée (KEY_DOWN) », « touche relachée (KEY_UP) », et l'événement ENTER_FRAME (exécuté dès que le lecteur entre dans une nouvelle image, soit à la cadence de l'animation).
3. On positionne à true la variable des touches enfoncées.
4. On positionne à false la variable des touches relâchées.
5. On teste la valeur de la variable de chaque touche, si elle est égale à true on déplace le sprite.

Code complet ActionScript 3 pour une touche clavier (flèche gauche) :

// initialisation d'une variable variable de touche flèchée
var flecheGauche:Boolean = false;
//pour vérifier : trace(flecheGauche);
// création des écouteurs KEY_DOW, KEY_UP et ENTER_FRAME
stage.addEventListener(KeyboardEvent.KEY_DOWN, toucheEnfonce);
stage.addEventListener(KeyboardEvent.KEY_UP, toucheRelache);
stage.addEventListener(Event.ENTER_FRAME, deplaceSprite);
// positionnement à true de la variable de touche
function toucheEnfonce(evt:KeyboardEvent) {

if (evt.keyCode == 37) {

flecheGauche = true;
//pour vérifier : trace(flecheGauche);
}

}

// positionnement à false de la variable de touche
function toucheRelache(evt:KeyboardEvent) {

if (evt.keyCode == 37) {

flecheGauche = false;
//pour vérifier : trace(flecheGauche);
}

}

// déplacement du sprite
function deplaceSprite(evt:Event) {

// déclaration de la variable

var vitesse:int = 5;

if (flecheGauche) {
cont1.x -= vitesse;
}

}

Remarques : La variable « vitesse » stocke le pas de déplacement de l'occurrence. Cette variable est déclarée de type « int », nombre entier. Si vous voulez le midifier pour une valeur décimale il faudra changer le type de variable en « Number ». L'intérêt de passer par cette variable est de pouvoir changer très facilement le pas de déplacement de l'occurrence sans modifier une valeur dans chaque ligne de code.

Suite de l'exercice :
Compléter le code pour les 3 autres touches.
Il faut :

• créer et initialiser une variable par touche supplémentaire,
• ajouter une condition par touche dans les 3 fonctions déjà existantes (ne pas créer de nouvelle fonction).

Modification des conditions pour ajouter les valeurs de butées : exemple : flèche gauche.

Avec l'opérateur « && » = AND, on va ajouter une condition de valeur de la coordonnées x ou y de l'occurrence « cont1 », et cela pour chaque flèche de déplacement :

if ((flecheGauche)&&(cont1.x > 50) ) {

cont1.x -= vitesse;

}

if ((flecheDroite)&&(cont1.x <500)) {

cont1.x += vitesse;

}

if ((flecheHaut)&&(cont1.y > 50)) {

cont1.y -= vitesse;

}

if ((flecheBas)&&(cont1.y <350)) {

cont1.y += vitesse;

}

Code complet scripte AS3

package {

import flash.display.Sprite;
import flash.display.Shape;
import flash.events.*;
public class pile extends Sprite {

public function pile():void {

var cont1:Sprite = new Sprite();

// tracé carré bleu
var carre:Shape = new Shape ();
carre.graphics.beginFill(0x0000FF, .8);
carre.graphics.drawRect(-30,-30,60,60);
// tracé rond bleu clair
var rond:Shape = new Shape ();
rond.graphics.beginFill(0x81C0FE, .8);
rond.graphics.drawCircle(0,0,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;
addChild(cont1);
cont1.swapChildren(rond,carre);
// initialisation des variables de touches
var flecheGauche:Boolean = false;
var flecheDroite:Boolean = false;
var flecheHaut:Boolean = false;
var flecheBas:Boolean = false;
// ajouts des écouteurs de touches
stage.addEventListener(KeyboardEvent.KEY_DOWN, toucheEnfonce);
stage.addEventListener(KeyboardEvent.KEY_UP, toucheRelache);
// écouteur du rafraichissement de la scène
stage.addEventListener(Event.ENTER_FRAME, deplaceSprite);
// toucheEnfonce positionne à true la variable de la touche
function toucheEnfonce(evt:KeyboardEvent) {

if (evt.keyCode == 37) {

flecheGauche = true;

}

if (evt.keyCode == 39) {

flecheDroite = true;

}

if (evt.keyCode == 38) {

flecheHaut = true;

}

if (evt.keyCode == 40) {

flecheBas = true;

}

}

//toucheRelache positionne à false la variable de touche
function toucheRelache(evt:KeyboardEvent) {

if (evt.keyCode == 37) {

flecheGauche = false;

}

if (evt.keyCode == 39) {

flecheDroite = false;

}

if (evt.keyCode == 38) {

flecheHaut = false;

}

if (evt.keyCode == 40) {

}

}

// déplacement du sprite

function deplaceSprite(evt:Event) {

// déclaration de la variable

var vitesse:int = 5;
//pour vérifier : trace("cont1.x = "+cont1.x);
//pour vérifier : trace("cont1.y = "+cont1.y);

if ((flecheGauche)&&(cont1.x > 50) ) {

cont1.x -= vitesse;

}

if ((flecheDroite)&&(cont1.x <500)) {

cont1.x += vitesse;

}

if ((flecheHaut)&&(cont1.y > 50)) {

cont1.y -= vitesse;

}

if ((flecheBas)&&(cont1.y <350)) {

cont1.y += vitesse;

}

}

}

}

}

Code actionscript pour la création d'un bouton rollover dynamique dans Flash CS3 en AS3

Code actionscript pour la création d'un bouton rollover dynamique dans Flash CS3 en AS3

Nous allons créer dynamiquement un bouton à partir des différents états graphiques que nous aurons dessinés dans Flash. Chaque état de bouton sera créé dans un clip séparé. Rien ne sera placé sur la scène de l'animation.

Créer une nouvelle animation flash AS3 « boutons.fla ». Créer aussi un nouveau fichier de code associé «boutons.as ».

Dans l'animation commencez par spécifier « boutons » comme « classe du document » (dans le panneau propriétés de l'animation).

Créez un nouveau clip nommé « MC_haut » qui déterminera l'état du bouton au repos. Tracez-y une forme vectorielle, par exemple un rectangle avec contour, de 2 couleurs différentes et de contour de 4 pixels.
Centrez votre forme dans votre clip.

Fabriquez les 3 autres états du boutons en dupliquant ce premier clip :« MC_dessus » : changez les couleurs« MC_abaisse » : décalez le rectangle de quelques pixels en bas à droite, sans changer ses couleurs« MC_clique » : c'est la zone active du bouton.

Enlevez son contour (il n'est pas pris en compte comme zone active) et agrandissez-le à 110% avec le panneau « transformer ».Il faut maintenant créer une classe pour chaque clip et l'exporter afin de pouvoir les piloter dynamiquement.

Dans la bibliothèque sélectionnez le premier clip, par clic droit ouvrez le panneau « liaison » et cochez la case « exporter pour ActionScript ». Ne changez rien d'autre.

Faites la même chose pour les 3 autres clips.

Enregistrez votre animation.

Allez maintenant dans votre fichier « boutons.as ».


Commencez par importer les classes nécessaires à votre programme, puis à créer la classe publique et la fonction publique constructeur :

package {

import flash.display.MovieClip;

import flash.display.SimpleButton;

public class boutons extends MovieClip {

Nous allons ensuite créer une occurrence de la classe SimpleButton à laquelle nous allons affecter des occurrences de nos clips comme états (sur une seule ligne) :

var monBouton:SimpleButton = new SimpleButton (new MC_haut(), new MC_dessus(), new MC_abaisse(), new MC_clique()).

On positionne ensuite l'occurrence de bouton sur la scène :

monBouton.x = 100;
monBouton.y = 100;

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

        addChild (monBouton);

SCRIPT COMPLET AS3 CREATION DE BOUTON ROLLOVER DYNAMIQUE

package {

import flash.display.MovieClip;
import flash.display.SimpleButton;
public class boutons extends MovieClip {

public function boutons():void {

var monBouton:SimpleButton = new SimpleButton (new MC_haut(), new MC_dessus(), new MC_abaisse(), new MC_clique());
monBouton.x = 100;
monBouton.y = 100;
addChild (monBouton);
}

}

}

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);

}

}

}