Komplexe Flash-Navigationsleiste für HTML-Sites

Layout-Erstellung

Erstellen der Button-Objekte

Entwickeln des Layouts/Animation

Allgemeine Tips und Hinweise zum effektiven Arbeiten

Erstellen der Button-Objekte

OK - wie Buttons erstellt werden und grundsätzlich funktionieren, sollte euch schon hinlänglich bekannt sein. Ich fasse mich somit an dieser Stelle kurz und beschreibe nur die chronologische Vorgehensweise, damit die Arbeit später schnell von der Hand geht. Je nach Umfang der Navigation wird dies sehr hilfreich sein und späteres "Rumpfriemeln" am Layout vermeiden helfen.
Die Buttons der verschiedenen Hierarchie-Ebenen haben hier das gleiche Layout, was die Arbeit erleichtert. Lediglich in der Schriftgröße und dem Einzug unterscheiden sie sich.

Zuerst entwerfen wir den L1-Button. Idealerweise nehmen wir für jeden L-Button den längsten Begriff innerhalb der Struktur, damit wir gleich den richtigen Maximal-Platzbedarf berücksichtigen können. Für L1 ist das "Produkte". Wir wählen die Schrift "Verdana" (soweit vorhanden) 14 Pt, bold, Farbe schwarz und schreiben direkt in die "Bühne" im entsprechenden Layer. (Die Framenummer spielt erstmal keine Rolle). Wichtig: Schrift muß linksbündig sein. Warum, seht ihr noch. Anschließend markieren wir den Text und machen ein Symbol daraus ("modify-Create symbol" oder F8). Am besten, wir vergeben denselben Namen ("Produkte"). In der Bibliothek verschieben wir das soeben erzeugte Symbol gleich in den Ordner "Text"-"Level 1".
Danach ziehen wir im gleichen Layer und Keyframe einen Rahmen um die Schrift mit dem Box-Werkzeug. Ein Doppelklick auf das Icon öffnet ein zusätzliches Fenster, in dem man den Kantenradius angeben kann. Farbe ist dunkelgrau - keine Füllung. Wir achten darauf, daß der Rahmen weit genug nach rechts gezogen wird, damit die folgenden Buttons mit ihm rechtsbündig abschließen können. Dann wieder: Rahmen markieren, Symbol erstellen (F8) - Name = "Rahmen blank". Das Symbol verfrachten wir gleich in den "Rahmen"-Ordner der Bibliothek.

Bevor wir den fertigen Button erstellen, ist es besser, für die Buttons der Ebenen L2 und L3 ebenso zu verfahren. Für L2 nehmen wir die Schriftgröße 12 und für L3 Schriftgröße 10. Die längsten Bezeichnungen sind für L2 "Kategorie 1" und für L3 "Partner A". Momentan kommt es uns darauf an, diese richtig zu platzieren. Allerdings brauchen wir den Rahmen nicht neu zu zeichnen. Stattdessen nehmen wir unseren Rahmen aus der Bibliothek und verkleinern ihn nur entsprechend, so daß er die Schrift umschließt und mit dem L1-"Button" (was er ja noch nicht ist) rechtsbündig abschließt.
Das Ergebnis der bisherigen Arbeit müßte so ungefähr aussehen wie in Abb.6.


	Abb.6: Anlegen der Buttons

Zum Erstellen der fertigen Buttons markieren wir jetzt Text und Rahmen des ersten Levels ("Produkte") gleichzeitig und erstellen daraus ein neues Symbol (F8 - Eigenschaft "Button" - Name entspricht Text).
Im Edit-Modus des Buttons verschieben wir den Rahmen auf eine eigene Ebene (mit Cut/PiP). Somit läßt sich jedes Element leicht anwählen und verändern. Für die verschiedenen Button-Stati fügen wir für jeden Status einen Keyframe für den Rahmen ein (F6). Anschließend wählen wir jeden Rahmen aus und lösen ihn von Symbol (mit Strg+B = "Break apart"). Nun kann die Füllfarbe geändert werden (für "over"= orange; für "down"=dunkelblau). Dann werden die Rahmen zu neuen Symbolen gemacht (F8), entsprechend benannt und in den Rahmenordner der Bibliothek verschoben. Im Hit-Frame des Buttons machen wir den Rahmen nicht zum Symbol - somit ist der gesamte Rahmenbereich gleich dem Hit-Bereich. Für den Text fügen wir im Down-Frame einen Keyframe ein (F6). Das Textsymbol färben wir hier orange ein ("Modify-Instance-Color effect" - Tint=100%). Jetzt ist der Button eigentlich fertig. Evtl. kann man noch einen Sound-Effekt für den Over- und Down-Status einbinden.
Genauso wird jetzt für die L2- und L3-Button verfahren. Hier vereinfacht sich das Vorgehen schon insofern, daß man die Rahmen-Symbole für den Over- und Down-Status nur noch auszutauschen braucht, da wir sie schon einmal für den L1-Button definiert haben.

Das Erstellen aller fehlender Buttons ist jetzt schnell geschehen, da wir auf die schon erstellten Buttons zurückgreifen können. Zuerst duplizieren wir die Textsymbole und ändern den Text entsprechend den Buttons. Anschließend duplizieren wir die Buttons entsprechend und brauchen dort nur noch die Textsymbole austauschen. Alle Layout-Infos werden dabei beibehalten.

Entwickeln des Layouts/Animation

Sobald alle Buttons erstellt sind, kann nun die Arbeit am Layout und der Animation beginnen. Am besten fügt man zuerst ordentlich Frames ein, da die gesamte Animation schon einigen Platz beansprucht. Dazu z.B. bei Frame 350 alle Ebenen markieren und mit F5 die Frameanzahl erhöhen.

