Serie: Flash Workshop - Teil 2

Der erste Teil des Flash-Workshops stellte die IDE von Adobe Flash CS5 vor. Erste praktische Schritte in Flash zeigte die selbst zu programmierende Fotogalerie. Für deren Ausbau verwenden wir auch in diesem Teil wieder Adobe Flash CS5. Für diesen zweiten Teil arbeiten Sie am besten mit der Flash-Datei aus dem ersten Teil weiter. In diesem und im nächsten Teil soll das Anwählen der Bilder in der Fotogalerie verbessert werden. Dazu wird eine Vorwärts- Navigation über einen Pfeil erstellt. Der Pfeil erhält eine Schaltflächen-Funktion. Er ist rechts neben dem Bild angeordnet.In Flash werden dafür Symbole und Instanzen angelegt. Der Navigations-Pfeil wird über ein einfaches Grafik-Element erstellt. Die benötigte Schalt-Funktion programmieren Sie in AS3. Als Einstieg öffnen Sie die fla-Datei der Fotogalerie. In die Code- Ebene des ersten Teils schreiben Sie später ein neues Programm.

Symbole und Instanzen

Sollen bestimmte Grafiken, Zeichnungen, Objekte und Animationen in verschiedenen Projekten wiederverwendet werden, bietet Flash die Möglichkeit, sogenannte Symbole zu erstellen. Symbole sind Vorlagen. Der Vorteil dieser Symbole ist, dass sie separat, also nicht direkt auf der Zeitleiste des Hauptfilms angelegt und bearbeitet werden. Symbole können vielmehr in einer eigenen Bibliothek angelegt und bei Bedarf für ein beliebiges Flash-Projekt verwendet werden. So lässt sich im Laufe der Zeit eine eigene Vorlagen-Sammlung aufbauen.

In der Bibliothek liegen auch die Bilder für die Fotogalerie. Anzuwählen ist die Bibliothek über das Menü Fenster/Bibliothek. Ein bereits angelegtes Symbol kann beliebig bearbeitet und ergänzt werden. Dies geschieht auf einer gesonderten Zeitleiste. Fügt man das benötigte Symbol auf der Hauptzeitleiste eines Projekts ein, legt man eine Instanz davon an. Eine Instanz ist die Kopie eines Symbols und ist ihrem Symbol untergeordnet. Mithilfe der Instanzeffekte ist es möglich, den Inhalt einer Instanz nach Bedarf neu zu gestalten.So können beispielsweise Ausrichtung, Position und Farbe beliebig verändert werden. Das ursprüngliche Symbol bleibt für spätere Projekte unverändert erhalten. Nimmt man umgekehrt Änderungen in einem übergeordneten Symbol vor, verändern sich entsprechend auch alle von ihm erzeugten Instanzen. Beim Arbeiten mit Symbolen und deren Instanzen liegt der Vorteil also in der Wiederverwendbarkeit. In Flash gibt es drei Symbol-Typen: Grafiksymbole, Schaltflächensymbole und Movieclips.

Grafiksymbole

Grafiksymbole sind am besten für einfache, statische grafische Darstellungen zu verwenden, wie feststehende Bilder. Sie sind direkt mit der Hauptzeitleiste verknüpft und laufen synchron mit dem Hauptfilm. Für interaktive Steuerungsmöglichkeiten eignen sich Grafiksymbole nur gering.

Schaltflächensymbole

Mit Schaltflächensymbolen lassen sich interaktive Steuerelemente einbauen, wie es für Benutzeroberflächen nötig ist. Sie reagieren auf einen Klick oder einen Rollover mit der Maus. Den Schaltflächen liegen meistens Grafiken zugrunde. Die gewünschten Steuerungs-Abläufe und Funktionen werden in AS3 programmiert. Vier vorgegebene Schaltflächen-Zustände stehen zur Verfügung. Ihnen können unterschiedliche Grafiken als Schlüsselbilder zugewiesen werden: Auf, Drüber, Drücken und Aktiv.

• Auf, wenn der Mauszeiger sich nicht über der Symbolinstanz befindet.
• Drüber, wenn der Mauszeiger sich über der Symbolinstanz befindet.
• Drücken, wenn auf die Symbolinstanz geklickt wird.
• Aktiv, nachdem die Schaltfläche aktiviert wurde.

Movieclips

Movieclips gehören gerade in fortgeschrittenen Anwendungen zu den wichtigsten Elementen beim Flash-Programmieren. Denn sie können nicht nur in der Bibliothek, sondern auch per Programmierung in AS3 erzeugt werden. Da sie zusätzlich Steuerelemente oder Sounds enthalten, eignen sie sich besonders gut für Animationen. Sie sind flexibler als Grafiksymbole, da sie völlig unabhängig von der Hauptzeitleiste ablaufen. In Movieclips lassen sich weitere Movieclip- Instanzen einbinden, wodurch Sie hierarchische Abläufe festlegen können.

