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  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 ( ).
Nun kannst die Schaltfläche schon einmal testen. (mit [Strg]+[Enter] in
den Film-testen-Modus wechseln).
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.
|
Zurück