öffentlich
Redaktion Druckversion

Flash: Actionscript 3.0

Schnelleinstieg in die ActionScript 3.0-Programmierung

Grundlagen ActionScript in Flash CS5

ActionScript ist die Programmiersprache für Flash-Anwendungen. Die Scriptsprache ist englisch, sodass Sie mit Englischkenntnissen bereits einiges von den Anweisungen verstehen können. Die derzeit neueste Version ActionScript 3.0 (AS3) wurde zusammen mit Flash CS3 bereits 2007 veröffentlicht.

Dieser Leitfaden basiert auf der derzeit am weitesten verbreiteten Version Flash Professional CS4, berücksichtigt aber ebenso die neue Version Flash Professional CS5.

Sie können mit Flash CS5 auch ältere in AS2 angelegte Dateien öffnen, weiter bearbeiten und veröffentlichen. Dabei müssen Sie jedoch die AS2-Version der Sprache nutzen und auch bei den Veröffentlichungseinstellungen AS2 einstellen. AS2 und AS3 lassen sich in einem Projekt nicht mischen.

AS3 hat gegenüber AS2 enorme Vorteile: Es wird bis zu dreißigmal schneller ausgeführt als AS2 Anweisungen und ist nun eine objektorientierte Programmiersprache, was der Entwicklung keine Grenzen mehr setzt. Die Anweisungen werden in die Zeitleiste bzw. in Schlüsselbilder auf der Zeitleiste in Flash geschrieben. Das wird - grob gesprochen - auch prozedurale Programmierung genannt. OOP, also die objektorientierte Programmierung, lagert dagegen den Code extern in einzelnen Teilabschnitten bzw. Kapseln, die sich wiederum aufeinander beziehen. Diese Variante ist vorteilhaft für sehr große Projekte, an denen viele Programmierer gleichzeitig arbeiten.

Auf Variante 2 wird im Ansatz kurz am Ende eingegangen. Bis dahin haben Sie einen Überblick über die Sprache gewonnen und können mit dem Schreiben oder Anbinden von selbst geschriebenen so genannten "Klassen" etwas anfangen. Ansonsten sind die Grenzen zwischen den beiden Anwendungsmethoden eher fließend, denn auch Sie lernen, wie Sie mit Klassen und Objekten arbeiten.

Als Flash Designer arbeiten Sie in der Regel in der Flash Professional IDE (Integrated Development Environment/Integrierten Entwicklungsumgebung). Sie brauchen also kein weiteres Programm, sondern können alles mit Flash erledigen. Reine Entwickler arbeiten in der Regel mit einem Programm wie Flex bzw. FlashBuilder, FDT oder anderen Development Tools, da diese auf die Programmierung komplexer Projekte ausgerichtet sind - nicht auf Animation und Design.

Die Inhalte des ersten Teils: "Schnell produktiv arbeiten mit Flash CS4" werden vorausgesetzt. Am praktischen Beispiel werden Sie gleich die Anwendung und die theoretischen Hintergründe lernen.

Vorbereitung

Falls Sie mit einer älteren Flash Professional Version arbeiten, sollten Sie Ihre Version zunächst einmal aktualisieren. Nutzen Sie immer die aktuellste Version, die einige Bugs weniger enthält als die Vorgängerversion. Klicken Sie im Menü > Hilfe > Info zu Flash, um zu erfahren, welche Version Sie haben, und aktivieren Sie im Hilfe-Menü die Option Aktualisieren..., um zum Update- und Downloadbereich von Adobe zu gelangen.

Überprüfung der Version

Aufgabe:

Legen Sie nun eine neue Datei "AS_1.fla" an. Die Größe ist standardmäßig 550 x 400 und wir ändern für diese Übungen nichts an den Dokumenteigenschaften.

Erstellen Sie eine einfache Schaltfläche. Ziel ist, diese Schaltfläche per ActionScript zu verlinken, d. h. auf Klick soll eine externe URL im Browser geöffnet werden.

Übungsdateien

Die Übungsdateien für den ersten Teil des Leitfadens können Sie hier herunterladen:

Übungsdateien1 (zip, ca. 270 KB)

Alternativ ziehen Sie einfach für diese Übung einen vorhandenen Button aus der Schaltflächenbibliothek auf die Bühne und modifizieren diesen nach Belieben im Symbolbearbeitungsmodus.

Schaltflächenbibliothek Ich habe hier eine Instanz von "tube blue" gleich auf meine Bühne gezogen und im Symbolbearbeitungsmodus die Beschriftung modifiziert.

