7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. ActionScript

AS3 101: Die Anzeigeliste – Basix

Scroll to top
Read Time: 38 mins
This post is part of a series called AS3 101.
AS3 101: Loops - Basix
AS3 101: XML – Basix

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

In dieser sechsten Ausgabe von AS3 101 beschäftigen wir uns mit Themen im Zusammenhang mit der "Display List", dem Rendering-System von Flash. Mit einem soliden Verständnis der Programmierung der Display List eröffnet sich eine ganze Welt dynamischer Möglichkeiten. Sie sind nicht mehr an eine statische Anzeigestruktur gebunden, die Sie auf der Timeline in der IDE erstellen, aber Sie können MovieClips (und mehr) mit Code erstellen und zerstören.

Es gibt viel zu wissen, also legen wir besser los. Unser ultimatives Ziel ist eine Wand aus anklickbaren Bildern (sehen Sie sich die Demo an). Es ist zwar einfach, führt jedoch viele Programmiertechniken für die Anzeigeliste ein.

Schritt 1: Was ist die Anzeigeliste?

Die Anzeigeliste ist der Begriff, der in Bezug auf die Rendering-Engine und den Rendering-Prozess von Flash verwendet wird. Technisch gesehen ist es nicht die Engine selbst, sondern ein hierarchischer Baum dessen, was gerendert wird. Alles, was in einem Flash-Film zu sehen ist, ist Teil der Anzeigeliste. Eine Folge dieser Vorstellung ist, dass ein Objekt, das sich in der Anzeigeliste befindet, vom Renderer gezeichnet wird. Wenn sich ein Objekt nicht in der Anzeigeliste befindet, wird es nicht gezeichnet.

In den nächsten Schritten werden wir einige der wichtigsten Konzepte der Anzeigeliste untersuchen.

Schritt 2: Das DisplayObject

ActionScript definiert etwas, das als "DisplayObject" bezeichnet wird. Wir werden uns hier überholen; Wir haben objektorientierte Programmiertechniken bisher in AS3 101 noch nicht besprochen, und leider wird dieses spezielle Thema am besten mit einem Verständnis der Vererbung verstanden. Mach dir keine Sorge. Wir werden OOP früh genug behandeln, und in der Zwischenzeit werde ich mein Bestes geben, um diese geekigeren Details vor Ihnen zu verbergen.

Ein DisplayObject ist also im Grunde alles, was in der Display List angezeigt werden kann. Der gute alte MovieClip ist beispielsweise eine Art DisplayObject. Ein Array ist es jedoch nicht. ActionScript 3 definiert einige Arten von anzeigbaren Objekten, und Sie können Ihre eigenen definieren. Im Folgenden finden Sie eine Liste von DisplayObjects, die vom Flash Player bereitgestellt werden:

  • Form Eine Form kann Vektorgrafiken anzeigen. Wenn Sie auf der Bühne eine Form zeichnen und Ihre SWF-Datei veröffentlichen, wird diese Form in ActionScript als Shape-Objekt dargestellt. Sie können programmgesteuert mit Shapes arbeiten, wenn Sie Vektorobjekte mit Code erstellen möchten.
  • Bitmap Im Wesentlichen nur ein Bild. Wenn Sie eine JPG-Datei laden und anzeigen, wird sie als Bitmap dargestellt. Wenn Sie ein Bitmap-Bild in die Flash-Bibliothek importieren und eine Instanz davon auf die Bühne ziehen, wird es seltsamerweise nicht zu einer Bitmap-Instanz in ActionScript. Stattdessen ist es ein Shape-Objekt mit einer Bitmap-Füllung. Seltsam, ich weiß.
  • Video Wie zu erwarten, kann ein Video über einen NetStream angezeigt oder in die SWF-Datei eingebettet werden.

Es gibt noch mehr Typen, aber wir werden sie mit der Zeit erreichen. Im Moment ist es wichtig zu beachten, dass Shapes, Bitmaps und Videos zwar alle Dinge unterschiedlich darstellen, aber tatsächlich einiges gemeinsam haben. Am offensichtlichsten ist, dass alle etwas anzeigen. Sie können der Anzeigeliste hinzugefügt werden. Ja, sie sind auf verschiedene Arten von Anzeigeaufgaben spezialisiert, aber letztendlich sind sie alle DisplayObjects und können daher vom Flash Player gerendert werden.

Darüber hinaus können alle DisplayObjects bestimmte anzeigebezogene Aufgaben ausführen. Dies beinhaltet, ist aber nicht beschränkt auf:

  • Festlegen der Position (über die x- und y-Eigenschaften und in Flash Player 10, z)
  • Festlegen der Rotation (und in Flash Player 10 der RotationX, RotationY und RotationZ)
  • Einstellen des Maßstabs (über die Eigenschaften height, width, scaleX und scaleY)
  • Alpha einstellen
  • BlendMode einstellen
  • Filter einstellen
  • Anwenden einer Mask
  • Durchführen von Treffertests (über hitTestObject und hitTestPoint)

Sie können sehen, dass dies eine ziemliche Liste ist. Natürlich muss jedes anzeigbare Objekt über einige grundlegende Funktionen verfügen. Jedes andere DisplayObject kann alle oben genannten Funktionen ausführen, fügt jedoch weitere Funktionen hinzu.

Warum also nicht einfach die funktionaleren, leistungsfähigeren Typen wählen? Zum einen Spezialisierung. Nur ein Bitmap-Objekt kann ein geladenes Bild anzeigen und nur ein Video-Objekt kann ein Video anzeigen. Aber es gibt auch so etwas wie Overhead. Sie können Vektorgrafiken genauso in einen MovieClip zeichnen wie in eine Form, aber da ein MovieClip so viel mehr kann als eine Form, benötigt er mehr Speicher, um zu existieren. Wenn Sie nur eine Vektorform anzeigen müssen und nicht mit Mausinteraktivität oder Zeitachsen herumspielen, sollten Sie nur eine Form und keinen MovieClip verwenden.

Schritt 3: Das InteractiveObject

ActionScript definiert außerdem etwas, das als "InteractiveObject" bezeichnet wird. Ein InteractiveObject ist eine andere Art von DisplayObject, also kann es all die allgemeinen Dinge erledigen, über die wir im letzten Schritt gesprochen haben. Aber InteractiveObjects fügt ein Schlüsselelement hinzu: Interaktivität (das hätten Sie kommen sehen sollen). Es gibt zwei Arten von InteractiveObjects:

  • TextField Sie würden nicht erwarten, dass ein TextField interaktiv ist, aber wenn das TextField ein Eingabefeld ist, kann es auf Benutzerereignisse reagieren, wie z. B. Änderungen im eingegebenen Text. Gleichzeitig können Sie bestimmen, wann der Benutzer das TextField fokussiert und defokussiert.
  • SimpleButton Ein SimpleButton ist die ActionScript-Darstellung eines Button-Bibliothekssymbols. Die meisten ActionScript-Entwickler vermeiden sowohl die Bibliotheksversion als auch die ActionScript-Version, aber es ist schön zu wissen, dass dies hier ist.

Obwohl TextFields und SimpleButtons sehr unterschiedlich sind, haben sie beide gemeinsame Merkmale, zusätzlich zu den gemeinsamen Merkmalen aller DisplayObjects. InteractiveObjects kann:

  • ein contextMenu haben
  • Mausereignisse vom Benutzer empfangen
  • Schlüsselereignisse vom Benutzer empfangen
  • mit der Tabulatortaste getippt werden

