Heimkino

Mit ActionScript, Macromedias an ECMAScript angelehnter Skriptsprache, lassen sich komplexe Interaktionsmöglichkeiten in Flash-Filmen realisieren. Dabei kann ActionScript mehr als auf gängige Ereignisse wie einen Mausklick oder Tastendruck reagieren. Der Sprachumfang lässt von einfachen Sprungbefehlen bis hin zur objektorientierten Programmierung kaum Wünsche offen. Erfahrenere Programmierer finden sich in ActionScript leicht zurecht, da es viele Ähnlichkeiten zu anderen Sprachen wie JavaScript aufweist. Aber auch programmierunerfahrene oder -uninteressierte Flash-Benutzer können relativ schnell Programme erstellen, ohne ActionScript wirklich verstehen zu müssen.

Das wichtigste Fenster bei der Arbeit mit der Scriptsprache, das so genannte Aktionen-Bedienfeld, öffnet entweder der Menübefehl ‘Fenster > Aktionen’ oder die Taste <F9>. Eine Dropdown-Liste im Aktionen-Bedienfeld ermöglicht den direkten Sprung zu allen im aktuellen Bild verfügbaren Bild- und Objekt-Aktionen. Flash bietet dem Benutzer zwei verschiedene Oberflächen zur Eingabe von ActionScript-Befehlen an. Der normale Modus ist für Benutzer ohne Programmiererfahrung gedacht. Sie können die gewünschten Befehle aus einer Liste per Mausklick auswählen und deren Parameter über eine Eingabemaske festlegen, was die Zahl möglicher Fehlerquellen bei der Programmierung minimiert.

Im ‘Expertenmodus’ kann der Benutzer die gewünschten ActionScript-Befehle dagegen wie in einem normalen Texteditor eingeben. Dabei ist er nicht auf die vorgegebenen Sprachkonstrukte beschränkt, sondern kann auch eigene Objektklassen und Funktionen definieren. Den gewünschten Eingabemodus wählt er entweder über das Optionsmenü des Aktionen-Bedienfeldes oder über die Tastenkombination (PC/Mac) <Strg> + <Shift> + <E>/<Cmd> + <Shift> + <E> (Experten-Modus) beziehungsweise <Strg> + <Shift> + <N>/<Cmd> + <Shift> + <N> (normaler Modus).

Wichtige Helferlein aus der Toolbox

In beiden Eingabemodi steht die Aktionen-Toolbox zur Verfügung, die alle vorhandenen ActionScript-Befehle thematisch sortiert auflistet. Auch ‘Experten’ können ihren Aktionen auf diese Weise per Doppelklick Befehle hinzufügen. Codehinweise für Aktionen, Eigenschaften und Ereignisse ersparen nicht nur Tipparbeit, sondern minimieren auch das Fehlerrisiko, indem sie die exakte Syntax für den gewünschten Befehl liefern. Mit einem Buttonklick - oder über die Tastenkombination <Strg> + <T>/<Cmd> + <T> - lässt sich die Syntax des aktuellen Skripts schnell überprüfen.

Mehr Informationen über die einzelnen ActionScript-Befehle liefert das Referenz-Fenster: Neben einer genauen Beschreibung des Befehls finden sich hier Codebeispiele, die der Anwender bei Bedarf in das eigene Skript kopieren kann. Im Prinzip enthält es die gleichen Informationen wie das ActionScript-Verzeichnis in der Online-Hilfe, ist allerdings wesentlich handlicher, da es sich als Bedienfeld in der Flash-Umgebung andocken lässt.

Ein weiteres nützliches Werkzeug ist der ‘Pin’. Ein Klick auf diesen Button bewirkt, dass das aktuelle Skript im Aktionen-Bedienfeld sichtbar bleibt, auch wenn der Benutzer in ein anderes Bild in der Zeitleiste springt oder ein anderes Objekt auf der Bühne auswählt.

Bereits bei der Eingabe von ActionScripts zeigt das Bedienfeld mögliche Fehler an: Syntax-Fehler unterlegt Flash im normalen Modus rot, und ein Tooltipp zeigt die Fehlermeldung an, wenn die Maus sich über dem rot markierten Bereich befindet. Beide Eingabemodi unterlegen außerdem Befehle gelb, die zu der in den Veröffentlichungseinstellungen gewählten Flash-Version inkompatibel sind. Enthält beispielsweise ein Film, der als Flash5-SWF veröffentlicht werden soll, MX-Befehle, die nicht in das Flash-5-Format konvertierbar sind, erscheinen diese Befehle gelb markiert.