Schaltfläche "tube blue"

Instanznamen

Jedes Kind braucht einen Namen...

Um Objekte per Script zu steuern, müssen Sie diese Ihrem Code erst einmal eindeutig namentlich bekannt machen. Das kennen Sie bereits aus dem Einstiegskurs. Wir vergeben daher nun manuell einen Instanznamen für die Schaltfläche über den Eigenschafteninspektor.

Instanznamen sind ein Herzstück bei der Programmierung mit Flash. Logisch - denn jedes Objekt, das Sie ansprechen, muss auch wissen, dass es angesprochen wird - und zwar eindeutig.

Aufgabe:

Nennen Sie die Instanz: link_btn.

Instanzname

Der Name des Symbols in der Bibliothek ist für die spätere Programmierung unerheblich. AS3 richtet sich nur nach dem Instanznamen, den Sie für ein Objekt vergeben. Verwenden Sie dabei keine Sonderzeichen, Umlaute, Zahlen zu Beginn und Bindestriche.

Benennen Sie Instanzen mit der jeweiligen Endung für den Typ:

Name_btn (für Schaltflächen)

Name_mc (für Movieclips)

Name_txt (für Textfelder)

Das Benennen per Unterstrich und der Abkürzung für den Symboltyp ist keine Pflicht, jedoch ist es später übersichtlicher in Ihrem Code und erleichtert Ihnen die Auswahl der Anweisungen innerhalb des Aktionen-Fensters. Daher - machen Sie sich diese Suffixe zur Gewohnheit.

Aktionen eingeben

Öffnen Sie zunächst das Aktionenfenster per Shortcut F9 oder über das Menü> Fenster > Aktionen - und lassen Sie es griffbereit in der Nähe. Per Klick auf der grauen obere Leiste können Sie alle Fenster schnell auf- und zuklappen.

AS3-Anweisungen können Sie nur auf gefüllten oder leeren Schlüsselbildern auf der Zeitleiste ablegen - nicht mehr "in" oder auf ausgewählte Objekte selbst - wie es früher möglich war!

Probieren Sie es: Markieren Sie den Button auf der Bühne und versuchen Sie nun, Code einzugeben. Es kommt folgende Meldung im AS Editor:

Keine Aktion auf ausgewählte Objekte

Daher: Legen Sie eine Ebene auf der Zeitleiste nur zur Ablage des Scripts an und markieren Sie das Bild auf der Zeitleiste, bevor Sie die Aktionseingabe starten. Üblicherweise befindet sich diese Ebene ganz oben und wird "AS" oder "script" benannt. Auf dieser Ebene befinden sich nur leere Schlüsselbilder, die dann ausgewählt und mit allen Aktionen für Ihren Film versehen werden können.

Scripte auf eigener Ebene

Bild vergrößernActionScript-Werkzeugleiste/-BibliothekDer Editor rechts im Aktionenfenster dient zur Scripteingabe. Links davon befindet sich die Script-Bibliothek, auch AS Werkzeugleiste genannt. Ich finde den Ausdruck AS Bibliothek jedoch passender. Sie können sich dort per Klick bis in die untersten Hierarchien durchklicken. Sehen Sie ganz oben links das ActionScript-Version-Menü?

Versichern Sie sich, dass es auf Version 3 steht. Denn AS3- können Sie nicht mit AS2-Anweisungen mischen. Achten Sie bei den Veröffentlichungseinstellungen darauf, dass AS3 als Scriptversion eingestellt ist. Wenn Sie ein neues Dokument über Menu>Datei>Neu... erstellen und dabei als Dokumentversion AS3 wählen, ist automatisch alles richtig voreingestellt.

Es gibt die Möglichkeit, aus der Bibliothek links die richtigen Befehle zusammenzuklicken oder herauszuziehen, sie per Scripthilfe einzugeben - oder gleich selbst zu schreiben. Wir benutzen hier die 3. Variante, weil Sie so die Befehle von Grund auf lernen und die Scripthilfe kompliziert und damit wenig hilfreich ist.

Aufgabe:

Probieren Sie es. Aktivieren Sie die Scripthilfe im Aktioneneditor, per Klick auf das Zauberstab-Icon. Öffnen Sie dann in der AS Bibliothek unter flash.display/SimpleButton/Methoden die Methoden für Schaltflächen und doppelklicken Sie auf den 1. Befehl "add EventListener".

Methoden für Buttons

Nun haben Sie die entsprechenden Eingabefelder, die Ihnen doch auch nicht weiterhelfen, oder?

