Anzeige
Tutorialbeschreibung

Interaktion mit Schaltflächen in ActionScript3

Interaktion mit Schaltflächen in ActionScript3

Nach langer Recherche zu der Frage, wie man unter Adobe Flash CS4 mit ActionScript3 einen Button dazu bringen kann, einen beliebigen Code auszuführen, möchte ich dieses Tutorial dazu nutzen, meine Erkenntnisse weiterzugeben.

Ich gebe einen ersten Einstieg in Flash CS4 mit ActionScript3 und werde die Grundvoraussetzungen für einen Neuling zeigen.
Als Erstes zeige ich, welche Objekte wie definiert werden müssen und anschließend gebe ich ein lauffähiges ActionScript3 vor, welches einen Text durch einen Klick auf eine Schaltfläche verändert.


Schritt 1:

Öffnen eines neuen
ActionScript3 Dokuments in Flash CS4.

Bilder

Schritt 2:

In die leere Bühne ein Rechteck reinziehen

Bilder


Schritt 3:

Anschließend das Rechteck auswählen und mit einem Rechtsklick das Rechteck in ein Symbol konvertieren..

Bilder


Schritt4:

Es öffnet sich anschließend ein Fenster, in dem der Name der Klasse oder des Symbols eingegeben werden muss.
Als Typ wird "
Schaltfläche" definiert, damit Klick-Aktionen möglich werden.
Das Ganze kann man elegant in einen Ordner ablegen. Falls man noch keinen angelegt hat, geschieht dies durch einen Klick auf den blauen Text.

Bilder


In diesem Fenster wird anschließend ein neuer Ordner angelegt.

Bilder


Schritt 5:

Wir legen eine Instanz der Klasse "
MeinKnopf" an. Dies geschieht über die Eigenschaften unseres blauen Rechtecks:
Ich nenne unsere Schaltfläche "
btnMeinKnopf". Mit diesem Namen können wir später im Code auf dieses (instanzierte) Objekt zugreifen.

Bilder


Schritt 6:

Wir definieren noch einen Output-Text, welcher als dynamisch definiert werden muss:
Bilder

Als Instanznamen wähle ich "
txtOutputText".
Der Typ des Texts ist "
Dynamischer Text".

Bilder


Schritt 7:

Wir stellen sicher, dass wir uns in der "
Ebene 1" befinden und nicht irgendwo anders (sonst sperrt sich das ActionScript-Fenster):

Bilder


Schritt 8:

Öffnen des ActionScript-Fensters mittels F9 oder Fenster -> Aktionen:

Bilder


Schritt 9:

Die eigentliche Programmierung beginnt in folgendem Fenster "
Aktionen" mit dem Tab: "Ebene 1":

Bilder


 

Als Erstes muss die Klasse "flash.events.IEventDispatcher" importiert werden. Diese ist zuständig für die An- und Abmeldung der zuständigen Ereignisse, welche ausgeführt werden, wenn wir auf den Knopf klicken.

Nun zum eigentlichen Code:

import flash.events.IEventDispatcher;

btnMeinKnopf.addEventListener(MouseEvent.MOUSE_DOWN, clickHandler);

function clickHandler(event:MouseEvent):void {
    trace("clickHandler reagiert auf ein Ereignis vom Typ: " + event.type);
    trace("das Ereignis trat hier auf: " + event.target.name);
 txtOutputText.text = "Es funktioniert!";
}

Auf der zweiten Codezeile folgt die Anmeldung des Knopfs auf ein Ereignis "MOUSE_DOWN" - also wenn man die Maustaste runterdrückt.

Nun muss der Knopf nur noch wissen, welche Funktion sich darum kümmert, dass was geschieht. Also die Ausführung des eigentlichen Ereignisses findet in der Funktion "clickHandler" statt.

Die Funktion heißt "clickHandler", hat den Rückgabewert nichts, also void und den Parameter "event" vom Typ "MouseEvent". Ich habe in der Debugkonsole zwei Variablen innerhalb des Objekts "event" wie folgt ausgewertet:

Auf welches Ereignis wurde reagiert?
Wer hat die Funktion aufgerufen?

Schlussendlich setzen wir noch den Beispieltext auf "
Es funktioniert!"

Ich hoffe, ihr konntet etwas von diesem Einsteigertutorial lernen ;-)

 


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Tertius
  • 03.10.2012 - 17:58

Danke, nun verstehe ich diese Grundlage :)

Portrait von rentier
  • 21.04.2011 - 09:09

Dankeschön. Dein Tutorial und die Kommentare hier helfen mir weiter.

Portrait von ZenZored
  • 12.03.2011 - 15:45

Super Tutorial, aber das Textfeld muss anfangs nicht leer sein. Man muss nur unter Anit-Aliasing bei den Textfeldeigenschaften/Zeichnen "Geräteschriftart verwenden angeben" ;)

Portrait von gundleyG
  • 30.12.2010 - 05:02

Tut sehr ausführlich.


Damit die Anzeige hinterher dann auch funktioniert, muss das Textfeld anfangs leer sein.

Was die Aktion mit dem Ordner soll, ist mir nicht klar geworden.

Portrait von DessIntress
  • 16.12.2010 - 00:05

alles schön bebildert, so stell ich mir das vor :)

Portrait von drannach
  • 25.08.2010 - 01:45

Kurze Frage:
Bei mir wird anstatt "es funktioniert!" immer nur eine Reihe unsinniger Zeichen ("sntiniert") angezeigt.
Das witzige daran ist: Wenn ich die Zeile kopiere und hier einfüge, dann zeigt er mir den richtigen Text an. Woran könnte das liegen? oO
(BTW: Das ganze läuft über Flash CS5)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.01.2010 - 16:04

An sich ein gutes Tutorial!
Hier ein kleiner Hinweis:
IEventDispatcher muss, wenn man den Code in ein FLA-Dokument schreibt nicht importiert werden.

x
×
×