Web-Navigation mit Flash

Webdesign-Komplettpaket: Heft 04/2004 (S. 26) 3,5 Seiten

Drucker, Scanner und Monitor kalibrieren

Sie kennen es ja von Windows: Funktionen werden in Menüs untergebracht, die nach Bedarf aufgeklappt werden können. In diesen Menüs verbergen sich dann vielseitige Funktionen. Solche Aufbauten können Sie nutzen, um mit Flash Navigationselemente anzulegen

Bevor Sie sich an den Aufbau von Menüstrukturen machen können, muss natürlich erst einmal die Grundgrafik gestaltet werden. In unserem Beispiel soll die Webseite eines Möbelhauses als Vorbild dienen.

Hintergrund vorbereiten

Legen Sie in Flash über "Datei/Neu" ein neues Dokument an. Rufen Sie "Modifizieren/Seiteneigenschaften" auf und stellen Sie eine Größe von 550 x 400 Pixeln ein. Stellen Sie als Dokumentfarbe ein helles Blau mit dem Wert "CCFFFF" ein. Für den Seitentitel und die Navigation wird im oberen Bereich des Dokuments ein Rechteck benötigt. Dabei soll "hell auf dunkel" und "dunkel auf hell" eingesetzt werden. Wegen des hellen Hintergrundes soll das Rechteck nun dunkel gestaltet werden. Bei der Navigationsleiste wird es dann andersherum gehandhabt: Es wird dort mit hellen Schriften und Elementen gearbeitet. Rufen Sie also das Rechteck-Werkzeug auf. Stellen Sie in der Hilfsmittelleiste ein, dass kein Umriss verwendet werden soll. Als Füllung wird die Farbe mit dem hexadezimalen Wert "3399FF" benötigt. die Größe des neuen Rechtecks soll 550 x 80 Pixel betragen. Positionieren Sie es in der oberen linken Ecke des Dokuments. Wandeln Sie das Rechteck mit "Modifizieren/In Symbol konvertieren" in ein grafisches Symbol um.

Fotos als Strukturgrundlage

Im folgenden Arbeitsschritt soll der Hintergrund mit einer Struktur versehen werden. Dazu wurde eine Pixelgrafik ins Dokument importiert. Passend zur Aufgabenstellung wurde eine 3-D-Computergrafik mit verschiedenen Möbeln ausgesucht. Um das importierte Foto nur schwach zu erkennen, soll es transparent dargestellt werden. Wandeln Sie dazu das Foto ebenfalls in ein grafisches Symbol um. Außerdem kann im Eigenschaften-Bedienfeld eine Deckkraft von 10 % eingestellt werden. Sie können das Foto nun mit den Pfeiltasten positionieren. Damit das Foto umter der Navigationsleiste angeordnet wird, verwenden Sie die Funktion "Modifizieren/Anordnen/In den Hintergrund". Natürlich können Sie das Foto so lassen. Da aber einige Teile aus dem Foto herausragen, sollen diese nun abgeschnitten werden. Importierte Fotos werden übrigens automatisch in die Bibliothek aufgenommen. Nach der Umwandlung in ein Symbol gibt es zwei Einträge in der Bibliothek. So haben Sie nach dem Zuschneiden immer noch Zugriff auf das Originalfoto. Gehen Sie zum Zuschneiden folgendermaßen vor: Klicken Sie doppelt auf das Foto, um in den Symboleditiermodus zu wechseln. Verwenden Sie die Funktion "Modifizieren/Teilen", damit aus dem Foto eine editierbare Form wird. Rufen Sie das Pfeilwerkzeug auf und ziehen Sie einen rechteckigen Bereich auf, der - zunächst im oberen Bereich - die überflüssigen Teile umfasst. Drücken Sie die Entf-Taste, um den Bereich zu löschen. Wiederholen Sie dies am rechten und unteren Rand; diesen müssen Sie "schätzen", da die Dokumentkanten nicht zu sehen sind. Gegebenenfalls können Sie aber zwischendurch in den normalen Bearbeitungsmodus zurückschalten, um sich zu orientieren, wie weit das Bild beschnitten werden muss. Wenn Sie wieder in den Normalmodus umschalten, sehen Sie, dass die Symbolgröße angepasst wurde.

Text für den Untergrund

