öffentlich
Redaktion Druckversion

Flash: Actionscript 3.0

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.

Aufgabe:

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.

Bild vergrößernRasterfüllung

Aufgabe:

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

Aufgabe:

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!

Aufgabe:

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));

Aufgabe:

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.

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

Inhalt

Über die Autorin:

arbeitet seit 1999 als Web- und Flash-Designerin. Das Spezialgebiet der zertifizierten Animatorin sind die Konzeption und Entwicklung interaktiver Designs. Dazu gehört ein tiefes Verständnis dafür, was "unter der Haube" passiert. Schließlich macht die Programmierung ca. 50 Prozent ihrer Arbeit aus. Faszinierend findet Sonja Vieten dabei gerade die Verbindung von Design und interaktiver Programmierung.

Newsletter abonnieren