Site Web - Fireworks-Library

Librăria Fireworks ne permite stocarea, partajarea şi reutilizarea obiectelor folosite în procesul de dezvoltare. Librăria dă posibilitatea dezvoltatorilor să îmbunătăţească productivitatea, să menţină consistenţa şi să asigure interactivitatea.

Librăria ne permite tragerea şi plasarea simbolurilor din librărie în canvas. Practic va fi plasată o copie a simbolului numită instanţă şi nu originalul. Când modificăm un simbol toate instanţele acestui symbol sunt schimbate automat, indiferent de locul în care sunt plasate. Deoarece Library ne permite tragerea mai multor copii ale aceluiaşi simbol peste canvas, putem elimina munca repetitivă şi erorile de pe parcursul producerii, dacă dispunem de mai multe copii ale aceluiaşi obiect.

În continuare vom prezenta modul de utilizare a instrumentului Library pentru a crea bara de navigare pentru situl Fruits Valley. Vom avea practic o listă de butoane simbol deja realizate. De asemenea vom importa şi poziţiona butoanele simbol pe canvas.

1. deschidem button.png şi alegem Window/Library (F11). Pentru a obţine o copie a butonului simbol nutrition vom alege din Options (corespunzător elementului Assets) comanda Duplicate pentru a obţine şi celelalte butoane (ABOUT US, PRODUCTS, RECIPES, FUNDAMENTAL, EVENTS);

Pentru a previzualiza un simbol din librărie, îl vom selecta printr-un clic pe acesta. Putem schimba ordinea simbolurilor din Library prin utilizarea utilitarului Toggle Sorting, localizat în panelul Symbol Preview din partea dreapta. Putem folosi şi Play situat deasupra utilizarului Toogle Sorting pentru a previzualiza diferite stări ale butonului symbol sau a unei animaţii.

2. Vom crea un nou canvas de dimensiunea 700x135 după care deschidem meniul de opţiuni Library şi selectăm Import Symbols. În fereastra Open selectăm button.png şi clic pe butonul Open. În caseta de dialog Import Symbols vom selecta toate butoanele simbol şi clic pe import.

În Library, Fireworks markează simbolurile importate ca “imported” pentru a le distinge de butoanele native.

3. folosind mouse-ul, tragem o instanţă a celor şase butoane simbol din Library în canvas de la stânga la dreapta în următoarea ordine: ABOUT US, PRODUCTS, RECIPES, NUTRITION, FUNDAMENTAL şi EVENTS.

4. repoziţionăm toate cele şase instanţe ale butonului utilizând Property Inspector în următoare manieră: pentru toate coordonata Y va fi aceeaşi (20), iar distanţa între butoane va fi egală. Aceste şase butoane care realizează bara de navigare trebuie să fie în aceeaşi poziţie pe verticală raportat la colţul din dreapta sus al canvas-ului.

5. selectăm fiecare instanţă a butonului şi utilizăm Property Inspector pentru a specifica nume descriptive: about, products, recipes, nutrition, fundamental şi events.

Denumind fiecare buton de tip slice obţinem un anumit cod HTML, iar numele imaginilor exportate sunt mult mai sugestive.

6. utilizăm utilitarul Line pentru a trasa o linie dreaptă care conectează vizual toate cele şase instanţe ale butonului pornind din centrul butonului ABOUT US şi finalizând în centrul butonului EVENTS. Menţinem apăsată tasta Shift cât timp trasăm linia. Linia va avea următoarele proprietăţi: W-400, H-1, X-169, Y-41; Stroke Color – gri deschis (#CCCCCC); Tip Size la 2; Stroke Category – Pencil, 1-Pixel Hard.