Navigationsleisten erstellen

Titelthema: Heft 02/2002 (S. 26) 4 Seiten

Fireworks MX im Praxiseinsatz

Fireworks ist ein leistungsfähiges Programm zur Gestaltung von Web-Grafiken. Das Pendant zu Adobes ImageReady kann überzeugen. In der neuen Version wurde die Bedienung an die anderen Programme des Studio-MX-Pakets angepasst. So fällt nun der Ein- oder Umstieg leichter. An einem Praxisbeispiel wird die Bedienung von Fireworks vorgestellt

Dieser Workshop zeigt Ihnen, wie Sie eine aufwändig gestaltete Navigationsleiste erstellen, die anschließend mit Hotspots versehen und zum Abschluss sinnvoll segmentiert wird. In diesem Workshop lernen Sie einige der interessanten Werkzeuge und Effektmöglichkeiten von Fireworks kennen.

Grundformen erstellen

Bevor wir unsere Arbeit beginnen, benötigen wir natürlich erst einmal ein neues leeres Dokument. Verwenden Sie dazu die Funktion "Datei/Neu". Stellen Sie eine Breite von 600 und eine Höhe von 170 Pixeln für das Dokument ein. Aktivieren Sie außerdem die Option für einen weißen Hintergrund. Wir wollen als Erstes eine unregelmäßige Form erstellen. Dazu wird der Füller aus der Werkzeugleiste am linken Rand des Arbeitsbereichs verwendet, den Sie auch mit dem Tastenkürzel P aufrufen können. Wenn Sie den Mauszeiger in das Dokument halten, sehen Sie ein Kreuzsymbol. Klicken Sie dort, wo der Pfad beginnen soll. Wird danach der Mauszeiger bewegt, erscheint eine Vorschaulinie, die eine gerade Strecke anzeigt. Würden Sie nun einfach auf die neue Position klicken, entstünde eine gerade Strecke. Da wir aber Rundungen erzeugen wollen, halten Sie nach dem Klicken auf den zweiten Punkt die Maustaste gedrückt. Wenn dann der Mauszeiger bewegt wird, erscheinen zwei Ankerpunkte, die den Verlauf der Rundung anzeigen. Ist der gewünschte Kurvenverlauf erreicht, platzieren Sie den Punkt durch Klicken. Bewegen Sie jetzt den Mauszeiger weiter, wird gleich eine Rundung als Vorschau angezeigt. Ziehen Sie den Mauszeiger zum nächsten Punkt und klicken Sie dort auf die beschriebene Art. Da unser Objekt nur aus Rundungen bestehen soll, muss jedes Mal die Maustaste gedrückt werden. Platzieren Sie so Punkt für Punkt der unregelmäßigen Form, bis die Form fertig gestellt ist. Mit einem Klick auf den Anfangspunkt wird die Form geschlossen. Diese Situation zeigt die Abbildung unten. An der fertigen Form sind aber noch einige Korrekturen notwendig.

Formen korrigieren

Wenn die Form auf Anhieb nicht so aussieht, wie sie vielleicht sollte, macht das nichts: Sie können die einmal platzierten Punkte nachträglich editieren. Dazu stellt Fireworks verschiedene Verfahren bereit. Rufen Sie das Teilauswahlwerkzeug aus der Werkzeugleiste auf. Alternativ können Sie dazu auch die Taste A verwenden. Nach dem Anklicken der Form werden alle platzierten Punkte mit kleinen Quadraten angezeigt. Klicken Sie auf einen Punkt, wird dieser ungefüllt angezeigt - außerdem sehen Sie dessen Ankerpunkte. Um einen Punkt zu verschieben, klicken Sie ihn an und verschieben ihn mit gedrückter linker Maustaste. Eine Vorschaulinie zeigt die alte und neue Position des Punktes an. Wenn die Form der Kurve verändert werden soll, klicken Sie einen der beiden Ankerpunkte an, die die Form der Kurve bestimmen. Verziehen Sie den Ankerpunkt mit gedrückter Maustaste. Um aus einer Geraden eine Kurve oder umgekehrt zu machen, benötigen Sie jetzt wieder das Füllerwerkzeug. Klicken Sie dabei einfach auf den umzuwandelnden Punkt. Nach dem Anklicken wird die Kurve in ein gerades Segment umgewandelt. Als Segment werden übrigens die Strecken zwischen zwei Punkten bezeichnet.

Freie Formänderung

