Komplexe animierte Navigation

Thema:
Komplexe animierte Navigation
Description:
Navgationsleiste mit ziehbaren movieclip
Keywords:
Flash, Actionscript, Navigation, drag&drop, hitTest, Interaktion
Author:
Kiki Wey
(3D-Flocke: Ruben Ranke)
Date:
16.11.2000
Doc-ID:
67-001
URL:
http://www.flashworker.de/tutorial/67/001.html
Version:
1.0
Änderungen:
-
Anforderungen:
Flash 5
Vorkenntnisse:
Erstellen und Plazieren von Symbolen,
Actionscript Grundkenntnisse
Download:
PC: flockennavi.zip", 170 kB
nur fla: "flockennavi_fla.zip", 60 kB

Einleitung
  Was kann die Navigation?
  Was bringt dieses Tutorial?

Erstellung der benötigten Symbole
  Flocke
  Menü und der Rest

Scripting
  Hauptfilm
  Flocke
  Menü




 

Was kann die Navigation?

Am besten ihr schaut euch erst mal an, um was es geht und spielt etwas mit der Navigation herum: swf ansehen (Sorry für die recht üppigen 50kb, das liegt an der Einzelbildanimation der 3D-Flocke).
Es handelt sich um ein rotierendes 3D-Objekt - den movieclip Flocke-, das sich entlang einer reduzierten Navigationsleiste horizontal bewegt. Immer wenn die Flocke einen versteckten Hauptmenüpunkt passiert hat, wird dieser kurz sichtbar. Um an die Untermenüpunkte zu gelangen, muß die Flocke vom User aktiv mit der Maus auf die entsprechenden Menüpunkte der Leiste gezogen werden. Trifft er daneben, läuft die Flocke weiter, ansonsten stoppt die Flocke und das Untermenü klappt aus. Nach Auswahl eines Untermenüpunktes durch Mausklick oder nach dem erneuten Verschieben der Flocke auf einen "menüfreien" Abschnitt, startet die Flocke erneut ihren Weg entlang der Navigationsleiste.




Was bringt dieses Tutorial?

Hoffentlich ein besseres Verständnis von der Arbeit an verschachtelten Movieclips und ihre Adressierung sowie einen Eindruck von der neuen Actionscript-Schreibweise. Im Script wird unter anderem Bewegung durch Programmierung (und nicht durch Tweening) erzeugt, die Drag-funktion von Movieclips verwendet und es werden zwei Möglichkeiten gezeigt, wie man überprüfen kann, ob ein Movieclip an einer bestimmten Position auf der Bühne liegt.




Erstellung der Flocke

Zuerst gilt es einen Movieclip (mc) zu erstellen, in dem sich die Flocke nur auf der Stelle dreht. Ich habe das mit einer Einzelbildanimation gemacht, um dem echten 3DModell der Flocke (-danke an Ruben, den 3D Meister!-) zur Ehre zu verhelfen. Ihr könnt natürlich auch jedes andere Objekt nehmen und es mit einem Bewegungstween rotieren lassen. Dieser Clip ("flocke_basic") wird dann in einen neuen mc ("flocke_fertig") mit zwei Frames gezogen. Auf eine neue Ebene über der Flocke kommt ein Blindbutton. Die "flocke_fertig" muß nun nur noch auf der Hauptbühne abgelegt und mit einem Instanznahmen versehen werden. Ich habe die Instanz "flocke" genannt. Die Zeitleiste des Hauptfilm ist ebenfalls nur zwei Frames lang.





Erstellung des Menüs und des Restes

Für das Menü werden zuerst die Buttons für das Untermenü angelegt ("bu_navi"). Das gesamte Menü ist ein neuer mc ("menü") mit drei unterschiedlichen Phasen auf der Zeitleiste. Ich habe diese auf insgesamt 20 Frames aufgeteilt. Über die gesamte Zeit ist das kleine graue Quadrat zu sehen, sozusagen das Menü im eingeklappten Ruhezustand. Ab Frame 5 kommt dann der Menütitel dazu (bei mir "contact"). Der 5. Frame bekommt das Label "2", da es den zweiten Zustand des Menüs darstellt. Ab dem 12. Frame (Label "3") wird das Untermenü ausgeklappt. Dazu zieht ihr Instanzen der "bu-navis" in den Clip. Da es in diesem Tutorial nur um das Prinzip geht, habe ich nur ein Menü angelegt, daß ich immer wieder verwende. Ihr könnt natürlich unterschiedliche Menüs anlegen, ihr müßt dann nur später beim Scripting aufpassen, daß die Befehle auch immer an die richtigen Clips bzw. Instanzen adressiert sind. Die Menüs werden im Hauptfilm auf einer eigenen Ebene plaziert und mit den Instanznamen "eins", "zwei" und "drei" versehen. Dann die Ebene kopieren (copy frames) und auf einer neuen Ebene darunter einfügen, so daß jedes Menü zweimal übereinander liegt. Die kopierten Instanzen in "einsa", "zweia" und "dreia" umbenennen. Dieser kleine Kunstgriff wird benötigt, um später beim automatischen Überfahren der Flocke eine unterschiedliche Reaktion -das Zeigen der Menüüberschrift- als beim usergelenkten Anhalten der Flocke - das Ausklappen des Untermenüs- hervorzurufen. (Wie so oft gibt es natürlich noch x andere Methoden für diesen Effekt, ich finde die Lösung mit den kopierten Menüs jedoch am unkompliziertesten)

Nun brauchen wir noch einen kleinen mc als Stellvertreter für einen Inhalt, der über die Untermenüs aufgerufen werden kann. Bei mir ist es der mc "flashworker", Instanzname "inhalt". Der erste Frame des mc ist leer und mit einem "stop()" versehen, so daß die im Hauptfilm abgelegte Instanz ersteinmal nicht sichtbar ist.




Weiter