Auch dies sind Dinge, die alle InteractiveObjects tun können. Eine Form kann diese Dinge jedoch nicht tun. Umgekehrt hat ein TextField Dinge wie Alpha und Filter, genau wie alle DisplayObjects. Tiefer in den Kaninchenbau gehen wir...

Schritt 4: Der DisplayObjectContainer

ActionScript definiert schließlich einen sogenannten "DisplayObjectContainer". Ein DisplayObjectContainer ist ein DisplayObject-Typ, sodass er positioniert und gefiltert werden kann usw. Es ist auch ein Typ von InteractiveObject, kann also Mausereignisse usw. empfangen. Aber es fügt noch mehr Funktionalität hinzu.

Sie kennen wahrscheinlich die Idee, einen MovieClip in einen anderen MovieClip einzufügen. Die Tatsache, dass ein MovieClip andere Anzeigeobjekte enthalten kann, macht ihn zu einem DisplayObjectContainer. Diese Idee der Eindämmung fügt DisplayObjectContainer der Tabelle hinzu. So ziemlich alles, was von DisplayObjectContainer definiert wird, hat mit der Verwaltung der untergeordneten Objekte dieses Containers zu tun. Ein Container kann einen anderen Container enthalten, wie Sie es vielleicht von Flash-Dateien mit stark verschachtelten MovieClip-Strukturen kennen. DisplayObjectContainer können:

  • untergeordnete Objekte hinzufügen
  • untergeordnete Objekte entfernen
  • Hinweise auf seine untergeordnete Objekte holen 
  • die Tiefen (Stapelreihenfolge) seiner untergeordneten Objekte verwalten
  • die Maus oder die Tabulatortaste für alle untergeordneten Elemente gleichzeitig aktivieren oder deaktivieren

Wie Sie sehen können, beschäftigt sich der DisplayObjectContainer hauptsächlich damit, andere DisplayObjects zu enthalten. Denken Sie jedoch daran, dass es sich um alles handelt, was ein DisplayObject ist (es kann verschoben, skaliert, gedreht, gefiltert usw. werden) sowie alles, was ein InteractiveObject ist (es hat Maus- und Tastenereignisse usw.). Es gibt drei DisplayObjectContainer, die Sie kennen sollten:

  • Sprite Sie können sich einen Sprite wie einen MovieClip ohne Zeitleiste vorstellen. Es kann gezogen werden, mit Sound verknüpft werden, programmgesteuert gezeichnete Vektorgrafiken anzeigen und sein interaktives Verhalten mit Dingen wie useHandCursor und hitArea ändern. Die meisten UI-Komponenten, die mit Flash geliefert werden, sind Sprites (und keine MovieClips).
  • MovieClip ist der, den Sie kennen und lieben. Sie können sich einen Sprite als MovieClip ohne Zeitleiste vorstellen, oder Sie können sich einen MovieClip als Sprite mit Zeitleiste vorstellen. Ein MovieClip kann alles, was ein Sprite tun kann, und fügt Eigenschaften und Methoden für die Arbeit mit seiner Zeitleiste hinzu (wie gotoAndStop, currentFrame usw.).
  • Loader Ein Loader kann eine externe SWF- oder Bilddatei laden und anschließend anzeigen. Die Arbeit mit Loadern ist wichtig, da sie die einzige Möglichkeit sind, diese externen Assets zu laden.

Der allgemeine Konsens ist, dass ein Sprite einem MovieClip vorzuziehen ist, wenn Sie keine Zeitleiste benötigen, da der Overhead geringer ist.

Schritt 5: Visuelles Arbeiten mit der Anzeigeliste

Ich bin sicher, dass Sie gerne Dinge in die Anzeigeliste aufnehmen, auch wenn Sie mit diesem Begriff nicht vertraut sind. Wenn Sie ein MovieClip-Symbol erstellen und eine Instanz davon auf die Bühne ziehen, erstellen Sie ein MovieClip-Objekt und fügen es der Anzeigeliste hinzu. Lassen Sie uns Folgendes tun:

Erstellen Sie ein neues ActionScript 3-Dokument. Zeichnen Sie eine Form auf der Bühne, wählen Sie sie aus und verwandeln Sie sie in ein MovieClip-Symbol. Geben Sie ihm einen Instanznamen. Ich werde "manualClip" verwenden.

Klicken Sie nun in den ersten Frame der Ebene und öffnen Sie das Bedienfeld Aktionen. Geben Sie den folgenden Code ein:

Wenn Sie Ihren Film ausführen, sollten Sie im Ausgabebedienfeld Folgendes sehen:

Was haben wir nun in diesem Skript gemacht? Wir haben begonnen, mit einigen Themen der Anzeigeliste zu arbeiten.

Zuerst war numChildren. Dies ist eine Eigenschaft eines beliebigen DisplayObjectContainer und gibt die Anzahl der darin enthaltenen unmittelbaren untergeordneten Elemente zurück (es geht nur eine Ebene tief: alle untergeordneten Elemente, die weitere untergeordnete Elemente enthalten, werden nicht gezählt). Wir setzen diesen Wert auf eine andere Variable (genannt "len") gemäß den guten Schleifentechniken, die im letzten AS3 101-Tutorial beschrieben wurden.

Dann verwenden wir innerhalb der Schleife eine andere DisplayObjectContainer-Technik, getChildAt. Dies ist eine Möglichkeit, Zugriff auf einzelne Kinder innerhalb des Containers zu erhalten. In diesem Fall erhalten wir sie nach Tiefe.

Sobald wir das DisplayObject haben, verfolgen wir seinen Namen.

Es mag Sie überraschen oder auch nicht, dass das Objekt, das wir manuell in der IDE platziert haben, über ActionScript angezeigt wird. Meistens gibt es kaum Unterschiede zwischen dem Arbeiten in der IDE oder mit Code, wenn es um das tatsächlich angezeigte Objekt geht. Oft ist es einfach einfacher, Assets visuell auf der Bühne zu zeichnen oder zu platzieren. In anderen Fällen müssen wir möglicherweise dynamischer vorgehen und Objekte mit Code erstellen. Es ist gut zu wissen, dass wir so oder so ziemlich die volle Kontrolle über den Prozess haben.

Schritt 6: Programmgesteuertes Arbeiten mit der Anzeigeliste

Wir gehen noch einen Schritt weiter (daher die Erhöhung der Schrittnummer...). Wir werden nun ein DisplayObject mit Code erstellen und anzeigen. Verwenden Sie die FLA, mit der Sie im letzten Schritt begonnen haben, und fügen Sie den folgenden Code oben hinzu (vor dem Code, den Sie das letzte Mal geschrieben haben).

Was bewirkt das? Nun, es erstellt ein Sprite. Ein Sprite kann nur programmatisch erstellt werden; Alle Symbole in Ihrer Bibliothek sind MovieClips. Denken Sie daran, dass ein Sprite nur ein MovieClip ohne Zeitleiste ist. Da wir mit Code keinen Inhalt auf der Zeitachse erstellen können, können wir Sprites genauso gut verwenden, wenn wir einen DisplayObjectContainer programmgesteuert erstellen müssen.

