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

Eigene Web-Videos erstellen
Bewegende Bilder

Webvideos unterhalten nicht nur Ihre User, sie verbessern auch Ihr Google-Ranking. Mithilfe von Screenrecorder-Tools erstellen Sie Videos aus…
internet, webdesign, photoshop, illustrator, web-animation, animation, bilder, grafik
Bewegtes Bild

Animationen haben im Web ihren festen Platz erobert und sich auch als Werbeträger unersetzlich gemacht. Wir beleuchten mehrere Methoden, wie Sie…
image.jpg
Videokompression

Die Moving Picture Experts Group (MPEG), Initiator und Entwickler von Video- und Audio-Standards, will die Entwicklung eines freien Video-Codecs…
Neue Goobay 3D Brille ab April erhältlich
3D-Stream für Webseiten

NVIDIA stellt eine Technologie vor, mit deren Hilfe Webseiten stereoskopische 3D-Streams liefern können. Mithilfe einer leicht nachvollziehbaren…
Mister Clipping
Bildbearbeitungs-Service

Der Online-Grafikservice-Anbieter Mister Clipping (Misterclipping.com/de) hat vor wenigen Tagen seine Website von Grund auf erneuert: Zusätzlich zum…
News
Video
SciFi-Action mit Ryan Gosling und Harrison Ford
Video
Agatha-Christie-Verfilmung mit Johnny Depp
Video
Kinostart: 23.11.2017