In diesem Tutorial wird es darum gehen, die grundlegende Funktionsweise zur Interaktion mit BildschirmElementen in Flash und Actionscript3 zu erläutern.
Was wird benötigt:
Flash und ein Editor - solltest du noch nicht mit derartigen Programmen garbeitet haben, dann ist das kein Problem, ich empfehle jedoch 10Minuten zu nehmen und das Tutorial für die Grundlagen dieser Programme zu lesen (
In 10min zur ersten Flash Applikation!)
1) Als erstes erstellen wir ein neues Dokument in Flash.
2) Als nächstes öffnen wir die
KomponentenBox: Fenster -> Komponenten (
Strg+F7)
3) Nun ziehen wir einen '
Button' und eine '
TextArea' auf die weiße Bildfläche.
4) Um die Objekte später im Code 'ansprechen' zu können, müssen wir ihnen nun Namen geben, dazu wählen wir das jeweilige Objekt an und tragen bei "Instanzenname" den gewünschten Namen ein.
Ich habe den Button '$meinButton' und das TextArea '$meinTextArea' genannt.
5)(optional) Nun können wir noch einige Einstellungen vornehmen, z.B. können wir den Schriftzug auf dem Button ändern: Hierzu öffnen wir den "Komponenten Inspektor":
Fenster -> Komponenten Inspektor (Shift+F7)
6) Nun tragen wir noch den Namen der DokumentenKlasse ein, ich habe sie "ClickButton" genannt. Wer vergessen hat, was das war, oder das erste Tutorial nicht gemacht hat, für den gibt es hierzu nochmal ein Screenshot:
Wie auch beim letzten mal, die Warnung einfach weiterklicken.
So! Das wäre es auch schon mit dem Flash-Teil, nun können wir mit dem Programmieren beginnen.
Dazu starten wir FlashDevelop und erstellen ein neues AS3-Dokument und speichern dieses als
ClickButton.as ab.
Nun nennen wir die Klasse 'ClickButton' und lassen sie von '
MovieClip' erben (...
extends ...), da wir diese Klasse ja als DokumentenKlasse für unsere FlashApplikation verwenden wollen.
Selbstverständlich müssen wir für unsere Klasse auch eine
Main-Methode definieren(wie im ersten Tutorial).
Wenn wir alles richtig gemacht haben, dann sollte unsere Klasse jetzt in etwa so aussehen:
Code:
package
{
{
public function ClickButton()
{
}
}
}
Nun zum interessanten Teil dieses Tutorials: Wir müssen dem Button sagen, was er machen soll, wenn er geklickt wird.
Hierfür fügen wir dem Button einen sogenannten
EventListener hinzu. Dies machen wir in der MainMethode, wie folgt:
Code:
$myButton
.addEventListener(MouseEvent.CLICK, clickedButton
);
Was nichts anderes bedeutet als:
'$meinButton' wenn du geklickt wirst(
MouseEvent.CLICK), dann führe die Methode 'clickedButton' aus!
Als kleine Ergänzung: Da Flash die Klasse
MouseEvent nicht von selbst zuordnet, müssen wir diese
importieren.
Dazu setzen wir einfach einen weiteren '
import' unter den bereits vorhandenen:
Eben haben wir dem Button befohlen, dass die Methode 'clickedButton' ausgeführt werden soll, wenn der Button geklickt wird. - Wenn wir uns den Code jedoch anschauen, gibt es keine Methode mit diesem Namen.
-> Also erstellen wir nun noch eine Methode mit dem Namen 'clickedButton':
Zu den Details:
private - das Attribut 'private' gibt an, dass die Methode nur innerhalb der Klasse aufgerufen werden kann. Mehr dazu später, es würde in diesem Falle allerding keinen Unterschied machen die Methode 'public' zu setzen.
(e:MouseEvent) - wird eine Methode durch einen EventListener(wie in unsere Fall, der 'CLICK') aufgerufen, so wird ein Parameter übergeben, den man über die '
ParameterVariable: e'(die man übrigens nennen kann, wie man will) übernehmen muss. Das '
:MouseEvent gibt an, dass der übergebene Parameter vom Typ 'MouseEvent' sein muss, um sicherzustellen, dass die Funktion nicht fälschlicherweise auf anderem Weg aufgerufen wird, was in einem Error resultieren würde.
:void - 'void' gibt ganz einfach an, dass diese Methode keinen Wert zurück gibt. Momentan sind alle unsere Methoden 'void' - mehr darüber in einem späteren Tutorial.
Nun haben wir eine Methode, die aber nichts bewirkt. Und da wir irgendwie sehen wollen, dass der Button auch geklickt wurde, kommt nun das '
TextArea' ins Spiel.
Wir wollen also über das '
TextArea' anzeigen, dass der Button geklickt wurde, hierfür fügen wir folgende Zeile in die 'clickedButton'-Methode:
Code:
$meinTextArea.text = "Der Button wurde gedrückt!";
Code:
package
{
//importiert die Klasse MouseEvent
{
public function ClickButton()
{
//sagt dem Button:
//'Wenn du geklickt wirst, dann führe 'clickedButton' aus!
$meinButton
.addEventListener(MouseEvent.CLICK, clickedButton
); }
//Die Funktion, die auf Klick ausgeführt wird
{
//schreibt den Text in das 'TextArea'
$meinTextArea.text = "Der Button wurde gedrückt!";
}
}
}
}
Nun können wir zu FlashCS4 wechseln und die Applikation starten (
Strg+Enter) - wenn alles richtig gemacht wurde und wir auf den Button drücken, dann sollte im Textfeld der Satz "Der Button wurde gedrückt!" zu lesen sein.
SourceDateien:
- clickbutton.zip
