Interaktiv

Schaltflächensymbole

  1. Serie: Flash Workshop - Teil 2
  2. Schaltflächensymbole
image.jpg

© Carlo Blatz, Daniela Schrank

Die fertige Fotogalerie mit Navigationspfeil.

Nun fehlt noch die gewünschte Farbveränderung. Wählen Sie hierfür beim Drüber- Schlüsselbild auf der Schaltflächen-Zeitleiste den Arrow-Movieclip aus. Über das Eigenschaften-Menü können Sie den Farbeffekt verändern. In unserem Beispiel wird der Pfeil hellblau. Die hellere Farbe hebt das Anwählen mit der Maus hervor.Damit der Nutzer treffgenauer auf den Pfeil klicken kann, erweitern wir die Sensorfläche um den Pfeil an den spitzen Enden. Damit vergrößert sich der Schaltflächenbereich für die Maus und reagiert nicht mehr ausschließlich auf den Bereich des Pfeils. Dazu legen Sie auf der Schaltflächen-Zeitleiste eine zweite Ebene unter der arrow- Ebene an. Nennen Sie diese hit area. Auf dieser neuen Ebene wählen Sie das Schlüsselbild Auf an.Mit den Grafik-Werkzeugen zeichnen wir auf dem Artboard nun ein weißes Viereck über unseren Pfeil. Der Pfeil liegt auf einer anderen Ebene. Das Viereck ist dabei der vergrößerte unsichtbare sensitive Bereich. Legen Sie dann auf dieser Ebene über den Befehl Schlüsselbild teilen die neue Viereck-Grafik auf die Schlüsselbilder Drüber und Gedrückt. Damit sind alle benötigten Grafiken auf der Zeitleiste des Schaltflächensymbols nextButton vorhanden. Das nextButton-Symbol soll nun in einen AS3-Code in den Hauptfilm der Fotogalerie geholt werden.

Schaltflächensymbole

Soll ein bestimmtes Objekt wie ein Symbol über AS3 angesprochen werden, muss es mit einer Klasse verknüpft werden. Über die Definition einer Klasse gibt man einem Objekt eine abstrakte Beschreibung und kann ihm bestimmte Eigenschaften und Methoden zuweisen. Wir weisen dem Schaltflächensymbol nextButton eine Klasse zu. Durch Rechtsklick auf das nextButton- Symbol in der Bibliothek gelangen Sie zum Menüeintrag Eigenschaften. Unter Erweiterte Symboleigenschaften setzen Sie ein Häkchen bei Export für ActionScript.Darunter tragen Sie beim Punkt Klasse NextButton ein. Für den späteren AS3-Code ist es gut zu wissen, dass sich nextButton vom Datentyp SimpleButton ableitet. Mit SimpleButton wird im AS3-Code ein Schaltflächensymbol beschrieben. SimpleButton besitzt die Eigenschaft, bei Mausaktionen (sogenannten Events) auf verschiedene Schlüsselbilder zu springen.

Schaltfläche sichtbar machen

Mithilfe von AS3 machen Sie nun die Schaltfläche NextButton auf dem Artboard sichtbar. Wechseln Sie in den Action Script Editor. Mit dem Befehl new NextButton() holen Sie die Schaltfläche NextButton aus der Bibliothek und erzeugen so eine Instanz dieser Schaltfläche. Der neuen Instanz wird dabei eine Variable nextButton vom Datentyp NextButton zugewiesen. Der Schaltfläche nextButton hatten wir bereits oben diese Klasse zugewiesen. So können Sie im weiteren Code auf diese Schaltfläche zugreifen.

var nextButton : NextButton = new
NextButton();

Durch das sogenannte Adden wird die Instanz nun auf der Bühne sichtbar gemacht. Der Befehl dafür lautet this.addChild(nextButton);. Das this steht in diesem Fall für die Bühne.

var nextButton : NextButton = new
NextButton();
this.addChild(nextButton);

Positionieren der Schaltfläche

