Einleitung
  Was bringt dieses Tutorial?
  Welche Navigationslogik liegt hier zugrunde?
  Wie sieht das Ergebnis aus?
  Klärung der Begrifflichkeiten dieses Tutorials

Vorbereitung
  Entwerfen der Website-Struktur
  Vorbereitung des Flash-Movies
  Organisieren der Bibliothek


Layout-Erstellung
  Erstellen der Button-Objekte
  Entwickeln des Layouts/Animation
  Allgemeine Tips und Hinweise zum effektiven Arbeiten

Navigations-"Intelligenz"
  Wozu dienen die Schalter (Switches)?
  Erstellung des L1-Switches
  Erstellung des L2-Switches
  Einbau der Switches in das Movie

Programmierung der Buttons
  Allgemeine Verständnis-Hinweise
  Beispiele

Ergänzungen im Flash-Movie
  Einbau eines Preloaders
  Einbinden eines Firmen-Logos

Letzte Arbeiten
  Aufbau des HTML-Framesets
  Einbinden der HTML-Aufrufe
  Einbinden der Flash-Navigation

Was bringt dieses Tutorial?

Mit Flash kann man beeindruckende Navigationsobjekte erstellen. Ein paar Beispiele findet man schon in den mitgelieferten Lernhilfen und -tutorials von Flash, wie z.B. das hierarchische Menü, wo beim Drüberfahren mit der Maus eine zweite Ebene aufblendet. Diese Art von Flash-Navigationsmenüs wird auf vielen Flash-Tutorial-Sites im Internet beschrieben. Dieses Navigations-Tutorial hat einen speziellen Anwendungszweck zum Ziel.
Insofern reine Flash-Seiten erzeugt werden, hat man in der Regel keine Platzprobleme für die Flash-Navigation, da diese auch nach Belieben ein-, aus- und überblendet werden kann. Soll eine Website jedoch vor allem der Informationsbereitstellung dienen, wird der Einsatz von HTML immer noch vorgezogen. Dann allerdings muß die Navigation in den Hintergrund treten und sich mit einem beschränkten und meist eng begrenzten Raum zufriedengeben. Auch die oben erwähnten Flash-Menübeispiele sind recht "platzhungrig", da Untermenüs immer in freien Räumen aufklappen.

Die hier im Folgenden näher beschriebene Art von Flash-Navigation orientiert sich am "klassischen" Navigationsbaum, wie man ihn auf vielen Websites findet. Oft sind es Text- oder Buttonleisten, JavaApplets oder komplexere JavaScript-Anwendungen. Gerade letztere sind jedoch i.d.R. browserabhängig und somit fehleranfällig.
Flash hat den Vorteil, das es browser-unabhängig funktioniert und in jedem Browser gleich aussieht. Natürlich bietet es zudem die Möglichkeit zu beeindruckenden Effekten. Bei der zunehmenden Verbreitung des Flash-PlugIns kann man auch mit immer weniger Bedenken Flash in seine Webseiten integrieren.

Ziel dieser Flash-Navigationsleiste ist es, die gesamte Navigation einer Website abzudecken, ohne mehr als die "übliche" linke Spalte des Browserfensters einzunehmen. Da diese oft recht umfangreich werden können und über mehrere Hierarchie-Ebenen verzweigen, ist ein Explorer-ähnliches Verhalten der Navigation von Vorteil. Wie dies mit Flash realisiert werden kann, zeigt dieses Tutorial.

Ich habe die Flash 4-Version für die Navigationserstellung genutzt, da dies entscheidende Vorteile im Workflow und in der Übersichtlichkeit (Timeline, Bibliothek, Inspectors) bietet. Nichtsdestotrotz wird keine Funktionalität genutzt, die ausschließlich Flash4 vorbehalten ist. Insofern ist diese Navigation auch in Flash 3 realisierbar. Zum Teil beschreibe ich auch allgemeine Funktionsabläufe oder gebe entsprechende Tips in der Hoffnung, daß der eine oder andere von euch noch eine gute Anregung erhält.





Welche Navigationslogik liegt hier zugrunde?

Eine Website ist i.d.R in mehrere Hauptrubriken unterteilt. Diese wiederum können entsprechend weitere Unterrubriken enthalten. Dies ergibt eine weitere Verästelung wie eine Baumstruktur. Alle Seiten sollen über die Navigationsleiste aufrufbar sein.
Da der Platz für die Navigation beschränkt ist, wird jede Rubrik separat ein- bzw. ausgeklappt. Man soll dabei in mehrere Unterebenen verzweigen können. Desweiteren ist es wichtig, daß man jederzeit von einem Punkt, unabhängig von der Verzweigungstiefe, schnell in einen anderen Verzweigungsbaum navigieren kann. In diesem Fall muß zuerst die aktuelle Rubrik "eingefahren" werden, bevor die neue Rubrik "ausfährt".

Dies klingt vielleicht jetzt noch bischen fremd, wird aber sicher bald verständlicher. Vorweg nur noch so viel: Je mehr Unterebenen die Site-Struktur aufweißt, umso komplexer wird die Programmierung der Navigation. Hat man aber erstmal die Vorgehens- und Funktionsweise begriffen, kann man beliebig viele Unterebenen in die Navigation einbinden. Beschränkend ist dann nur das Platzangebot.





Wie wird das Ergebnis aussehen?

	Abb.1: Fertige Navigationsleiste

Jetzt gehts gleich los. In diesem Tutorial bauen wir eine Navigation für eine Website mit drei Hauptrubriken. Jede Rubrik hat wiederum 2 Unterrubriken und die wiederum jeweils 2 Unterrubiken. Dies entspricht einer Strukturtiefe von 3 Hierarchie-Ebenen (natürlich könnte die Anzahl an Unterpunkten pro Rubrik beliebig variieren).

Rechts seht ihr ein Bild der fertigen Flash-Navigation. Wenn ihr darauf klickt, könnt ihr sie auch ausprobieren.










Klärung der Begrifflichkeiten dieses Tutorials

An dieser Stelle ist es vielleicht angebracht, ein paar Begriffe und Abkürzungen zu erklären, die ich in dem Tutorial verwende. Es ist halt nicht immer leicht, sich verständlich auszudrücken und ich hoffe, daß diese Übersicht deshalb die Verständlichkeit fördert.
Ich versuche nach Möglichkeiten, die deutschen Begriffe zu verwenden und gebe die entsprechenden englischen Terms mit an. Da ich die englische Flash4-Version benutze, werde ich sicher öfters die entsprechenden Begriffe nutzen. Bei Unklarheiten schaut ins "Übersetzungs-Tutorial" von Flashworker.de.

Begriff	Erklärung
Rubrik	Kapitel, Überschrift Entspricht z.B. auch den Überschriften eines Dokuments, welches in mehrere Kapitel unterteilt ist. In diesem Tutorial könnten diese numeriert werden wie 1 1.1 1.1.1
Switch	Schalter
TT	"Tell Target" Nähere Erläuterung siehe entspr. Tutorial
L1, L2, L3	L=Level Damit meine ich die Buttons der jeweiligen Hierarchie-Ebene
Status-Frame	Das ist der Keyframe, in welchem ein Button seine Sollposition inne hat, d.h. in welchem er der aufgerufenen Website entspricht. (Button hat seinen Status erreicht ;-))
PiP	Paste in Place Eine hilfreiche und oft anwendbare Funktion in Flash, bei welcher das einzufügende Objekt exakt an der gleichen Position wieder eingefügt wird
MC	Movie Clip