Die Formen können aber auch verändert werden, ohne dass die Punkte bearbeitet werden. Dazu wird das Freiformwerkzeug verwendet. In dem Untermenü dieses Werkzeugs finden Sie auch Werkzeuge zum Ändern von Bereichen oder zum Hinzufügen beziehungsweise Löschen von Punkten. Klicken Sie mit diesem Werkzeug auf die Stelle der Kurve, die verändert werden soll. Durch Ziehen mit gedrückter Maustaste wird die Kurvenform verändert. Ist die Vorschau im Eigenschaften-Bedienfeld am unteren Rand der Arbeitsoberfläche aktiviert, lässt sich die Veränderung gleich beobachten. Fireworks fügt bei dieser Methode automatisch neue Punkte ein oder löscht bestehende. In den Eigenschaften wird übrigens auch die Streckenlänge eingestellt, die verändert werden soll. Geben Sie den gewünschten Wert im Größe-Feld ein. Korrigieren Sie mit den vorgestellten Verfahren die Kurve, bis sie in etwa die gezeigte Form bildet.

Objekte mit interessanten Füllungen versehen

Zunächst ist die Form mit der eingestellten Füllfarbe gefüllt worden. Die neu entstandene Form soll jetzt mit interessanten Füllungsattributen versehen werden - und davon hat Fireworks eine Menge. Markieren Sie das Objekt mit dem Zeigerwerkzeug, und öffnen Sie das Füllkategorien-Listenfeld in der Eigenschaftenleiste. Im Listenfeld gibt es verschiedene Verlaufstypen - den Typ "Glatt" wollen wir für unser Beispiel einsetzen. Klicken Sie auf das Farbfeld links neben dem Listenfeld. In dem Dialogfeld, das damit geöffnet wird, ist die interessante Wirkung dieses Verlaufs zu erkennen. Statt der vorgegebenen Farben stellen wir dort rechts einen orangen Farbton ein, links dagegen Schwarz. Verschieben Sie außerdem den rechten Farbmarkierungspunkt nach links - wie es in der Abbildung zu sehen ist. Das Bild wirkt nach dem Bestätigen schon recht interessant - es wird aber noch besser! Stellen Sie im Rand-Listenfeld die Option "Feder" ein - weichgezeichnet wäre hier die bessere Bezeichnung. Wenn Sie den Regler daneben auf den Wert 30 schieben, wird der aufgeweichte Rand des Objekts sichtbar. Im Textur-Listenfeld gibt es verschiedene Texturen, mit denen Sie ein Objekt belegen können. Wenn Sie auf einen Eintrag klicken, wird eine Vorschau der Textur angezeigt. Wir haben für unser Beispiel die Textur mit dem Namen "Wischen" ausgesucht. Als Texturmenge wurde der Wert 50 eingestellt. Stellen Sie diesen Wert im Feld neben der Liste ein.

Eigene Texturen verwenden

Wenn Ihnen die mitgelieferten Texturen nicht ausreichen, können Sie eigene in die Liste aufnehmen. Kopieren Sie die Datei in das Macromedia-Verzeichnis "\Configuration\Textures", oder verwenden Sie die Option "Andere" am Ende der Liste. Sie können damit Bilder aufnehmen, deren Dateiformat Fireworks unterstützt (PNG, GIF, JPEG, BMP und TIFF). Dann ist die Textur allerdings nur in der aktuellen Datei verfügbar. Da das Objekt ohne Umriss angezeigt werden soll, stellen Sie in der Pinselstrich-Rubrik rechts neben den Fülleigenschaften die Option "Keine" ein. Damit ist das erste Objekt fertig. Sieht doch schon ganz nett aus, oder?

Die "Kugeln" erstellen

Innerhalb dieses Objekts soll jetzt ein kugelähnliches Gebilde untergebracht werden. "Unterstützt Fireworks etwa auch dreidimensionale Darstellungen?", werden Sie sich vielleicht fragen. Nun, das nicht - aber mit geschickten Füllungen können Sie einen plastischen Eindruck vermitteln. Dazu sind die folgenden Arbeitsschritte notwendig:

Erstellen Sie mit dem Ellipsenwerkzeug einen Kreis. Wir haben eine Größe von 75 Pixeln verwendet. Standardmäßig wird der Kreis mit der zuvor eingestellten Füllung versehen. Stellen Sie dieses Mal einen radialen Verlauf ein. Rufen Sie wieder das Dialogfeld "Verlauf bearbeiten" auf, um den Verlauf für die Kugel anzupassen. Dabei werden die Farben vertauscht. Ziehen Sie einfach das schwarze Farbfeld weit nach rechts - das gelbe dagegen nach links. Damit entsteht ein gelber Fleck in der Mitte. Nach außen wird das Objekt dunkel. Um die plastische Wirkung zu erreichen, soll aber der gelbe "Lichtpunkt" nicht genau in der Mitte sitzen, da dies unnatürlich wirkt.