Nachdem wir unser Sprite haben, verwenden wir die Graphics-Eigenschaft, um ein Quadrat mit Code zu zeichnen. Es gibt einiges, was wir mit der Zeichen-API tun können, aber kurz gesagt, es ist wie eine Schritt-für-Schritt-Anleitung zum Zeichnen von Formen mit einem Stift. Zuerst legen wir die Füllfarbe fest, dann verwenden wir eine bequeme Methode, um den Stift in einem Rechteck zu bewegen und ein Quadrat zu zeichnen.

Leider haben wir keine Zeit, uns eingehender mit dem Graphics-Objekt zu befassen, aber in der Dokumentation finden Sie eine vollständige Liste der Dinge, die Sie zum programmgesteuerten Zeichnen tun können. Es ist ziemlich tief und kann so viel mehr als nur Rechtecke zeichnen. Tatsächlich basiert die Kern-3D-Engine von Flash Player 10 auf der Fähigkeit, Dreiecke zu zeichnen. Es wird verrückt... aber viel Spaß damit!

Auf jeden Fall, wenn Sie den Film jetzt ausführen, werden Sie keine Änderung gegenüber dem letzten Mal feststellen. Warum ist das so? Denn obwohl wir das Sprite erstellt haben, ist es noch nicht in der Anzeigeliste. Merk dir das. Es Reisen von erfahrenen Entwicklern die ganze Zeit. Sie müssen das Sprite (oder jedes andere DisplayObject, das Sie mit Code erstellen) zur Anzeigeliste hinzufügen. Sie tun dies mit der addChild-Methode des Containers, den Sie verwenden möchten, wie folgt:

Wenn Sie das Skript jetzt ausführen, sollten Sie nicht nur ein großes orangefarbenes Quadrat sehen, das Ihren Bildschirm einnimmt (und möglicherweise den anderen von Ihnen erstellten Clip verdeckt), sondern auch eine zusätzliche Zeile in Ihrem Ausgabebedienfeld:

Beachten Sie den Namen, der ihm gegeben wurde? Dies ist der Standardname. Flash zählt, wie viele Instanzen erstellt werden (während der Lebensdauer des Films, glaube ich) und wendet einfach den Standardnamen "instanceN" für alle neuen Anzeigeobjekte an. Dieser Name kann jedoch jederzeit eingestellt werden. Es ist nicht erforderlich, aber es kann praktisch sein, Ihren programmgesteuert erstellten Anzeigeobjekten einen eindeutigen Namen zu geben, damit Sie sie später leicht identifizieren können, entweder durch Ablaufverfolgungen oder bei Verwendung von getChildByName. Fügen wir die folgende Zeile hinzu (noch vor der Schleife, aber nachdem das Sprite erstellt wurde);

Und das ergibt:

Als Referenz hier das gesamte Skript, wie es stehen sollte:

Die Möglichkeit, DisplayObject zur Laufzeit zu erstellen und hinzuzufügen, ist eine leistungsstarke Technik von Flash und öffnet die Tür für dynamische Anzeigen, wie wir am Ende des Tutorials sehen werden.

Schritt 7: Tiefe verstehen

Die Tiefe selbst zu verstehen ist nicht so schwer: Alle Anzeigeobjekte sind in einer "Stapelreihenfolge" geschichtet. Ein Objekt mit einer höheren Tiefe wird "über" sein und ein Objekt mit einer geringeren Tiefe verdecken.

Und es ist nicht schwer zu bedenken, dass Container ihre eigenen Tiefen für ihre Kinder haben. Ein MovieClip voller Shapes stapelt die Shapes der Reihe nach. Legen Sie diesen MovieClip über einen anderen MovieClip voller Formen, und alle Formen des oberen MovieClips befinden sich über den Formen des unteren MovieClips. Es gibt keine Verschachtelung von Kindern eines Containers mit den Kindern eines anderen Containers.

Schwierig wird es, zu verstehen, wie ActionScript 3 mit Tiefe umgeht. Aber selbst das ist nicht so schlimm, und Sie werden vielleicht daran interessiert sein, dass es viel besser ist, als ActionScript 2 mit der Tiefe umgeht.

Zunächst sollten Sie wissen, dass die niedrigste Tiefe eines Containers 0 ist. Es gibt keine negativen Tiefen.

Zweitens sind die Tiefen jedes gegebenen Behälters immer dicht gepackt. Das bedeutet, dass es keine Leerzeichen in den Tiefenzahlen gibt. Wenn es 10 untergeordnete Objekte gibt, besetzen sie die Tiefen 0 bis 9, keine Ausnahmen.

Drittens sollten Sie verstehen, dass ActionScript dieses dicht gepackte Nummerierungssystem für Sie verwaltet. Jedes Mal, wenn Sie einem Container ein untergeordnetes Element hinzufügen, wird dieses untergeordnete Element wie eine einzelne Karte in den Stapel gelegt. Ein untergeordnetes Objekt, das in einer bestimmten Tiefe hinzugefügt wird, schiebt alle Kinder in der Tiefe und Höhe in der Stapelreihenfolge nach oben. Ein untergeordnetes Objekt, das aus einer bestimmten Tiefe entfernt wird, lässt alle darüber liegenden untergeordneten Objekte,wieder nach unten rutschen, um die Lücke zu füllen.

Und schließlich sollten Sie einige der Methoden kennenlernen, mit denen wir die untergeordneten Elemente eines Containers manipulieren können.

addChild ist die einfachste Möglichkeit, ein DisplayObject hinzuzufügen. Sie rufen es einfach aus dem Container auf, dem Sie hinzufügen möchten, und übergeben das DisplayObject. Dadurch wird das Kind automatisch an die Spitze des Stapels gesetzt. Das haben wir im letzten Schritt gesehen. Wir hatten bereits einen MovieClip auf der Bühne, bevor unser Code lief, und dann haben wir addChild auf unserem neuen Sprite verwendet. Dadurch wird das Sprite auf Tiefe 1 über dem MovieClip platziert.

addChildAt ähnelt addChild, nur Sie können den Index angeben, an dem das untergeordnete Objekt,hinzugefügt werden soll. Wenn wir den Code des vorherigen Schritts so ändern, dass er lautet:

Wir fügen dieses Sprite auf Tiefe 0 hinzu. Da der MovieClip bereits auf Tiefe 0 war, wird er auf Tiefe 1 gestoßen und der Sprite geht auf Tiefe 0 hinein. Wenn Sie diesen Film ausführen, sehen Sie das Sprite auf dem unten, und eine Änderung in der Ausgabe:

removeChild und removeChildAt funktionieren ähnlich wie ihre "hinzufügen"-Gegenstücke. removeChild gibt das zu entfernende Kind an, genau wie addChild. removeChildAt ist etwas anders, da Sie lediglich die Tiefennummer benötigen. Was auch immer Kind in dieser Tiefe ist, wird entfernt. Aufbauend auf unserem vorherigen Beispiel könnten wir beispielsweise den MovieClip entfernen, den wir in der IDE hinzugefügt haben:

oder

Beide sind für verschiedene Zwecke nützlich... manchmal wissen Sie genau, welcher Clip entfernt werden soll, manchmal möchten Sie nur das unter- oder oberste Kind entfernen.