Wer ActionScript lieber im Texteditor seiner Wahl bearbeitet, kann vorhandene Skripts aus dem Bedienfeld in eine Textdatei exportieren. Aktionen in externen Textdateien können entweder während des Authoring in das Aktionen-Bedienfeld importiert oder zur Laufzeit per include-Befehl eingebunden werden.

Elemente mit Aktionen versehen

Verschiedene Elemente in einem Flash-Film lassen sich mit Aktionen versehen: Schlüsselbilder in der Zeitleiste sowie Instanzen von Schaltflächen und MovieClips auf der Bühne. Befehle zum Anhalten oder Abspielen des Films sowie Sprungbefehle, die den generellen Ablauf des Flash-Films steuern, liegen im Normalfall in Schlüsselbildern in der Zeitleiste. Eine Aktion führt die Software jedes Mal aus, wenn der Abspielkopf das betreffende Bild erreicht. Daher ist es empfehlenswert, Initialisierungen und Funktionsdefinitionen in ein Bild des Films zu legen, das nicht innerhalb einer Schleife liegt und stets wiederholt wird. Schlüsselbilder, die Bildaktionen enthalten, kennzeichnet in der Zeitleiste zusätzlich ein ‘a’.

Der Übersichtlichkeit halber ist es oft sinnvoll, Bildaktionen in eine eigene Ebene in der Zeitleiste zu legen. Auf diese Weise weiß der Anwender immer, wo er die Programmierung eines Flash-Films suchen muss - dies ist besonders wichtig für diejenigen, die sich in fremden Anwendungen zurechtfinden müssen. Das SnakeMe-Spiel beispielsweise platziert unterschiedliche Arten von ActionScript auf verschiedenen Ebenen in der Zeitleiste.

Aktionen, die eine Zeitleiste steuern, können als Parameter den Zielpfad zur gewünschten Zeitleiste erhalten (Hauptzeitleiste, MovieClip-Instanz). start() beziehungsweise stop() spielen die Zeitleiste ab beziehungsweise halten sie an. Die Befehle gotoAndPlay und gotoAndStop springen zuerst in ein bestimmtes Bild oder zu einer Bildmarkierung und spielen den Film weiter ab respektive halten ihn an. Dem Befehl getURL, der eine URL öffnet, kann der Benutzer wie in HTML als Parameter das gewünschte Ziel-Fenster im Browser übergeben: _self, _blank, _parent, _top.

Schlüsselbilder um Aktionen ergänzen

Bildaktionen lassen sich nur Schlüsselbildern hinzufügen. Ist das gewünschte Bild noch kein Schlüsselbild, kann es durch Betätigen von <F7> dazu werden. Da in der Aktionen-Ebene in der Zeitleiste keine grafischen Objekte liegen sollten, sind hier die Schlüsselbilder frei wählbar, ohne dass die Animationen anderer Ebenen eine Beeinträchtigung erfahren. Hat man das gewünschte Schlüsselbild in der Zeitleiste ausgewählt, kann man über <F9> das Aktionen-Bedienfeld öffnen und die gewünschten Befehle entweder aus der Toolbox auswählen oder frei eingeben. Falls das ausgewählte Bild kein Schlüsselbild ist, wird die Aktion dem vorhergehenden in der Zeitleiste zugewiesen.

Ereignis-Handeler sind ein Muss

Nicht nur Bilder in der Zeitleiste, auch Objekte auf der Bühne - Instanzen von Schaltflächen und MovieClips - lassen sich mit Aktionen versehen. Meist handelt es sich um Skripts zur Behandlung von Maus- oder Tastaturereignissen. Um einer Objektinstanz eine Aktion hinzuzufügen, wählt man sie auf der Bühne aus und öffnet das Aktionen-Bedienfeld. Diese Zuweisung funktioniert nur mit Instanzen auf der Bühne, nicht mit Objekten in der Bibliothek.

Objekt-Aktionen müssen immer in einen passenden Ereignis-Handler eingebettet sein: on(Ereignisname) bei Schaltflächen beziehungsweise onClipEvent-Handler bei MovieClips. Listing 1 zeigt Beispiele für Schaltflächen- und MovieClip-Aktionen.

