Lecia 6 Crearea butoanelor

Fireworks permite crearea unor butoane simple n mod manual sau cu ajutorul
aplicaiei Button Editor. Butoanele o dat create, pot fi salvate pentru a fi folosite ulterior.
Un buton derulant (rollover) este o imagine care-i modific aspe ctul atunci
cnd utilizatorul deplaseaz indicatorul mouse-ului deasupra acesteia sau cnd execut
clic pe imaginea respectiv.
Un buton poate avea patru stri comune. Fiecare stare reflect interaciunea
utilizatorului cu butonul:
- cnd utilizatorul deplaseaz indicatorul mouse-ului deasupra imaginii;
- cnd l mut n afara imaginii;
- cnd execut clic pe imagine;
- cnd deplaseaz indicatorul deasupra unui buton pe care s-a executat clic
(starea Down a butonului).
Fireworks folosete cadrele pentru a stoca imaginile individuale corespunztoare
diferitelor stri ale butonului derulant:
- imaginea aferent strii Up se insereaz n cadrul 1;
- imaginea aferent strii Over se insereaz n cadrul 2;
- imaginea aferent strii Down se insereaz n cadrul 3;
- imaginea aferent strii OverWhileDown se insereaz
n cadrul 4.
Un buton derulant simplu i modific imaginea afiat atunci
cnd utilizatorul deplaseaz indicatorul mouse-ului deasupra
butonului, dup care revine la imaginea anterioar cnd indicatorul nu
se mai gsete deasupra imaginii.
Un buton derulant simplu necesit numai dou imagini, ceea
ce faciliteaz descrcarea sa pe Internet.

a) Utilizarea aplicaiei Button Editor

Aplicaia Button Editor permite crearea butoanelor cu toate strile lor i
adugarea legturilor i a programului HTML necesar pentru a fi puse n funciune.
La folosirea aplicaiei Button Editor, butonul va fi adugat la bibliotec. Astfel
inserarea altor butoane de acelai tip se face prin tragerea butonului din bibliotec n
interiorul suprafeei utile.
Aplicaie
-

se creeaz un document nou 600x300 i se salveaz documentul cu

numele butoane.png.

se alege Edit -> Insert -> New Button, pentru a obine acces la aplicaia
Button Editor. n partea de sus a ferestrei vor fi cinci fie (taburi,
rubrici) cu numele: Up, Over, Down, Over While Down, Active Area.
n fereastra Button Editor se deseneaz un dreptunghi de dimensiuni
130x30, de culoare neagr, avnd valoarea proprietii Stroke la None.
Butonului i se adaug cu ajutorul butonului Text eticheta Vnzri online,
avnd proprietile Verdana, 12, center.

Butonul Copy Up Graphic

-

Butonul Done

Se selecteaz fia Over i se d clic pe butonul Copy Up Graphic pentru a

crea o copie a butonului original. Se coloreaz butonul n albastru.
Se selecteaz fia Down i se d clic pe butonul Copy Up Graphic pentru
a crea o copie a butonului anterior, din fia over. Se coloreaz
dreptunghiul n rou.
Se d clic pe butonul Done pentru a nchide aplicaia Button Editor.
Se previzualizeaz butonul n fia Preview a ferestrei.
Se acioneaz butonul pentru a-i verifica cele trei stri.

bs. Butonul creat include un program JavaScript care arat browser-ului s

nlocuiasc imaginea din starea Up cu imaginea din starea Over atunci cnd
utilizatorul deplaseaz indicatorul mouse-ului deasupra butonului, respectiv s afieze
imaginea din starea Down cnd se execut clic pe buton.
La nchiderea aplicaiei Button Editor, butonul creat este vizibil i acoperit cu o
folie transparent de culoare verde, acoperire numit felie=slice, precum i liniile de
ghidare de culoare roie ale acesteia.

Dac liniile de ghidare nu sunt vizibile, acestea pot fi afiate din View Slice
Guide. Felia poate fi afiat sau nu prin acionarea butoanelor Hide Slices and Hotspots /
Show Slices and Hotspots.
bs. n fereastra Preview nu este permis editarea butonului. Orice modificare
poate fi efectuat numai n fia Original.

b) Adugarea unui buton nou