getChildAt bietet eine Möglichkeit, auf die untergeordneten Elemente eines Containers zuzugreifen. In diesem Fall erhalten wir es durch die Tiefe. Wir haben dies zu Beginn unseres aktuellen FLA-Beispiels verwendet.

erhält einen Verweis auf den MovieClip, den wir mit der IDE platziert haben (es sei denn, wir haben ihn bereits entfernt)

getChildIndex gibt uns den Tiefenwert des gelieferten untergeordneten Objekts

setChildIndex nimmt ein untergeordnetes Objekt und einen neuen Tiefenindex und vertauscht die Tiefen, um der Anforderung gerecht zu werden. Auch dies hat einen ähnlichen Effekt wie das Verschieben einer einzelnen Karte in einem Kartenspiel. Die mittleren Kinder werden herumgeschoben, um Platz zu schaffen und die Lücke zu füllen.

Es gibt mehr Methoden, um Tiefen zu manipulieren und mehr. Weitere Informationen finden Sie in der Dokumentation der DisplayObjectContainer-Klasse.

Schritt 8: Alpha, Sichtbar und Auf der Anzeigeliste

Es gibt drei Möglichkeiten, ein bestimmtes Anzeigeobjekt nicht anzuzeigen: Setzen Sie seinen Alphawert auf 0, setzen Sie seine Sichtbarkeit auf false oder übergeben Sie ihn an removeChild. Was ist der Unterschied zwischen diesen? Gut, dass Sie gefragt haben.

Wenn Sie Alpha auf 0 setzen, können Ihre Augen das Objekt nicht sehen. Es ist jedoch immer noch vorhanden. Ein Alpha von 0 ist wie der unsichtbare Mensch: Sie können ihn vielleicht nicht sehen, aber Sie können ihm trotzdem begegnen. Wenn Sie einen MovieClip mit angeschlossenen Mausereignissen haben und dessen Alpha auf 0 setzen, werden diese Mausereignisse weiterhin ausgelöst. Dies kann nützlich sein, um einen Trefferbereich zu erstellen, der Ereignisse an anderer Stelle im Film auslöst.

Wenn Ihr Ziel darin besteht, das Objekt einfach nicht zu sehen, ist ein Alpha von 0 immer noch problematisch, da der Renderer das Objekt noch zeichnet. Der Effekt ist, dass Sie es nicht sehen können, aber Flash arbeitet noch daran, das transparente Pixel zu rendern. Es ist besser, die Sichtbarkeit auf false zu setzen.

Wenn Sie die visible-Eigenschaft auf false setzen, wird das Anzeigeobjekt aus der Rendering-Warteschlange entfernt. Wenn Sie also ein Objekt ausgeblendet haben, sollten Sie sichtbar auf false setzen, sobald Sie damit fertig sind. Ein unsichtbares Anzeigeobjekt ist jedoch immer noch ein bisschen ein unsichtbarer Mensch, der Platz einnimmt. Vielleicht ist es angemessener, es wie ein gasförmiges Element zu behandeln. Es verursacht keine Ereignisse, aber es nimmt einen Platz im Tiefenstapel ein, und seine Abmessungen wirken sich auf die Abmessungen seines Containers aus. Ansonsten ist es ziemlich gut nicht existent.

Wenn Sie ein untergeordnetes Element entfernen, können Sie es weiterhin in einer Variablen behalten. Es ist immer noch im Speicher vorhanden, und Sie können dann jederzeit addChild damit aufrufen, um es wieder in die Anzeigeliste aufzunehmen. Wenn Sie jedoch beim Aufrufen von removeChild keinen anderen Verweis darauf haben, wird das Objekt für die Garbage Collection geeignet und wird vollständig gelöscht, wenn Sie nicht daran festhalten.

Für jede dieser Techniken gibt es Zeit und Ort, und ein guter ActionScript-Entwickler weiß, wann welche zu verwenden ist. Es gibt eine gute Zusammenfassung der drei Techniken, die von Colin Moock bei InsideRIA diskutiert wurden.

Schritt 9: Erstellen vordefinierter DisplayObjects aus der Bibliothek

Eines der coolsten Dinge, die wir tun können, ist die Kombination der visuellen Ausdruckswerkzeuge der Flash-IDE und der Dynamik einer codegesteuerten Anzeigeliste. Wir können ein Symbol in Flash erstellen, es so einrichten, dass ActionScript darauf zugreifen kann, und dann Instanzen dieser Symbole mit Code erstellen. Lassen Sie es überprüfen.

Zeichnen Sie zuerst ein Kunstwerk und verwandeln Sie es in ein Symbol. Wenn Sie jedoch das Dialogfenster zum Erstellen des Symbols erhalten, stellen Sie sicher, dass Ihr Fenster wie folgt aussieht:

An Stelle von:

Wenn es wie das kleinere Fenster aussieht, klicken Sie auf die Schaltfläche "Erweitert", um es zum größeren Fenster zu machen.

Klicken Sie nun auf das Kontrollkästchen "Für ActionScript exportieren". Wenn Sie dies tun, wird der gesamte Abschnitt "Verknüpfung" aktiviert.

Der in das Feld "Klasse:" eingegebene Text basiert auf dem Namen, den Sie in den Namen eingegeben haben. Wenn Sie es ändern möchten, beachten Sie, dass bestimmte Regeln gelten. Grundsätzlich muss es sich um einen gültigen ActionScript-Variablennamen handeln: nur Zahlen, Buchstaben, Unterstriche und Dollarzeichen, und er darf nicht mit einer Zahl beginnen.

Lassen Sie alles andere unverändert und klicken Sie auf OK. Sie sollten diese Warnung erhalten:

Wenn Sie dieses Fenster erhalten, sagt es etwas aus, worüber Sie sich jetzt keine Sorgen machen müssen. Sie werden jedoch irgendwann darüber Bescheid wissen wollen (wir werden darüber in einer zukünftigen AS3 101-Episode sprechen). Ich würde Ihnen raten, der Versuchung zu widerstehen, die Option "Mich nicht mehr warnen" zu aktivieren. Im Moment brauchen Sie diese Warnung nicht, aber irgendwann möchten Sie diese Warnung, weil Sie erwartet haben, dass etwas anderes passiert. Sie können diese Warnung jedoch ein- und ausschalten, indem Sie in Ihren Einstellungen den Abschnitt "Warnungen" aufrufen und die Option "Warnung beim automatischen Generieren von ActionScript-Klassen für Zeitleisten" aktivieren.

Also, was hat das alles bewirkt? Es gab uns über ActionScript Zugriff auf dieses Symbol. Der Name, den Sie im Feld "Klasse" eingegeben haben, ist der Name, den Sie verwenden müssen, um ein neues Symbol mit Code zu erstellen. Ich habe zum Beispiel "Box" in mein Klassenfeld eingegeben, sodass ich jetzt dieses Skript schreiben kann:

Führen Sie es aus, und Sie sehen mindestens eine Instanz Ihres Symbols auf dem Bildschirm (möglicherweise befindet sich dort bereits eine, als Sie es erstellt haben). Der Punkt ist, dass wir das ActionScript-Äquivalent zum Ziehen dieses Symbols auf die Bühne in der IDE ausgeführt haben.