Eingabehilfen für AS Scripte

Adobe hat das wohl auch erkannt und mit Flash CS5 die neuen Codefragmente eingeführt. Sie öffnen sich über das entsprechende Fenster oder gleich über das Aktionenfenster.

Aufgabe:

Markieren Sie die Schaltfläche auf der Bühne. Klicken Sie dann auf das Icon "Codefragmente" im Aktionenfenster. Wählen Sie im Fenster "Codefragmente" unter dem Ordner "Aktionen" die erste Anweisung per Doppelklick aus.

Codefragmente

Flash legt eine Aktionsebene mit dem fertigen Code an. Sie brauchen lediglich die URL abzuändern und schon wäre die Schaltfläche fertig programmiert. Die Codefragmente beinhalten die wichtigsten Befehle und erleichtern Ihnen den Einstieg.

Wir schreiben hier jedoch zum Lernen jeglichen Code selbst, sodass Sie besser verstehen, was Sie genau da eigentlich tun. Später werden Sie zum Lernen ebenfalls viel mit bereits vorhandenem Code arbeiten und dabei lernen Sie, diesen zu verstehen, abzuändern und auch von Grund auf selbst zu schreiben, falls notwendig.

Die anderen kleinen Icons in der oberen Leiste im Aktionenfenster stellen Helferlein dar, die Sie bereits im ersten Teil: "Schnell produktiv arbeiten mit Flash CS4" kennengelernt haben.

Aufgabe:

Löschen Sie, falls vorhandenen, jeglichen Code aus dem Aktionenfenster. Starten Sie im Aktionenfenster gleich ganz oben mit der Eingabe des Ziels Ihrer Aktion link_btn.

Und nun? Früher öffnete sich automatisch das Optionsmenü für Objektmethoden. Warum? Weil Flash an dem angehangenen Suffix _btn erkennt, dass es sich um eine Schaltfläche handelt. Nach Setzen des Punktes wurde die Auswahl angeboten.

Bei CS5 ist das leider nicht mehr der Fall. Dennoch können Sie mit dem Shortcut STRG + Leertaste Code Hints hinter dem Punkt öffnen und wenn Sie beginnen, den notwendigen Befehl addEventListener zu schreiben, wird dieser Befehl nach den ersten Zeichen angeboten und Sie brauchen nur zu klicken, um auszuwählen.

Der Nachteil dabei ist, dass Sie eine Gesamtauswahl angeboten bekommen, die nicht auf das Objekt bezogen ist.

Code Hints für Buttons

Das Optionsmenu wird nicht mehr angezeigt? Löschen Sie den Punkt/Klammer und setzen Sie diese noch einmal. Schon haben Sie wieder das Optionsmenu parat.

Wenn Sie mit weiteren Buttons, Movieclips und Events arbeiten und auf die bequeme Codehilfe in CS5 nicht verzichten wollen, müssen Sie die Anweisungen entsprechend ergänzen.

Beispiel:

Der folgende Codeblock ist also optional und momentan nur für die Erleichterung bei der Codeeingabe relevant.

var link_btn:SimpleButton;
var events:MouseEvent;
var symbol_mc:MovieClip;

Dabei werden die entsprechenden Import-Anweisungen automatisch eingefügt. Was die Begriffe Klasse, var und import bedeuten, werden Sie später noch lernen.

Als Abgrenzung (Delimeter) wird im Code immer die Punkt-Syntax benutzt, ohne Leerzeichen dahinter. Das bedeutet, Objektname und Anweisung werden durch einen Punkt getrennt. Dabei dürfen keine Leerzeichen verwendet werden.

Schrägstriche werden Sie in ActionScript vergeblich suchen. Es sei denn, Sie referenzieren den konkreten Pfad zu einer HTML-Seite, die sich öffnen soll.

Ereignisse

Natürlich können Sie den Befehl auch selbst schreiben. Dabei müssen Sie jedoch auf die genaue Groß- und Kleinschreibung für dieses interne Schlüsselwort achten. Sobald es blau dargestellt wird, haben Sie alles richtig geschrieben! Mit der Zeit und mit Übung erkennen Sie schon an den Farben, ob Sie Ihren Code richtig geschrieben haben:

Blau steht für nicht änderbare Flash-interne Schlüsselwörter und Befehle.

Grün markiert Text, den Sie selbst in Anführungszeichen gesetzt eingeben.

Schwarz steht für Bezeichnungen, die Sie selbst vergeben.

Grau steht für Kommentare innerhalb des Scriptes.