Um die Schaltfläche später im Flash-Film an eine bestimmte Stelle zu setzen, nutzen Sie die X- und Y-Eigenschaften der Display- Object-Klasse. Dies ist die Basisklasse für alle Objekte, die angezeigt werden können, also auch für den SimpleButton, dem unser NextButton entspricht. Mit dem Befehl nextButton.x = 100; und nextButton.y = 100; lässt sich die Schaltfläche an eine gewünschte Position setzen. Der Zahlenwert 100 ist dabei ein Beispiel. Im Code wird die Breite (width) der Schaltfläche in Pixeln (nextButton.width) von der Breite der Bühne (stageWidth) abgezogen. Es lässt sich die Schaltfläche automatisch an der rechten Seite des Flash-Films platzieren:

nextButton.x = stage.stageWidth -
nextButton.width;

So platzieren Sie die Schaltfläche horizontal (height) auf halber Höhe (/2) der Bühne:

nextButton.y = (stage.stageHeight -
nextButton.height) /2;

Anmelden des Mausklicks

Bereits im ersten Teil des Workshops gab es eine Code-Anweisung zum Aufruf einer Aktion per Mausklick:

stage.MouseEvent.CLICK Listener

Bei stage handelt es sich um die gesamte Bühne. Es konnte irgendwo auf den Flash- Film geklickt werden und die handleClick- Funktion wurde aufgerufen. handleClick() sorgt dafür, dass der Film immer ein Schlüsselbild weiterspringt. Danach startet der Durchlauf wieder beim ersten Bild.Der Listener wird nun an der Schaltfläche (nextButton) anstatt der Bühne (stage) registriert. Damit lassen sich die Bilder vorwärts schalten. Die handleClick-Funktion nennen wir handleNextClick. Im nächsten Teil wird noch eine eigene Schaltfläche für das Rückwärtschalten angelegt.

nextButton.addEventListener
(MouseEvent.CLICK, handleNextClick);
function handleNextClick
(evt:MouseEvent) : void
{
if(currentFrame == totalFrames)
{
gotoAndStop(1);
}
else
{
nextFrame();
}
};

Ausblick

Der nächste Teil des Flash-Workshops setzt den begonnenen Code fort. Die Navigation wird weiter ausgebaut. Durch Spiegelung, der in diesem Teil erzeugten Vorwärts-Schaltfläche, wird eine Zurück- Schaltfläche erzeugt. Zusätzlich gibt es Miniaturansichten der einzelnen Bilder, die direkt ausgewählt werden können. Außerdem sollen die Bilder nun dynamisch geladen werden.Der benötigte AS3-Code wird in eine eigene ActionScript-Datei verlagert, um ActionScript übersichtlicher in einem Flash-Projekt zu verwenden. Hierfür stehen spezielle Entwicklungsumgebungen zur Verfügung, beispielsweise das professionelle Entwickler-Tool FDT von den Powerflashern (ab 99 Euro, www.fdt.powerflasher.com ) und das Open-Source- Programm Flashdevelop (www.flashdevelop.org ).

Mehr zum Thema

Online-Videorekorder speichern die Lieblingssendung in der Cloud.
Online-Videorekorder

Der Festplatten-Rekorder ist tot, es lebe die Cloud. Online-Videorekorder übernehmen für Sie die Aufnahme und Speicherung Ihrer Lieblingssendungen.
Wir zeigen, welche Tools und Hardware für verschiedene Nutzer am besten ist.
iTunes vs. Windows Media Player & Co.

Es gibt viele Wege, eigene Musik über das Heimnetzwerk zu streamen, etwa iTunes oder Windows Media Player. Wir zeigen die besten Tools und…
Wir zeigen, wie Sie Ihre Musik im Heimnetzwerk streamen können.
iTunes, Fritzbox, NAS & Co.

Vier Lösungen bieten sich für das Musik-Streaming im Netzwerk an. Wir zeigen, wie iTunes, ein NAS, die Fritzbox oder Windows-Bordmittel die Aufgabe…
Daten im Internet
Dropbox-Alternativen & Co.

Kein Anwender schaut noch auf die Größe von Dateien - bis er sie verschicken will. E-Mails scheitern, wir zeigen Alternativen zur Dropbox.
Audible Hörbuch Abo
Alle Details zum Hörbuch-Abo

Wir zeigen, was der Audiobook-Service kann und wie Sie über aktuelle Abo-Aktionen und Gutscheine an kostenlose Hörbücher kommen.