ActionScript 3
Travailler avec des objets d'affichage

Syntaxe

1. addChild(child) - ajoute un nouvel élément à l'arborescence enfant de cet objet en tant qu'élément le plus élevé.
2. addChildAt(child, index) - ajoute un nouvel élément à l'arborescence enfant de cet objet à une position spécifiée. L'élément le plus bas a un index de 0.
3. getChildAt(index) - Retourne un enfant avec un index donné.
4. getChildIndex(child) renvoie l'index d'un enfant direct de cet objet. Sinon, une exception est levée.
5. removeChild(child) - supprime l'enfant direct spécifié de l'arborescence enfant de cet objet. Lance une exception si le parent de l'enfant fourni n'est pas égal à this .
6. removeChildAt(index) - supprime un enfant sélectionné par index au lieu de référence. Lève une exception si l'arborescence enfant n'est pas aussi large.
7. removeChildren(beginIndex:int = 0, endIndex:int = 0x7fffffff)) - ajouté dans Flash Player 11, supprime un sous-ensemble d'enfants par plage d'index ou tous les enfants s'ils sont appelés sans paramètre.
8. setChildIndex(child,index) - modifie l'index de l'enfant à la nouvelle valeur, en déplaçant tous les enfants entre les deux pour occuper le poste libéré.
9. swapChildren(child1,child2) - swapChildren(child1,child2) les positions des deux enfants dans la liste d'affichage, sans affecter les positions des autres enfants.
10. swapChildrenAt(index1,index2) - échange les enfants situés par leurs index.

Remarques

Introduction à la liste d'affichage

Dans AS3, les ressources d'affichage ne sont visibles que lorsqu'elles sont ajoutées à la liste d'affichage.

Le moteur d'exécution AIR / Flash a une structure d'affichage hiérarchique (relation parent-enfant où les enfants peuvent avoir leurs propres enfants), la stage étant le parent de niveau supérieur.

Pour ajouter quelque chose à la liste d'affichage, utilisez addChild ou addChildAt . Voici un exemple de base pour dessiner un cercle et l'ajouter à la liste d'affichage:

var myCircle:Shape = new Shape();
        
myCircle.graphics.beginFill(0xFF0000); //red
myCircle.graphics.drawCircle(25, 25, 50);
myCircle.graphics.endFill();
        
this.addChild(myCircle); //add the circle as a child of `this`

Pour voir l'objet dans l'exemple ci-dessus, this (le contexte du code) doit également figurer sur la liste d'affichage, ainsi que tous les parents éventuels. Dans AS3, la stage est la plus importante des parents.

Les objets d'affichage ne peuvent avoir qu'un seul parent. Donc, si un enfant a déjà un parent et que vous l'ajoutez à un autre objet, il sera supprimé de son parent précédent.

Z-Order / Layering

Disons que vous avez répliqué le code de l'exemple précédent, vous avez donc 3 cercles:

var redCircle:Shape = new Shape();
redCircle.graphics.beginFill(0xFF0000); //red
redCircle.graphics.drawCircle(50, 50, 50); //graphics.endFill is not required

var greenCircle:Shape = new Shape();
greenCircle.graphics.beginFill(0x00FF00); //green
greenCircle.graphics.drawCircle(75, 75, 50);
        
var blueCircle:Shape = new Shape();
blueCircle.graphics.beginFill(0x0000FF); //blue
blueCircle.graphics.drawCircle(100, 100, 50);

this.addChild(redCircle); 
this.addChild(greenCircle); 
this.addChild(blueCircle); 

Comme la addChild ajoute l'enfant au-dessus de tout le même parent, vous obtiendrez ce résultat avec les éléments superposés dans le même ordre que vous utilisez addChild:

Si vous voulez un enfant en couches différent de ses frères, vous pouvez utiliser addChildAt . Avec addChildAt , vous passez un autre paramètre qui indique l'index (ordre-z) auquel l'enfant doit être. 0 étant la position / couche la plus basse.

this.addChild(redCircle); 
this.addChild(greenCircle); 
this.addChildAt(blueCircle,0); //This will add the blue circle at the bottom

