Documentation Flash CS3

Programmation avec ActionScript 3.0 > Programmation de l'affichage > Exemple : SpriteArranger

Exemple : SpriteArranger

L'exemple SpriteArranger est basé sur l'exemple Geometric Shapes décrit dans un autre chapitre (voir Exemple : GeometricShapes).

L'exemple SpriteArranger illustre divers concepts de la gestion des objets d'affichage:

• extension des classes d'objets d'affichage,
• ajout d'objets à la liste d'affichage,
• gestion de la superposition des objets d'affichage et utilisation de leurs conteneurs,
• gestion des événements des objets d'affichage,
• utilisation des propriétés et méthodes des objets d'affichage.

Pour obtenir les fichiers de cet exemple d'application, consultez la page www.adobe.com/go/learn_programmingAS3samples_flash_fr. Les fichiers de l'application SpriteArranger se trouvent dans le dossier Examples/SpriteArranger. Cette application se compose des fichiers suivants :

Sous-rubriques

Définition des classes de SpriteArranger

L'application SpriteArranger permet d'ajouter divers objets d'affichage à la « toile vierge » que représente l'écran.

La classe DrawingCanvas définit une zone de traçage, un type spécial de conteneur d'objets d'affichage dans lequel l'utilisateur peut ajouter des formes. Ces formes affichées à l'écran sont des instances de l'une des sous-classes de la classe GeometricSprite.

La classe DrawingCanvas

La classe DrawingCanvas étend la classe Sprite, et cet héritage est défini dans la déclaration de la classe DrawingCanvas :

public class DrawingCanvas extends Sprite

La classe Sprite est une sous-classe des classes DisplayObjectContainer et DisplayObject, et la classe DrawingCanvas utilise les méthodes et les propriétés de ces classes.

La méthode constructeur DrawingCanvas() met en place un objet Rectangle, bounds, qui est une propriété destinée à être utilisée ensuite pour tracer les limites de la zone de dessin. Elle appelle ensuite la méthode initCanvas(), comme suit :

this.bounds = new Rectangle(0, 0, w, h);
initCanvas(fillColor, lineColor);

Comme le montre l'exemple ci-dessous, la méthode initCanvas() définit diverses propriétés de l'objet DrawingCanvas (ces propriétés ont été passées en arguments à la fonction constructeur) :

this.lineColor = lineColor;
this.fillColor = fillColor;
this.width = 500;
this.height = 200;

La méthode initCanvas() appelle ensuite la méthode drawBounds() qui trace le rectangle de la zone de dessin à l'aide de la propriété graphics de la classe DrawingCanvas. La propriété graphics est héritée de la classe Shape.

this.graphics.clear();        
this.graphics.lineStyle(1.0, this.lineColor, 1.0);
this.graphics.beginFill(this.fillColor, 1.0);
this.graphics.drawRect(bounds.left - 1, 
                        bounds.top - 1, 
                        bounds.width + 2,
                        bounds.height + 2);
this.graphics.endFill();

Diverses autres méthodes de la classe DrawingCanvas sont appelées en fonction des actions de l'utilisateur dans l'application :

• Les méthodes addShape() et describeChildren(), qui sont décrites dans la section Ajout d'objets d'affichage à la zone de dessin.
• Les méthodes moveToBack(), moveDown(), moveToFront() et moveUp(), qui sont décrites dans la section Modification de l'ordre de superposition des objets d'affichage.
• La méthode onMouseUp(), qui est décrite dans la section Glisser-déposer des objets d'affichage.

La classe GeometricSprite et ses sous-classes

Chaque objet d'affichage qu'il est possible d'ajouter dans la zone de dessin est une instance de l'une des sous-classes suivantes de la classe GeometricSprite :

• CircleSprite
• SquareSprite
• TriangleSprite

La classe GeometricSprite étend la classe flash.display.Sprite :

public class GeometricSprite extends Sprite

La classe GeometricSprite possède diverses propriétés qui sont communes à tous les objets GeometricSprite. Ces propriétés sont définies dans la fonction constructeur à partir des paramètres passés à la fonction. Par exemple :

this.size = size;
this.lineColor = lColor;
this.fillColor = fColor;