Unter dem Menü > Bearbeiten > ActionScript können Sie Farben und das Format ändern.

In Ihrem Editor sollte nun also stehen:

link_btn.addEventListener

Sie fügen Ihrem Objekt damit einen "Zuhörer" hinzu, der auf ein bestimmtes Ereignis hin "lauscht" - und sobald es zutrifft - eine noch näher zu definierende Funktion ausführt.

Sie finden die Methode addEventListener separat in der AS3 Bibliothek auch unter
flash.display/SimpleButton/Methoden. Diese Methode steht fast allen Objekten in Flash zur Verfügung. Methoden sind im Grunde auch Funktionen.

EventListener hinzufügen

Beispiel:

Die Maussteuerungen durch den Anwender sind MouseEvents. Es gibt TimerEvents, mit denen wir später noch arbeiten werden, ebenso lernen Sie noch das KeyboardEvent kennen, das auf die Tastaureingaben reagiert. Sie finden die Ereignisse in der AS3 Bibliothek unter flash.events.

Das konkrete Ereignis und die Funktion, die daraufhin ausgeführt werden soll, werden nun in die runden Klammern, getrennt durch eine Komma, geschrieben. Das Prinzip ist immer gleich, für jegliche Objekte in Flash.

OBJEKT.addEventListener(EREIGNIS TYP, FUNKTION);

Code:

link_btn.addEventListener(MouseEvent.CLICK, meinLink);

In diesem Fall ist das Ereignis ein MouseEvent/Mausereignis. Hinter dem Punkt definieren Sie konkret, um welches Mausereignis genau es sich handelt. Hier um einen Klick.

Nach dem Komma geben Sie die Bezeichnung für die Funktion ein, die als Reaktion auf das Ereignis ausgeführt werden soll. Der Bezeichner für die Funktion ist frei wählbar und sollte für Sie sinnvoll benannt sein.

Auch hier gilt: Wenn Sie ein Maus-Ereignis abändern möchten, z. B. zu einem Rollover, dann löschen Sie alles inklusive Punkt hinter MouseEvent. Denn sobald Sie den Punkt neu setzen, erkennt der Editor, dass Sie nun eine Eigenschaft eingeben und zeigt Ihnen automatisch das Kontextmenu für alle MouseEvents.

Scrollen Sie durch die Liste und wählen Sie CLICK aus.

Funktionen

Funktionen sind Codeblöcke, die erst dann ausgeführt werden, wenn sie gebraucht bzw. aufgerufen werden. Einmal definiert stehen Sie dauerhaft in Ihrem Film zur Verfügung und können von den verschiedensten Stellen aufgerufen werden. Auch ist es möglich, mehrere Objekte die gleiche Funktion ausführen zu lassen. Sie können Funktionen selbst definieren und an beliebiger Stelle aufrufen.

Beispiel: Funktion schreiben und aufrufen

function meineFunktion() {
//Anweisung
//Anweisung
}
//Funktion aufrufen, Anweisungen werden ausgeführt
meineFunktion();

Beispiel: Flash-interne Funktionen aufrufen

Die Methode addEventListener() ist im Grunde auch eine Funktion. Allerdings eine objektspezifische von Flash vorgegebene Funktion.

Sie kennen die Funktion stop();, mit der Sie den Abspielknopf auf der Zeitleiste anhalten.
Dies sind Funktionen, die Flash bereits bekannt sind. Sie müssen also nicht erst noch eine konkrete Anweisung dazu schreiben - sie wenden Sie einfach an.

Die runde Klammer ist leer und enthält keine Argumente. Dennoch muss die leere Klammer immer mitgeschrieben werden.

Eine Funktion mit einem erforderlichem Argument innerhalb der runden Klammer wäre z. B. die Zeitleistenmethode/Funktion:

gotoAndStop(Bildnummer);

Nun müssen Sie die Funktion meinLink genauer definieren. Funktionen sind in der Regel Codeblöcke, die erst dann ausgeführt werden, wenn sie gebraucht bzw. aufgerufen werden.

Aufgabe:

Schreiben Sie unter Ihre bereits vorhandene Zeile, mit einer oder zwei Zeilen Abstand:

function meinLink(event) {
//Anweisung folgt
}

  • Funktionen beginnen mit dem Schlüsselwort function,

  • gefolgt von einem Leerzeichen,

  • gefolgt vom Funktionsnamen,

  • gefolgt von (optionalen) zusätzlichen Argumenten in der runden Klammer,

  • gefolgt von konkreten Anweisungen innerhalb geschweifter Klammern.

  • Innerhalb der geschweiften Klammern können umfangreiche Anweisungen stehen, auch wiederum ineinander verschachtelt. Achten Sie darauf, dass Sie alle geöffneten Klammern auch wieder schließen - sonst gibt es eine Fehlermeldung.

