ActionScript3: DisplayObject (Anzeigeobjekt), Container, MovieClip, Displaylist (Anzeigeliste)

Jedes Anzeigeobjekt, das im Flash Player-Fenster zu sehen sein soll, muss in der Anzeigeliste (Displaylist) aufgelistet sein.
Die Anzeigeliste selbst ist hierachisch geschachtelt aufgebaut. Wenn ein Anzeigeobjekt zur Displaylist hinzugefügt und im sichtbaren Bereich des Flash Player-Fensters platziert wird, rendert der Flash Player den Inhalt des Anzeigeobjekts auf den Bildschirm.

Wir analysieren die Displaylist an Hand der nachfolgenden swf-Datei Landstrasse.swf:

Das nachfolgende Bild zeigt den Zustand des Flash Players bevor eine swf-Datei geöffnet wurde. Wenn der Flash Player "leer" ist, enthält die Displaylist nur ein einziges Element, nämlich eine Instanz der Klasse Stage.
Im linken Bildteil wird das durch die punktierte Linie symbolisiert. Im rechten Bildteil sieht man die Instanz der Bühne als einzigen Knoten der Dispalylist.

 

Wenn der "leere" Flash Player eine swf-Datei öffnet, wird eine Instanz vom Mainmovie (zu dem die Maintimeline gehört) erzeugt und der Displaylist als erstes "Kind" der Bühneninstanz hinzugefügt. Das Mainmovie ist entweder von der Klasse Sprite oder MovieClip bzw. davon eine Subklasse.
Im linken Bildteil wird die Instanz des Mainmovies durch die innere punktierte Linie symbolisiert. Das Mainmovie muss keine visuellen Elemente enthalten. Im rechten Bildteil sieht man die Instanz des Mainmovies als den der Bühneninstanz untergeordneten Knoten in der Dispalylist.

 

In diesem Beispiel wird zuerst eine Shape-Instanz strasse für die Landstraße erzeugt. Darin wird ein graues Rechteck gezeichnet und mit addChild als Kindknoten des Mainmovies der Displaylist dazugefügt. Erst dadurch wird die Straße gerendert und angezeigt. Abschließend wird die Shape-Instanz relativ zum übergeordneten Container (= Instanz des Mainmovies) positioniert.

var strasse:Shape = new Shape();
strasse.graphics.beginFill(0xCCCCCC);
strasse.graphics.drawRect(0,0,400,40);
strasse.graphics.endFill();
this.addChild(strasse);
strasse.y = 220;

 
Im rechten Bildteil sieht man in der Dispalylist die Shape-Instanz der Straße als Kindknoten des Mainmovies.

 
In nächsten Schritt wird ein Container auto erzeugt (= Instanz der Klasse Sprite), in den die Karosserie hingezeichnet wird. Anschließend wird mit addChild die Instanz auto als Kindknoten des Mainmovies der Dispalylist angefügt und relativ zum Mainmovie positioniert.

var auto:Sprite = new Sprite();
auto.graphics.beginFill(0xFF5555);
auto.graphics.drawRect(0,0,200,60);
auto.graphics.drawRect(0,-50,150,50);
auto.graphics.endFill();
this.addChild(auto);
auto.x = 50;
auto.y = 170;

Weil das Auto erst nach der Straße mit addChild zur Displaylist dazugefügt wurde, liegt es vor der Straße und verdeckt diese.  Die Straße und das Auto sind "Geschwisterknoten". Daher liegen im rechten Bildteil die Knoten auf derselben Ebene.

Das Auto braucht Räder.
In der Flash-Entwicklungsumgebung wurde ein MovieClip Rad erstellt. In diesen MovieClip wurde ein Rad mit Speichen gezeichnet und auf der Timeline des Movieclips mit einem Bewegungstween animiert. Bei den Movieclip-Eigenschaften wurde "Export für ActionScript" aktiviert.
Im Skript wird eine Instanz vorderrad des Movieclips Rad erstellt, mit addChild in den Container auto hineingelegt und relativ zum Container platziert.

var vorderrad:MovieClip = new Rad();
auto.addChild(vorderrad);
vorderrad.x = 160;
vorderrad.y = 60;

 
Das Vorderrad liegt als eine Movieclip-Instanz im Sprite-Container auto und überdeckt die Karosserie, die direkt in den Container gezeichnet wurde. Im rechten Bildteil ist die Instanz des Vorderrads ein Kindknoten des Autos.

Analog wird eine Movieclip-Instanz des Movieclips Rad für das Hinterrad erzeugt und mit addChild in den Container auto gelegt.

var hinterrad:MovieClip = new Rad();
auto.addChild(hinterrad);
hinterrad.x = 40;
hinterrad.y = 60

 
In der Displaylist ist der Knoten des Hinterrads ein "Geschwisterknoten" vom Vorderrad und ein "Kindknoten" des Autos.

Die Bäume entlang der Straße:
In der Flash-Entwicklungsumgebung wurde ein MovieClip-Symbol Baum erstellt. In diesen MovieClip wurde ein einfacher Baum gezeichnet. Bei den Movieclip-Eigenschaften wurde wieder "Export für ActionScript" aktiviert.
Im Skript wird eine Instanz baum1 des Movieclips Baum erstellt und anschließend wird mit addChild die Instanz baum1 als Kindknoten des Mainmovies der Dispalylist angefügt und relativ zum Mainmovie positioniert.

var baum1:MovieClip = new Baum();
this.addChild(baum1);
baum1.x = 110;
baum1.y = 280;

Weil der Baum nach dem Auto mit addChild zur Displaylist dazugefügt wurde, liegt es vor dem Auto und der Straße und verdeckt diese.  Der Baum, das Auto und die Straße sind "Geschwisterknoten". Daher liegen im rechten Bildteil die Knoten auf derselben Ebene.

Analog wird der zweite Baum hinzugefügt:
Im Skript wird eine Instanz baum2 des Movieclips Baum erstellt. Aber anschließend wird mit addChild At die Instanz baum2 an der Stelle 0 als Kindknoten des Mainmovies der Dispalylist angefügt und relativ zum Mainmovie positioniert.

var baum2:MovieClip = new Baum();
this.addChildAt(baum2,0);
baum2.scaleX = baum2.scaleY = 0.7;
baum2.x = 310;
baum2.y = 220;

Die Bäume, das Auto und die Straße sind "Geschwisterknoten" und liegen daher im rechten Bildteil auf derselben Ebene.
Die Positionierung der Instanz baum2 an der Stelle 0 bewirkt allerdings, dass die Instanz unter allen Geschwisterknoten platziert und daher der untere Teil des Stamms von der Straße verdeckt wird. Daher liegt jetzt im rechten Teil der Grafikder Knoten der Instanz baum2 ganz am Anfang der "Geschwisterliste".

Child List

Container (Sprites, Moveclips) besitzen eine geordnete Child List, mit allen Anzeigeobjekten, die in dem Container liegen. Die Reihenfolge in der Liste legt fest welche Anzeigeobjekte von anderen Geschwisterobjekten überdeckt werden können. Das zu unterst liegende Objekt hat den Index 0. Das mit addChild zuletzt hinzugefügte Objekt wird ganz oben in der Child List platziert.
Mit entsprechenden Methoden der Klasse DisplayObjectContainer kann diese Reihenfolge verändert werden. Siehe voriges Kapitel.

In der obigen Abbildung sind die Child Lists des Mainmovies und des Autocontainers blau zusammengefasst und aufsteigend von links nach rechts zu lesen.