on (press) {
         _level0.stop();
         _root.ins_hilfe.gotoAndStop("hilfe");
}

onClipEvent (load) {
        myKeyListener = new Object();
        myKeyListener.onKeyDown = function(){
           var myKeyCode = Key.getCode();
           _level0.snakeKeyDown(myKeyCode);
        };
       Key.addListener(myKeyListener);
}

Während eines Films gibt es bestimmte Ereignisse wie das Laden oder Entladen von MovieClips oder der Wechsel in ein anderes Bild. Weitere treten dagegen nur auf, wenn der Anwender sie auslöst. Dazu gehören Maus- und Tastaturereignisse. Empfängt ein Film oder ein MovieClip Daten von einer externen Quelle, löst das ebenfalls ein Ereignis aus.

Zwei Arten des Event Handling

Diese Events können als Auslöser für Aktionen dienen. ActionScript kennt zwei Arten des Event Handling: Zum einen bieten sich die Schaltflächen- und MovieClip-Aktionen on (ereignis) beziehungsweise onClipEvent(ereignis) an. Eine Alternative dazu sind die Event-Handler-Methoden der MovieClip- und Button-Objekte. Die Aktion onClipEvent lässt sich nur MovieClip-Instanzen hinzufügen, die während des Authoring auf der Bühne platziert wurden. Für solche, die die Methode attachMovie zur Laufzeit erzeugt hat, gilt das nicht. Man kann die Methode allerdings auch einem Bild in der Zeitleiste zuordnen. Damit lassen sich sowohl MovieClips und Buttons steuern, die während des Authoring auf der Bühne platziert wurden als auch zur Laufzeit hinzugefügte MovieClips und Schaltflächen.

Jedes Textfeld auf der Bühne ist automatisch eine Instanz eines TextField-Objekts. Beim Erzeugen eines Textfeldes kann man der Instanz im Eigenschaftsinspektor einen Namen zuweisen. Dieser Instanzname wiederum lässt sich in ActionScript-Befehlen dazu nutzen, über die Objekte TextField beziehungsweise TextFormat die Eigenschaften des Textfeldes oder dessen Formatierung zu ändern.

Ein TextField-Objekt hat die gleichen ActionScript-Eigenschaften wie ein MovieClip-Objekt. Zusätzlich bietet es Methoden, um Text zu setzen, auszuwählen und zu verändern. Änderungen von Zeichen- und Absatzformatierungen übernimmt das TextFormat-Objekt. Textfelder lassen sich entweder über den Text-Eigenschaftsinspektor oder per ActionScript ändern.

Mit Hilfe seines Variablen- oder Instanznamens kann man einem Textfeld Inhalte inklusive HTML-Tags zuweisen. Flash behält die per ActionScript zugewiesene Richt-Text-Formatierung bei.

Weist man einem Textfeld eine Variable zu, zeigt es immer deren aktuellen Wert an. Früher war dies die einzige Möglichkeit, den Wert einer Variablen zu verfolgen, inzwischen übernimmt der Debugger diese Aufgabe.

ActionScript kann Variablen nicht nur intern an Bereiche eines Flash-Films übergeben, sondern auch an andere Anwendungen - beispielsweise an ein Programm auf dem Server, das Werte speichert wie Kundendaten in einer Datenbank oder Highscores von Spielen. Den Inhalt von Variablen kann man auch überschreiben, indem man neue Werte aus einer externen Datenquelle holt.

ActionScript testen und Fehlersuche

Alle Aktionen - egal ob Bild-, Schaltflächen- oder MovieClip-Aktionen - lassen sich über den Menüpunkt ‘Steuerung > Film testen’ ausprobieren. Treten Fehler auf, erscheinen sie im Anzeige-Fenster. Die Online-Hilfe enthält eine komplette Liste aller Fehlermeldungen. Wer auf Fehlersuche ist, sollte Filme über den Menüpunkt ‘Steuerung > Fehlersuche’ abspielen, da sich in dem Fall automatisch der Debugger öffnet. Mit Hilfe von Breakpoints kann der Programmierer sich an Fehler herantasten, indem er das Skript an einer bestimmten Stelle anhalten lässt und es schrittweise weiter ausführt.

