Komplexe Flash-Navigationsleiste für HTML-Sites

Navigations-"Intelligenz"
  Wozu dienen die Schalter (Switches)?
  Erstellen des L1-Switches
  Erstellen des L2-Switches
  Einbau der Switches in das Movie
Wozu dienen die Schalter (Switches)?
Da es möglich sein soll, jeden sichtbaren Button innerhalb eines Navigationsstatuses anzuwählen, muß auch die Navigation entsprechend reagieren. D.h., die entsprechenden Rubriken müssen entsprechend ein- bzw. ausgefahren werden (vergl. die Navigationslogik). Dabei sollen die einzelnen Animationen entsprechend nacheinander ablaufen. Um dies sicherzustellen, werden Switches benötigt, über welche die Abfolge der einzelnen "Ein- und Ausfahr"-Animationen gesteuert werden.
Besteht die Navigation nur aus zwei Hierarchieebenen (L1+L2), ist dies noch relativ einfach. Befindet man sich z.B. in der Rubrik "Produkte" (L2-Buttons dieser Rubrik sind eingeblendet) und will zur L1-Rubrik "Info" wechseln, werden zwei Animationen abgespielt (L2 von "Produkte" ausblenden und dann L2 von "Info" einblenden). Würde man nun beide "GoTo and Play"-Aktionen direkt dem "Info"-Button zuordnen, würde nur die letzte der beiden Animationen abgespielt werden. Deshalb hat der "Info"-Button nur die Aktion "Blende die L2-Buttons der Produkte aus" sowie einen Positionierungs-Befehl für den L1-Switch. Am Ende dieser Animation wird der L1-Switch aufgerufen (über TT), über welchen dann die Aktion "Blende die L2-Buttons von "Info" ein" aufgerufen wird. Somit werden die Animationen flüssig nacheinander abgespielt.

Abb.8: Bsp. Navigationsstatus innerhalb L3
Abb.8: Bsp. Navigationsstatus innerhalb L3

Hat die Navigation 3 Hierarchieebenen, gibt es auch mehr Möglichkeiten der Abfolge verschiedener Animationen. Befindet man sich z.B. innerhalb der L3-Ebene einer Rubrik (siehe Abb.8), gibt es folgende Möglichkeiten:

  1. Auswahl des L1-Buttons der gleichen Hauptrubrik:
    Blende die aktuellen L3-Buttons aus - Gehe zu Frame des aktivierten L1-Buttons
  2. Auswahl eines anderen L2-Buttons innerhalb der gleichen Hauptrubrik:
    Blende die aktuellen L3-Buttons aus - Blende die L3-Buttons einer anderen L2-Rubrik der gleichen L1-Rubrik ein
  3. Auswahl einer anderen Hauptrubrik (L1):
    Blende die aktuellen L3-Buttons aus - Blende die L2-Buttons der aktuellen Hauptrubrik aus - Blende die L2-Buttons der anderen Hauptrubrik ein
  4. Gehe zur Anfangsseite (Homepage) - Button Firmenlogo (siehe Kap.6):
    Blende die aktuellen L3-Buttons aus - Blende die L2-Buttons der aktuellen Hauptrubrik aus - Gehe zu Index-Frame
Bei Anwahl von L3-Buttons des gleichen Hierarchiepfades (im Beispiel "Produkt 2") sowie des direkt übergeordneten L2-Buttons (im Beispiel "Kategorie 1") erfolgt keine Animation, sondern nur ein Goto-Befehl.

Man benötigt demnach zwei Switches. Switch1 ist für die Animationen L2 zu L1 notwendig und wird nach jeder entsprechenden Ausblend-Animation aufgerufen, Switch2 wird für alle Animationsfolgen aus L3 benötigt und nach einer Ausblend-Animation L3 -L2 aufgerufen (siehe auch Hinweis im Abschnitt "Layout/Animation" und Kapitel "Programmierung").




Erstellen des L1-Switches

Abb.9: Erstellen des L1-Switches
Abb.9: Erstellen des L1-Switches
 		 

Switch1 ist zuständig für die Einblend-Animation L1 zu L2 und wird vom letzten Frame einer Ausblend-Animation L2-L1 aufgerufen.
Zuerst erstellen wir ein neues Objekt als Movieclip (MC) über "Einfügen-Neues Symbol" oder Strg+F8 und nennen es "switch1". Im Edit-Modus des MC erstellen wir zwei Ebenen ("Label" und "Action"). Alle Frame-Actions werden in der Ebene "Action" eingefügt, die Frame-Labels fügen wir in der Ebene "Labels" ein. Das dient einer besseren Übersichtlichkeit.
Im ersten Frame fügen wir eine Stop-Action ein. Im Folgenden benötigen wir 4 Labels - für jeden L1-Status einen. Jeder Status benötigt zwei Action-Keyframes, die direkt aufeinander folgen müssen (da später ein Aufruf des Switches über "Goto next frame" erfolgt). Die Labels werden idealerweise so genannt, wie der Target-Frame in der Haupt-Timeline heißt, von welchem die aufzurufende Animation aus startet (siehe Tips).
Der Switch1-MC wird nun wie folgt eingestellt:

