Flash CS3-Dokumentation

Programmieren mit ActionScript 3.0 > Programmieren von Anzeigeobjekten > Beispiel: SpriteArranger

Beispiel: SpriteArranger

Die Beispielanwendung „SpriteArranger" baut auf der Beispielanwendung „Geometric Shapes" auf, die an anderer Stelle beschrieben wird (siehe Beispiel: GeometricShapes).

Die Beispielanwendung „SpriteArranger" verdeutlicht verschiedene Konzepte beim Verwenden von Anzeigeobjekten:

• Erweitern von Anzeigeobjektklassen
• Hinzufügen von Objekten zur Anzeigeliste
• Anordnen von Anzeigeobjekten auf Ebenen und Arbeiten mit Anzeigeobjektcontainern
• Reagieren auf Anzeigeobjektereignisse
• Arbeiten mit den Eigenschaften und Methoden von Anzeigeobjekten

Die Anwendungsdateien für dieses Beispiel finden Sie unter www.adobe.com/go/learn_programmingAS3samples_flash_de. Die Dateien der Anwendung „SpriteArranger" befinden sich im Ordner „Examples/SpriteArranger". Die Anwendung besteht aus folgenden Dateien:

Unterthemen

Definieren der SpriteArranger-Klassen

Mit der Anwendung „SpriteArranger" können Benutzer verschiedene Anzeigeobjekte zur „Leinwand" auf dem Bildschirm hinzufügen.

Die DrawingCanvas-Klasse definiert einen Zeichenbereich (einen Anzeigeobjektcontainer), dem der Benutzer auf dem Bildschirm anzuzeigende Formen hinzufügen kann. Diese Bildschirm-Formen sind Instanzen einer der Unterklassen der GeometricSprite-Klasse.

DrawingCanvas-Klasse

Die DrawingCanvas-Klasse erweitert die Sprite-Klasse. Diese Vererbung ist in der Deklaration der DrawingCanvas-Klasse wie folgt definiert:

public class DrawingCanvas extends Sprite

Die Sprite-Klasse ist eine Unterklasse der DisplayObjectContainer- und der DisplayObject-Klasse. In der DrawingCanvas-Klasse werden Methoden und Eigenschaften dieser Klassen verwendet.

Die DrawingCanvas()-Konstruktormethode richtet ein Rectangle-Objekt namens bounds ein, bei dem es sich um eine Eigenschaft handelt, die später zum Zeichnen der Leinwandkontur verwendet wird. Dann ruft sie die initCanvas()-Methode auf:

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

Wie das folgende Beispiel zeigt, definiert die Methode initCanvas() verschiedene Eigenschaften des DrawingCanvas-Objekts, die als Argumente an die Konstruktorfunktion übergeben werden:

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

Die Methode initCanvas() ruft dann die Methode drawBounds() auf, die mithilfe der Eigenschaft graphics der DrawingCanvas-Klasse die Leinwand zeichnet. Die Eigenschaft graphics wird von der Shape-Klasse geerbt.

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

Die folgenden zusätzlichen Methoden der DrawingCanvas-Klasse werden aufgrund von Interaktionen des Benutzers mit der Anwendung aufgerufen:

• Die Methoden addShape() und describeChildren(), die unter Hinzufügen von Anzeigeobjekten zur Leinwand beschrieben sind.
• Die Methoden moveToBack(), moveDown(), moveToFront() und moveUp(), die unter Neuanordnen der Anzeigeobjektebenen beschrieben sind.
• Die onMouseUp()-Methode, die unter Klicken und Ziehen von Anzeigeobjekten beschrieben ist.

GeometricSprite-Klasse und ihre Unterklassen

Jedes Anzeigeobjekt, dass ein Benutzer der Leinwand hinzufügen kann, ist eine Instanz einer der folgenden Unterklassen der GeometricSprite-Klasse:

• CircleSprite
• SquareSprite
• TriangleSprite

Die GeometricSprite-Klasse erweitert die flash.display.Sprite-Klasse:

public class GeometricSprite extends Sprite

