Fireworks8: A.A.A. Esperto di grafica per il Web offresi!
1998: La rivoluzione del Web Design

Rivista: Applicando
Data pubblicazione: Dicembre 2005

7 anni fa, a Marzo del 1998, Macromedia lanciò sul mercato il primo applicativo dedicato alla creazione, ottimizzazione ed esportazione di grafica per il web. Con un anticipo di appena 4 mesi rispetto alla nascita del suo concorrente, Adobe Image Ready, riuscì a guadagnare in breve svariati utenti, su un terreno che al tempo era praticamente vergine. Da quel momento, gli sviluppatori di siti web che, dovevano districarsi in mezzo alla Jungla di programmi, e plug-in proprietari, trovarono in Fireworks un alleato comune, pronto a risolvere perlomeno le problematiche legate al design dei siti. Già dalla prima versione, l’applicativo di Macromedia, offrì un nuovo metodo di approccio allo sviluppo del design dei siti: un unico applicativo per gestire tutto il workflow, dall’inizio alla fine, capace di elaborare al contempo elementi vettoriali e immagini raster. Grazie alle funzioni integrate di ottimizzazione delle immagini e alla possibilità di generare codice HTML e JavaScript, divenne in breve un ottimo supporto per la maggior parte dei web designer.
Durante la sua crescita, è stato poi dotato di nuovi strumenti di design: un esempio tra tutti, la possibilità di creare menu a comparsa in maniera totalmente visuale, senza richiedere conoscenze di programmazione da parte dell’utente! Fu comunque nella prima versione MX che il software si allineò definitivamente alla nuova interfaccia integrata di Studio MX.

Fireworks 8
L’installazione di questo bestione da 110 megabytes, grazie anche al computer usato per la prova (G5 biprocessore a 2 gigahertz, equipaggiato con 5 gigabyte di RAM) è stata a dir poco velocissima! Appena lanciato il programma non sembra essere cambiato molto rispetto alla versione MX 2004; ma guardando meglio si scoprono dei sottili miglioramenti, che consentono, ad esempio, di avere un maggior controllo sullo spazio di lavoro con pochi clic del mouse. Vediamoli, più da vicino.

Migliorie e ottimizzazioni
Una novità per il trattamento delle immagini è la finestra centralizzata “modifica immagine” (figura 1): da qui è possibile attingere sia agli strumenti classici per l’elaborazione digitale, sia ai nuovi filtri raster, già comparsi peraltro in Flash 8.
Sul versante dell’importazione di contenuti esterni, Fireworks ora supporta nuovi formati di files: immagini QuickTime (necessita però del plug-in QuickTime installato nel computer), MacPaint, SGI e JPEG2000.
Il comando “Elaborazione batch” consente invece di applicare vari tipi di modifiche ad un gruppo di files selezionati. Tra queste, la possibilità di ridimensionare le immagini, rinonimare i files, controllarne le dimensioni, eccetera.

Workflow migliorato
Iniziamo col dire che chi usa normalmente Fireworks in congiunzione con Dreamweaver e Flash noterà un vistoso miglioramento nell’integrazione dei 3 programmi, che esalta ancor di più il concetto di Roundtrip, già introdotto nella versione MX. Sono stati inoltre implementati i CSS in Fireworks (figura 2), grazie a questo, i menu pop-up, precedentemente realizzati in JavaScript, sono ora più facilmente configurabili, e soprattutto generano un codice “pulito” che si integra meglio con i files di Dreamweaver.



Figura 2 – Esportazione di un bottone con menu a comparsa: da notare la possibilità di usare i CSS invece del normale codice JavaScript.