In den runden Klammern übergeben wir der Funktion die Information, dass es sich hier um ein Ereignis handelt. Das ist zwingend erforderlich.

Aufgabe:

Löschen Sie in der runden Klammer das Schlüsselwort event und testen Sie noch einmal. Sie erhalten eine Fehlermeldung des Compilers, die Ihnen sagt, dass ein Argument erwartet wird. Argument ist eine andere Bezeichnung für Parameter. Wenn Sie diese beiden Begriffen hören, dann hängen sie mit Funktionen und meistens mit den Inhalten in der runden Klammer zusammen.

Aufgabe:

Schreiben Sie nun das, was auf Mausklick geschehen soll, in die geschweiften Klammern.

function meinLink(event) {

trace("gedrückt");

}

In den geschweiften Klammern steht momentan lediglich ein so genannter flashinterner trace();-Befehl. An der leeren runden Klammer erkennen Sie nun schon, dass es sich um eine Funktion handeln muss. Das notwendige Argument ist in dem Fall Text, den Sie zu Testzwecken eingeben können. Text, wie schon erwähnt, bitte in Anführungszeichen setzen.

"trace();"-Befehle sind nur im Testmodus aktiv und für das Ausgabefenster bestimmt. Im späteren veröffentlichten Film werden nicht gelöschte trace-Meldungen nicht angezeigt.

Aufgabe:

Ausgabefenster Testen Sie den Film. Auf Klick erscheint im Ausgabefenster die Meldung "gedrückt". Der Button funktioniert bereits! Ihre Funktion wird also erst dann ausgeführt, wenn der Mausklick erfolgt ist.

Strikte Schreibweise

Da wir uns hier gleich die strikte und genaue Schreibweise angewöhnen, sagen wir im Parameter der Funktion nun, um welchen Ereignistyp es sich genau handelt, per Doppelpunkt. Sie zitieren also das Ereignis aus dem EventListener der Schaltfläche.

function meinLink(event:MouseEvent){
trace("gedrückt");
}

Möglich sind diese drei abkürzenden Schreibweisen für das Schlüsselwort event:

- e
- evt
- event
Entscheiden Sie sich für eine Schreibweise und bleiben Sie dabei.

Das Schlüsselwort void wird zudem der Funktion angehangen. Void steht dafür, dass keine Rückgabewerte eines bestimmten Typs in der Funktion berücksichtigt werden.

Die Funktion lautet also komplett:

function meinLink(evt:MouseEvent):void {
trace("gedrückt");
}

Diese Schreibweise wiederholt sich im Grunde ständig, sodass Ihnen das nach einiger Zeit auch nicht mehr wie "Chinesisch" erscheinen wird.

Hier ein Beispiel zum Verständnis, was außer void möglich wäre. Eine Funktion mit einem Rückgabewert könnte so aussehen:

Beispiel:

function summe(zahl:Number):Number {
return 20 + zahl;
}
trace (summe(50));

Wenn Sie diesen Codeblock testweise gleich unter den bisherigen Block schreiben und den Film testen, erscheint im Ausgabefenster "70". Hier wird in der Funktion mit einer variablen Zahl als Parameter gerechnet. Hinter dem Doppelpunkt definieren Sie den Datentyp "Number".

Erst beim Aufruf der Funktion übergeben Sie dieser den konkreten Wert der Variable, hier die Zahl 50. Per return wird die Summe der Rechenoperation zurückgegeben. Wenn Sie hier einen anderen Wert eingeben und den Film testen, wird Ihnen der Zusammenhang klarer. Die Funktion macht immer das Gleiche, nur das Ergebnis ändert sich entsprechend.

Für unserer Zwecke arbeiten wir in diesem Abschnitt nicht mit Rückgabewerten in Funktionen. Schreiben Sie daher immer nur :void.

Browserfenster öffnen

Zurück zu unserem Ausgangscode. Es soll bei Klick auf den Button keine Ausgabemeldung erfolgen, sondern eine Internetadresse geöffnet werden. Löschen Sie also die komplette trace-Zeile und ersetzen Sie die Anweisung durch diesen Zweizeiler:

function meinLink(e:MouseEvent):void {
	var targeturl:URLRequest = new URLRequest ("https://www.akademie.de");
	navigateToURL (targeturl, "_blank");
}