Abb.7: Erstellen der Animation (Bsp. Status-Frame für "Produkte"

Die gesamte Timeline setzt sich aus animierten Übergängen und den einzelnen Navigations-Stati zusammen, d.h. für jeden Button gibt es einen Frame, in welchem er hervorgehoben ist und die entsprechende HTML-Seite aufgerufen wird. Man beginnt mit der Ausgangsstellung und platziert alle L1-Buttons in deren Ebenen (Label "Index"). Danach arbeitet man chronologisch alle möglichen Animationen und Navigations-Stati ab und versieht die Timeline mit entsprechenden Labels.
Z.B. fährt als erstes die Rubrik "Produkte" auf. Die L2-Buttons "Kategorie 1" und "Kategorie 2" werden eingeblendet. Stop-Aktion. Button "Produkte" wird als Grafik definiert mit "Single Frame=3". Dann klappt "Kategorie 1" auf und die entspr. L3-Buttons werden eingeblendet. Stop-Aktion für jeden L3-Button mit entsprechender Grafik-Einstellung (Hervorhebung). Anschließend die L3-Buttons wieder ausblenden lassen und die L3-Buttons der "Kategorie 2" einblenden lassen. Wieder ausblenden und dann auch die L2-Buttons von "Produkte" ausblenden. Das gleiche jeweils für die anderen L1-Rubriken. Am Ende jeder "Einklapp"-Animation wird eine Stop-Action gesetzt, wo später dann die Navigationsschalter (Switches - siehe nächstes Kapitel) über eine zusätzliche TT-Aktion aufgerufen werden.
Wie das nun im Einzelnen erfolgt, muß an dieser Stelle vielleicht nicht erklärt werden. Schaut euch dazu das Beispiel-Flashfile an.
Auf alle Fälle achtet darauf, daß während der Animationen die Button-Symbole als Grafiken dargestellt werden. Dies spart einige Bytes beim fertigen SWF-file und verhindert ein ungewolltes Verhalten der Navigation, wenn der Benutzer während einer ablaufenden Animation auf einen Button klicken will. Die Aktionen weisen wir den Buttons erst später zu. Wie und welche, erfahrt ihr im Kapitel 4.
Weitere Tips und Hinweise, die ihr beachten solltet, findet ihr im nächsten Abschnitt.

Allgemeine Tips und Hinweise zum effektiven Arbeiten

An dieser Stelle Hinweise und Tips, die mir so einfallen, wie ihr die Arbeit effektiv gestaltet und die Übersicht nicht verliert. Einige Tips beziehen sich auch auf folgende Kapitel. Dort findet ihr dann einen entsprechenden Link hierher.

Wenn ihr Textsymbole erstellt und nutzt, spart ihr einerseits Bytes, da Flash immer nur auf dieses Symbol referenzieren muß, andererseits sind Buttonbezeichnungen im Handumdrehungen geändert.
Mit "Cut" und "Paste in Place" könnt ihr in verschiedenen Frames das Objekt immer wieder genau positionieren. Oder ihr markiert einen Frame und verschiebt ihn anschließend mit der Maus in der Timeline. Bei gedrückter STRG-Taste wird der Frame kopiert.
Beim Erstellen der gesamten Animation ist es vorteilhaft, alle Frames, in denen Buttons enthalten sind, zu markieren (z.B. mit einem Comment "B"). Frames, in denen die Button-Objekte als Grafik definiert sind (während einer Animation oder wenn sie hervorgehoben sind) sind dann nicht markiert. Dies erleichtert die anschließende Programmierung der Buttons (siehe Kapitel 4).
Verwendet eindeutige Label-Bezeichnungen, und dies auch in den Switch-Movies (siehe Kapitel 4). Label-Namen können in verschiedenen Timelines wiederholt verwendet werden, ohne daß die Ansteuerung durcheinander kommt. In diesem Flash habe ich eine "zielorientierte" Labelbezeichnung gewählt, d.h. die Labels in den Switches heißen so wie der Label in der Haupt-Timeline, die dann aufgerufen werden soll. Wenn ihr in einem MC eine TT-Aktion einbaut, werden euch nur die Labels der aktuellen Timeline im PullDown-Menü angezeigt. Entweder ihr wißt genau den Label-Namen in der Ziel-Timeline, oder ihr verwendet dieselben Namen im MC und braucht sie dann nur auszuwählen.
Wenn ihr Probleme habt ein bestimmtes Objekt anzuwählen, braucht ihr nur alle anderen Ebenen zu sperren (Schloß-Symbol rechts der Ebenen-Bezeichnung). Dann ists kein Problem mehr.
Wollt ihr die Position eines oder mehrerer Objekte im ganzen Film ändern, sperrt alle nicht relevanten Ebenen. Dann die Schalter für "Edit multiple Frames"-"Onion all frames" aktivieren (links unterhalb der timeline) und über "Bearbeiten"-"Alles auswählen" (Strg+A) alle Objekte aktivieren
In Flash4 könnt ihr euch die Arbeitfläche von der Platzeinteilung her anpassen. Wenn ihr mit der Maus oben auf die Timeline klickt (rechts vom Szene-Namen), könnt ihr diese entweder als frei schwebendes Fenster nutzen oder sie auch an der linken oder rechten Seite der Bühne verankern. In unserem Beispiel ist das Sinnvoll, da das Movie ja auch mehr hoch als breit ist. So sind auch mehr Ebenen gleichzeitig sichtbar.