Beispiel für die Zeichnungs-API: Algorithmic Visual Generator

Flash Player 9 und höher, Adobe AIR 1.0 und höher

Mit der Beispielanwendung „Algorithmic Visual Generator“ werden auf der Bühne mehrere „Satelliten“ oder Kreise in einer kreisförmigen Umlaufbahn gezeichnet. Folgende Funktionen werden dabei erläutert:

  • Zeichnen einer Grundform mit dynamischem Erscheinungsbild mithilfe der Zeichnungs-API

  • Verknüpfen der Benutzerinteraktion mit den Eigenschaften einer Zeichnung

  • Animation durch Löschen der Bühne und Neuzeichnen der Objekte für jedes Einzelbild

Im Beispiel im vorherigen Abschnitt wurde ein einzelner Satellit mithilfe des Event.ENTER_FRAME -Ereignisses animiert. Dieses Beispiel wird mit dieser Beispielanwendung erweitert, indem ein Bedienfeld mit mehreren Schiebereglern hinzugefügt wird, mit denen die visuelle Anzeige mehrerer Satelliten unmittelbar aktualisiert wird. In diesem Beispiel wird der Code als externe Klassen formalisiert und die Erstellung des Satelliten in eine Schleife eingebettet. Dabei wird jeweils ein Verweis auf die einzelnen Satelliten in einem satellites -Array gespeichert.

Die Anwendungsdateien für dieses Beispiel finden Sie unter www.adobe.com/go/learn_programmingAS3samples_flash_de . Die Anwendungsdateien befinden sich im Ordner „Samples/AlgorithmicVisualGenerator“. Dieser Ordner enthält die folgenden Dateien:

Datei

Beschreibung

AlgorithmicVisualGenerator.fla

Die Hauptanwendungsdatei in Flash Professional (FLA).

com/example/programmingas3/algorithmic/AlgorithmicVisualGenerator.as

Die Klasse mit den Hauptfunktionen der Anwendung, einschließlich Zeichnen der Satelliten auf der Bühne und Reagieren auf Ereignisse über das Bedienfeld zum Aktualisieren der Variablen, die sich auf das Zeichnen der Satelliten auswirken.

com/example/programmingas3/algorithmic/ControlPanel.as

Eine Klasse, mit der die Benutzerinteraktion mit mehreren Schiebereglern verwaltet sowie bei auftretender Benutzerinteraktion Ereignisse ausgelöst werden.

com/example/programmingas3/algorithmic/Satellite.as

Eine Klasse, die das Anzeigeobjekt repräsentiert, das sich in einer Umlaufbahn um einen zentralen Punkt dreht und die Eigenschaften des aktuellen Zeichnungsstatus enthält.

Festlegen der Listener

Mit der Anwendung werden zunächst drei Listener erstellt. Mit dem ersten Listener wird ein über das Bedienfeld ausgelöstes Ereignis überwacht, das angibt, dass die Neuerstellung der Satelliten erforderlich ist. Mit dem zweiten Listener werden Änderungen überwacht, die an der Größe der Bühne der SWF-Datei vorgenommen werden. Mit dem dritten Listener werden die einzelnen Bilder in der SWF-Datei überwacht und mithilfe der doEveryFrame() -Funktion neu gezeichnet.

Erstellen der Satelliten

Nach dem Einrichten der Listener wird die build() -Funktion aufgerufen. In dieser Funktion wird zunächst die clear() -Funktion aufgerufen, mit der das satellites -Array geleert wird und alle vorherigen Zeichnungen auf der Bühne gelöscht werden. Dies ist erforderlich, da die build() -Funktion jedes Mal neu aufgerufen werden kann, wenn über das Bedienfeld eine entsprechende Anweisung gesendet wird, z. B. nach dem Ändern der Farbeinstellungen. In diesem Fall müssen die Satelliten entfernt und neu erstellt werden.

In der Funktion werden dann die Satelliten erstellt. Dabei werden die ursprünglichen für die Erstellung erforderlichen Eigenschaften festgelegt, z. B. die position -Variable, die an einer zufällig gewählten Position in der Umlaufbahn startet, oder die color -Variable, die sich in diesem Beispiel nach dem Erstellen des Satelliten nicht mehr ändert.