Nell’integrazione con Flash è stata migliorata la compatibilità vettoriale: quando si spostano oggetti tra i due applicativi non c’è più pericolo di perdere attributi essenziali come i riempimenti, lo stile delle linee, i filtri applicati e i nuovi metodi di trasparenza. Anche i colori impostati in ActionScript all’interno di Flash, vengono riconosciuti ed applicati correttamente in Fireworks.
Il nuovo strumento porzione poligonale permette ora di creare aree sensibili irregolari, molto utili quando si deve preparare una mappa di punti sensibili sopra una cartina geografica.
Un’altra piccola ma utile miglioria riguarda il comando “Salva con nome”: ora è possibile scegliere subito il formato di salvataggio necessario, tra diversi tipi; inoltre la logica usata per determinare le cartelle predefinite di un progetto è stata notevolmente migliorata. Da segnalare anche le nuove griglie visive, uguali a quelle già implementate in Flash, molto meno invasive.
Una novità che farà piacere a designer ed illustratori riguarda il miglioramento del supporto per le tavolette grafiche, con la possibilità di sfruttare la sensibilità alla pressione della penna.
E’ ora possibile importare i files PNG di Fireworks, all’interno di Flash 8, preservando totalmente tutti gli elementi costitutivi dei nostri progetti: vettori, forme, linee, livelli, guide, oggetti interattivi, effetti ed animazioni rimarranno completamente editabili in Flash! Se ciò non bastasse possiamo esportare files di Flash in formato SWF direttamente da Fireworks, copiare ed incollare correttamente gli oggetti da un programma all’altro oppure esportare animazioni in formato GIF animato. Gli utenti più smaliziati potranno inoltre creare delle piccole utilità in Flash, salvate come normali movieclip con tanto di ActionScript, riutilizzabili all’interno di Fireworks come veri e propri pannelli da usare nello spazio di lavoro, grazie alle funzionalità del menu Comandi.
La tecnologia su cui si fonda Fireworks venne utilizzata anche all’interno di Dreamweaver, dalla versione MX 2004. Con la release di Studio 8 sono però stati introdotti molti miglioramenti. Ora è ancor più facile ritagliare, ridimensionare e scalare le immagini inserite in Dreamweaver senza dover passare a Fireworks.
La tecnologià Roundtrip HTML è stata ulteriormente migliorata: un web designer può creare in Fireworks pagine web con tabelle nidificate da consegnare ad uno sviluppatore. Questi può modificare il file in Dreamweaver, aggiungendo codice e funzionalità, e ripassare il file nuovamente al designer, il quale può ancora effettuare delle modifiche visuali, prima dell’output definitivo. In tutti questi passaggi abbiamo la sicurezza che il codice HTML verrà mantenuto perfettamente integro: non male!
Se poi volessimo riutilizzare elementi di navigazione di Fireworks in Dreamweaver non dobbiamo far altro che esportarli come oggetti di libreria: li ritroveremo pronti per l’uso nella libreria di Dreamweaver.

Nuove funzionalità e strumenti
I team di sviluppo di Flash e Fireworks devono devono aver lavorato in stretto contatto, perlomeno su alcuni punti. Infatti, la finestra “modifica immagine” (figura 1) contiene sia gli strumenti classici per l’elaborazione digitale, sia i nuovi filtri raster, ed anche i nuovi metodi di fusione (chiamati tecnicamente blend modes), già apparsi in Flash 8. Grazie a 25 diverse impostazioni è ora possibile controllare il metodo di colore di qualuque oggetto (sia vettoriale sia bitmap), quando viene sovrapposto ad un oggetto in un altro livello. Questa funzione, già nota agli utenti di Adobe Photoshop, permette di ottenere velocemente effetti visivi di grande impatto.



Figura 1 – I nuovi pannelli “Forma automatica” e “Modifica immagine”.

Sul versante delle ombre sono state introdotte due novità: ombra solida e ombra prospettica (figura 3). Se la prima non brilla per originalità, la seconda permette di avere invece un controllo sull’ombra, a livello di prospettiva, davvero notevole! Un bel passo avanti rispetto agli ormai consueti effetti ombra che accompagnano il programma dalla versione MX. Un’altra cosa da segnalare riguarda La funzione “forma automatica” (figura 1) richiamabile dall’omonima finestra: permette di creare in breve elementi geometrici complessi, molti dei quali nuovi in questa versione, modificabili a piacimento.



Figura 3 – Applicazione del nuovo effetto “Ombra prospettica” contemporaneamente al normale filtro sfocatura.

Nuovi temi: l’ideale anche per i più pigri!
Abbiamo carenza di creatività? Siamo un po’ pigri? O semplicemente non abbiamo tempo di realizzare graficamente le nostre interfacce? No problem. Grazie alle librerie di animazioni, pulsanti, indicatori di paragrafo e temi personalizzati, è ora possibile realizzare velocemente interfacce di grande impatto visuale. Il tutti in pochi clic! Non dobbiamo far altro che importare i vari elementi sullo spazio di lavoro scegliendoli dalle librerie a disposizione.

Un po’ di mobile anche qui…
Una interessante funzione introdotta in Fireworks permette di selezionare una nutrita lista di componenti da utilizzare nella progettazione di interfacce per i dispositivi mobili. Grazie alla libreria Halo Lite, è ora possibile importare direttamente nello spazio di lavoro una quantità ingente di bottoni, caselle di scelte, menu, eccetera, adatti al design delle applicazioni mobile. Attenzione però: non si tratta di componenti editabili in FlashLite; una volta esportati diventano normali immagini, e i fonts vengono convertiti in curve.



Figura 4 – Un esempio di interfaccia per dispositivi mobili, costruita in Fireworks.

Considerazioni finali
Se ci mettiamo a contare le innovazioni che sono state introdotte in Flash 8 e Dreamweaver 8, Fireworks, da questo punto di vista, rischia di apparire un po’ deboluccio. Evidentemente mamma Macromedia ha pensato bene di rinforzare aspetti più importanti, come la migliorata stabilità ed integrazione con gli altri programmi della Suite, cose che effettivamente abbiamo apprezzato molto, anche più delle sottili innovazioni citate, comunque presenti.