In diesem Fall wird mit den Schlüsselwörtern var und new zunächst eine neue Instanz des URLRequest Objektes (flash.net package) erzeugt, mit dem Namen targeturl.

URLRequest ist, wie der Name schon andeutet, in ActionScript 3.0 für das Ansteuern und Öffnen von Adressen zuständig.

navigate ToURL ist eine allgemeine Methode von Objekten des flash.net Pakets, also auch des URLRequest Objekts.

Wohin soll navigiert werden? Zu dem Ziel, das die Variable targeturl enthält - die Internetadresse. Als weiterer Parameter in der Klammer, hinter dem Komma, wird dann noch gesagt, in welchem Fenster. "_blank" steht für "neues Fenster öffnen".

Sollten Sie mit Frames in einer HTML Umgebung arbeiten, können Sie hier anstatt "_blank" den Namen des Frames eingeben.

Aufgabe:

Testen Sie den Film. Sie generieren damit automatisch eine SWF-Datei. Öffnen Sie Ihren Browser und wählen Sie dort im Menu unter Datei>Datei öffnen... die SWF-Datei aus Ihrem lokalen Ordner.

Es sollte sich nun bei Klick auf die Schaltfläche ein weiteres Browser-Fenster mit der entsprechenden Seite öffnen.

Einstellungsmanager

Beim lokalen Testen von SWF Filmen kann es aufgrund der Sicherheitseinstellungen Ihres Flash Players zu einer Sperre kommen. Sollten Sie im Browser eine solche Warnmeldung erhalten, dann klicken Sie in dieser Meldung auf den Punkt Einstellungen...

Dann gelangen Sie zum Einstellungsmanager des Flash Players. Alternativ erreichen Sie diesen auch immer, wenn Sie einen Flash Film betrachten und dann über Rechtsklick/Einstellungen... Dort können Sie unter dem Registerpunkt Globale Sicherheitseinstellungen/"Diesen Dateien und Ordnern immer vertrauen" den Ordner auf Ihrem Rechner angeben, der Ihre SWF Datei enthält. Schon lässt sich die Website beim nächsten Aufruf öffnen.

Globale Sicherheitseinstellungen des Flash Player

Objekte und Klassen

Sie arbeiten in Flash also ständig mit sichtbaren und unsichtbaren Objekten. Ob nun eine Grafik, eine Schaltfläche, ein MovieClip oder das zuvor genutzte URLRequest - all das sind Objekte beim Scripten. Und alle besitzen bestimmte Eigenschaften, Methoden und Ereignisse, die Sie per AS3 steuern können.

Beispiel:

Schauen Sie in der AS3-Werkzeugleiste im Aktionenfenster nach. Das Paket flash.display enthält die Anzeigeobjekte (Klassen) in Flash, u. a. auch MovieClips. Wir arbeiten hauptsächlich mit den Objekten dieses Pakets. Für das Laden von externen Daten oder das Öffnen ist wiederum das flash.net-Paket zuständig - und die darin enthaltenen Objekte. Das flash.events-Paket ist für Ereignisse wie z. B. Mausereignisse zuständig.

Alle Objekte sind in Klassen organisiert, die wiederum in Paketen organisiert sind.

Alle Objekte haben bestimmte Eigenschaften und Methoden. Zum Beispiel können Sie dem Objekt "Text" oder "Movieclip" in Flash eine bestimmte Farbe, Größe und Transparenz zuweisen. Dem Objekt "Sound" dagegen können Sie keine Farbe zuweisen, weil das keinen Sinn machen würde - dafür Lautstärke. Dazu kommen wir noch ausführlicher in der Praxis.

Schaltflächen gehören zum Beispiel zu der Klasse SimpleButton. Darunter finden Sie alle Eigenschaften und Methoden für Schaltflächen, unter anderem auch die bereits benutzte Methode addEventListener.

Syntax

Zeitleiste

Achten Sie darauf, wenn Sie Instanzen namentlich im Code ansprechen, dass diese Instanz bis zu diesem Zeitpunkt auf der Zeitleiste Flash bekannt ist!

Denken Sie daher ein bisschen wie der Abspielknopf in Flash, der von links nach rechts über die Zeitleiste fährt und darauf angewiesen ist, dass Ihre Anweisungen sowohl zeitlich als auch inhaltlich logisch erfolgen.

Ein kleines "a" über einem Schlüsselbild besagt, dass dort ActionScript enthalten ist.