Der Debugger zeigt nicht nur eine Übersicht der aktuell vorhandenen Zeitleisten-Objekte, sondern auch eine Liste der Eigenschaften und Variablen der betreffenden MovieClips. Man kann auch Variablen ‘zur Beobachtung’ auswählen, die Flash in einer gesonderten Liste darstellt. So muss der Benutzer nicht zwischen einzelnen MovieClip-Instanzen hin- und herspringen, um mehrere Variablen gleichzeitig im Auge behalten zu können.

Der SnakeMe-Flashfilm besteht aus zwei Szenen: dem Intro und dem eigentlichen Spiel. Bereits das Intro muss Aktionen beinhalten, damit der Film so lange stoppt, bis der Spieler auf den Startbutton drückt. Nach der Animation zum Bildaufbau hält der Befehl stop() die Hauptzeitleiste an. Aktionen in diesem Bild führt das Skript nur einmal aus. MovieClips auf der Bühne beeinträchtigt das nicht. Auf diese Weise kann der Startbutton weiter blinken, da dessen Zeitleiste nicht angehalten wurde.

SnakeMe - die Programmierung

Drückt der Spieler auf den Startbutton, bekommt die Hauptzeitleiste durch die Aktion start() den Befehl, mit dem Film fortzufahren. Der Intro-Screen verschwindet, und das Spielfeld baut sich auf. Am Ende von ‘Intro’ braucht man keinen expliziten Sprungbefehl in die Szene ‘Game’, da Flash automatisch eine Szene nach der anderen abspielt. Deren Reihenfolge legt der Programmierer im Szenen-Bedienfeld fest (von oben nach unten).

Ausgangsposition über Variablen festlegen

Das Spiel benötigt insgesamt nur fünf Bilder:

• Im ersten Bild initialisiert das Skript die Anfangswerte des Spiels.
• Im zweiten aktualisiert es die Schlange und andere Spielelemente auf der Bühne (Listing 2).
• Das dritte Bild dient zum Verlangsamen der Animation. Bewegt sich die Schlange zu schnell, lässt sie sich kaum noch steuern, und der Spielspaß lässt erheblich nach.
• Im vierten Bild bekommt die Hauptzeitleiste den Befehl, zurück zum zweiten zu springen: gotoAndPlay(‘loop’);
• Das fünfte Bild erscheint, wenn der Spieler seine drei Leben verloren hat und somit das Spiel beendet ist: ins_hilfe.gotoAndStop(‘game_over’); stop();

if ((ins_food._x == ins_kopf._x) && (ins_kopf._y == ins_food._y)) {
     food = 0;
     score = Number(score) + (int(snakelength / 5) * 5 + 5);
    duplicateMovieClip("ins_body","ins_body" add snakelength, snakelength);
    snakelength += 1;
     posx[snakelength-2] = posx[snakelength-3];
     posy[snakelength-2] = posy[snakelength-3];
}

Im ersten Bild der Szene ‘Game’ muss das Skript die Spielvariablen mit Anfangswerten versehen: Die Schlange braucht eine Ausgangsposition und eine anfängliche Bewegungsrichtung, das Futter muss positioniert werden und der Punktestand wird auf 0 gesetzt. Die Wertzuweisung sieht in ActionScript aus wie in vielen anderen Sprachen. Lokale Variablen, deren Gültigkeitsbereich auf den aktuellen Codeblock beschränkt ist, kennzeichnet das Schlüsselwort var. Alle anderen sind für die jeweilige Zeitleiste gültig und müssen von anderen Zeitleisten aus entsprechend angesprochen werden:

var tempName = "name" ;
_level0.spielerName = tempName;

Erfolgt die Deklaration einer Variable in einer MovieClip-Instanz, muss sie von anderen Zeitleisten aus über diese Instanz angesprochen werden:

ins_movieclip.variablenname = "neuer Wert";

Im zweiten Bild positioniert das Beispiel Schlangenkopf und -körper sowie das Futter immer wieder neu. Für solche wiederkehrenden Aufgaben bieten sich Bildaktionen an, deren Aufruf in Schleifen erfolgt.

Die Position des Schlangenkopfes ändert das Skript abhängig von der aktuellen Bewegungsrichtung bei jedem Schleifendurchlauf. Je nach Richtung variiert die horizontale oder die vertikale Position des Schlangenkopf-MovieClips.

Den Schlangenkopf über die Tastatur steuern