Nach dem Erstellen der einzelnen Satelliten wird dem satellites -Array jeweils ein entsprechender Verweis hinzugefügt. Beim Aufruf der doEveryFrame() -Funktion werden alle Satelliten in diesem Array aktualisiert.

Aktualisieren der Satellitenposition

Die doEveryFrame() -Funktion ist das Kernstück des Animationsvorgangs in der Anwendung. Sie wird bei jedem Bild mit einer Rate aufgerufen, die der Bildrate der SWF-Datei entspricht. Die Animation wird durch die geringfügige Änderung der Variablen in der Zeichnung umgesetzt.

Mit dieser Funktion werden zunächst alle vorherigen Zeichnungsobjekte gelöscht und die Hintergrundobjekte neu gezeichnet. Anschließend werden die einzelnen Satellitencontainer durchlaufen und die position -Eigenschaft jedes Satelliten inkrementiert sowie die Eigenschaften radius und orbitRadius aktualisiert, die durch die Benutzerinteraktion über das Bedienfeld möglicherweise geändert wurden. Schließlich wird die neue Position der Satelliten durch Aufruf der draw() -Methode der Satellite-Klasse aktualisiert.

Beachten Sie, dass der Zähler i nur bis zur visibleSatellites -Variablen inkrementiert wird. Dies ist darauf zurückzuführen, dass der Benutzer die Anzahl der angezeigten Satelliten über das Bedienfeld begrenzen kann. In diesem Fall dürfen die übrigen Satelliten in der Schleife nicht neu gezeichnet, sondern müssen ausgeblendet werden. Dies erfolgt in einer Schleife, die unmittelbar auf die Schleife folgt, mit der die Elemente gezeichnet werden.

Nach dem Abschluss der doEveryFrame()-Funktion wird die jeweilige Position der festgelegten visibleSatellites -Objekte auf dem Bildschirm aktualisiert.

Reagieren auf Benutzerinteraktionen

Benutzerinteraktionen erfolgen über das Bedienfeld, das über die ControlPanel-Klasse verwaltet wird. Mit dieser Klasse wird ein Listener mit den entsprechenden minimalen, maximalen und Standardwerten für die einzelnen Schieberegler festgelegt. Wenn der Benutzer diese Schieberegler verschiebt, wird die changeSetting() -Funktion aufgerufen. Mit dieser Funktion werden die Eigenschaften des Bedienfelds aktualisiert. Wenn die Anzeige aufgrund der Änderungen neu erstellt werden muss, wird ein entsprechendes Ereignis ausgelöst, das dann in der Hauptanwendungsdatei verarbeitet wird. Mit jeder Änderung an den Einstellungen für das Bedienfeld wird über die doEveryFrame() -Funktion jeder Satellit mit den aktualisierten Variablen neu gezeichnet.

Weitere Anpassungen

Bei diesem Beispiel handelt es sich lediglich um einen Grundbauplan für das Erzeugen von visuellen Effekten mit der Zeichnungs-API. Mit verhältnismäßig wenigen Codezeilen wird eine interaktive Anwendung erstellt, die recht komplex wirkt. Dennoch kann dieses Beispiel durch geringfügige Änderungen noch wesentlich erweitert werden. Es folgen einige Vorschläge:

  • Beispielsweise kann in der doEveryFrame() -Funktion der Farbwert der Satelliten inkrementiert werden.

  • In der doEveryFrame() -Funktion kann der Radius der Satelliten über einen bestimmten Zeitraum verkleinert oder vergrößert werden.

  • Der Satellitenradius muss nicht kreisförmig sein. Mithilfe der Math-Klasse kann die Bewegung beispielsweise entlang einer Sinuskurve erfolgen.

  • Es kann die Kollision von Satelliten mit anderen Satelliten abgefragt werden.

Die Zeichnungs-API kann als Alternative zum Erstellen visueller Effekte in der Flash-Authoring-Umgebung verwendet werden, um Grundformen zur Laufzeit zu erstellen. Darüber hinaus können visuelle Effekte in einer Vielfalt und einem Umfang erzielt werden, die manuell nicht möglich sind. Mithilfe der Zeichnungs-API und elementaren Mathematikkenntnissen können Sie in ActionScript unzählige unerwartete Formen kreieren.