Die GeometricSprite-Klasse definiert verschiedene Eigenschaften, die für alle GeometricSprite-Objekten gelten. Diese werden in der Konstruktorfunktion basierend auf Parametern eingestellt, die an die Funktion übergeben werden. Beispiel:

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

Die Eigenschaft geometricShape der GeometricSprite-Klasse definiert eine IGeometricShape-Schnittstelle, die wiederum die mathematischen Eigenschaften der Form, jedoch nicht die visuellen Eigenschaften festgelegt. Die Klassen, die die IGeometricShape-Schnittstelle implementieren, werden in der GeometricShapes-Beispielanwendung definiert (siehe Beispiel: GeometricShapes).

Die GeometricSprite-Klasse definiert die Methode drawShape(), die darüber hinaus in den Überschreibungsdefinitionen jeder Unterklasse von GeometricSprite weiter definiert wird. Weitere Informationen finden Sie im folgenden Abschnitt Hinzufügen von Anzeigeobjekten zur Leinwand.

Darüber hinaus stellt die GeometricSprite-Klasse folgende Methoden zur Verfügung:

• Die Methoden onMouseDown() und onMouseUp(), die unter Klicken und Ziehen von Anzeigeobjekten beschrieben sind.
• Die Methoden showSelected() und hideSelected(), die unter Klicken und Ziehen von Anzeigeobjekten beschrieben sind.

Hinzufügen von Anzeigeobjekten zur Leinwand

Klickt ein Benutzer auf die Schaltfläche „Form hinzufügen", ruft in die Anwendung die Methode addShape() der DrawingCanvas-Klasse auf. Sie instanziiert ein neues GeometricSprite, indem sie die geeignete Konstruktorfunktion einer der GeometricSprite-Unterklassen aufruft. Dies wird im folgenden Beispiel gezeigt:

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

Jede Konstruktormethode ruft die Methode drawShape() auf, die wiederum die graphics-Eigenschaft der Klasse verwendet (von der Sprite-Klasse geerbt), um die entsprechende Vektorgrafik zu zeichnen. Beispielsweise enthält die drawShape()-Methode der CircleSprite-Klasse den folgenden Code:

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

In der vorletzten Zeile der addShape()-Funktion wird die alpha-Eigenschaft des Anzeigeobjekts (von der DisplayObject-Klasse geerbt) so festgelegt, dass jedes der Leinwand hinzugefügte Anzeigeobjekt leicht transparent erscheint und der Benutzer sehen kann, was sich dahinter befindet.

Die letzte Zeile der addChild()-Methode fügt das neue Anzeigeobjekt zur Child-Liste der Instanz der DrawingCanvas-Klasse hinzu, die sich bereits in der Anzeigeliste befindet. Dadurch wird das neue Anzeigeobjekt auf der Bühne angezeigt.

Die Schnittstelle dieser Anwendung umfasst zwei Textfelder, selectedSpriteTxt und outputTxt. Die Texteigenschaften dieser Textfelder werden mit Informationen zu den GeometricSprite-Objekten aktualisiert, die der Leinwand hinzugefügt oder vom Benutzer ausgewählt wurden. Die GeometricSprite-Klasse verarbeitet diese Aufgabe zum Melden von Informationen durch Überschreiben der toString()-Methode. Dies wird im folgenden Beispiel gezeigt:

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

Die Eigenschaft shapeType wird in der Konstruktormethode jeder GeometricSprite-Unterklasse auf einen geeigneten Wert gesetzt. Beispielsweise könnte die Methode toString() den folgenden Wert für eine CircleSprite-Instanz zurückgeben, die der DrawingCanvas-Instanz vor kurzem hinzugefügt wurde:

Circle of size 50 at 0, 0

Die describeChildren()-Methode der DrawingCanvas-Klasse durchläuft die Child-Liste der Leinwand und verwendet die Eigenschaft numChildren (von der DisplayObjectContainer-Klasse geerbt), um den Grenzwert für die for-Schleife festzulegen. Dies erstellt eine Zeichenfolge, die alle untergeordneten Elemente aufführt:

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

Der resultierende String dient zum Festlegen der Eigenschaft text des Textfelds outputTxt.

Klicken und Ziehen von Anzeigeobjekten