Maintenant, le cercle bleu est sous ses frères et sœurs. Si, par la suite, vous souhaitez modifier l'index d'un enfant, vous pouvez utiliser la méthode setChildIndex (sur le parent de l'enfant).

this.setChildIndex(redCircle, this.numChildren - 1); //since z-index is 0 based, the top most position is amount of children less 1.

Cela va réorganiser le cercle rouge pour qu'il soit au-dessus de tout. Le code ci-dessus produit exactement le même résultat que this.addChild(redCircle) .

Suppression des objets d'affichage

Pour supprimer des objets, vous avez les méthodes inverse removeChild et removeChildAt ainsi que la méthode removeChildren .

removeChild(redCircle); //this will take redCircle off the display list

removeChildAt(0); //this will take the bottom most object off the display list 

removeChildren(); //this will clear all children from the display list

removeChildren(1); //this would remove all children except the bottom most

removeChildren(1,3); //this would remove the children at indexes 1, 2 & 3

Événements

Lorsqu'un enfant est ajouté à la liste d'affichage, certains événements sont déclenchés sur cet enfant.

• Event.ADDED
• Event.ADDED_TO_STAGE

Inversement, il y a aussi les événements de suppression:

• Event.REMOVED
• Event.REMOVED_FROM_STAGE

Adobe Animate / Flash Professional

En ce qui concerne les calendriers FlashProfessional / Adobe Animate, l'ajout de quelque chose à la timeline gère automatiquement les nuances de la liste d'affichage. Ils ont ajouté et supprimé de la liste d'affichage automatiquement par la chronologie.

Cependant, il est bon de garder à l'esprit que:

Si vous manipulez par code la parenté d'un objet d'affichage créé par le scénario (en utilisant addChild / setChildIndex), cet enfant ne sera plus supprimé automatiquement par le scénario et devra être supprimé via le code.

Superposition

Il peut y avoir des situations où vous décidez qu'un ensemble d'objets d'affichage doit toujours être au-dessus d'un autre ensemble d'objets, par exemple des flèches au-dessus des têtes, des explosions sur quelque chose qui vient d'exploser, etc. et créez un ensemble de Sprite s, organisez-les de bas en haut, puis ajoutez simplement tous les objets de «dessus» à un calque au-dessus de celui utilisé pour les objets de l'ensemble «inférieur».

var monsters:Vector.<Monster>;
var bullets:Vector.<Bullet>; // desired: bullets strictly above monsters
var monsterLayer:Sprite=new Sprite();
var bulletLayer:Sprite=new Sprite();
addChild(monsterLayer);
addChild(bulletLayer);

Ensuite, chaque fois que vous ajoutez un Monster à la liste d'affichage, ajoutez-le à monsterLayer , et chaque fois que vous ajoutez une Bullet , ajoutez-la à bulletLayer pour obtenir l'effet souhaité.

Supprimer tous les objets de la liste d'affichage

Si vous ciblez Flash Player 11+, la méthode removeChildren intégrée est la meilleure façon de supprimer tous les enfants:

removeChildren(); //a start and end index can be passed 

Pour les applications héritées, la même chose peut être accomplie avec une boucle:

while (numChildren > 0) {
    removeChildAt(0);
}

Passer des images au changement de contenu manuel

Au début, un développeur Flash utilise des cadres, tels qu'ils sont disponibles en natif dans Flash Player, pour héberger différents écrans de leur application (le plus souvent, c'est un jeu). En fin de compte, ils pourraient tomber sur un problème que quelque chose ne va pas exactement parce qu'ils ont utilisé des cadres, et ignoré les difficultés qui en découlent, et chercher des moyens de conserver leur structure de trame mais aussi d'éliminer les complications. La solution consiste à utiliser des classes descendantes Sprite ou des images exportées en tant que MovieClip avec une seule image (à celles conçues dans Adobe Flash CS), et à changer manuellement le contenu avec addChild() et removeChild() .

La classe du gestionnaire doit avoir toutes ses classes de cadres enfants prêtes et, chaque fois qu'une transition est appelée, une fonction similaire à celle-ci peut être utilisée:

var frames:Vector.<DisplayObject>; // this holds instances to ALL children
var currentFrame_alt:int; // current frame. Can't use the property
function changeFrame(frame:int):void {
    removeChild(frames[currentFrame_alt]);
    addChild(frames[frame]);
    currentFrame_alt=frame;
}

Tous les enfants peuvent à la fois envoyer et écouter des événements avec Event.ADDED_TO_STAGE utilisé comme point d'entrée pour tout ce qui se produit après gotoAndStop() qui cible cette image, et toutes les transitions sortantes peuvent être codées comme des chaînes écoutées dans Main classe Main . qui effectue ensuite la transition.

frames[0].addEventListener("startGame",startGame); // assuming frame 0 is a "Play" button
function startGame(e:Event):void {
    changeFrame(1); // switch to frame 1 - will display frames[1]
}

Bien sûr, le jeu de chaînes doit être prédéfini. Par exemple, l'intro screen peut avoir deux boutons pour démarrer le jeu, par exemple "Start game" et "Start muted", et les boutons doivent envoyer différents événements qui seront ensuite traités différemment dans la classe de gestionnaire.

Ce modèle peut aller aussi loin que nécessaire. Si une image du projet contient un MovieClip avec plusieurs images, cette méthode peut également être découplée en images-objets.