Fireworks a adugat butonul creat la biblotec sub forma unui simbol.
Simbolurile reprezint obiecte sau grupuri de obiecte folosite atunci cnd se
dorete s se controleze mai multe copii ale unor obiecte. Copiile unui simbol se numesc
instane.
Aplicaie
-

Se alege Window Library

n cadrul grupului de panouri Assets
este afiat panoul Library n care, n seciunea Preview este afiat n
previzualizare butonul creat, buton cu numele Buton 1.
Se d dublu-clic pe numele
butonului din lista, fiind afiat
lista de proprieti Symbol
Properties. Butonul poate fi
denumit sau reeditat.
Se trage cu mouse-ul numele
butonului din lista Library n
interiorul paginii. O copie a
butonului va fi plasat n interiorul paginii. Se mut copia butonului la
dreapta butonului original.
Se repet operaia pn la obinerea n total a patru butoane. Butoanele
copii vor fi instane ale primului buton.
Se selecteaz cele patru butoane i se aliniaz sus prin Modify Align
Left. Dac butonul To canvas este activ, alinierea se face n raport cu
marginea suprafeei utile i nu n raport cu laturile superiore ale
butoanelor. Deci butonul To canvas nu trebuie s fie apsat.
Se selecteaz pe rnd fiecare din ultimele trei butoane i din fereastra de
proprieti se modific eticheta Vnzri online n Cumparaturi, Catalog,
Despre noi.
Butoanele pot fi vizualizate i ncercate n fereastra Preview.

c) Modificarea butoanelor
Deoarece butoanele construite sunt instane ale primului buton, este suficient
modificarea butonului original i modificrile fcute se vor transmite i instanelor.
Aplicaie
-

n fia original se d dublu-clic pe orice buton din pagin -> astfel se va

intra n aplicaia Button Editor.
Se modific aspectul butonului original, adugndu-i un chenar i un efect.
Se d clic pe butonul Done pentru a iei din Button Editor.

d) Ataarea la butoane a unui nume i a unei legturi

Butoanelor li se pot aduga legturi acum n Fireworks sau ulterior prin
Macromedia Dreamweaver.
n Fireworks, butoanelor li se pot asocia legturi prin caseta Link a ferestrei de
proprieti, specificnd calea legturii ctre pagina web dorit. n caseta Name se poate
introduce un nume ce va fi atribuit imaginii n momentul exportului paginii.
n caseta Alt se poate specifica un text descriptiv pentru scopul butonului.
Aplicaie
-

Se selecteaz butonul Vnzri online i se specific legtura ctre pagina

vanzari.html, numele vanzari, iar ca text alternativ Ctre vnzri.
Similar se specific legtura i textul alternativ pentru celelalte trei
butoane.

Se alege Modify Canvas Trim canvas, rmnnd astfel numai

butoanele.

e) Importul butoanelor
Butoanele o dat create pot fi importate ntr-o pagin de baz alegnd.
File - Import
Aplicaie
-

Se deschide fiierul Home.png;

Se creaz un nou strat numit Butoane;
Se alege File Import i se import fiierul butoane.png;
Se plaseaz butoanele importate;
Se deseneaz un dreptunghi cu colurile rotunjite (cu curbura de 80) care
va ncadra butoanele, dreptunghi aflat sub butoane;

Se selecteaz dreptunghiu rotunjit i dreptunghiul mare i se alege Modify

Combine Paths Punch (cu gurire);
Se selecteaz forma obinut anterior (dreptunghiul mare) i i se aplic
un efect.

f) Modificarea imaginii grafice asociate butoanelor

Un buton o dat creat este un simplu obiect grafic. Pentru a-l transforma ntr-un
buton cu legturi trebuie convertit ntr-un simbol.
Aplicaie
- Se creaz un document nou de 400x400;
- Se alege Edit Insert New Button;
- Se deseneaz un dreptunghi la care i se aplic o textur i un efect;
- Avnd butonul selectat, se alege Modify Symbol Convert to Symbol,
transformndu-l astfel n simbol;
- n fereastra Symbol Properties, se atribuie un nume butonului i se alege
opiunea Button pentru a specifica natura obiectului (c este un buton).
- Se salveaz fiierul cu numele buton albastru.png,