Schnelleinstieg in die ActionScript 3.0-Programmierung
Das Ereignismodell
Flash-Film "Events" (Im PDF bitte diesen Direktlink aufrufen!)
Sie haben nun bereits mit Ereignissen und mit der Anzeigeliste, mit Anzeigeobjekten und interaktiven Anzeigeobjekten gearbeitet. Falls Ihnen noch AS2 bekannt war, haben Sie schon festgestellt, dass sich AS3 völlig geändert hat. Auch das Ereignismodell gehört dazu.
Die Ereignis-Weitergabe
Der übliche Programmierweg ist: Ich sage einem Objekt, es soll auf ein Ereignis "lauschen" - und sobald es eintrifft, in einer bestimmten Weise reagieren (Funktion ausführen). Aber es soll die Reaktion keinem "weitersagen", sondern als Zielobjekt alleine handeln. Das haben Sie bisher getan beim Ansprechen von Objekten.
Ereignisse, wie zum Beispiel das Klicken mit der Maus im Film, können jedoch auf Befehl auch an andere Objekte im Film automatisch "durchgereicht" werden.
Was bedeutet das in der Praxis?
Es bedeutet eine Erleichterung beim Ansprechen von Objekten: Sie haben bereits mit der Eigenschaft currentTarget von Ereignissen gearbeitet. Damit wird das aktuelle Ziel des Ereignisses angesprochen. Sie erinnern sich noch an den Befehl in der Drag- und Drop-Übung?
event.currentTarget.startDrag();
Mit Nutzung der Ereignisphasen jedoch können Sie auch auf einen Schlag alle "Kinder", also eingebetteten Clips, von übergeordneten Clips aus erreichen - ohne diese explizit einzeln mit Instanznamen aufrufen zu müssen. Auch das kann sehr vorteilhaft sein in der Praxis. Ich zeige es Ihnen am Beispiel eines interaktiven Maskeneffekts.
Legen Sie eine neue Datei an. Erstellen Sie ein Rechteck und konvertieren Sie es in ein Movieclip-Symbol. Vergeben Sie den Namen "Quader".
Aktivieren Sie das Deko-Werkzeug/Rasterfüllung. Entnehmen Sie die Einstellungen dem Screenshot. Als Kachel 1 wählen Sie unter "Bearbeiten..." den zuvor erstellen Movieclip "Quader". Ziehen Sie die Tapete aus Quadern dann von links oben nach rechts auf der obersten Ebene auf.
Markieren Sie alle Elemente oder klicken Sie das Schlüsselbild an und konvertieren Sie so die Objekte zu einem Movieclip (F8), den Sie "Maske" o. ä. nennen.
Dekotapete in Symbol konvertieren
MC Maske besteht also, in meinem Beispiel, aus einer Tapete von 20x16 Instanzen des Symbols "Quader" - also 320 Movieclips.
Wallpaper aus Movieclips
Legen Sie eine weitere Ebene mit Inhalt nach Wahl an, die von der Tapete verdeckt wird. Bei Maus Over soll nun jedes Element der Tapete ausfaden - also transparent werden und damit das Bild dahinter nach und nach freigestellt werden.
Wie würden Sie nun, mit dem bisherigen Kenntnisstand, vorgehen?
Sie würden zunächst im Symbolbearbeitungsmodus von MC "Gruppe" jeder einzelnen Instanz, als Ziel der Mausaktion, einen Instanznamen vergeben, z. B. quader1_mc, quader2_mc usw.
Anschließend würden Sie auf der Hauptzeitleiste jeder einzelnen Instanz innerhalb des Containers einen Maus-EventListener zuweisen, Beispiel:
maske_mc.quader1_mc.addEventListener(MouseEvent.MOUSE_OVER, ausFaden);
Abschließend würden Sie die Funktion definieren - praktischerweise nur einmal, da Sie die Eigenschaften "currentTarget" ja schon kennen und anwenden können.
function ausFaden(e:MouseEvent):void {
e.currentTarget.alpha=0.2;}
So weit - so gut. Diese Vorgehensweise ist in Ordnung und funktioniert. Nachteil: Ich müsste 320 Instanzen erst einmal benennen und dann jeweils einen eigenen EventListener mit der Funktion ausFaden hinzufügen. Damit wäre ich dann einen halben Tag beschäftigt...
Diese Arbeit können Sie sich dank der Ereignis-Weitergabe in ActionScript 3 ersparen!
Geben Sie dem Movieclip "Maske" den Instanznamen "maske_mc".
Instanzname
Da der MC Maske der übergeordnete Clip der einzelnen Quader ist, weisen Sie nun nur dem Elternclip einen EventListener hinzu und gehen auf die enthaltenen Instanzen im Code gar nicht weiter ein.
Schreiben Sie also auf der Hauptzeitleiste in Bild 1:
maske_mc.addEventListener(MouseEvent.MOUSE_OVER, ausFaden);
target
Die Eigenschaft currentTarget, die Sie schon kennengelernt haben, spricht nur das aktuelle Ereignisziel an. Die Eigenschaft target dagegen macht den "Weg frei" für alle verschachtelten Objekte in tieferen Ebenen. Schreiben Sie also als Funktion:
function ausFaden(e:MouseEvent):void {
e.target.visible=false;
}Wenig Code -große Wirkung
Das Ereignis MOUSE_OVER wird per target sowohl an den Elternclip weitergegeben, als auch an alle darin enthaltenen "Kinder"-Clips - die entsprechend reagieren. Automatisch ohne eine weitere Zeile Code.
Testen Sie Ihren Film!
Interaktives Verhalten aller Objekte in MC "Maske"
Übrigens funktioniert das Unsichtbarmachen mit folgenden drei möglichen Anweisungen:
e.target.visible=false; e.target.alpha=0; maske_mc.removeChild(DisplayObject(e.target));
Erstellen Sie eine eigene interaktive Anwendung, die die Ereignisweitergabe per target und mindestens 100 interaktiven Einzelobjekten nutzt.
Veröffentlichen Sie den SWF Film und die HTML Datei und speichern Sie die beiden Dateien in Ihrem Übungsordner.
Fortführende Infos zur Ereignisverarbeitung in AS3 finden Sie auf der Website von Adobe.
Die Anzeigeliste
In Flash ActionScript 3 arbeiten Sie mit Anzeigeobjekten, die hierarchisch angeordnet sind. Die Anzeigeliste einer ActionScript-Anwendung enthält alle in der Anwendung sichtbaren Objekte. Sie haben dabei mit Klassen aus dem Paket flash.display gearbeitet - dort finden Sie die meisten relevanten Objekte für die Arbeit mit Anzeigeobjekten.
Immer ganz oben - ohne Ihr Zutun - automatisch von Flash angelegt: Die "Bühne":
stage ist der äußere Container Ihres Films, der alle Elemente enthält.
Sie können der stage EventListener hinzufügen, die auf Mausverhalten reagieren. Klicks auf "leere" Bereiche in der Bühne/Film werden registriert. Stage deckt praktisch die gesamte Leinwand Ihres Films ab.
root ist die Hauptzeitleiste eines SWF Films. Jeder MovieClip hat die Eigenschaft root, die auf die Hauptzeitleiste verweist.
DisplayObject = Alle Anzeigeobjekte, z. B. Movieclips, Grafiken, Videos, Textfelder
DisplayObjectContainer = Anzeigeobjekte, die wiederum Anzeigeobjekte enthalten können, z. B. Stage, MovieClips, Sprites, Loader.
Die Anzeigeliste ist so etwas wie der hierarchische Baum Ihrer Objekte - der zwar nicht in der Praxis sichtbar ist, jedoch als Grundverständnis im Hinterkopf präsent sein sollte.
Im nächsten Abschnitt lernen Sie am praktischen Projekt, wie Sie der Anzeigeliste dynamisch Anzeigeobjekte hinzufügen - und wieder entfernen.
Dies ist eine Leseprobe
Möchten Sie den Beitrag komplett lesen? Dann werden Sie Probemitglied und testen Sie akademie.de 14 Tage kostenlos!
Auf Flash ActionScript 3.0 erfahren Sie mehr über diesen Beitrag und die weiteren Leseproben.
Weitere Informationen finden Sie auf unserer Infoseite zur Mitgliedschaft und in unseren AGB.
Ich bin bereits Mitglied