Dies ist unglaublich nützlich; Es kombiniert die Bequemlichkeit, einen MovieClip mit den visuellen Werkzeugen der IDE zu erstellen, mit der dynamischen Natur, Dinge mit Code auf die Bühne zu stellen. Stellen Sie sich vor, Sie haben einen Thumbnail-Clip, der mehr ist als nur ein geladenes Bild; vielleicht hat es ein Etikett und ein paar zusätzliche Grafiken für einen Rollover-Effekt. Sie können den Clip ganz einfach in der IDE einrichten und dann mit ActionScript beliebig viele erstellen. Genau das erledigen wir in wenigen Schritten.

Schritt 10: Eltern verstehen es einfach nicht

In ActionScript verstehen Eltern es tatsächlich. Verzeihen Sie den niedlichen Titel.

Die Sache mit Anzeigeobjekten ist, dass, wenn Sie eines als untergeordnetes Objekt hinzugefügt haben, sei es über die IDE oder über Code, dieses Objekt über ein übergeordnetes Objekt verfügt. Im Gegensatz zu Ihren oder meinen Eltern können Sie die Eltern-Kind-Beziehung jedoch nach Bedarf beliebig neu zuweisen. Dazu gehören nicht nur die Methoden addChild und removeChild, die wir uns bereits angesehen haben, sondern auch die Idee des Neu-Parenting. Dies läuft nur darauf hinaus, dass addChild für ein Anzeigeobjekt verwendet wird, das bereits über ein übergeordnetes Objekt verfügt, um es in ein anderes übergeordnetes Objekt einzufügen. Folgendes berücksichtigen. Es wird davon ausgegangen, dass Sie das Box-Symbol in Ihrer Bibliothek haben.

Wenn Sie diesen Film laufen lassen, sehen Sie, was Sie hoffentlich erwartet haben: die Box auf dem Bildschirm. Die Box erbt die von parent1 festgelegte x-Position, da wir sie diesem Sprite als untergeordnetes Element hinzugefügt haben, sodass die Box 100 Pixel vom linken Rand entfernt sein sollte.

Fügen wir nun nach dem Skript, das wir gerade geschrieben haben, Folgendes hinzu:

Führen Sie nun den Film aus, und die Box befindet sich an derselben Stelle. Aber jetzt klicken Sie auf das Kästchen, und es wird sich bewegen! Warum? weil wir es neu erzogen haben. Wir haben parent2 mit einem x von 0 und einem y von 100 gebeten, jetzt das Elternteil der Box zu sein. Dies entfernt implizit die Box von einem Kind zu Parent1. Und sobald parent2 zum Elternteil der Box wird, erbt die Box die Position (zusammen mit allen anderen relevanten Eigenschaften, wie Alpha oder Rotation) von parent2, also sollte sie sich jetzt am linken Rand und 100 Pixel unterhalb von oben befinden.

Diese Idee ist ziemlich mächtig und ermöglicht es Ihnen, Anzeigeobjekte wiederzuverwenden, die Sie sonst zerstören und neu erstellen müssten, was weit weniger effizient ist.

Diese Neuzuordnungstechnik wird wahrscheinlich am häufigsten bei der Verwendung von Loadern verwendet. Ein Loader ist selbst ein Anzeigeobjekt. So können Sie Lader zur Anzeigeliste hinzufügen. Das Loader-Objekt hat als Kind ein weiteres Anzeigeobjekt, das der tatsächlich geladene Inhalt ist. Daher kann es für Sie praktisch sein, einen Loader nur als Ladegerät zu verwenden und den Inhalt des Loaders nach dem Laden in einen anderen Container zu übertragen. Dies würde den Aufwand vermeiden, einen Container (den Loader) zu haben, der ansonsten nichts zur Anzeige hinzufügt. Ein einfaches Beispiel:

Um dies aufzuschlüsseln, erstellen wir zuerst ein Sprite, das letztendlich das geladene Bild enthält.

Dann erstellen wir den Loader, laden ein Bild und fügen den Ereignis-Listener für das COMPLETE-Ereignis hinzu (beachten Sie, dass Loader-Ereignisse nicht dem Loader selbst, sondern der contentLoaderInfo-Eigenschaft des Loaders zugeordnet sind. Es ist seltsam, aber so ist es. Ich habe auch Schwierigkeiten, mich daran zu erinnern, also fühle dich nicht schlecht, wenn du etwas falsch machst).

Die Neuzuordnung erfolgt im COMPLETE-Ereignishandler. Wir können es vorher nicht wirklich tun, also behalte das im Hinterkopf. Aber alles, was wir tun, ist, dem Image-Container Sprite mitzuteilen, dass er das Inhaltsobjekt des Loaders als untergeordnetes Element hinzufügen soll. Der Inhalt ist das untergeordnete DisplayObject des Loaders. Aber ohne diese Zeile zeigt unser Skript das geladene Bild nicht an, da der Loader nie zur Anzeigeliste hinzugefügt wurde. Das Sprite war es jedoch, und so können wir das geladene Bild auch implizit der Anzeigeliste hinzufügen, indem wir es dem Sprite hinzufügen.

Denken Sie daran, dass dies zwar eine nützliche Technik ist, es jedoch keine Regel gibt, die besagt, dass Sie es auf diese Weise tun müssen. Es ist völlig in Ordnung, den Loader einfach zu erstellen und zur Anzeigeliste hinzuzufügen. Aber es wird Zeiten geben, in denen Sie den Container bereits haben und Sie den zusätzlichen Aufwand eliminieren möchten. Oder Sie möchten, dass Sprite beispielsweise buttonMode auf true setzen kann, was Loader nicht kann.

Schritt 11: stage und root

Ein letztes Diskussionsthema, bevor wir zum praktischen Beispiel kommen. Alle Anzeigeobjekte haben eine Eigenschaft namens stage und eine namens root. Wenn Sie mit ActionScript 2 vertraut sind, klingen diese Konzepte bekannt, wurden jedoch in ActionScript 3 überarbeitet.

Die Stage ist der größte, großartigste, böseste aller DisplayObjectContainer. Die Stage stellt im Grunde die Leinwand dar, auf der der Flash Player zeichnet.  Alle anderen MovieClips, Bilder, Texte usw. werden schließlich der Bühne hinzugefügt. Als Ergebnis gibt es nur eine Stufe. Und alle sichtbaren Anzeigeobjekte haben als übergeordnetes Element, sei es direkt oder durch eine Abstammungslinie von übergeordneten Elementen, die Stage.

Die stage-Eigenschaft ermöglicht den Zugriff auf diesen speziellen Container. Warum spielt es eine Rolle? Denn mit der Bühne bekommt man die Mausposition relativ zum Flash Player, im Gegensatz zum jeweiligen Anzeigeobjekt. Sie können der Bühne auch Ereignis-Listener wie MOUSE_MOVE oder MOUSE_UP hinzufügen. Bedenken Sie:

Probieren Sie es aus (vorausgesetzt, Sie haben die Box noch in Ihrer Bibliothek). Bewegen Sie nun Ihre Maus...beobachten Sie, wo die Spuren auftreten. Das Bühnenereignis wird die ganze Zeit stattfinden. Das Box-Ereignis tritt jedoch nur auf, wenn sich die Maus tatsächlich über der Box befindet. Wenn Sie also generell auf Mausbewegungen achten möchten und nicht nur, wenn sich die Maus in einem bestimmten Bereich befindet, sollten Sie auf die Bühne lauschen.