Klicken Sie Ihr leeres Schlüsselbild auf der Zeitleiste mit dem "a" darüber an. Im Eigenschafteninspektor sollte nun "Bild" angezeigt werden und rechts ein kleiner blau gefüllter Kreis mit Pfeil. Blau gefüllt heißt: in diesem Bild liegt Code. Mit Klick auf den Pfeil wird sofort das Aktionenfenster für dieses Schlüsselbild geöffnet und Sie können entweder Anpassungen vornehmen oder neue Anweisungen eingeben!

Bild mit Script

Schreibweise

Noch einmal das Wichtigste zusammengefasst:

Das void hinter dem Doppelpunkt bei der Funktionsbeschreibung könnten Sie auch (inklusive Doppelpunkt) weglassen. Es besagt, dass hier keine Werte eines bestimmten Datentyps der Funktion übergeben werden und ist erst bei fortgeschrittener Programmierung relevant. Der Konsistenz von Schreibweisen zuliebe schreibe ich es immer mit - gewöhnen Sie es sich besser einfach an.

Das Semikolon am Ende einer Zeile ist im Grunde erst Pflicht, sobald mehr als eine Anweisung in eine Zeile geschrieben wird. Ebenfalls zur Wahrung der Konsistenz in der Schreibweise gewöhnen Sie sich das Abschließen jeder Zeile per Semikolon an.

Sie sind ansonsten recht frei in der Gestaltung Ihres Codes. Wenn Sie nicht sicher sind, dann wenden Sie aus der Befehlsleiste oberhalb des Aktionen-Eingabefeldes den Befehl "Auto Format" an, der Ihren Code automatisch in eine übersichtliche Formatierung bringt.

Das Häkchen links daneben ab und an anzuklicken ("Syntax überprüfen"), ist auch eine gute Idee, denn so wird geprüft, ob Ihr Code Fehler enthält!

Die AS3 Syntax ist sehr strikt. Eine vergessene oder nicht geschlossene Klammer würde schon eine Fehlermeldung auslösen.

Aufgabe:

Probieren Sie es aus. Löschen Sie hinter dem void eine geschweifte Klammer und klicken Sie das Häkchen "Syntax überprüfen" an - oder starten Sie wie gewohnt mit STRG + Enter den Film. Der Compiler gibt eine Fehlermeldung aus.

Fehlermeldung Position

Fehlermeldung Beschreibung

Praktisch: Mit Doppelklick auf die Positionsangabe springen Sie sofort zu der besagten Stelle im Code. Selten ist es genau die richtige Stelle - jedoch Sie befinden sich schon einmal in der Nähe und müssen entschlüsseln, was Ihnen der Compiler denn nun genau sagen will. Er kann sich leider nicht ausdrücken und Dinge sagen wie "Bitte Klammer in Zeile xy einfügen" usw. - so "schlau" ist die Technik dann doch noch nicht.

Fügen Sie die Klammer als geübter Fehler-Finder also wieder ein.

Scripte wiederverwenden

  • Legen Sie jetzt einen Ordner an, in dem Sie häufig benutzte Aktionen zur Wiederverwendung abspeichern.

  • Markieren Sie anschließend den zu exportierenden Code-Abschnitt mit der Maus. Hier wäre dies der komplette Block für die Schaltflächenaktion.

  • Klicken Sie oben rechts auf den kleinen Pfeil, um das Aktionenfenster-Menü zu öffnen.

  • Darin wählen Sie die Option "Skript exportieren..."

  • Speichern Sie die Datei in Ihren Scriptordner als Buttonaktion.as oder ähnlich ab.

  • Die "as" Formatierung der Datei besagt, dass es sich hier um ActionScript handelt.

Script exportieren

Benötigen Sie später eine solche Anweisung, dann können Sie den Code über die Option "Skript importieren..." in das Aktionenfenster hineinladen - und abändern.

Die .as-Datei können Sie auch, anstatt sie wieder zu importieren, mit dem Befehl

include "meinScript.as";

in Ihren Aktionencode einbinden. Das Script verhält sich, als würde es im Editor an dieser Stelle geschrieben stehen. Dazu muss die .as-Datei allerdings auch neben der SWF auf dem Server liegen und vorhanden sein, da sie zur Laufzeit ein- und ausgelesen wird.

Alternativ können Sie auch neue Codeabschnitte im bereits erwähnten Fenster "Codefragmente" dauerhaft zur Wiederverwendung ablegen. Markieren Sie den Codeabschnitt im Aktioneneditor und öffnen Sie über das Icon "Codefragmente" dieses, wählen dann rechts im Menü die Option "Neues Codefragment erstellen..."