Im rechten Bereich soll nun im Hintergrund ein Schriftzug als Firmenlogo untergebracht werden. Aber ganz dezent - wie eine Art Wasserzeichen. Legen Sie dazu in der Zeitleiste eine neue Ebene an. Da der Text später animierbar sein soll, ist die Trennung nötig. Die Farbe der Schrift entspricht der der Navigationsleiste. Die zweite Textzeile erhält dieselben Schriftattribute, allerdings wurde hier die Schriftgröße auf 95 Punkt erhöht. Wandeln Sie abschließend den Text in ein grafisches Symbol um. Den Wasserzeicheneffekt erreichen Sie, indem Sie fürs neu entstandene Symbol einen Alpha-Effekt im Effekt-Bedienfeld einstellen. Geben Sie einen niedrigen Wert von 20 % ein. Dann ist der Text nur noch schwach zu sehen. Außerdem soll im Transformieren-Bedienfeld noch eine Rotation von -25° eingestellt werden. Verschieben Sie das transformierte Logo auf die gewünschte Position. Das fertige Symbol kann nun auch gleich für den Kopf der Navigationsleiste verwendet werden. Öffnen Sie dazu mit dem Tastenkürzel Strg-L die Bibliothek und ziehen Sie das Symbol mit gedrückter linker Maustaste auf die Arbeitsfläche. Nun soll das Logo angepasst werden. Da das Logo weiß werden soll, können Sie den Farbton-Effekt einstellen. Anschließend muss noch die Größe im Transformieren-Bedienfeld verändert werden. Stellen Sie hier einen Wert von 28 % ein. Ist die Proportion-Option aktiviert, bleibt das Verhältnis von Höhe zu Breite unverändert. Die neue Position können Sie im Info-Bedienfeld einstellen, sodass sich ein identischer Abstand zu den Rändern ergibt. Stellen Sie hier beispielsweise 7 Pixel ein. Für die Produktbezeichnung wird ein weiteres Textobjekt benötigt. Dabei wird dieselbe Schriftart verwendet, allerdings in der schmalen Variante - Condensed wird dies im Fachjargon genannt.

Dynamischen Text erzeugen

Dieser Text soll nun in dynamischen Text umgewandelt werden. Dazu müssen die Texteigenschaften verändert werden. Beachten Sie zunächst, dass im Eigenschaften-Bedienfeld die Zentriert-Option eingestellt ist, damit der Text immer zentriert wird. Stellen Sie hier im ersten Listenfeld die Option "Dynamischer Text" ein. Außerdem wird die Einstellung "Einzeilig" verwendet. Damit verhindern Sie, dass zu langer Text auf mehrere Zeilen umbrochen wird. Mit Flash können Sie so genannte Variablen vergeben. Diese Option bietet sich immer dann an, wenn Sie zu Beginn des Films noch nicht wissen, wie ein benötigter Wert aussehen wird. So können Sie in unserem Beispiel noch gar nicht wissen, welchen Menüeintrag der Besucher anklicken wird. Diese Bezeichnung soll ja später in dem Feld angezeigt werden. Vergeben Sie für die Variable einen eindeutigen Namen. Auf die Verwendung der Variablen wird später noch eingegangen.

Schaltflächen erzeugen

Im letzten Schritt der Vorbereitungwerden Texte für die Schaltflächen benötigt. Wir haben in diesem Fall die Schriftgröße auf 10 Punkt reduziert. Die fünf Bezeichnungen wurden wie abgebildet zueinander positioniert. Alle Texte wurden in Schaltflächen-Symbole umgewandelt. Gegebenenfalls können Sie für die Stati "Darüber" und "Gedrückt" andere Schriftfarben einstellen.

Aufbau der Menüs

Im folgenden Arbeitsschritt sollen die Menüs erzeugt werden. Diese bestehen aus Rechtecken und Textelementen. Rufen Sie das Rechteck-Werkzeug auf und ziehen Sie damit ein Rechteck in der abgebildeten Größe auf. Wandeln Sie die Form in ein grafisches Symbol um und vergeben Sie einen aussagekräftigen Namen. Schieben Sie das Symbol knapp unter die Navigationsleiste und links bündig mit dem darüber stehenden Menüeintrag. Legen Sie nun mehrere Instanzen an - für jeden Menüeintrag eine. Richten Sie die Instanzen jeweils oben und links bündig zum darüber stehenden Text aus.

Einfügen der Menüeinträge