Movieclip-Symbol

Steigen wir nun wieder in unser praktisches Beispiel ein. Ausgangspunkt ist die Flash- Datei der Fotogalerie. Auf der Zeitleiste liegen die sechs importierten Foto-Dateien. Unsere geöffnete fla-Datei ist eine Flash- Datei mit AS3. In ihr können auch Code-Dateien angelegt werden. Das ist für das Programmieren der Schaltflächen-Funktionen notwendig.In diesem ersten Schritt legen Sie die Grundlage für den Navigationspfeil. Er ist Teil der Schaltfläche, mit der Sie per Mausklick die einzelnen Fotos später vorund zurückschalten können. Erstellen Sie in der Bibliothek ein Movieclip-Symbol.Aktivieren Sie dafür unter dem Menüpunkt Fenster die Bibliothek. Sie befindet sich auf der rechten Bildschirmseite. Nach einem Rechtsklick auf das Bibliothek-Feld wählen Sie im Kontextmenü die Option Neues Symbol aus. Neben der Bibliothek befindet sich das Menü-Fenster Eigenschaften. Wählen Sie als Symboltyp Movieclip. Je nach Symboltyp erscheint in der Bibliothek neben dem Namen ein entsprechendes Icon. Das neue Symbol nennen Sie arrow. Es soll den dargestellten Pfeil enthalten.Ebenfalls per Maus-Rechtsklick wählen Sie den Menü-Punkt Neuer Ordner an. Diesen neuen Ordner nennen Sie navigation. Verschieben Sie das eben angelegte Arrow- Symbol hier hinein.

Die Pfeil-Grafik

Innerhalb des arrow-Symbols erstellen Sie nun eine Pfeil-Grafik. Dazu verwenden Sie die Grafik-Werkzeuge der Flash-IDE. Diese öffnen Sie unter Fenster/Werkzeuge. Haben Sie bereits Erfahrung mit Adobe Photoshop? Dann finden Sie sich wahrscheinlich auch in Flash schnell zurecht. Die Grafik entwerfen Sie direkt auf dem Artboard, links unter der Zeitleiste. Solche Grafiken können sehr kunstvoll gestaltet werden.Eine einfache Möglichkeit ist folgende: Mit dem Grafik-Werkzeug Rechteck legen Sie ein Rechteck an. Drehen Sie dieses Viereck mit dem Grafik-Werkzeug frei transformieren um 22,5 Grad. So entsteht eine Raute. Teilen Sie diese in der Mitte senkrecht, dann erhalten Sie jeweils ein Dreieck, das nach links und rechts zeigt. Eines davon verwenden Sie als Pfeilspitze, indem Sie mithilfe des Auswahlwerkzeugs eine Hälfte der Raute markieren und löschen. Für das Pfeilsymbol reicht ein Dreieck als Pfeilspitzen- Vorlage. Im nächsten Workshop-Teil wird die Navigation zum Vor- und Zurücknavigieren zwischen den Bildern um eine zweite Pfeilspitze erweitert.

Der Pfeil als Schaltfläche

Um aus dem Pfeil eine Schaltfläche für das Vor- und Zurückschalten per Mausklick zu machen, benötigen Sie nun ein Schaltflächensymbol. Klicken Sie dabei mit Rechtsklick auf die Bibliothek. Wählen Sie Neues Symbol und setzen den Symboltyp auf Schaltfläche. Das neue Schaltflächensymbol nennen Sie nextImage.Sie arbeiten nun auf der separaten Zeitleiste des Schaltflächensymbols, die Sie links oberhalb des Artboard finden. Die Zeitleiste des Schaltflächensymbols hat leere Schlüsselbilder für vier mögliche Mauszustände. Auf der Zeitleiste können Sie diesen Schlüsselbildern unterschiedliche Grafiken in den jeweiligen Ebenen zuweisen. In unserem Beispiel soll sich die Farbe des Pfeils verändern, sobald der Mauszeiger darüberfährt.Im Schaltflächensymbol nextImage benötigen wir zwei Ebenen auf der Zeitleiste für verschiedene Mauszustände. Klicken Sie doppelt auf den Text Ebene auf der Zeitleiste. Geben Sie einen neuen Namen für die Ebene ein: Wir nennen die erste Ebene arrow. Ziehen Sie nun unser bereits erstelltes Arrow-Symbol als Instanz auf das erste Schlüsselbild Auf - das ist der Grafik-Pfeil. Über den Befehl Schlüsselbild teilen, belegen Sie auch die Schlüsselbilder Drüber und Drücken mit dem Arrow-Symbol. Lediglich das Aktiv-Schlüsselbild wird nicht belegt.