Die root ist ein weiterer besonderer Behälter, aber nicht annähernd so speziell wie die Stage. Die Root ist eigentlich die Hauptzeitleiste einer bestimmten SWF-Datei. Wenn Sie ein Flash-Dokument erstellen, wird Ihnen immer eine Zeitleiste angezeigt, die die Zeitleiste der obersten Ebene darstellt. Sie können jederzeit weitere MovieClips mit mehr Zeitachsen erstellen und diese in einer Hierarchie verschachteln, aber es gibt immer eine Hauptzeitachse. Dies ist die Root.

Es kann jedoch nicht immer nur eine Root geben. Wenn Sie zwei SWFs erstellen und eine in die andere laden, bedeutet root unterschiedliche Bedeutungen, je nachdem, wo auf den Code verwiesen wird. Das heißt, jede der beiden SWFs hat ihre eigene Hauptzeitleiste, und root in SWF 1 bezieht sich auf die Hauptzeitleiste von SWF 1, während sich root in SWF 2 auf die Hauptzeitleiste von SWF 2 bezieht.

Es kann also nur eine Stufe geben, aber es gibt so viele Roots wie aktuell geladene SWFs.

Bevor wir dieses Thema verlassen, ist es sehr wichtig, einen Punkt zu verstehen: Die Stage- und Root-Eigenschaften eines Anzeigeobjekts werden nur festgelegt, wenn sich das Anzeigeobjekt in der Anzeigeliste befindet. Ist dies nicht der Fall, sind diese Eigenschaften null. Zum Beispiel:

Der erste Trace gibt [object Stage] aus, während der zweite null ist, da sprite2 nie zur Anzeigeliste hinzugefügt wurde.

Dies ist eine häufige Fehlerquelle bei komplizierteren Projekten. Manchmal erwarten Sie, dass die Stage festgelegt ist, das Objekt jedoch noch nicht zur Anzeigeliste hinzugefügt wurde, sodass Sie Nullreferenzfehler erhalten.

Nur etwas zu beachten.

Schritt 12: Unsere Mission

Wir werden ein Projekt annehmen, das uns mit so vielen realen Themen der Anzeigeliste vertraut macht, wie ich in einem einzigen Tutorial unterbringen könnte. Wir arbeiten hauptsächlich im Code, erstellen aber auch eine Bildkachel mit Assets in der Flash-IDE.

Das eigentliche Stück wird eine einfache Bildwand sein, die Bilder extern lädt (mit Loadern), Neuzuordnung und Tiefentausch verwendet und die Bühne für ein Mausbewegungsereignis darstellt. Es ist eine Menge, die in etwa 10 Schritten abgedeckt werden muss, also lassen Sie uns loslegen.

Eine Starter-FLA wird in der Download-ZIP-Datei bereitgestellt, die Grafiken bereitstellt und nur darauf wartet, dass Sie sie codieren. Aber diese nächsten Schritte werden beim Grokken der Struktur des Artworks hilfreich sein. Auch wenn Sie den Download-Weg wählen, lesen Sie sich die nächsten Schritte durch, um besser zu verstehen, was wir zu tun versuchen.

Schritt 13: Bildkachel einrichten

Erstellen Sie zunächst ein neues AS3-Flash-Dokument. Speichern Sie es in einem Ordner, der diesem Projekt gewidmet ist.

Stellen Sie die Bühnengröße 600 x 430 ein. Fügen Sie einen Hintergrund hinzu, wenn Sie möchten.

Zeichnen Sie nun eine quadratische Grundfläche von etwa 200 x 200 Pixeln. Wählen Sie es aus und drücken Sie F8, um es in einen MovieClip zu verwandeln. Platzieren Sie den Registrierungspunkt in der Mitte.

Stellen Sie sicher, dass die Optionen "Erweitert" angezeigt werden, und aktivieren Sie die Option "Für ActionScript exportieren". Benennen Sie die Klasse "ImageTile" (meine Präferenz, den Klassennamen mit dem Symbolnamen abzugleichen, aber es ist keine Voraussetzung). Da wir keine Zeitleisten verwenden werden, ändern Sie außerdem die Base-Klasse von "flash.display.MovieClip" in "flash.display.Sprite". Drücken Sie OK, und schließen Sie das Dialogfeld "Definition für diese Klasse konnte nicht gefunden werden".

Sie benötigen keine Instanz dieses Symbols auf der Bühne. Ein praktischer Trick besteht darin, es zur einfachen Bearbeitung auf der Bühne zu platzieren, jedoch auf einer eigenen Führungsebene, damit es nicht mit der SWF-Datei exportiert wird

Schritt 14: Fügen Sie der Bildkachel eine Beschriftung hinzu

Wechseln Sie in den Bearbeitungsmodus des ImageTile-Symbols, falls Sie noch nicht dort sind. Fügen Sie über der Grafikebene eine neue Ebene hinzu. Fügen Sie im unteren Teil des Quadrats ein dynamisches Textfeld hinzu. Geben Sie ihm die folgenden Eigenschaften:

  • Ein Instanzname von "caption_tf"
  • Eine kleine Schriftgröße
  • Mittig ausgerichtet
  • Zeicheneinbettung von "Basic Latin"
  • weiße Farbe
  • Ein Glühfilter mit schwarzer Farbe und hoher Unschärfe

Schritt 15: Erstellen Sie ein Raster aus Kacheln

Beginnen Sie damit, Ihr Skript vorzubereiten. Erstellen Sie in der Hauptzeitleiste (achten Sie darauf, den Bearbeitungsmodus der Kachel zu verlassen), eine neue Ebene, nennen Sie sie etwa "Code", sperren Sie sie und klicken Sie auf das erste Bild. Drücken Sie dann F9, um das Bedienfeld „Aktionen“ zu öffnen.

Wir beginnen damit, einen Container für die Kacheln zu erstellen:

Dann instanziieren wir ein Array von Bild-URLs:

Und zuletzt über dieses Array schleifen und eine neue ImageTile für jede URL instanziieren:

Hier ist eine ziemlich Standardschleife. Dies wird Ihnen bekannt vorkommen, wenn Sie AS3 101 Teil 4 an Arrays und AS3 101 Teil 5 an Loops durchgearbeitet haben, daher gehe ich nicht ins Detail. Aber kurz gesagt, wir durchlaufen das Array und erstellen für jede Iteration eine neue ImageTile. Wir fügen die Fliese dem Wand-Sprite hinzu. Und wir positionieren die Kachel mit ein wenig Mathematik, die im Array-Tutorial behandelt wurde. Im Wesentlichen können wir die Indexnummer nehmen und den Spaltenindex mithilfe von Modulo und den Zeilenindex durch Teilen und Abrunden erhalten. Multiplizieren Sie diese mit einem Abstandsbetrag (210 in unserem Fall; unsere Kacheln sind 200 Pixel im Quadrat, so dass wir einen Abstand von 10 Pixeln dazwischen haben) und Sie erhalten ein Rasterlayout. Wir müssen jedoch x und y um 110 Pixel versetzen, da sich x/y auf den Registrierungspunkt bezieht, der sich in der Mitte des Kunstwerks befindet.

Schritt 16: Legen Sie die Beschriftung fest

