.: navigationsleiste erstellen :.
 
abyter.de \\ workshops

Einführung
Jede gute Website hat eine Navigationsleiste. Manche bringen ihr ganzes künstlerisches Talent dafür auf, die schönste Navigationsleiste zu erstellen. Es kann jedoch unter Umständen negativ sein, die Navigationsleiste sehr ausgefallen und komplex zu gestalten, denn je komplexer und größer die Navigationsleiste wird, desto länger dauert es bis sie auf dem Computer des Surfers erscheint. Nun will man aber natürlich auch nicht eine ganz einfache Navigationsleiste. Genau in dieses Dilemma bringt Flash den Kompromiss, denn mit Flash können schöne Navigationsleisten erstellt werden, die trotzdem noch einigermaßen schnell zu laden sind.
Aus diesem Grund habe ich vor mit dir eine Navigationsleiste in Flash zu erstellen.
Damit du bei meinem Workshop mitarbeiten kannst, solltest du auf jeden Fall alle vorherigen Workshops durchgearbeitet haben, da ich nicht mehr auf jede Einzelheit eingehe. Nun aber an die Arbeit.

Wie die Leiste aussehen soll
Also, ich habe mir ein Rechteck mit abgerundeten Ecken vorgestellt, auf dem die einzelnen Menüpunkte stehen. Wenn man über die Menüpunkte mit der Maus fährt, sollen diese hervorgehoben werden. Wenn man darauf klickt, dann soll sich neben der Hervorhebung auch die Schriftfarbe ändern. Die ganze Menüleiste soll in den Frame einer Webseite eingebaut werden.

Vorarbeiten
Ändere die Größe der Bühne auf 170 x 370, die Hintergrundfarbe bleibt unverändert. Zeichne anschließend ein abgerundetes Rechteck, dass die ganze Bühne füllt (146.9 x 352.8). Das Rechteck soll einen Eckradius von 10 Pixeln haben (lässt sich mit dem Optionssymbol blaue abgerundete Ecke einstellen), der Umriss soll ausgeschaltet sein und die Füllung die Standardfarbe (#0068D0) haben. Nun haben wir die Navigationsleiste, jetzt geht es an die Beschriftung.
Lege zuerst einmal eine neue Ebene an. Schreibe dann mit dem Textwerkzeug und den Einstellungen Textfarbe "weiß" (#FFFFFF) und der Schriftgröße "24 px" den Text "Tutorials". Wandle den Text dann in eine Schaltfläche um.

Schaltflächen designen
Nun muss der Schaltfläche noch bei gebracht werden, dass sie bei Mauskontakt hervorgehoben wird und dass beim Druck neben der Hervorhebung sich die Textfarbe ändert.
Doppelklicke auf die Schaltfläche, die Zeitleiste ändert sich. Nun werden die verschiedenen Zustände der Schaltfläche angezeigt. Der Normalzustand ist "aktiviert", wenn man die Maus über die Schaltfläche bewegt tritt der Zustand "Darüber" ein und beim Mausklick der Zustand "Drücken". Um den Zustand anzupassen wir wie bei der normalen Zeitleiste eine Schlüsselbild bei dem Zustand eingefügt. Rechtsklicke also in dem Zustand "Darüber" und füge ein neues Schlüsselbild ein. Bevor du dich um die Hervorhebung kümmerst, muss du dafür sorgen, dass nichts ausgewählt ist. Zeichne danach mit dem Einstellungen "keine Kontur", Füllung "weiß" und dem Alphawert "30%" ein Rechteck über dem Text "Tutorials" (mein Hervorhebungsrechteck ist 146.9 x 30.6 groß). Für eine genaue Positionierung verwendet man das Info-Bedienfeld. Lege danach auch für den Zustand "Drücken" ein Schlüsselbild an, wie du siehst, wird der Zustand "Darüber" mit übernommen, dies erleichtert uns die Arbeit, da wir nur noch die Farben abändern müssen. Das Hervorhebungsrechteck soll als Füllung "#000066" und als Alphawert "30%" erhalten (Darauf achten, dass nur das Rechteck ausgewählt ist!) und die Schriftfarbe wir auf "schwarz" (#000000) abgeändert.
Schließe den Bearbeitungsmodus der ersten Schaltfläche, indem du auf das Szene-Symbol klickst (Filmklappe). Nun kannst die Schaltfläche schon einmal testen. (mit [Strg]+[Enter] in den Film-testen-Modus wechseln).

Navigationsleiste

Andere Schaltflächen
Die anderen Schaltflächen können nun analog zu der ersten erstellt werden. Füge aus der Bibliothek die erste Schaltfläche auf der Bühne ein und Teile sie anschließend, in dem du den Menüpunkt "Modifizieren"/"Teilen" klickst. Nun kannst du den Text ändern, wandle diesen dann mit [F8] wieder in eine Schaltfläche um und bearbeite die Zustände analog zu der ersten Schaltfläche. Ich habe dies mit den Beschriftungen "Software", "Tipps", "Über mich", "Gästebuch", "Links" und "E-Mail" gemacht. Anschließend habe ich sie mit Hilfe des Ausrichten-Bedienfelds zentriert und die Abstände angepasst.
So, nun ist die Navigationsleiste fertig. Halt! Rein optisch, denn sie hat noch keine Funktionen! Wir können zwar wie gewünscht auf den Schaltfläche herumklicken, es passiert jedoch noch rein gar nichts.
Nun sollte die Navigationsleiste aussehen wie rechts.

Schaltflächen mit Funktionen ausstatten
Mit ActionScript - der Programmiersprache von Flash -  fügen wir nun die Seitenaufrufe in die Animation ein. Markiere die erste Schaltfläche, mache einen Rechtsklick und wähle im Kontextmenü "Aktionen" aus. Öffne nun den "Aktionen"-Baum aus, wähle dort die Aktion "getURL" aus. Trage dann bei URL die URL ein (z.B. "Prog.htm") und bei Fenster den Frame, in das die Seite geladen werden soll (z.B. "welcome"). Mache dies mit allen Schaltfläche. Bei der E-Mail-Schaltfläche gibst du unter URL "mailto:[mailadresse]" ein, wobei [mailadresse] natürlich durch die E-Mail-Adresse ersetzt werden muss.
Nun ist die Navigationsleiste wirklich fertig!

In den Frame einbauen
Nun muss die Navigationsleiste noch in einen Frame einer Website eingefügt werden. Positioniere die Flash-Animation in eine HTML-Datei und lade diese in den Frameset (Wie ein Frameset aufgebaut ist, siehe hier unter Frames).

In Aktion sieht die Navigationsleiste so aus.

Für alle, bei denen es nicht geklappt hat, hier die Flash-Datei und das fertige Ergebnis zum downloaden.

Related Workshops: Die Einführung \\ Die Arbeitsoberfläche \\ Flashanimationen erstellen \\ Fortgeschrittene Flashanimation
Related Files: Flash-Datei des Ergebnises

<Zurück

© by www.abyter.de (Martin Monshausen)