Frame Label Action
2 Index Stop
3   Stop
Begin Tell Target ("/")
Goto and Stop ("Index")
End Tell Target
8 Produkte-up Stop
9   Stop
Begin Tell Target ("/")
Goto and Play ("Produkte-up")
End Tell Target
17 Firma-up Stop
18   Stop
Begin Tell Target ("/")
Goto and Play ("Firma-up")
End Tell Target
24 Info-up Stop
25   Stop
Begin Tell Target ("/")
Goto and Play ("Info-up")
End Tell Target

Hat die aufzurufende L1-Rubrik keine Unterverzeichnisse und somit keine Einblend-Animation, wird nur eine Aktion "Goto and STOP" angefügt (in diesem Fall bei Index). Ansonsten kommt es zu Fehlverhalten!




Erstellen des L2-Switches
Switch 2 wird immer aufgerufen nach einer Ausblend-Animation L3 zu L2, d.h. wenn ein übergeordneter Button eines anderen Hierarchiepfades angewählt wird. Da es hier wesentlich mehr Konstellationen der Animationsfolgen gibt, ist dieser Switch auch umfangreicher (siehe oben). Der Switch wird in drei Bereiche unterteilt:

  Abb.10: Erstellen des L2-Switches
Abb.10: Erstellen des L2-Switches

  1. Bereich 1:
    Für jeden L2-Button ein Label notwendig, bei welchem dann die jeweilige L2-L3-Einblend-Animation aufgerufen wird.
  2. Bereich 2:
    Für jeden L1-Button ein Label, bei welchem anschließend die Ausblend-Animation L2-L1 aufgerufen wird.
  3. Bereich 3:
    Für jeden L1-Button, ohne daß anschließend eine Einblend-Animation aufgerufen wird (nur ein Goto and Stop). Dies wird gebraucht bei Anwahl des direkt übergeordneten L1-Buttons aus der L3-Ebene heraus.

Wir erstellen erstmal einen neuen MC entsprechend der Vorgehensweise bei Switch1. Anschließemd erstellen wir die Labels und Actions für die 3 Bereiche (Siehe auch Abb.10).
Im Folgenden die Syntax für die einzelnen Bereiche beispielhaft. Diese müßt ihr dann für die fehlenden Buttons entsprechend ergänzen.

Bereich 1:

Frame Label Action
2 Kategorie 1-up Stop
3   Stop
Begin Tell Target ("/")
Goto and Play ("Kategorie 1-up")
End Tell Target
a Kategorie 2-up Stop
a+1   Stop
Begin Tell Target ("/")
Goto and Play ("Kategorie 2-up")
End Tell Target
b Über uns-up Stop
b+1   Stop
Begin Tell Target ("/")
Goto and Play ("Über uns-up")
End Tell Target
c ...  


Bereich 2:

Frame Label Action
d Produkte-down Stop
d+1   Stop
Begin Tell Target ("/")
Goto and Play ("Produkte-down")
End Tell Target
e Firma-down Stop
e+1   Stop
Begin Tell Target ("/")
Goto and Play ("Firma-down")
End Tell Target
f ...  

Bereich 3:
Frame Label Action
g Produkte Stop
g+1   Stop
Begin Tell Target ("/")
Goto and Stop ("Produkte")
End Tell Target
h Firma Stop
h+1   Stop
Begin Tell Target ("/")
Goto and Stop ("Firma")
End Tell Target
j ...  

Jetzt sind die Schalter soweit fertig und müssen nur noch in die Haupt-Timeline integriert werden.




Einbau der Switches in das Movie
Da die Switches keine Objekte enthalten, ist es egal, wo sie auf der Bühne platziert werden. (Sind sind nicht sichtbar und in der Arbeitsumgebung nur als kleine Kreise markiert.) Wichtig ist nur, daß sie über die ganze Timeline des Hauptmovies ansprechbar sind.
Aus diesem Grund fügen wir beide MCs auf einer eigenen Ebene gleich zu Beginn des Movies ein. Anschließend weisen wir jedem MC noch einen Instanz-Namen zu, damit sie über Tell Target angesprochen werden können. Switch 1 nennen wir "switch1", Switch 2 nennen wir "switch2" - daß ist am naheliegendsten.

Anmerkung: Instanznamen dürfen keine Leerzeichen enthalten, da eine TT-Aktion sonst nicht funktioniert. Selbst ein Leerzeichen als letztes Zeichen führt zu einer Fehlfunktion!



Zurück     Weiter