Wir halten die Dinge einfach (aber weniger praktisch), indem wir einfach die Beschriftung des Dateinamens des Bildes machen. In der Schleife, die die Kacheln einrichtet, erhalten wir einen Verweis auf das darin vergrabene TextField und legen seine Texteigenschaft fest. Fügen Sie dies am Ende der Schleife hinzu:

Zuerst erhalten wir den Wert aus dem Array.

Dann kommt unser Thema Anzeigeliste: Wir bringen ein Kind aus einem Container, indem wir auf seinen Namen verweisen. Wir haben ihm den Instanznamen "caption_tf" gegeben, damit wir diesen Namen verwenden können. getChildByName gibt jedoch ein DisplayObject zurück, bei dem es sich um einen beliebigen Typ eines tatsächlichen Anzeigeobjekts handelt. Wir möchten speziell ein TextField, denn wenn wir versuchen würden, die text-Eigenschaft für ein anderes Anzeigeobjekt festzulegen, würde ActionScript das nicht sehr gefallen.

Also machen wir etwas, das Sie die meiste Zeit tun müssen, wenn Sie getChildByName verwenden: Wir müssen es casten. Dadurch wird ActionScript nur darüber informiert, dass die Sprache zwar so definiert wurde, dass getChildByName als ein Typ zurückgegeben wird, wir jedoch wissen, dass es sich um einen anderen Typ handelt, und wir können ihn als solchen behandeln. Das as-Schlüsselwort nimmt den Operanden auf der linken Seite und wirft ihn als Denopernden auf der rechten Seite. Also bekommen wir das Kind beim Namen und stellen sicher, dass es sich um ein TextField handelt. Beachten Sie, dass das as-Schlüsselwort null zurückgibt, wenn das zu würfelnde Objekt nicht in den angegebenen Typ umgewandelt werden kann. Wenn getChildByName also tatsächlich ein Bitmap-Objekt zurückgab, wären wir in Schwierigkeiten.

Schließlich nehmen wir dieses TextField und legen den imageName in die text-Eigenschaft ein.

Führen Sie den Film jetzt aus, und Sie sollten sehen, dass jede Kachel eine eindeutige Beschriftung hat.

Schritt 17: Laden Sie die Bilder

Jetzt können wir die Bilder laden. Dies wird ein wenig Einrichtung in Anspruch nehmen. Zuerst benötigen wir ein Wörterbuch, um zu verfolgen, welcher Loader zu welchem ImageTile passt. Erstellen Sie vor der Schleife ein Wörterbuch:

Deklarieren Sie auch vor der Schleife eine weitere Variable, die jedes Mal wiederverwendet werden soll, wenn wir einen Loader in der Schleife erstellen:

Und in der Schleife erstellen Sie den Loader und laden Sie das Bild, nach allem anderen im Schleifentext:

Beachten Sie, dass ich meine Bilder in einem Unterordner namens "images" behalte und daher dem Namen, der aus dem Array kommt, einen relativen Pfad zu diesem Ordner voranfüge.

Ich verwende auch das Wörterbuch, um Loader zu verfolgen, den wir gerade mit dem ImageTile erstellt haben, den wir auch in dieser Iteration erstellt haben. Durch die Verwendung des Loaders als Schlüssel im Wörterbuch, der ImageTile als Wert können wir leicht die passende ImageTile finden, wenn der Loader den Ladevorgang beendet hat. Eine Diskussion darüber, wie dies funktioniert, finden Sie in meinem AS3 101-Tutorial zum Verzweigen.

Bevor wir dies testen können, müssen wir diese onImageLoad-Funktion schreiben.

Schritt 18: Anzeigen der geladenen Bilder

Erstellen Sie außerhalb der Schleife eine neue Funktion, um das COMPLETE-Ereignis des Loaders zu behandeln:

Folgendes geschieht: Wir erhalten das Ziel des Ereignisses, das contentLoaderInfo-Objekt des Loaders, und verwenden seine Loader-Eigenschaft, um den Loader abzurufen.

Wir verwenden dann diesen Loader als Schlüssel zur tileMap, um eine ImageTile wieder herauszuholen. Hier werden wir wieder gecastet, da Werte nicht typisiert sind, die aus Wörterbüchern (und Arrays und Objekten) stammen. Nicht unbedingt notwendig, aber schön zu tun (siehe mein Tutorial zu Variablen für diese Diskussion).

Dann erhalten wir den Inhalt des Loaders als Bitmap. Dies ist das Anzeigeobjekt, das geladen wurde und das wir in der ImageTile platzieren. Wir müssen jedoch x und y einstellen, da 0/0 in der Mitte der Kachel steht.

Dann bitten wir ImageTile, das übergeordnete Element des Bildes zu sein.

An diesem Punkt ist der Loader eine leere Shell und nicht wirklich wiederverwendbar, also lassen wir ihn fallen und setzen den Dictionary-Wert auf null. Dadurch werden die Verweise auf den Loader entfernt und der Garbage Collector lässt ihn in den Papierkorb werfen.

Wenn Sie den Film jetzt ausführen, werden Sie sehen, dass wir Bilder laden! Aber die Bildunterschriften werden jetzt vertuscht...

Schritt 19: Zeigen Sie die Lodaed-Bilder an der richtigen Stelle an

Was ist mit den Bildunterschriften passiert? Nun, denken Sie daran, wie Tiefen funktionieren und wie addChild funktioniert. Wir haben bereits zwei Kinder in der Kachel: den Formhintergrund und das Textfeld. Die Form sollte in tiefe 0, das Textfeld in tiefe 1 sein. Wenn wir addChild verwenden, wird das Anzeigeobjekt oben im Stapel platziert, sodass sich das Bild jetzt in der Tiefe 2 befindet und die Form und das Textfeld verdeckt.

Wie können wir dem begegnen? Natürlich mit addChildAt. Auf diese Weise können wir die Tiefe angeben, in der das Objekt hinzugefügt werden soll. Alles" "im Weg" gleitet einfach in der Stapelreihenfolge nach oben.

Die einfache Lösung besteht darin, dies zu ändern:

Dazu:

Während dies funktioniert, ist es nicht ideal. Wenn wir jemals zurückgehen und die Dinge so umgestalten würden, dass eine andere Form oder ein anderes Textfeld oder Bild beteiligt wäre, hätten wir mehr Elemente im Stapel, und wer weiß, ob 1 die richtige Tiefe mehr wäre? Stattdessen werden wir uns ein wenig mehr engagieren und sicherstellen, dass sich das Bild immer hinter dem Textfeld befindet. Wir erhalten zuerst die Tiefe des Textfelds, fügen dann das Bild in der Tiefe ein und schieben das Textfeld nach oben.

Versuchen Sie stattdessen Folgendes:

Beachten Sie, dass wir uns dieses Mal nicht um die TextField-Besetzung kümmern. Wir verwenden diese Variable nur, um an getChildIndex zu übergeben, das mit jedem DisplayObject funktioniert. getChildIndex gibt dann die Tiefe dieses untergeordneten Kindes zurück, das wir dann in addChildAt verwenden. Engagierter, aber theoretisch flexibler.

Schritt 20: Verschieben der Wand

