Fireworks skapades för webben. Det är ett program där man utgått från olika tidigare verktyg, som försökt lösa de problem som finns då man vill skapa grafik för webben. Man har sedan tagit de bästa ideerna och utifrån användarnas önskemål skapat en enhetlig lösning för webbgrafik.
Redan i den första versionen av Fireworks lagrades all grafik i filformatet PNG. Filformatet PNG, "Portable Network Graphics" finns specificerat på http://www.w3.org/TR/REC-png.html och utvecklades för att fungera som ett patentfritt grafiskt format för att kunna ersätta både GIF och andra liknande format. Det är utökningsbart och stödjer allt från gammakorrigering, alfakanaler, samtidigt som det är dator- och leverantörsoberoende.
Den andra grundtanken bakom Fireworks var att allt alltid skulle förbli
redigerbart. Därför är Fireworks uppbygt utifrån modern objekthantering.
Det finns i Fireworks tre slags objekt, vektorobjekt, objekt med punktgrafik och textobjekt. För att hantera text i Fireworks kan man dels använda samtliga teckensnitt, stilsorter och andra justeringsmöjligheter som man förväntar sig av ett professionellt program. Samtidigt kan man förändra och komplettera textobjektet med alla de funktioner som gäller för alla objekt i Fireworks.
På samma sätt kan bilder från olika bildbehandlingsprogram som t ex Photoshop direkt importeras med alla justeringslager och text korrekt bibehållna. Man kan sedan markera bilden och välja att modifiera bildobjekt. Därefter kan man redigera bilden punkt för punkt på samma sätt som i ett vanligt bildbehandlingsprogram. Man kan enkelt frilägga en bild med trollspöet, rita själv med alla ritverktygen eller utnyttja filter, både inbyggda och från andra tillverkare.
Men den verkliga styrkan hos Fireworks märks då man börjar arbeta med vektorer. Det är enkelt att importera vektorgrafik från andra program och sedan göra justeringar. Man kan skapa med bezieerkurvor direkt i Fireworks, eller utnyttja det innovativa verktyget Forma om yta, som "puttar" om linjer enligt penselstorleken.
Men allra roligast är det att utnyttja olika fyllningar, linjeringar och effekter på alla dessa objekttyper. Genom att först skapa en enkel rektangel och sedan lägga på effekten skugga och yttre fasning, så får man snabbt en vacker knapp.
Sedan kan man kan styra linjeringen för objekt till att se ut som ritate med en airbrush, pensel, kol, tusch, olja, vattenfärg och annat. Alla dessa val kan anpassas tills man är nöjd med effekten.
På samma sätt kan man ange fyllning till en rad olika slags övertoningar, som radiell, kon, veck, stjärnfall m fl. Man kan även välja att bland ett antal färdiga mönster och texturer, samt ange genomskinlighet för dessa.
Det finns sedan i Fireworks en mängd finesser för att underlätta arbetet, som en URL-palett, där alla länkar som används automatiskt finns tillgängliga, en palett med stilar så man enkelt kan utnyttja förinställda kombinationer av effekter, fyllningar, linjeringar etc.
Genom att utnyttja paletterna Bildrutor och Lager kan man enkelt skapa animeringar från Fireworks.
För att skapa knappar utnyttjar man ett speciellt fönster där man enkelt bestämmar utseendet för knappens uppläge, nedläge, överläge, knapplänk och så vidare. Alla knappar finns dessutom tillgängliga i ett symbolbibliotek där automatiskt alla knappar som används lagras, Det medföljer också ett bibliotek med färdiga knappar och navigeringslister som man direkt kan använda och anpassa.
Varje knapp består automatiskt av både grafik och en skiva som anger hur knappen kommer att skivas. När resultatet från Fireworks exporteras, så skivas bilden automatiskt upp, och en webbsida skapas byggd antingen som en tabell eller som skivor (layers). Det är nödvändigt för att varje knapp ska kunna fungera självständigt.
Hur varje skiva ska exporteras kan ställas in individuellt. Till varje skiva kan man även koppla ett antal olika beteenden. Ett beteende kan exempelvis inne bära att att bildrutan i skiktet med namnet huvuddel byts ut mot en annan bildruta, när en knapp trycks ner. Det praktiska med Fireworks bettende är dessutom att det är exakt samma beteende som finns i systerprogrammet Dreamweaver.
En Fireworksfil med bara fyra knappar resulterar i vanligen 17 filer (4 gånger 4 lägen - Upp, Ned, Över, ÖverMedanNed, samt en HTML-fil med all JavaScipt för knappbeteenden, mm).
Man närsomhelst kontrollera hur resultatet från Fireworks blir, genom att välja fliken Förhandsvisa. Man kan då pröva på funktionaliteten för alla knapparna, samt kontrollera att bilder och komprimeringen är till belåtenhet.
Man sedan välja att exportera och låta Fireworks föreslå bästa exportalternativ. Eller så kan man direkt gå via urklipp och automatiskt anpassa den HTML och JavaScript-kod som Fireworks skapar för olika webbeditorer.
Ovanpå allt detta finns Fireworks otroliga möjligheter till automation. I Fireworks finns en Historiepalett med vilken man lätt kan se vad man gjort och gå bakåt steg för steg. Man kan också makera ett antal arbetssteg i Historiepaletten och klicka på en liten diskettsymbol, för att automatiskt skapa ett kommando som sedan visas i Kommando-menyn och kan utföra de steg man markerade.
Det mest fascinerande är dock att i Historiepaletten markera ett antal steg och klicka på Kopiera steg symbolen. De önskade stegen lagras då i datorns urklipp och kan därefter antingen klistras in i Fireworks och på så sätt återupprepas, eller också klistras in i en textdteditor för att där dyka upp - som JavaScript-kommandon.
Hela Fireworks kan automatiseras med JavaScript. Detta innebär att i stort sett allt man gör i Fireworks också kan göras genom att man skriver ett JavaScript-program. Fireworks har ett speciellt filformat för automatisering, filer som på PC slutar med JSF.
Exempelvis kan man enkelt kika på hur alla medföljande Fireworkskommandon fungerar genom att kika på JSF-filerna i katalogen Commands som man hittar på platsen Program/Fireworks/Settings/Commands på hårddisken. En JSF-fil är samtidigt en helt vanlig text-fil, som kan redigeras med vilken enkel ordbehandlare som helst, t ex Anteckningar som medföljer på både Macintosh och Windows som standard.
Men för att dra verklig nytta av automatiseringen i Fireworks bör man känna till lite om JavaScript-språket. JavaScript är en variant av Java som introducerades för att i webbsidor ha med kod som utförde saker som inte kunde lösas med bara HTML. Många andra produkter har sedan dess börjat använda JavaScript för att automatisera funktionalitet. Exempel på sådana är Macromedia Dreamweaver, Adobe Acrobat och andra.
Så hur kan man nu utnyttja denna styrka till något användbart. Låt oss anta att jag vill rita en enkel sinuskurva. Jag har ingen aning om hur man gör, men jag vet att jag behöver utnyttja ett flertal linjer för detta. Alltså ritar jag några linjer med Fireworks ritstift och kopierar kommandot för detta till en ordbehandlare. Resultatet kanske blir:
fw.getDocumentDOM().addNewSinglePointPath({x:193, y:393}, {x:193, y:393}, {x:193, y:393}, true);
fw.getDocumentDOM().appendPointToPath(0, 1, {x:225, y:313}, {x:226, y:311}, {x:227, y:309});
Jag inser att det betyder att jag börjar med en ny bana och sedan lägger till punkter.
Sedan kollar jag i Fireworks dokumentation, "Extending Fireworks" på http://www.macromedia.com/support/fireworks/extensibility.html och hittar funktionerna för dokumentbredd och dokumenthöjd. Det gör hela programmet lite snyggare. Genom att sedan kolla in lite av JavaScript-dokumentationen, så får jag fram följande lilla kodsnutt, som ritar en enkel sinuskurva.
var docWidth = fw.getDocumentDOM().width;
var docHeight = fw.getDocumentDOM().height;
fw.getDocumentDOM().addNewSinglePointPath({x:0, y:docHeight /2}, {x:0,
y:docHeight / 2}, {x:0, y:docHeight / 2}, true);
for (a = 0; a<=docWidth; a=a+docWidth/100) {
var b = (Math.sin(a/docWidth*4*Math.PI)*docHeight / 2) + (docHeight
/ 2);
fw.getDocumentDOM().appendPointToPath(0, a, {x:a, y:b}, {x:a, y:b}, {x:a,
y:b});
}
Låt oss ta ett annat vanligt problem. Samtidigt som man skapar ett massa olika slags bilder för en webbplats, så vill man skapa en mapp med lika stora miniatyrer av alla bilderna, med samma filformat, för att snabbt få en översikt.
var fromFiles = new Files.enumFiles(".");
var i = 0;
Files.createDirectory(toDir);
for (i;i<fromFiles.length;i++) {
fw.openDocument(fromFiles[i]);
if (fw.documents.length>0) {
var toFile = Files.getDirectory(fromFiles[i])+"//"+toDir+"//"+Files.getFilename(fromFiles[i]);
Files.deleteFileIfExisting(toFile);
fw.getDocumentDOM().setDocumentImageSize({left:0, top:0, right:40,
bottom:40},{pixelsPerUnit:72,nits:"inch"});
fw.getDocumentDOM().setExportOptions({ exportFormat:"GIF"});
fw.exportDocumentAs(null, toFile, null);
fw.closeDocument(fw.getDocumentDOM(),false);
}
}
Detta skript skapar inne i mappen To en miniatyrbild på 40x40 punkter med formatet GIF. Och för att göra detta i oändlighet, med automatik, sätt bara "do {" på första raden och "} while (true);" på sista.
Det vara bara några enkla exempel på hur man kan utnyttja Fireworks med JavaScript. Det finns många andra möjligheter och jag tycker det är himla kul!
För mer om Fireworks, kolla in exempelvis:
Macromedias list of Fireworks websites
Med ett leende
/Peter Freund