Nun kommen die Felder für die Menüeinträge an die Reihe. Sie werden wie die Obermenüs aus Schaltflächen-Symbolen gebildet. Hier soll eine komplexe Variante zum Einsatz kommen. Wie bei Windows-Menüs soll der jeweilige Menüeintrag unterlegt werden, wenn der Mauszeiger darüber fährt. Das Problem besteht in der Ausrichtung der Balken, mit denen der Menüeintrag versehen ist. Hilfslinien helfen wenig, weil sie in der Symbolbearbeitung nicht verwendbar sind. Legen Sie eine neue Ebene für den "Wanderbalken" an. Als Farbfüllung wird die Farbe des Hintergrunds verwendet: "#CCFFFF". Zeichnen Sie ein Rechteck mit 91 Pixeln in der Breite und 21,4 Pixeln in der Höhe. Die Breite ergibt sich aus der Größe des Menüs - das ist 2 Pixel breiter. Konvertieren Sie das Rechteck in ein grafisches Symbol. Nachdem der "Laufbalken" fertig ist, soll die eigentliche Schaltfläche konstruiert werden: der Text. Die verwendeten Schriftattribute entsprechen denen der Menüeinträge - allerdings wird hier wieder die dunklere Farbe der Navigationsleiste verwendet. Konvertieren Sie den fertigen Text in ein Schaltflächen-Symbol. Da es letztendlich sehr viele verschiedene Symbole für die die Menüs geben wird, ist auch hier wieder eine sinnvolle Namensgebung wichtig. Das "Hilfssymbol" können Sie nun löschen. Klicken Sie dann doppelt auf das gerade angelegte Symbol, um in den Bearbeitungsmodus zu gelangen. Ziehen Sie aus der Bibliothek das zuvor erzeugte Rechteck-Symbol auf die Bühne. Da dieses Symbol als Letztes platziert wurde, wird es erst einmal über dem Text angeordnet. Verwenden Sie "Modifizieren/Anordnen/In den Hintergrund", um das Rechteck unter dem Text zu platzieren. Richten Sie Schriftzug und Rechteck aus und orientieren Sie sich bei der horizontalen Ausrichtung am Obermenü-Schriftzug. Der so erzeugte Normalzustand wird eigentlich gar nicht benötigt - er dient nur zum Ausrichten der Schaltfläche. Deshalb können Sie sich den anderen Zuständen widmen. Legen Sie im "Darüber"-Status ein neues Schlüsselbild an. In diesem Status ist das Rechteck richtig - hier wird es wirklich benötigt. Der Schriftzug erhält hier ein neue Farbe: ein leuchtendes Rot (#CC0000). Der "Drücken"-Zustand wird nicht benötigt: Da später gleich eine Aktion ausgeführt wird, ist er sowieso nur kurz zu sehen. Diesen Service bieten Windows-Menüs auch nicht an. Im "Aktiv"-Zustand brauchen Sie ebenfalls keine Änderung vorzunehmen, da das Rechteck bereits den aktiven Bereich vollständig ausfüllt. Platzieren Sie nun das Symbol auf der richtigen Stelle im Menü. Es ist genau einen Pixel von den Rändern entfernt. Stellen Sie dies über das Info-Bedienfeld ein.

Fließbandarbeit

Nun ist es nicht mehr schwierig, viele verschiedene Schaltflächen zu konstruieren, die auf diesem fertigen Symbol basieren. Allerdings ist dies aber eine ganze Menge Arbeit mit immer wiederkehrenden Schritten. Für die ganzen anderen Menüeinträge wird das fertige Symbol verwendet. Durch das Rechteck im "Normal"-Zustand ist das korrekte Positionieren leicht: Ziehen Sie das Symbol aus der Bibliothek auf die Bühne, um eine Instanz davon zu erstellen. Achten Sie darauf, dass im Ansicht-Menü die Ausrichten-Funktion aktiviert ist. Ziehen Sie das Symbol an der oberen linken Ecke unter das bereits fertig platzierte Symbol. Ein kleiner Kreis zeigt die magnetische Wirkung an. Verschieben Sie anschließend das neue Symbol mit den Pfeiltasten um zwei Schritte nach unten. Da das zum Ausrichten sehr praktische Rechteck gleich verschwinden wird, ist ein Zwischenarbeitsschritt nötig: Positionieren Sie dazu gleich die nächste Symbolkopie mit demselben Abstand unter der gerade positionierten. Nun können Sie sich der zweiten Schaltfläche widmen: Da jede Schaltfläche eine andere Beschriftung erhält, müssen jeweils neue Schaltflächen-Symbole angelegt werden. Trennen Sie dazu nun die Instanz vom Symbol - mit der Funktion "Modifizieren/Teilen". Das Rechteck-Symbol bleibt dabei als Symbol erhalten, da es ja in das Schaltflächen-Symbol integriert war. Sie müssen nach dem Teilen zwei Symbole sehen. Wandeln Sie nun die beiden automatisch markierten Objekte gleich wieder in ein neues Symbol um und vergeben Sie einen aussagekräftigen Namen. Sie können z. B. die Flächen einfach durchnummerieren.

Nun muss der "Darüber"-Zustand der Schaltfläche neu erzeugt und der "Auf"-Zustand korrigiert werden, da diese beim Teilen verloren gegangen sind. Editieren Sie zunächst den Text mit der neuen Flächenbeschriftung. Legen Sie dann wieder ein neues Schlüsselbild im "Darüber"-Zustand an und färben Sie den Text. Löschen Sie im "Auf"-Zustand das Rechteck und färben Sie den Text in der Farbe des "Wanderbalkens" ein: #CCFFFF. Führen Sie diese Schritte nun immer wieder durch, bis das erste Menü mit den Einträgen gefüllt ist. Der erste Menüpunktmuss vorerst noch bleiben,wie er ist, da das Symbol ja als Muster verwendet wird. Testen Sie, ob die Schaltflächen optisch funktionieren. Dazu können Sie vorübergehend die Funktion "Steuerung/Schaltflächen aktivieren" verwenden.

Aufbau der weiteren Menüs

Nun können Sie mit den bekannten Arbeitsschrittenauch alle anderen Menüs aufbauen. Dabei sollten Sie darauf achten, dass jeweils das Rechteck des Menüs und die dazugehörenden Schaltflächen auf einer eigenen Ebene platziert werden. Das ist für die kommende Animation wichtig. Achten Sie auch hier auf eine sinnvolle Benennung der Ebenen, um die Übersicht zu wahren. In unserem Demobeispiel haben wir der Einfachheit halber alle Menüs mit identischem Inhalt versehen.

Nachdem alle Menüeinträge ausgerichtet sind, kann auch die erste Menü-Schaltfläche editiert werden. Da es sich ja um ein Symbol und dessen Instanzen handelt, brauchen Sie nur eines der Symbole zu verändern - alle anderen Instanzen werden automatisch verändert. Das Hilfsrechteck im "Auf"-Status wurde ja nur zum Ausrichten benötigt. Damit ist das Grundgerüst der Webseite fertig gestellt.

Aufbau von Roll-down-Menüs

Nun können Sie sich daran machen, das Menü mit Funktionen zu versehen. Wie bei Windows-Menüs üblich, soll es bei einem Mausklick auf den Eintrag im Hauptmenü aufklappen und bei einem erneuten Mausklick wieder zuklappen. Das Ganze kann noch verschönert werden, indem das Menü nicht einfach aufklappt, sondern "herunterfährt". Dazu wird die Zeitleiste des Films einfach in verschiedene Bereiche aufgeteilt. Die unterschiedlichen Menüs werden jeweils auf einer eigenen Ebene platziert. Die unterschiedlichen Untermenüs werden nur in bestimmtem Bereichen der Zeitleiste sichtbar. Mit Mausklicks auf die Schaltflächen wird dann einfach zwischen den verschiedenen Bereichen ind er Animation hin- und hergesprungen. Um dies zu erreichen, gehen Sie folgendermaßen vor: Markieren Sie bei den fünf Untermenü-Ebenen jeweils das Filmbild 20. Rufen Sie dann aus dem Kontextmenü die Funktion "Schlüsselbild einfügen" auf, um bei den markierten Bildern ein neues Schlüsselbild einzufügen. Markieren Sie die Sequenz des ersten Menüs. Halten Sie nach dem Anklicken die linke Maustaste gedrückt und ziehen Sie die Auswahl nach rechts - und zwar so weit, dass anschließend das erste Bild bei Filmbild 20 platziert ist. Ein Vorschaubild zeigt die Aktion an. Wiederholen Sie dies mit den anderen Ebenen. So beginnt die Animation der zweiten Ebene in Filmbild 40. Fügen Sie übers Kontextmenü auf den anderen Ebenen im letzten Filmbild Füllbilder ein, damit die Elemente während der gesamten Zeit zu sehen sind. Auf der Bühne sehen Sie dann schon im letzten Filmbild, dass das Ziel erreicht ist: Dort sind alle Menüs - bis aufs letzte - nicht mehr zu sehen. Würden Sie nun den Film starten, würde jede Sekunde ein neues Untermenü erscheinen und für eine Sekunde zu sehen sein - mehr nicht. Um Einfluss auf den Ablauf des Films nehmen zu können, müssen Vorbereitungen getroffen werden. Da später die Untermenüs herunter- und hinauffahren sollen, fügen Sie zuerst einmal Bewegungstweens ein. Legen Sie danach innerhalb des Bewegungstweens zwei weitere Schlüsselbilder an: eines in Bild 29 und eines in Bild 30. Diese Schlüsselbilder werden später verwendet, um das Untermenü nach dem Herunterfahren wierder heraufzufahren. Wiederholen Sie dies Schritte für alle Untermenü-Ebenen.

Um bestimmen zu können, zu welcher Stelle des Films gesprungen werden soll, muss der Film angehalten werden. Und das nicht nur an einer Stelle, sondern immer wieder. Zuerst soll verhindert werden, dass der Film gleich startet. Stellen Sie im Aktionen-Bedienfeld eine Stop-Aktion ein. Nun sollen an weiteren Stellen Stopps eingefügt werden: zum einen beim zweiten Schlüsselbild jedes Bewegungstweens - dort ist das Menü heruntergefahren -, außerdem am Ende jedes Bewegungstweens - dort ist das Menü wieder heraufgefahren. Also kommt wieder Fleißarbeit auf Sie zu: Insgesamt müssen elf Stop-Aktionen platziert sein - zehn für die Ebenen und eine für das Hauptmenü.

Menüs herauf- und herunterfahren

Nach diesen Schritten können Sie sich der Animation widmen - die Menüs sollen in Bewegung versetzt werden. Das geht aber nicht "einfach so", da die Untermenüs über das Hauptmenü fahren würden. Um das zu verhindern, muss eine Maske eingesetzt werden. Legen Sie dazu eine neue Ebene an und zeichnen Sie darauf ein Rechteck, das genau an die Oberkante der Untermenüs anstößt. Klicken Sie im Ebenen-Fenster doppelt auf das Symbol der neuen Ebene, um die Eigenschaften aufzurufen. Stellen Sie den Masketyp ein und aktivieren Sie das Sperren-Optionsfeld. Deaktivieren Sie außerdem die Einblenden-Option, damit die Ebene nicht mehr angezeigt wird. Wechseln Sie zum Bild 20; dort soll das erste Menü noch nicht zu sehen sein. Markieren Sie hier die Ebene des ersten Menüs. Sie können dann zum präzisen Verschieben des Menüs das Info-Bedienfeld einsetzen. Wechseln Sie zum letzten Schlüsselbild dieser Ebene und stellen Sie im Info-Bedienfeld denselben Wert ein - dort soll das Menü heraufgefahren sein. Nun folgt wieder Fleißarbeit, denn derselbe Wert muss bei allen anderen Ebenen ebenfalls im ersten und letzten Schlüsselbild eingetragen werden. Das Umstellen über das Info-Bedienfeld ist nicht nur genauer als das Verschieben "Pi mal Auge", es geht auch schneller, weil immer dieselbe Position eingestellt werden muss. Um die mittleren Schlüsselbilder innerhalb des Bewegungstweens brauchen Sie sich nicht zu kümmern. Da die Schlüsselbilder vorher erzeugt wurden, ist dort alles unverändert: Die Menüs stehen noch an ihrer alten Position. Nachdem die Animationssequenzen fertig sind, können die einzelnen Ebenen in die Maske integriert werden. Das funktioniert leider nicht auf einen Schlag - Sie müssen die Einstellungen nacheinander für jede Untermenü-Ebene vornehmen. Noch immer passiert nicht allzu viel, wenn Sie den Film starten - schließlich wurde ja noch nicht definiert, was beim Anklickewn der einzelnen Hauptmenü-Schaltflächen passieren soll. Da bereits alle Schlüsselbilder definiert sind, ist das Zuweisen der Aktionen nicht allzu schwierig. Sie müssen nur genau überlegen, zu welchem Zeitpunkt was geschehen soll. Dabei sollten Sie ganz von vorn beginnen und sich anschließend bis zum Ende durcharbeiten. Dazu ist etwas Fleißarbeit notwendig.