Wenn die Kugel mit dem Zeigerwerkzeug markiert war, sieht man im Objekt "Markierungen", mit denen Sie die Füllung beeinflussen können. Klicken Sie auf den Kreis, der die Mitte des Verlaufs symbolisiert, und ziehen Sie ihn nach oben links. Auch das Ende des Verlaufs kann verändert werden. Verziehen Sie dazu mit gedrückter Maustaste das Quadrat. Am Ende sollten Sie ungefähr die abgebildete Anordnung erhalten.

Der Rand der Kugel erhält nun die Option "Anti-Alias". Weichgezeichnet wird er aber nicht. Die Textur wird mit 35 % etwas schwächer aufgetragen. Das Ergebnis sieht schon ganz gut aus - irgendetwas fehlt aber noch, um die plastische Wirkung zu erzielen. Da sich die Kugel noch zu schwach vom Untergrund trennt, verwenden Sie den Glühen-Effekt aus dem Menü "Schatten und Glühen" mit den abgebildeten Einstellungen. Wichtig ist dabei die Umstellung der Farbe auf Weiß. Das Ergebnis ist nun überzeugend: Die Kugel hebt sich vom Untergrund gut ab.

Attribute auf andere Objekte übertragen

Jetzt soll um die Kugel herum ein Schriftzug laufen. Dieser soll ähnliche Attribute wie die Kugel erhalten. Erstellen Sie mit dem Textwerkzeug den Schriftzug "AROUND THE WORLD". Die Schriftattribute sehen Sie in der Eigenschaftenleiste abgebildet. Kopieren Sie mit der Tastenkombination Strg-C die Kugel. Fügen Sie ein Duplikat wieder ein - mit Strg-V. Rufen Sie mit Strg-Umschalt-T das Dialogfeld zum numerischen Transformieren auf und geben Sie dort eine Vergrößerung auf 110 % ein. Markieren Sie jetzt den Schriftzug und verwenden Sie die Funktion "Bearbeiten/Attribute einfügen". Da sich ja die Kugel noch im Zwischenspeicher befindet, werden deren Eigenschaften zugewiesen. So sparen Sie sich das erneute Einstellen der Attribute. Die Füllungseigenschaften übernehmen wir, beim Glühen-Effekt werden aber etwas veränderte Werte eingestellt. Der Breite-Wert wird auf 1 umgestellt, die Weichheit auf 4.

Markieren Sie dann den Text und die vergrößerte Kugel, und rufen Sie die Funktion "Text /An Pfad anfügen" auf. Im Textabstand-Eingabefeld der Eigenschaftsleiste stellen Sie dann eine Textanpassung von -50 ein, damit der Text links an der Kugel platziert wird. Leider ist den Screendesignern hier ein Malheur passiert: Zwei Funktionen wurden übereinander positioniert, sodass das Erreichen des benötigten Eingabefelds etwas schwierig ist.

Damit ist das linke Objekt fertig gestellt. Das vergrößerte Duplikat wurde übrigens verwendet, damit der Schriftzug etwas Abstand zur Originalkugel erhält. Die größere Kugel wird nach dem Verbinden mit dem Text unsichtbar.

Weitere Schaltflächen integrieren

Als Nächstes sollen drei zusätzliche Schaltflächen integriert werden, die ebenfalls aus einer Form bestehen, die mit dem Zeichenstift konstruiert wurde. Dieser Form haben wir wieder die Attribute der Grundform zugewiesen. Die Attribute sollen allerdings wieder angepasst werden. Die neue Form fällt zunächst noch nicht besonders auf, da dort noch der weiche Rand eingeblendet ist. Daher werden neue Werte eingestellt: Für den Effekt "Innen geschliffen" wird die Option "Weichzeichnen" mit einer Breite von 10 und einer Weichheit von 6 verwendet. Zusätzlich platzieren wir einen Schlagschatten, der eine Stärke von 6 und eine Weichheit von 8 Pixeln erhält. In dem "Füllen"-Bedienfeld entfernen wir nun die Weichzeichnung des Rands und stellen die Texturstärke auf 30 % zurück. Für den Rand wird jetzt die Anti-Alias-Option verwendet. Damit entsteht die unten gezeigte, interessante Schaltfläche, die gut zum Untergrundobjekt passt und sich durch den harten Rand dennoch abhebt. Als zusätzliches Accessoire fügen wir einen kleinen gelben Kreis ein, der einen "Innen geschliffen"-Effekt erhält.