Neues Codefragment

Im Editor vergeben Sie einen Titel und fügen den zuvor markierten Code aus der Zwischenablage über den Button "Automatisch füllen" ein. Nach Bestätigung finden Sie Ihren Code dann dauerhaft im Fragmentefenster zur Wiederverwendung.

Codefragment benennen

Code anzeigen

Da Sie Aktionen auf mehrere Bilder in der Zeitleiste verteilen können, gibt es praktische Helfer, die Ihnen die Gesamtübersicht auf einen Blick ermöglichen. Anstatt jedes Schlüsselbild mit einem "a" darüber einzeln anzuklicken, um zu sehen, welche Aktionen darin stehen, können Sie über das Menü> Fenster> Filmexplorer öffnen und darin die Option "ActionScript anzeigen" aktivieren.

Film Explorer

Anzeigen-Icons obere Leiste: Wenn Sie alle anderen Anzeige-Icons in der oberen Leiste deaktivieren, außer das für die ActionScript-Anzeige, sehen Sie nur noch den Code aller Bilder auf der Zeitleiste gleichzeitig.

Eine weitere Möglichkeit der schnelleren Erschließung ist das Festpinnen einzelner Bild-Scripte in Reitern mit der Reißzwecke unten im Aktionenfenster. So können Sie zwischen den Bildern springen, die Script enthalten, ohne umständlich die entsprechenden Bilder auf der Zeitleiste einzeln anklicken zu müssen.

Pin für Bilder mit Code

Links unterhalb der AS Werkzeugleiste/Bibliothek befindet sich ebenfalls eine Übersicht, mit der Sie schnell zwischen den einzelnen Bildern mit AS-Code springen können.

Bildauswahl mit Code

Wenn Sie viel Code auf verschiedenen Bildern auf der Zeitleiste untergebracht haben und schnell wechseln müssen, sollten Sie sich diese Helfer in Erinnerung rufen.

Kommentare

Sie können Ihren Code mit Kommentaren versehen, als Verständnishilfe für sich selbst oder als Hinweise für andere Personen, die damit weiterarbeiten sollen.

  • Einzeiler per doppeltem Schrägstrich: //Auskommentierte Zeile.

  • Textblöcke per /* Auskommentiert */ umfassen.

Markieren Sie dazu den jeweiligen Text im Aktionenfenster und wählen Sie über Rechtsklick mit der Maus die jeweilige Kommentar-Option, falls Sie diese nicht manuell eingeben möchten.

Kommentare

Auch das praktische Auf und Zuklappen von Codeblöcken möchte ich hier noch einmal in Erinnerung rufen:

Code einklappen

Block markieren und...

...Auswahl einklappen

Das Ein- und Ausklappen hat, im Gegensatz zu den Kommentaren, keine Auswirkung auf die Ausführung des Codes. Es dient lediglich dazu, Ihnen bei sehr langem Code die Übersicht und die Organisation zu vereinfachen.

Anwendungshilfen

Man braucht immer Hilfe, beim Code. In der Regel fangen Sie selten bei Null an. Entweder arbeiten Sie mit Beispielcode oder mit Scripts, die Sie bereits angelegt und abgespeichert haben und nun wieder verwenden. Nur woher weiterführende Informationen dazu nehmen?

Wenn Sie Hilfe zu schon bereits vorhandenen Befehlen haben möchten, dann setzen Sie den Cursor in die betreffende Zeile vor die Anweisung, hier einmal vor den Befehl navigateToURL. Klicken Sie dann auf F1 oder das kleine Fragezeichen-Icon oben rechts im Aktionenfenster. Schon springen Sie an die konkrete Stelle in der AS Flash Hilfe. So können Sie sich erst einmal mit vorhandenen Beispielen vortasten und genauere Infos dazu erhalten.

Wenn Sie tiefer in die Programmierung einsteigen, lernen Sie, mit den unterschiedlichsten Objekten und deren Ereignissen, Methoden und Eigenschaften zu arbeiten. Meistens beginnt man mit vorhandenem Code, um per Learning by Doing daran zu lernen.

In Flash CS5 wurden einige bereits mit AS3 gescriptete Vorlagen implementiert. Wählen Sie diese aus (Menu>Datei>Neu...>Vorlage) und schauen Sie sich den Code an bzw. wandeln Sie diesen ab.

Vorlagen

Im Grunde genommen ist die Schwierigkeit, erst einmal die Zusammenhänge zu verstehen. Dafür ist dieser Kurs gedacht.

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