Inhaltsverzeichnis -> Interaktivität

Actionscript 3: Interaktivität

Ich freue mich beim Schreiben dieses Tutorials besonders auf das nun folgende Kapitel, weil es zum ersten mal darum gehen wird, eine Interaktivität zu programmieren. Interaktivität soll hier konkret bedeuten, dass unser Programm auf ein Mausereignis, - sprich - auf einen Mausklick, reagieren soll.

Es soll ein Programm geschrieben werden, in dem ein blauer Kreis zu sehen ist. Wenn man mit der Maus auf diesen Kreis klickt, soll im Ausgabefenster unserer Entwicklungsoberfläche eine Testmeldung ausgegeben werden.

Im vorangehenden Kapitel habe ich bereits anhand eines kleinen Beispiels vorgeführt, wie man Grafiken mit Actionscript erstellt. Der folgende Code zeichnet einen blauen Kreis mit den Koordinaten 150, 150 und dem Radius 80. Scheuen Sie sich nicht, diesen Programmcode einfach zu kopieren und in ihre Flash-Anwendung einzufügen. Es ist ein Vorurteil vieler Programmieranfänger, dass beim Programmieren viel Tipparbeit erforderlich ist.

import flash.display.Sprite;

var kreis:Sprite = new Sprite();
kreis.graphics.beginFill(0x0000ff, 0.5);
kreis.graphics.drawCircle(150, 150, 80);
kreis.graphics.endFill();
addChild(kreis);

Neu ist bei diesem Code der Befehl "beginFill()", mit dem wir unserem Kreis eine Füllfarbe zuweisen. Dieser Funktion werden ein Farbwert und, gefolgt von einem Komma, ein sog. Alphawert (0.5) zugewiesen. Der Alphawert legt die Transparenz der Farbe fest. Weil die Hintergrundfarbe einer Flash-Anwendung standardmäßig auf weiß gesetzt ist, ergibt sich eine hellblaue Farbe. Wichtig ist, dass nach Aufruf der Zeichenfunktionen der Befehl "endFill()" eingefügt wird. Er besagt, dass die weiteren Objekte keine Füllfarbe mehr erhalten.

Wenn man nun festlegen möchte, dass beim Klick auf die gezeichnete Grafik ein Ereignis ausgelöst wird, benutzt man dazu den folgenden Code:

kreis.addEventListener(MouseEvent.CLICK, wasTun);

Der Variable "kreis" wird hier die Funktion "addEventListener" zugewiesen. Flash liefert nicht nur Grafikfunktionen mit, sondern auch Funktionen zum Erfassen von Nutzeraktionen. Im Gegensatz zu den Grafikfunktionen müssen wir diese aber nicht erst importieren. Sie stehen automatisch in allen Actionscriptprojekten zur Verfügung. Als Paramter erwartet sie die Angabe der Ereignisart, - hier als "MouseEvent.CLICK" bezeichnet. Es gibt eine Reihe weiterer Mausereignisse, die wir unserer Zeichnung zuweisen können, wie z.B. DOUBLE_CLICK, MOUSE_DOWN oder MOUSE_MOVE.

Auf die Angabe des Ereignisses folgt der Name einer Funktion, die genau dann aufgerufen wird, wenn der Nutzer das Ereignis auslöst. Der Name dieser Funktion lautet hier "wasTun". Hier können wir einen individuellen Namen vergeben. Wichtig ist natürlich, dass der Name der Funktion später bei der Bennenung der Funktion wieder verwendet wird.

Schauen wir uns nun an, wie diese Funktionen aussieht:

function wasTun(event:MouseEvent):void {
	trace("test");
}

Funktionen werden in Actionscript mit dem Schlüsselwort "function" eingeleitet. Es folgt der Funktionsname. In den dann folgenden runden Klammern können Parameter stehen, die man der Funktion mitgibt. In unserem Fall wird eine Variable mit dem Namen "event" und dem Datentyp "MouseEvent" mitgeliefert. Hierbei handelt es sich um vordefinierte Schlüsselbegriffe, die immer in einer Funktion vorkommen müssen, wenn wir die Reaktion auf ein Mausereignis vorgeben möchten. Auf die Zusammenhänge möchte ich hier erst einmal nicht weiter eingehen. Mit dem Schlüsselwort "void" nach dem Doppelpunkt drücken wir aus, dass die Funktion über keinen Rückgabewert verfügt, was bei anderen Funktionen häufig der Fall ist.

Wenn Sie als Anfänger wieder eine Menge neuer Begriffe hören, ist das vollkommen normal. Diese Prozedur zur Programmierung von Interaktivität ist zwar für einen Anfäger ungewohnt. Sie taucht aber in Actionscript immer wieder in nur leicht abgewandelter Form auf. Es lohnt sich also, wenn man sich das hier gezeigte Verfahren ein wenig einprägt.

Hier der komplette Programmcode:

import flash.display.Sprite;

var kreis:Sprite = new Sprite();
kreis.graphics.beginFill(0x0000ff, 0.5);
kreis.graphics.drawCircle(150, 150, 80);
kreis.graphics.endFill();
addChild(kreis);

kreis.addEventListener(MouseEvent.CLICK, wasTun);

function wasTun(event:MouseEvent):void {
	trace("test");
}

Wenn wir nun unser Programm über den Befehl "Steuerung" -> "Szene testen" ausführen, sehen wir im Ausgabefenster die Meldung "test" solbald wir auf den Kreis klicken.

nächstes Kapitel - Inhaltsverzeichnis