Ein weiterer Schriftzug

Abschließend kommt ein Schriftzug dazu. Er erhält wieder dieselben Schriftattribute wie der bereits fertige Schriftzug. Der Verlauf entfällt diesmal aber. Dafür färben wir ihn in einem dunklen Braunton ein (2A, 00, 00 ). Diese drei Objekte fassen wir mit Strg-G zu einer Gruppe zusammen. Die Gruppe wird nun zweimal kopiert und nebeneinander ausgerichtet. Als Letztes kommt noch eine Headline dazu, die die abgebildete Formatierung erhält. Dieser Schriftzug erhält einen anderen Verlaufstyp: "Glatt". Der "Glühen"-Effekt wird gegenüber dem runden Schriftzug etwas modifiziert - für die Breite kommt der Wert 4 zum Einsatz, für die Weichheit der Wert 5. Das war's. Die Grafik ist fertig gestellt.

Hotspots platzieren

Nun kann es darangehen, die Bildbereiche zu deklarieren, die auf Aktionen des Besuchers reagieren. Diese Bereiche werden auch Hotspots genannt. Sicherlich kennen Sie das von anderen Webseiten. Je nachdem, auf welchen Bereich eines Bilds Sie klicken, treten dabei unterschiedliche Ereignisse ein. Segmente besitzen ähnliche Eigenschaften wie die Hotspots. Die Werkzeuge zum Konstruieren von Hotspot-Bereichen finden Sie am Ende der Werkzeugleiste in einem Untermenü des Web-Bereichs. Drei verschiedene Werkzeuge werden dort angeboten. So können Sie rechteckige Formen, Kreise und Polygone erstellen, die dann als Hotspots verwendet werden. So könnten Sie beispielsweise das Hotspot-Kreis-Werkzeug verwenden, um die Kugel zu markieren.

Die Bearbeitung von Hotspots erfolgt wie gewohnt - so können Sie z. B. das Objekt mit den Transformations-Werkzeugen verändern. Hotspot-Bereiche werden mit einem bläulichen Farbton durchsichtig hervorgehoben. Sie werden angezeigt, wenn die Web-Ebene im Ebenen-Bedienfeld sichtbar ist.

Den vorgestellten Farbton können Sie über das Farbfeld im Eigenschaften-Bedienfeld verändern. Hier finden Sie auch die Optionen zum Verlinken des Hotspots. Unterschiedliche Farben für die Hotspot-Bereiche sind voe allem dann sehr sinnvoll, wenn Sie mit vielen verschiedenen Bereichen arbeiten - Sie können diese dann unter Umständen besser voneinander unterscheiden.

Angaben zum Verlinken der Hotspots

Bevor wir Ihnen noch die weiteren Hilfsmittel zur Konstruktion von Hotspots vorstellen, wollen wir erst einmal auf die Optionen des Objekt-Bedienfelds eingehen. Hier können Sie unter anderem angeben, wie der Hotspot verknüpft werden soll. Markieren Sie mit dem Zeigerwerkzeug das zu verknüpfende Hotspot-Objekt. Es wird nach dem Markieren wie jedes andere Objekt von einem blauen Markierungsrahmen umgeben, wenn Sie nicht über "Bearbeiten/Voreinstellungen" auf der Registerkarte "Allgemein" eine andere Farbe für die Hervorhebungen angegeben haben. Sollten Sie ein Hotspot-Objekt nicht auswählen können, ist vermutlich nicht die Web-Ebene markiert. Schauen Sie in das Eigenschaften-Bedienfeld. Geben Sie im ersten Feld die Verknüpfungsadresse an. Dabei können Sie entweder absolute oder relative Adressen angeben. Absolute Adressen sind vollständige Webadressen, wie etwa http://www.gradias.de. Relative Adressen beziehen sich auf Ordner. Die Datei "Bild.htm" verweist auf eine Datei im selben Ordner - die Datei "../../Bild.htm" dagegen auf eine Datei, die sich zwei Ebenen über dem aktuellen Ordner befindet. Im Listenfeld finden Sie übrigens alle Einträge, die Sie über das URL-Bedienfeld in die Bibliothek aufgenommen haben. Dort sollten Sie alle Adressen aufnehmen, die Sie häufig benötigen.

