|
Die Beispielanwendung „SpriteArranger“ baut auf der Beispielanwendung „Geometric Shapes“ auf, die im
ActionScript 3.0 – Arbeitshandbuch
beschrieben wird.
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 SpriteArranger-Anwendung befinden sich im Ordner „Examples/SpriteArranger“. Die Anwendung umfasst die folgenden Dateien:
|
Datei
|
Beschreibung
|
|
SpriteArranger.mxml
oder
SpriteArranger.fla
|
Die Hauptanwendungsdatei im Flash-Format (FLA) oder Flex-Format (MXML).
|
|
com/example/programmingas3/SpriteArranger/CircleSprite.as
|
Eine Klasse, die ein Sprite-Objekt definiert, das einen Kreis auf dem Bildschirm anzeigt.
|
|
com/example/programmingas3/SpriteArranger/DrawingCanvas.as
|
Eine Klasse, die eine Leinwand definiert, die der Anzeigeobjektcontainer ist, in dem die GeometricSprite-Objekte enthalten ist.
|
|
com/example/programmingas3/SpriteArranger/SquareSprite.as
|
Eine Klasse, die ein Sprite-Objekt definiert, das ein Quadrat auf dem Bildschirm anzeigt.
|
|
com/example/programmingas3/SpriteArranger/TriangleSprite.as
|
Eine Klasse, die ein Sprite-Objekt definiert, das ein Dreieck auf dem Bildschirm anzeigt.
|
|
com/example/programmingas3/SpriteArranger/GeometricSprite.as
|
Eine Klasse, die das Sprite-Objekt erweitert und zum Definieren einer Form auf dem Bildschirm verwendet wird. Diese Klasse wird von CircleSprite, SquareSprite und TriangleSprite erweitert.
|
|
com/example/programmingas3/geometricshapes/IGeometricShape.as
|
Die Methoden, mit denen die grundlegenden Schnittstelle definiert wird, die von allen GeometricShapes-Klassen implementiert werden müssen.
|
|
com/example/programmingas3/geometricshapes/IPolygon.as
|
Die Methoden, mit denen eine Schnittstelle definiert wird, die von allen GeometricShapes-Klassen mit mehreren Seiten implementiert werden müssen.
|
|
com/example/programmingas3/geometricshapes/RegularPolygon.as
|
Eine geometrische Form, deren gleich lange Seiten symmetrisch um den Mittelpunkt der Form positioniert sind.
|
|
com/example/programmingas3/geometricshapes/Circle.as
|
Eine geometrische Form, die einen Kreis definiert.
|
|
com/example/programmingas3/geometricshapes/EquilateralTriangle.as
|
Eine Unterklasse von RegularPolygon, die ein Dreieck definiert, dessen Seiten die gleiche Länge aufweisen.
|
|
com/example/programmingas3/geometricshapes/Square.as
|
Eine Unterklasse von RegularPolygon, die ein Rechteck definiert, dessen vier Seiten die gleiche Länge aufweisen.
|
|
com/example/programmingas3/geometricshapes/GeometricShapeFactory.as
|
Eine Klasse, die eine „Factory-Methode“ zum Erstellen von Formen eines bestimmten Typs und einer bestimmten Größe enthält.
|
Definieren der SpriteArranger-Klassen
Mit der Anwendung „SpriteArranger“ können Benutzer der „Leinwand“ auf dem Bildschirm verschiedene Anzeigeobjekte 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
In Flex müssen alle untergeordneten Anzeigeobjekte, die einem Container-Objekt hinzugefügt werden, einer Klasse angehören, die ein Nachfolger der mx.core.UIComponent-Klasse ist. Diese Anwendung fügt eine Instanz der DrawingCanvas-Klasse als untergeordnetes Element eines mx.containers.VBox-Objekts hinzu, wie im MXML-Code in der Datei „SpriteArranger.mxml“ definiert. Diese Vererbung ist in der Deklaration DrawingCanvas-Klasse wie folgt definiert:
public class DrawingCanvas extends UIComponent
Die UIComponent-Klasse erbt von der DisplayObject-, der DisplayObjectContainer- und der Sprite-Klasse und der Code in der DrawingCanvas-Klasse verwendet Methoden und Eigenschaften dieser Klassen.
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 mit 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 basierend auf Interaktionen des Benutzers mit der Anwendung aufgerufen:
GeometricSprite-Klasse und ihre Unterklassen
Jedes Anzeigeobjekt, das 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 allen GeometricSprite-Objekten gemein sind. Diese werden in der Konstruktorfunktion basierend auf Parametern eingestellt, die an die Funktion übergeben werden. Zum 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, aber nicht ihre visuellen Eigenschaften festgelegt. Die Klassen, die die IGeometricShape-Schnittstelle implementieren, werden in der GeometricShapes-Beispielanwendung definiert, die im
ActionScript 3.0 – Arbeitshandbuch
beschrieben wird.
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 nachfolgenden Abschnitt „Hinzufügen von Anzeigeobjekten zur Leinwand“.
Darüber hinaus stellt die GeometricSprite-Klasse folgende Methoden zur Verfügung:
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);
Die vorletzte Zeile der
addShape()
-Funktion stellt die
alpha
-Eigenschaft des Anzeigeobjekts ein (von der DisplayObject-Klasse geerbt). Jedes der Leinwand hinzugefügte Anzeigeobjekt erscheint etwas transparent und lässt den Benutzer sehen, 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';
}
Die resultierende Zeichenfolge dient zum Einstellen der Eigenschaft
text
des Textfeldes
outputTxt
.
Klicken und Ziehen von Anzeigeobjekten
Klickt der Benutzer auf eine GeometricSprite-Instanz, ruft die Anwendung die
onMouseDown()
-Ereignisprozedur auf. Wie der folgende Code zeigt, ist diese Ereignisprozedur in der Konstruktorfunktion der GeometricSprite-Klasse zur Überwachung auf eine gedrückte Maustaste eingestellt:
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);
Wird die Methode
onMouseDown()
nicht das erste Mal aufgerufen, stellt sie einfach die Eigenschaft
visible
der Form
selectionIndicator
(von der DisplayObject-Klasse geerbt) wie folgt ein:
this.selectionIndicator.visible = true;
Die
hideSelected()
-Methode blendet die
selectionIndicator
-Form des zuvor ausgewählten Objekts aus, indem sie deren Eigenschaft
visible
auf
false
einstellt.
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 Grenzen, die durch das
boundsRect
-Rechteck festgelegt werden.
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 für das DrawingCanvas-Objekt und nicht für einzelne GeometricSprite-Objekte eingestellt. Der Grund hierfür ist, dass sich ein gezogenes GeometricSprite-Objekt 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 Beschriftungen „Move Back“, „Move Down“, „Move Up“ und „Move to Front“. Wenn der Benutzer auf eine dieser Schaltflächen klickt, 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);
}
}
Diese 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()
arbeiten ähnlich wie die Methoden
moveToBack()
und
moveDown()
.
|
|
|
