Anzeige
Tutorialbeschreibung

Glasartige Navigation (Fortgeschritten)

Glasartige Navigation (Fortgeschritten)

Navigationen in FW sind einfach zu realisieren. Fireworks bietet dafür eigene Funktionen, die es erlauben aus einem beliebigen Objekt einen Button zu machen. Der erste Schritt allerdings ist auch 3 identische Buttons zu erstellen, einen für Normal, einen für MouseOver und einen für Active. Natürlich könnt Ihr auch aus nur einem Objekt einen Button erstellen, allerdings bleiben dann jegliche Effekte weg. Bei mir sehen die 3 Buttons so aus:

Bilder


Es ist wichtig, daß die 3 Objekte GENAU gleich gross sind, da sich das ganze verschiebt, wenn der Over Button grösser ist, wenn ich mit der Maus über den Button fahre. Nun zum erstellen der Navi:

1. Schritt: den Button "Over" kopieren (Control+C) den Button "Normal" anklicken und F8 drücken. FW hat nun ein Slice über das Objekt gelegt(grün) und es als Button deklariert.

Macht einen Doppelklick auf den grünen Bereich, danach wird dieses Feld erscheinen:

Bilder


Hier den Namen des Buttons angeben, und bei den Radio-Buttons "Schaltfläche" auswählen! Auf Ok drücken und dann werdet ihr im Dialog der Menüerstellung sein. Wie ihr seht hat FW den "Normal" Button schon bei "Up" hinzugefügt, daran müssen wir also nichts mehr ändern. Wir switchen im Menü Oben auf "Over" und fügen dort mit Control+V den Button wieder ein, den wir vorher kopiert haben:

Bilder


WICHTIG: Die Buttons müssen am genau gleichen Ort sein. Wenn ihr den Button markiert, könnt ihr anhand der >Koordinaten (ganz links unten im FW Fenster) die Position der beiden Buttons überprüfen. Over beschreibt wie gesagt den Status, wenn die Maus über dem Button ist. Wir switchen nun im Menü oben auf "Unten". Dies beschreibt den Status, wenn der Button gedrückt wird. (kurz auf Fertig klicken, den Active Button kopieren, Doppelklick auf den grünen Bereich und auf Unten switchen)
Bei Unten fügen wir den letzten der 3 Buttons hinzu:

Bilder


Nochmals die Position überprüfen und auf Fertig klicken.

So, der Hauptteil wäre gemacht. Jetzt können die beiden Buttons "Over" und "Active", die sich noch auf der Arbeitsfläche befinden, gelöscht werden, da sie sich im Button befinden! Wenn Ihr euren Button anklickt, könnt ihr links unten noch die Eigenschaften des Links einstellen:

Bilder


Hyperlink, Alt-Text, Link-Text, alles ist noch einstellbar =)

Fireworks eignet sich durchaus auch für anspruchsvolle Navis!

Wer noch ein wenig basteln will, aber zu faul ist sich selber eine Navi zu erstellen, kann mir ne PM schreiben, dann schicke ich die PNG Datei dieser Navigation

Greez: Gorbatschow

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von rinu
  • 04.01.2011 - 12:51

schade das es für CS5 nicht mehr gilt -.-

Portrait von gundleyG
  • 19.12.2010 - 17:41

... ist schon schön erklärt - leider gilt das für CS5 nicht mehr... schade

Portrait von jaquesbubu
  • 13.12.2010 - 15:39

Ganz toll, herzlichen Dank

Portrait von jaquesbubu
  • 13.12.2010 - 15:39

Ganz toll, herzlichen Dank

Portrait von photoheini
  • 11.10.2010 - 09:59

Sehr professionell gemacht! Sieht sehr modern aus.

Portrait von gameface
  • 25.08.2010 - 01:48

nice wieder was dazu gelert :)

Portrait von katz
  • 24.08.2010 - 13:36

genau das was ich gesucht habe, vielen Dank :)

Portrait von Spiderpig32
  • 18.07.2010 - 15:24

sehr schön geschrieben

Portrait von staxx78
  • 13.02.2010 - 14:14

genau das was ich versuchen will...Danke für das Tut

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 06.12.2009 - 16:51

ah danach hab ich gesucht

Portrait von PrOOnOOb
  • 26.11.2009 - 17:41

Feine sache

Portrait von ComRiker
  • 04.11.2009 - 10:16

Toll gemacht! Sieht sehr modern aus.

Portrait von ebc104
  • 23.10.2009 - 09:40

Ne feine Sache und sehr gut erklärt, bester Gruß vom schönen Niederrhein ebc

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 29.09.2009 - 11:55

sehr sehr nices tut gz

Portrait von upp333
  • 05.07.2009 - 15:05

Sehr professionell gemacht! Macht Lust auf Anwendung!

Portrait von linus9k
  • 16.06.2009 - 10:48

Vielen Dank! Genau so etwas habe ich grad gesucht. Schön beschrieben.

Portrait von Dissolution
  • 30.03.2009 - 13:39

Allgemein sehr gut, nur zu dumm, dass Fireworks es per Javascript und nicht per CSS macht... mMn sehr dumm, im Hinblick auf die ganzen "Scriptblocker"-Addons für diverse Browser.

Nichtsdestotrotz das Tut is super!

Portrait von johanna52
  • 21.02.2009 - 19:39

danke, sowas habe ich doch gerade gesucht.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 20.01.2009 - 10:47

Tutorial gefällt mir auch. Werde mich mal an der Umsetzung versuchen.
Besten Dank

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 17.01.2009 - 15:21

Gutes Tutorial, gut erklärt. Vielleicht das nächste mal nich so große Bilder. ;)
Ansonsten great shit! ThX

x
×
×