Das nächste Feld nimmt alternative Texte auf. Diese werden beim Laden des Dokuments, oder falls der Surfer die Anzeige von Grafiken deaktiviert hat, angezeigt. Falls Sie mit Frames arbeiten, ist das folgende Listenfeld sehr wichtig. Hier wird eingestellt, wo die zu ladende Seite geöffnet wird - in einem eigenständigen Browser-Fenster oder beispielsweise in einem anderen Frame. "_blank" lädt das Dokument dabei in ein neues, eigenständiges Webbrowser-Fenster, "_parent" öffnet das Dokument im übergeordneten Frame des Framesets. Wenn "_self" eingestellt ist, wird das Dokument in dem aktuellen Rahmen geladen. Bei "_top" werden alle Frames gelöscht und das Dokument im aktuellen Webbrowser-Fenster geöffnet. Im Form-Listenfeld kann die Form des aktuellen Hotspots geändert werden.

Weitere Hotspot-Optionen

Ein paar Informationen zur Konstruktion von Hotspots sind noch wichtig, und wir wollen sie Ihnen nicht vorenthalten: Die drei verfügbaren Werkzeuge sind ja ganz in Ordnung - was aber ist zu tun, wenn Sie sehr komplexe Formen mit einem Hotspot versehen wollen? Unsere unteren Schaltflächen wären ein solches Beispiel. Markieren Sie zunächst die Ebene, auf der die Schaltflächen untergebracht sind. Bei den Schaltflächen handelt es sich um Gruppen. Einzelne Elemente einer Gruppe können Sie am leichtesten mit dem Teilauswahlwerkzeug markieren, das Sie gleich rechts neben dem Zeiger-Werkzeug in der Werkzeugleiste finden. Sie können es auch mit dem Tastenkürzel A aufrufen. Markieren Sie mit diesem Werkzeug die drei Schaltflächen. Klicken Sie diese dazu nacheinander mit gedrückter Umschalt-Taste an. Rufen Sie dann die Funktion "Bearbeiten/Einfügen/Hotspot" auf. In einem Dialogfeld müssen Sie angeben, ob ein einzelner Bereich alle markierten Objekte überdecken oder ob für jedes Objekt ein eigener Hotspot-Bereich erzeugt werden soll. Wählen Sie für unser Beispiel die zweite Variante. Damit erzeugt Fireworks für jedes Objekt automatisch einen Polygon-Hotspot-Bereich, der die Form des Objekts ziemlich exakt wiedergibt.

Texte mit Hotspots versehen

Nehmen wir einmal unsere Überschrift: Dort könnte man vielleicht meinen, dass ein Rechteck als Imagemap ungeeignet sei, da ja dann zwischen den Buchstaben ebenfalls ein aktiver Bereich wäre. Wir wollen Ihnen aber zeigen, warum diese Überlegung grundsätzlich richtig, aber nur extrem schwer umzusetzen ist. Sie haben mit der Funktion "Text/In Pfad konvertieren" die Möglichkeit, Texte in Pfade umzuwandeln - sie sind dann aber nicht mehr editierbar. Wenn Sie dann wieder die Funktion "Bearbeite/Einfügen/Hotspot" mit der Option "Mehrere" verwenden, sehen Sie, dass die Aktion nur bei einigen der Buchstaben geklappt hat. Alle Buchstaben, in denen "Löcher" sind, sind von Rechtecken umgeben. Hotspot-Pfade können nämlich keine Löcher enthalten. Sie könnten dieses Manko nur umgehen, indem Sie mehrere Objekte pro Buchstaben erstellen und diese so geschickt aufbauen, dass keine Löcher mehr verwendet werden.

Bilder in Segmente zerschneiden

Segmente haben gegenüber Hotspots ein paar Vorteile. Da der Aufwand des Segmentierens dank Fireworks nicht allzu groß ist, sollten Sie diese durchaus nutzen. Sie können für jedes Segment unterschiedliche Optimierungseinstellungen angeben. Das kann - je nach verwendetem Motiv - einiges an Speicherplatz einsparen. Die unterschiedlichen Optimierungsmöglichkeiten können beispielsweise auch nützlich sein, wenn Sie Fotos mit Grafiken kombinieren wollen. So können Sie für Fotos das geeignetere JPEG-Dateiformat verwenden - für die Grafiken dagegen das GIF-Dateiformat. Wenn Sie Seiten austauschen, können unter Umständen einige Segmente verbleiben. Da diese nicht neu geladen werden müssen, geht der Ladevorgang schneller vonstatten. Mit Segmenten können Sie Roll-over-Effekte erzeugen. Die Segmentierung kann Fireworks entweder automatisch vornehmen, oder Sie greifen ein und erledigen diese Aufgabe manuell mit den Segmentier-Werkzeugen.