OK, wir sind ziemlich weit gekommen, aber wir verpassen immer noch eine Reihe von Bildern. Hier richten wir eine "Auto-Scrolling" -Wand ein. Je weiter Sie Ihre Maus nach rechts bewegen, desto weiter nach links bewegt sich die Wand. Sie haben das wahrscheinlich schon einmal gesehen. Wir werden uns für ein einfaches Scrollen kümmern. Diese können schicker werden, indem sie Lockerungsbewegungen und so weiter hinzufügen, aber unser Fokus liegt hier darauf, der Bühne ein Ereignis hinzuzufügen, also gehen wir Fleisch und Kartoffeln.

Da wir die Wand verschieben, ist es sinnvoll, dort anzufangen. Wie bereits erwähnt, sollten wir, wenn wir auf eine MOUSE_MOVE Veranstaltung hören, sie wirklich von der Bühne aus hören, sonst wird es Bereiche geben, in denen wir die Veranstaltung nicht bekommen. Also müssen wir das Ereignis zur Bühne hinzufügen, und es spielt keine Rolle, wie wir auf die Bühne kommen, aber da die Wand der Sprite ist, der an der Veranstaltung interessiert ist, lassen Sie uns das verwenden. Diese Zeile kann an beliebiger Stelle außerhalb der Schleife der Bildladefunktion hinzugefügt werden. Kann es auch am Ende kleben:

Lassen Sie uns nun die Ereignishandlerfunktion schreiben:

Das ist viel Mathematik! Aber hier ist, was los ist: Wir nehmen die gesamte Bühnenbreite und subtrahieren die Wandbreite. Da die Wand breiter ist als die Bühne, erhalten wir eine negative Zahl. Die Zahl ist zufällig der x-Wert, den die Wand haben müsste, um ihren rechten Rand mit dem rechten Rand der Bühne in Einklang zu bringen. Aber wir ziehen 20 von der Bühnenbreite ab, weil wir ein bisschen Marigin wollen. Die Zahl platziert also tatsächlich den rechten Rand der Wand 20 Pixel links vom rechten Rand der Bühne.

Dann nehmen wir die x-Position der Maus und teilen sie durch die Breite der Bühne. Dies gibt uns einen Prozentwert von 0 bis 1, von wo sich die Maus befindet, von links (0) nach rechts (1).

Wenn wir die Breitendifferenz mit diesem Prozentsatz multiplizieren, erhalten wir einen Wert, der die Wand irgendwo zwischen 0 und dem negativen Maximum platziert.

Dabei haben wir zwei wertvolle Eigenschaften der Bühne genutzt. Wir können die Breite (und Höhe) der Bühne und die Position der Maus in Bezug auf die Bühne erhalten. Für viele Arten von Interaktivität sind diese Informationen der Schlüssel.

Schritt 21: Bringen Sie die fokussierten Bilder nach vorne

Als letzten Schliff lassen wir jedes Bild größer werden, wenn es angeklickt wird. Das ist eigentlich ein bisschen involviert. Es beinhaltet nicht nur die Skalierung des angeklickten Bildes, sondern auch die Verwaltung seiner Tiefe, so dass es sich über den anderen Kacheln besteht.

Fügen wir zunächst ein Klickereignis hinzu. Fügen Sie irgendwo im Schleifentext Folgendes hinzu:

Schreiben Sie dann den Handler:

Hier nutzen wir erneut das Ereignissystem, um eine einzelne Funktion mehreren Ereignissen zuzuordnen. Wir müssen nur das Ziel der Veranstaltung erreichen und darauf arbeiten. Wir stellen die Skala nur auf etwas größer als normal ein.

Testen Sie es, und Sie werden auf zwei Probleme stoßen. Einer ist, dass die Bilder größer sind, aber sie sind nicht wirklich in der "Front". Sie befinden sich hinter bestimmten Fliesen, je nachdem, wie die Fliesen an der Wand hinzugefügt wurden. Lassen Sie uns das beheben, indem wir die Tiefen verwalten.

Dies lässt die Wand einige Tiefenmanipulationen an ihren Kindern durchführen. Wir möchten, dass sich die Kachel oben im Stapel befindet, und wir können diesen Index erhalten, indem wir herausfinden, wie viele Kinder sich in der Wand befinden (wall.numChildren) und 1 subtrahieren (dies ist so, als ob ein Array mit einer Länge von 10 die Indizes 0 bis 9 belegt hat). Bei Verwendung von setChildIndex wird die Stapelreihenfolge neu gemischt, sodass die angegebene Kachel wie oben angezeigt wird.

Das andere Problem ist, dass Bilder groß bleiben, sobald Sie auf ein anderes Bild klicken. Wir könnten eine Variable nachverfolgen, um das aktuell ausgewählte Bild zu behalten, und diesen Wert verwenden, um die Kachel wieder auf den Normalwert zu verkleinern (siehe AS3 101, der erste Teil, um dies zu tun). Aber lassen Sie uns unsere Display-Listen-Muskeln trainieren und einfach das oberste Display-Objekt erhalten und dieses verkleinern.

Zuerst erhalten wir das oberste Element, indem wir getChildAt verwenden und den höchsten Index angeben, genau wie bei setChildIndex. Dann setzen wir die Skalierungswerte wieder auf 1. Wir müssen nur sicherstellen, dass das Element auf normal skaliert wird, bevor wir das neue Element für die Skalierung festlegen.

Schritt 22: Glätten

Ein kleiner Bonus-Tipp: Sie werden feststellen, dass die Skalierung nicht sehr freundlich zu den Bildern ist. Es gibt eine sehr einfache Möglichkeit, dies zu beheben: Aktivieren Sie die Glättung der Bitmaps. In onImageLoad:

Das wars! Bitmap-Objekte verfügen über eine Glättungseigenschaft, die standardmäßig false ist. Schalten Sie es ein, sobald es geladen ist, und Sie können es mit größerer Genauigkeit drehen und skalieren, als Sie es sonst könnten (das Glätten verursacht ein wenig Overhead beim Rendern, aber das ist ein Opfer, das Sie wählen können, wenn es angemessen ist).

Schritt 23: Abschluss

Jetzt, da Sie wissen, was Sie wissen, sehen Sie vielleicht, wie einige unserer früheren AS3 101-Projekte durch die Verwendung der Display-Listenprogrammierung vereinfacht werden können. Das Grid-Spiel aus AS3 101 Teil 4 (auf Arrays) hätte viel einfacher zu erstellen sein können, wenn wir die Kachel ActionScript zur Verfügung gestellt und unsere Iteration genutzt hätten, um sie in die Anzeigeliste aufzunehmen. Glauben Sie mir, es war tatsächlich schmerzhaft für mich, mich bei diesem Thema zurückzuhalten. Aber jetzt bist du bereit für die ganze Wahrheit! Wenn Sie einige Übungen wünschen, gehen Sie zurück durch unsere vorherigen Tutorials in der AS3 101-Serie und sehen Sie, ob Sie den angegebenen Code verbessern können, um die programmatische Anzeigelistenmanipulation zu nutzen. Die meisten von ihnen können.

Besser noch, hoffentlich können Sie sehen, wie die Einführung dieser Techniken in Ihre eigenen Projekte das Leben von Ihnen, dem ActionScript-Entwickler, vereinfachen kann. Gib es zu, das bist du!

Als nächstes in unserer Serie wird mit XML gearbeitet. Die Kombination von XML mit Array und Loops sowie dynamischen Anzeigeobjekten führt zu einem sehr flexiblen Satz von Werkzeugen. Bleiben Sie dran; der große Lohn kommt!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.