La propriété geometricShape de la classe GeometricSprite définit une interface IGeometricShape, qui elle-même définit les propriétés mathématiques, et non pas visuelles, de la forme. Les classes qui implémentent l'interface IGeometricShape sont définies dans l'exemple d'application GeometricShapes (voir Exemple : GeometricShapes).

La classe GeometricSprite définit la méthode drawShape(), qui est ensuite redéfinie par les définitions de chaque sous-classe de GeometricSprite. Pour plus d'informations, consultez la section Ajout d'objets d'affichage à la zone de dessin ci-dessous.

La classe GeometricSprite fournit également les méthodes suivantes :

• Les méthodes onMouseDown() et onMouseUp(), qui sont décrites dans la section Glisser-déposer des objets d'affichage.
• Les méthodes showSelected() et hideSelected(), qui sont décrites dans la section Glisser-déposer des objets d'affichage.

Ajout d'objets d'affichage à la zone de dessin

Lorsque l'utilisateur clique sur le bouton Add Shape (Ajouter une forme), l'application appelle la méthode addShape() de la classe DrawingCanvas. Elle instancie GeometricSprite en appelant la fonction constructeur appropriée de l'une des sous-classes de GeometricSprite, comme dans l'exemple suivant :

public function addShape(shapeName:String, len:Number):void
{
    var newShape:GeometricSprite;
    switch (shapeName)
    {
        case "Triangle":
            newShape = new TriangleSprite(len);
            break;
            
        case "Square":
            newShape = new SquareSprite(len);
            break;
            
        case "Circle":
            newShape = new CircleSprite(len);
            break;
    }
    newShape.alpha = 0.8;
    this.addChild(newShape);
}

Chaque méthode constructeur appelle la méthode drawShape(), qui utilise la propriété graphics (héritée de la classe Sprite) de la classe pour tracer le graphisme vectoriel approprié. Par exemple, la méthode drawShape() de la classe CircleSprite comporte le code suivant :

this.graphics.clear();
this.graphics.lineStyle(1.0, this.lineColor, 1.0);
this.graphics.beginFill(this.fillColor, 1.0);
var radius:Number = this.size / 2;
this.graphics.drawCircle(radius, radius, radius);

L'avant-dernière ligne de la fonction addShape() définit la propriété alpha (héritée de la classe DisplayObject) de l'objet d'affichage, si bien que chaque objet d'affichage ajouté dans la zone de dessin est légèrement transparent, laissant apparaître les objets derrière lui.

La dernière ligne de la méthode addChild() ajoute le nouvel objet d'affichage à la liste des enfants de l'instance de la classe DrawingCanvas, qui figure déjà dans la liste d'affichage. Le nouvel objet apparaît donc sur la scène.

L'interface de l'application comporte deux champs texte, selectedSpriteTxt et outputTxt. Les propriétés de texte de ces champs sont actualisées avec les informations sur les objets GeometricSprite qui ont été ajoutés dans la zone de dessin ou sélectionnés par l'utilisateur. C'est la classe GeometricSprite qui gère cette tâche de transmission des informations, en redéfinissant comme suit la méthode toString() :

public override function toString():String
{
    return this.shapeType + " of size " + this.size + " at " + this.x + ", " + this.y;
}

La valeur appropriée est affectée à la propriété shapeType dans la méthode constructeur de chaque sous-classe de GeometricSprite. Par exemple, la méthode toString() peut renvoyer la valeur suivante pour une instance de CircleSprite ajoutée récemment à l'instance de DrawingCanvas :

Cercle de diamètre 50 à 0, 0

La méthode describeChildren() de la classe DrawingCanvas parcourt en boucle la liste des enfants de la zone de dessin, en utilisant la propriété numChildren (héritée de la classe DisplayObjectContainer) pour la limite supérieure de la boucle for. Elle produit une chaîne contenant la liste de tous les enfants :

var desc:String = "";
var child:DisplayObject;
for (var i:int=0; i < this.numChildren; i++)
{
    child = this.getChildAt(i);
    desc += i + ": " + child + '\n';
}

La chaîne résultante est utilisée pour définir la propriété text du champ texte outputTxt.

Glisser-déposer des objets d'affichage