Damit der Spieler die Schlange steuern kann, muss das Spiel auf Tastatureingaben reagieren und die Bewegungsrichtung abhängig vom Wert der gedrückten Taste ändern. Ein solches Skript, dessen einzige Aufgabe darin besteht, aufzupassen, ob ein bestimmtes Ereignis eintritt, heißt ‘Listener’. Den für das SnakeMe-Spiel benötigen Tastatur-Listener zeigt das Beispiel in Listing 1.

Da es nicht sinnvoll ist, den Flash-Film auf Tastatureingaben reagieren zu lassen, solange das Programm das zu steuernde Objekt nicht geladen hat, wird der Tatstatur-Listener in der Aktion des Schlangenkopf-MovieClips hinzugefügt. Auf Tastendruck (onKeyDown) ruft der Listener für die Bearbeitung des Event die Funktion snakeKeyDown auf. Die Definition dieser Funktion liegt - zusammen mit anderen allgemein verwendeten Funktionen - im Bildskript in einer eigens für Funktionsdefinitionen vorgesehenen Ebene in der Zeitleiste. snakeKeyDown benötigt als Parameter den Code der gedrückten Taste. Dies ist nicht der ASCII-Code des Zeichens, vielmehr sind die KeyCodes der Cursortasten in ActionScript-Konstanten definiert: Key.UP, Key.DOWN, Key.RIGHT und Key.LEFT enthalten zwar die tatsächlichen KeyCode-Zahlenwerte, sind aber für den Programmierer leichter verständlich als kryptische Ziffern.

Erweiterungen bringen Spannung ins Spiel

Abhängig vom Tastencode setzt das Script die neue Bewegungsrichtung für den Schlangenkopf. Diese Bewegungsrichtung definieren zwei Werte, left und up, die entweder auf 0, 1 oder -1 stehen können. Ist eine der Variablen 0, hat sie keine Bedeutung für die tatsächliche Richtung. Steht eine auf 1, gilt der gesetzte Wert als Bewegungsrichtung: Ist left gleich 1, bewegt sich der Schlangenkopf nach links, ist up gleich 1, wandert die Schlange nach oben. Ein negativer Wert steht für die entgegengesetzte Richtung: left gleich -1 etwa bewegt die Schlange nach rechts. Steht einer der Werte auf 1 oder -1, setzt das Skript den anderen Wert auf 0, da es ihn für die Bestimmung der Richtung nicht benötigt.

Das SnakeMe-Spiel kann zwar schon gespielt werden, aber vollständig ist es noch nicht. Verschiedene Schwierigkeitsstufen machen es interessanter. Höhere Level könnten beispielsweise Hindernisse enthalten, die das Futter sammeln, erschweren. Die Ergebnisse ließen sich in einer Bestenliste auf dem Server speichern. Zurzeit läßt sich die MX-Version von Snakeme nur auf Windows- und Macintosh-Plattformen spielen, ein Linux-Plug-in ist jedoch in Vorbereitung.

Der dritte und letzte Teil des Tutorials wird anhand einiger Beispiele einen Ausblick darauf bieten, was sich mit der neuen Version Flash MX anfangen lässt.

Regina Müller
arbeitet als Multimedia-Programmiererin bei der a.f.i.m gmbh in München.

Teil 1 des Tutorials

Teil 2 des Tutorials

'SnakeMe'-Spiel im FLA-Format für Flash 5

'SnakeMe'-Spiel im FLA-Format für Flash 6

<HTML>
<HEAD>
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<TITLE>SnakeMe</TITLE>
</HEAD>
<BODY bgcolor="#CCCCCC">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" 
WIDTH="600" HEIGHT="400" id="snakes_programmierung_final" ALIGN="">
     <PARAM NAME=movie VALUE="snakeme.swf"> 
     <PARAM NAME=quality VALUE=high> 
     <PARAM NAME=bgcolor VALUE=#CCCCCC> 
     <EMBED src="snakeme.swf" quality=high bgcolor=#CCCCCC  WIDTH="600" 
HEIGHT="400" NAME="snakeme" ALIGN="" TYPE="application/x-shockwave-flash" 
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
</BODY>
</HTML>

// Damit der Webserver Flash-Dateien erkennt, muss er richtig konfiguriert
// sein, z.B. durch folgende Zeile in der httpd.conf des Apache

AddType application/x-shockwave-flash .swf

(ka)