Rolloverbuttons maken met Fireworks.
· open een nieuw document: let op de resolutie van de nieuwe afbeelding,
die moet op 72dpi staan
· kies insert > new button
· de buttoneditor opent.
Dit is een apart scherm voor het ontwerpen van knoppen binnen fireworks.
De knoppen die je binnen dit scherm maakt, komen als zgn. 'symbolen'
in de library (window>library) te staan.
Die symbolen fungeren als een soort blauwdruk. Je kunt ze naar het documentvenster,
de stage, slepen: dan wordt er op de stage een zgn.
'instance' van het symbool gemaakt. Een instance eigenlijk niet veel
anders dan een verwijzing naar het symbool in de library.
Voordeel hiervan is, dat als je het uiterlijk van een knop wilt aanpassen, je
alleen het symbool hoeft te bewerken; de instances veranderen dan automatisch
mee, want ze verwijzen slechts naar dit symbool.
Je kunt een instance op de stage wel schalen, roteren en van tarnsparantie veranderen
zonder dat dit effect heeft op het originele symbool.
· In de buttoneditor maak je je knop.
Bovenin het venster van de buttoneditor zie je de tabbladen voor de verschillende
'Button States':
'Up' 'Over' 'Down' 'Over While Down' en 'Active Area'.
Dit zijn de verschillende staten waarin de button zich kan verkeren. Het is
immers een roll-over button, hij neemt verschillende gedaantes aan afhankelijk
van de positie van de muis tov de knop. Die verschillende gedaantes breng je
onder in de verschillende 'button states'
Up = de staat van de button als er niets mee gebeurt.
De uitgangspositie.
Over = de staat van de button als de muis erover heen
beweegt.
Down = de staat van de button als erop geklikt wordt,
dus MouseDown
Over While Down = als er over de knop gemuisd wordt
terwijl hij al ingedrukt is, dus geactiveerd is.
Active Area gebruik je zelden. Hier wordt het gebied
gedefinieerd dat reageert als knop, de hotspot zeg maar. Fireworks maakt dit
gebied zelf voor je aan en doet dat meestal zo dat de hele knop 'actief' is
(lees: in staat is om te reageren op muisbeweging).
Je begint in het tabblad van de Up-state.
Je kunt verschillende elementen (zoals tekst, de basisvorm, etc.) in verschillende
lagen onderbrengen om de zaak overzichtelijk en gemakkelijk te bewerken te houden.
Lagen kun je op slot zetten.
Als je tevreden bent over het uiterlijk van je knop in de Up-state, dan ga je
verder in de Over-state. Daar kun je de zojuist in het 'Up'-gedeelte gemaakte
knop naartoe copieren, door op de knop 'Copy Up Graphics'
te klikken, wat dan ook betekent 'Kopieer de "Up"-state". Hetzelfde
geldt voor de overige staten, waarbij je steeds de voorliggende staat kunt kopieeren.
Zo kun je gemakkelijk het globale uiterlijk van de knop gelijk houden in de
verschillende staten en in elke staat een kleine aanpassing maken tbv het 'rollover'effect
Je kunt natuurlijk ook voor elke staat een compleet ander uiterlijk maken als
je dat wilt.
· Als de knop in al zijn staten af is, klik je de buttoneditor dicht.
Fireworks slaat de zojuist gemaakte knop dan meteen op in de library.
Ook plaatst Fireworks een instance van de knop op de stage. Deze instance kun
je dus wissen van de stage, zonder dat dat gevolgen heeft voor de knop, die
immers veilig in de library staat.
· In de library kun je de knop een andere naam geven, dupliceren etc.
Je kunt een instance van de knop op de stage plaatsen door hem vanuit de library
naar de stage te slepen.
Je kunt de knop bewerken door op de afbeelding ervan bovenin de library te dubbelklikken;
de buttoneditor voor die knop wordt dan weer geopend.
· Het exporteren van de knop.
Kies File > Export.
Je krijgt nu verschillende opties te zien voor het exporteren. Ik ga ze niet
allemaal uitvoerig uitleggen, sommige hoef je nog niet te begrijpen.
Wat ej moet weten, is dat er, als je een rolloverknop exporteerd, niet een maar
verschillende bestanden aangemaakt moeten worden:
1. De verschillende staten van de knop zelf: deze worden
in afzonderlijke afbeeldingen geexporteerd. Je hebt dus zometeen minstens 4
afbeeldingen, van elke staat 1.
Fireworks slaat bovendien restruimte, die niet binnen de knop valt, ook op.
Hij maakt in feite een tabelletje, waarin hij de delen (restruimtes, knop, etc)
verdeelt op een gemakkelijk te exporteren manier. Firewoks maakt hierbij gebruik
van 'slices'.
Je kunt dit voorkomen door te zorgen dat je knoppen precies in de afbeelding
passen en door dus restruimtes te vermijden.
2. Een html-bestand waarin het gedrag van de knop wordt
beschreven.
Dit is het bestand dat je zometeen in DW via Insert > Media > Fireworks
HTML gaat importeren in je webpagina.
Tips:
· Breng je geexporteerd knoppen onder in speciaal daarvoor bestemde mapjes,
voor mijn part voor elke knop een nieuw submapje. Als je meerdere knoppen in
je website gebruikt, wordt het anders al snel een volkomen onoverzichtelijke
bende, aangezien je per knop verschillende bestanden exporteert.
Bewaar ook de originele bestanden, de .png-tjes, in een aparte map. Misschien
wil je de knop in een andere website nog gebruiken of hem veranderen!
· De teksteditor van Fireworks gedraagt zich een beetje hetzelfde aks
de buttoneditor.
Door met het teksttool geselecteerd op de stage te dubbelklikken, open je de
teksteditor.
· Als je een vector-gebaseerde afbeelding wilt bewerken als bitmap (dus
als je erin wilt gummen, het toverstafje wilt gebruiken etc), selecteer je het
betreffende element en kiest Modify > Convert To Bitmap.