Lorsque l'utilisateur clique sur une instance de GeometricSprite, l'application appelle le gestionnaire d'événement onMouseDown(). Comme le montre le code ci-dessous, ce gestionnaire d'événement écoute les événements de clic gauche de souris dans la fonction constructeur de la classe GeometricSprite :

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

La méthode onMouseDown() appelle alors la méthode showSelected() de l'objet GeometricSprite. Si c'est la première fois que cette méthode est appelée pour cet objet, la méthode crée un nouvel objet Shape nommé selectionIndicator et utilise la propriété graphics de l'objet Shape pour tracer un rectangle rouge :

this.selectionIndicator = new Shape();
this.selectionIndicator.graphics.lineStyle(1.0, 0xFF0000, 1.0);
this.selectionIndicator.graphics.drawRect(-1, -1, this.size + 1, 
this.size + 1);
this.addChild(this.selectionIndicator);

Si ce n'est pas le premier appel de la méthode onMouseDown(), celle-ci active simplement la propriété visible (héritée de la classe DisplayObject) de la forme selectionIndicator :

this.selectionIndicator.visible = true;

La méthode hideSelected() cache la forme selectionIndicator de l'objet précédemment sélectionné en désactivant sa propriété visible.

La méthode de gestion de l'événement onMouseDown() appelle également la méthode startDrag() (héritée de la classe Sprite), qui contient le code suivant :

var boundsRect:Rectangle = this.parent.getRect(this.parent);
boundsRect.width -= this.size;
boundsRect.height -= this.size;
this.startDrag(false, boundsRect);

Cette opération permet de déplacer l'objet sélectionné dans la zone de dessin, dans les limites définies par le rectangle boundsRect.

Lorsque l'utilisateur relâche le bouton de souris, l'événement mouseUp est distribué. La méthode constructeur de DrawingCanvas définit l'écouteur d'événement suivant :

this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

Cet écouteur d'événement est défini pour l'objet DrawingCanvas plutôt que pour les objets GeometricSprite individuels. En effet, lorsque l'objet GeometricSprite est déplacé, il peut se retrouver derrière un autre objet d'affichage (un autre objet GeometricSprite) lors du relâchement du bouton de souris. C'est alors cet objet au premier plan qui recevrait l'événement « mouse up », et non pas l'objet déplacé par l'utilisateur. L'ajout de l'écouteur à l'objet DrawingCanvas permet de gérer correctement l'événement.

La méthode onMouseUp() appelle la méthode onMouseUp() de l'objet GeometricSprite, qui à son tour appelle la méthode stopDrag() de l'objet GeometricSprite.

Modification de l'ordre de superposition des objets d'affichage

L'interface utilisateur de l'application comporte les boutons Move Back, Move Down, Move Up et Move to Front. Lorsque l'utilisateur clique sur l'un de ces boutons, l'application appelle la méthode correspondante de la classe DrawingCanvas : moveToBack(), moveDown(), moveUp() ou moveToFront(). Par exemple, la méthode moveToBack() comporte le code suivant :

public function moveToBack(shape:GeometricSprite):void
{
    var index:int = this.getChildIndex(shape);
    if (index > 0)
    {
        this.setChildIndex(shape, 0);
    }
}

Cette méthode utilise la méthode setChildIndex() (héritée de la classe DisplayObjectContainer) pour positionner l'objet d'affichage à la position d'index 0 dans la liste des enfants de l'instance de DrawingCanvas (this).

La méthode moveDown() fonctionne de la même façon, si ce n'est qu'elle décrémente la position de l'objet d'affichage dans l'index de la liste des enfants de l'instance DrawingCanvas :

public function moveDown(shape:GeometricSprite):void
{
    var index:int = this.getChildIndex(shape);
    if (index > 0)
    {
        this.setChildIndex(shape, index - 1);
    }
}

Les méthodes moveUp() et moveToFront() fonctionnent de façon similaire aux méthodes moveToBack() et moveDown().

Flash CS3

M'envoyer un message électronique lorsque des commentaires sont ajoutés à cette page | Rapport de commentaire

Page en cours: http://livedocs.adobe.com/flash/9.0_fr/main/00000174.html

Ajouter un commentaire