Klickt der Benutzer auf eine GeometricSprite-Instanz, ruft die Anwendung die Ereignisprozedur onMouseDown() auf. Wie im folgenden Code dargestellt, ist diese Ereignisprozedur in der Konstruktorfunktion der GeometricSprite-Klasse zur Überwachung von Ereignissen aufgrund einer gedrückten Maustaste eingerichtet:

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

Die onMouseDown()-Methode ruft daraufhin die showSelected()-Methode des GeometricSprite-Objekts auf. Wird diese Methode das erste Mal für ein Objekt aufgerufen, erstellt sie ein neues Shape-Objekt namens selectionIndicator und verwendet die Eigenschaft graphics des Shape-Objekts zum Zeichnen eines roten Markierungsrechtecks. Dies wird im folgenden Beispiel gezeigt:

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

Wenn die Methode onMouseDown() nicht das erste Mal aufgerufen wird, legt sie einfach die visible-Eigenschaft der Form selectionIndicator (von der DisplayObject-Klasse geerbt) wie folgt fest:

this.selectionIndicator.visible = true;

Die hideSelected()-Methode blendet die selectionIndicator-Form des zuvor ausgewählten Objekts aus, indem sie deren Eigenschaft visible auf false setzt.

Außerdem ruft die Ereignisprozedurmethode onMouseDown() die startDrag()-Methode auf (von der Sprite-Klasse geerbt), die den folgenden Code enthält:

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

Dadurch kann der Benutzer das ausgewählte Objekt auf der Leinwand verschieben, und zwar innerhalb der Begrenzungen, die durch das boundsRect-Rechteck festgelegt sind.

Lässt der Benutzer die Maustaste los, wird das mouseUp-Ereignis ausgelöst. Die Konstruktormethode von DrawingCanvas richtet den folgenden Ereignis-Listener ein:

this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

Dieser Ereignis-Listener ist nicht für einzelne GeometricSprite-Objekte, sondern für das DrawingCanvas-Objekt eingerichtet. Der Grund hierfür ist, dass wenn ein GeometricSprite-Objekt gezogen wird, es sich beim Loslassen der Maustaste hinter einem anderen Anzeigeobjekt (einem anderen GeometricSprite-Objekt) befinden könnte. Dann würde das Anzeigeobjekt im Vordergrund das MouseUp-Ereignis erhalten, das vom Benutzer gezogene Anzeigeobjekt jedoch nicht. Das Hinzufügen dessen Listeners zum DrawingCanvas-Objekt stellt sicher, dass das Ereignis immer verarbeitet wird.

Die onMouseUp()-Methode ruft die onMouseUp()-Methode des GeometricSprite-Objekts auf, die wiederum die stopDrag()-Methode des GeometricSprite-Objekts aufruft.

Neuanordnen der Anzeigeobjektebenen

Die Benutzeroberfläche der Anwendung umfasst Schaltflächen mit den Bezeichnungen „Move Back", „Move Down", „Move Up" und „Move to Front". Klickt der Benutzer auf eine dieser Schaltflächen, ruft die Anwendung die entsprechende Methode der DrawingCanvas-Klasse auf: moveToBack(), moveDown(), moveUp() oder moveToFront(). Beispielsweise enthält die moveToBack()-Methode den folgenden Code:

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

Die Methode verwendet die setChildIndex()-Methode (von der DisplayObjectContainer-Klasse geerbt), um das Anzeigeobjekt an Indexposition 0 in der Child-Liste der DrawingCanvas-Instanz (this) zu positionieren.

Die moveDown()-Methode arbeitet ähnlich, außer dass sie die Indexposition des Anzeigeobjekts in der Child-Liste der DrawingCanvas-Instanz um 1 verringert:

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

Die Methoden moveUp() und moveToFront() sind den Methoden moveToBack() und moveDown() sehr ähnlich.

Flash CS3

Eine E-Mail an mich senden, wenn dieser Seite Kommentare hinzugefügt werden | Kommentarbericht

Aktuelle Seite: http://livedocs.adobe.com/flash/9.0_de/main/00000174.html

Kommentar hinzufügen