Con questo tutorial apriamo una serie di approfondimenti che ci permetteranno di costruire un sito esclusivamente (o quasi) con Fireworks. Sarà per tutti l'occasione di verificare sul campo la potenza degli strumenti messi a disposizione dal software di Macromedia.
In particolare, con la lezione di oggi inizieremo a costruire la pagina d'ingresso per un sito che pubblicizza "t-shirt", utilizzando simboli animati che conferiscono alla grafica un aspetto più brillante. Ecco quello che andremo a realizzare.
In Fireworks le animazioni vengono create mediante simboli ai quali si modificano
le proprietà temporali, permettendo così di ottenere illusioni
di movimento.
È possibile inserire nello stesso file più simboli, questo vi permette di creare strutture complesse di animazione, trattando ogni elemento come se fosse un 'attore' al quale viene assegnato un determinato movimento. Una volta acquisita la necessaria pratica, dunque, potrete trattare le animazioni come azioni di una sceneggiatura, dove ogni simbolo recita il suo copione. Ricordiamo anche che Fireworks permette di esportare l'animazione come file SWF, in grado quindi di essere ulteriormente elaborato da programmi come Macromedia Flash.
Simboli di animazione e fotogrammi
Per creare una gif animata dobbiamo:
- creare un simbolo di animazione mediante la creazione di un simbolo o trasformando un oggetto in simbolo;
- accedere alle proprietà simbolo per impostare le caratteristiche dell'animazione;
- impostare nelle proprietà dei fotogrammi la velocità del movimento dell'animazione;
- ottimizzare ed esportare il file come gif animata.
Un simbolo rappresenta un oggetto o un blocco di testo o un gruppo ed è necessario affinchè l'oggetto possa essere animato su più fotogrammi. I fotogrammi scompongono l'animazione determinando la durata del movimento. Fatta questa premessa, iniziamo con la procedura passo per passo.
Lanciamo il programma. Selezioniamo nella finestra Create new>Fireworks
File un nuovo file con queste caratteristiche (Figura
A):
- W=760 px;
- H=420 px;
- Resolution=72 px/inch;
- Canvas color: #0099CC
Usiamo queste dimensioni per assicurarci che le il file possa essere correttamente visualizzato per una risoluzione video di 800x600.
Nel pannello LAYER (se non è aperto: Window>Layers oppure da tastiera F2) facciamo doppio clic sul Layer1, rinominiamolo in "comuni" e condividiamo il livello tra i fotogrammi spuntando su Share across frames (Figura B). Apparirà a fianco del nome il simbolo 
. In questo modo gli oggetti che appartengono a questo livello saranno comuni a tutti i fotogrammi.
Disegniamo gli elementi grafici per questo livello (per comodità abbiamo inserito nel step1.zip l'immagine editabile in formato .png), prima di impostare un nuovo livello per i simboli animati che chiameremo "animazioni". Tracciamo un rettangolo (W=120 px;H=40 px, colore=#006699) appena fuori del margine sinistro dell'area di lavoro, più o meno di 10 px sotto il margine superiore del rettangolo bianco. Chiamiamo l'oggetto "maniche" e trasformiamolo in simbolo: selezioniamo "maniche", Modify>Symbol>Convert to Symbol (o più semplicemente usiamo F8 dalla tastiera).
Si aprirà la finestra delle proprietà del simbolo: impostiamo il nome del simbolo in "manicheAnim" e selezioniamo il tipo Animazione (Figura C). Clicchiamo su OK e si aprirà una nuova finestra delle proprietà dell'animazione. Impostiamo a 10 il valore dei frames (il numero di fotogrammi) e modifichimo in 150 il valore "Move" (Figura D). Clicchiamo su OK.
Si aprirà una finestra che vi segnala che saranno aggiunti automaticamente dei fotogrammi. Clicchiamo su OK (Figura E). A questo punto il simbolo animato è stato attivato: si noterà, selezionando il simbolo, la comparsa dei tracciati di movimento del simbolo 
mediante i quali è possibile selezionare i fotogrammi di cui è composta l'animazione (il pallino verde corrisponde al primo fotogramma, quello rosso all'ultimo e quelli azzurri corrispondono ai fotogrammi intermedi).
Bene, abbiamo creato la prima animazione che consiste in un semplice movimento del rettangolo che si muove verso destra.
Operazioni con i simboli di animazione
Piccola nota di approfondimento. Come abbiamo visto la creazione di un simbolo ci permette di utilizzarlo per ottenere un'animazione mediante un movimento dell'oggetto. Ma possiamo anche decidere di scalare l'oggetto, farlo ruotare, renderlo trasparente oppure opaco. Queste sono tutte opzioni che intuitivamente possiamo applicare al nostro simbolo grazie al pannello delle proprietà dell'animazione.
Possiamo creare un simbolo con un qualsiasi oggetto importato o creato dall'utente. Per creare un simbolo scegliere Edit>Insert>New Symbol o da tastiera Ctrl+F8, inserire un nome per il nuovo simbolo, scegliere Animation e cliccare su OK. Nell'editor dei simboli usare gli strumenti per creare un oggetto, poi chiudere l'editor. In questo modo Fireworks ha collocato una copia del simbolo al centro dell'area di lavoro e ha inserito il simbolo nella libreria (pannello Window>Library o F11 da tastiera).
Torniamo al nostro lavoro. Creiamo ora un nuovo simbolo. Sempre nel livello "animazioni" (conviene bloccare col lucchetto il livello "comuni") selezioniamo il fotogramma n° 10, clicchiamo Edit>Insert>New Symbol per creare un simbolo che chiameremo "TroncoAnim". Disegniamo nell'editor un rettangolo di 70x80 px che chiameremo "tronco" (colore:#006699). Clicchiamo su Done.
Fireworks posiziona al centro dell'area di lavoro il simbolo appena creato. Spostiamo col puntatore il simbolo: questo oggetto dovrebbe trovarsi con il suo bordo superiore allineato al bordo inferiore del rettangolo "maniche" e centrato rispetto a "maniche", in modo da formare una T o, appunto, una maglietta (Figura F).
Tagliamo il simbolo appena creato (Edit>Cut oppure Ctrl+x) e ci spostiamo nuovamente nel fotogramma 1. Incolliamo il simbolo (Edit>Paste oppure Ctrl+V). Scaliamo il rettangolo della metà: per far questo conviene usare il comando Modify>Transform>Numeric Transform... (oppure Ctrl+shift+T). Alla trasformazione Scale immettere il valore 50%.
A questo punto non ci resta che impostare le proprietà dell'animazione: col simbolo selezionato selezioniamo Modify>Animation>Settings... per aprire la finestra delle proprietà: impostiamo il n° dei fotogrammi a 10, immettiamo il valore 200 a Scale to, clicchiamo ok. Possiamo avere un'idea dell'animazione che stiamo creando semplicemente attivando il triangolino bianco in basso a destra dell'area di lavoro 
. Con i tasti di controllo dei fotogrammi 
possiamo visualizzare rispettivamente il primo fotogramma, la sequenza completa e ripetuta, l'ultimo fotogramma, il fotogramma precedente e quello successivo. Il numero sta ad indicare il fotogramma corrente.
Se abbiamo correttamente impostato le operazioni finora descritte dovremmo avere ottenuto un risultato simile a quello contenuto nell'immagine step2.png (è contenuta nell'archivio step2.zip).
Modifica delle proprietà del simbolo
È possibile modificare in qualsiasi momento le proprietà dell'animazione. Scegliere Modify>Animation>Settings... con il simbolo selezionato. Si aprirà la finestra di proprietà sulle quali è possibile modificare i valori dell'animazione. Se il numero di fotogrammi richiesti è superiore a quelli già presenti nel file, Fireworks provvederà ad inserirne di nuovi.
Cliccando due volte sul simbolo si apre l'editor per le modifiche degli oggetti contenuti in esso. Sarà possibile quindi in qualsiasi momento modificare gli attributi, il testo e gli elementi di cui è composto.
È possibile anche modificare con il tracciato di movimento sia la direzione che la lunghezza del movimento dell'oggetto. Per vincolare la direzione di spostamento per incrementi di 45° premere e tenere premuto il tasto SHIFT mentre si trascinano le maniglie di animazione (tasti verde e rosso) del simbolo in una nuova posizione.
Potete provare a 'giocare' con queste impostazioni per personalizzare il lavoro e prendere al contempo confidenza con gli strumenti.
Dopo aver affrontato nella la gestione dei simboli, adesso cerchiamo di rendere meno statico l'insieme del nostro disegno.
Blocchiamo il layer animazioni e creiamo un nuovo layer (cliccando sull'icona 
) che posizioneremo tra i due layer esistenti mediante trascinamento. Lo chiameremo intermedio e inseriremo un rettangolo bianco che ha le stesse dimensioni del rettangolo bianco del layer comuni (Figura G).
Trasformiamo questo rettangolo in simbolo e applichiamo un'opacità iniziale
di 100 e una finale di 0, passando attraverso 10 fotogrammi, come abbiamo già
imparato a fare (Figura
H).
Operazioni con i fotogrammi
Adesso dobbiamo modificare le proprietà dei fotogrammi per ottimizzare i tempi di esecuzione del movimento. Per impostazione predefinita in Fireworks il ritardo del fotogramma è di 7 centesimi di secondo. Il pannello Frames (Window>Frames, oppure Shift+F2) consente di attribuire nomi ai fotogrammi, riorganizzarli, impostare manualmente la tempistica dell'animazione e spostare gli oggetti da un fotogramma all'altro.
Impostazione del ritardo dei fotogrammi consente di determinare per quanto tempo sarà visualizzato il fotogramma corrente. Sulla colonna Ritardo fotogramma (sulla destra del nome del fotogramma), con un doppio clic si accede al parametro del tempo, espresso in centesimi di secondo (ossia per un ritardo di un secondo si deve immettere il valore 100).
È possibile selezionare fotogrammi contigui (tenendo premuto il tasto Shift sul primo e sull'ultimo fotogramma dell'intervallo) o effettuare una selezione multipla di fotogrammi non contigui (tenendo premuto il tasto Ctrl selezioniamo i fotogrammi desiderati) e intervenire sulle proprietà con un doppio clic. Digitare quindi il valore del ritardo e premere invio oppure fare clic fuori dal pannello.
Impostiamo il valore dei nostri fotogrammi a 10, con eventuali ulteriori ritocchi in seguito.
Visualizzazione e occultamento dei fotogrammi
Se non vogliamo che uno o più fotogrammi non facciano parte della serie
di animazioni possiamo occultarli e non saranno visualizzati nella riproduzione
nè saranno esportati.
Per selezionare quindi i fotogrammi da nascondere, fare doppio clic sulle proprietà
in corrispondenza della colonna dei valori del ritado e spuntare l'opzione Include
when exporting: una croce rossa sostituirà il ritardo.
Aggiunta, spostamento, copia e cancellazione dei fotogrammi
È possibile aggiungere manualmente i fotogrammi, copiarli e spostare
l'ordine (Figura
I). Per aggiungere, copiare, cancellare un fotogramma successivo a quello
corrente cliccare l'icona 
.
Per aggiungere, copiare, cancellare un determinato numero di fotogrammi in un
punto specifico della sequenza cliccare sulle opzioni del pannello frames, alla
destra del titolo, come in figura 
.
Scegliere le opzioni desiderate.
Spostare gli oggetti selezionati nel pannello fotogrammi
Si può usare il pannello fotogrammi per spostare gli oggetti in un fotogramma
differente: selezionare l'oggetto da spostare, comparirà un quadrato azzurro
sulla destra del tempo di ritardo dei fotogrammi. Trascinare il quadrato sul fotogramma
desiderato 
.
Condivisione dei livelli tra i fotogrammi
Per far sì che gli oggetti compaiano per l'intera durata dell'animazione
possono essere collocati su un livello al quale abbiamo impostato l'opzione di
condivisione, come abbiamo fatto nel nostro tutorial in una delle prime operazioni.
Tecnica Onion Skin
Per avere un maggiore controllo dell'animazione possiamo visualizzare i contenuti
dei fotogrammi precedenti e successivi a quello selezionato, senza che gli oggetti
contenuti in essi possano essere attivati. Cliccando sull'icona 
si aprirà il pannello delle opzioni nel quale sarà possibile impostare
il numero di fotogrammi visibili, disattivare e customizzare l'Onion Skin.
Facciamo qualche piccolo ritocco alla nostra animazione prima di passare alla fase di esportazione del file di Fireworks.
Blocchiamo col catenaccio tutti i livelli e ne creiamo uno nuovo, che chiameremo finale. Ritocchiamo gli ultimi tre fotogrammi inserendoci un rettangolo e un cerchio, ottenendo un risultato simile a questo (step 3). Nell'ultimo fotogramma aggiungiamo il testo "Entra".
È possibile attenuare o meno i bordi del testo applicando l'antialiasing, in modo tale, soprattutto nei testi di grandi dimensioni, da rendere il testo più leggibile facendo sfumare i bordi nello sfondo.
Impostazione della ripetizione dell'animazione
Possiamo scegliere il numero di ripetizioni dell'animazione mediante il comando GIF Animation Looping 
, dalla finestra di dialogo Frames. Il numero che compare a fianco dell'icona rappresenta il ciclo scelto. Se, ad esempio impostiamo il valore a 3, avremmo un'esecuzione per quattro volte di seguito dei fotogrammi.
Impostiamo il valore del ciclo nella nostra animazione a No Looping, il che significa che l'animazione verrà eseguita una sola volta. Per impostare la ripetizione del ciclo scegliamo Window>Frames (oppure Shift+F2), facciamo clic sul pulsante GIF Animation Looping 
e scegliamo No Looping (Figura L).
Trasparenza
A volte si richiede che un colore o un'immagine di sfondo siano trasparenti nella pagina web. Per impostare un colore trasparente scegliere le opzioni Index transparency o Alpha transparency dalla finestra Optimize (Window>Frames oppure F6) nel menu a comparsa Trasparenza. Utilizzare quindi gli strumenti di trasparenza del pannello per selezionare i
colori di trasparenza.
Ottimizzazione
L'ottimizzazione comprime i file in pacchetti di dimensioni ridotte per caricare ed esportare velocemente, in modo tale che la riproduzione su web sia rapida.
Ottimizziamo a questo punto la nostra animazione: per fare questo è necessario che selezioniamo l'area animata con una porzione (Slice 
). Posizioniamoci sul fotogramma 10 e con lo strumento Rectangle Hotspot Tool 
tracciamo un rettangolo che ci servirà per accedere alla pagina successiva. Potete vedere in figura M le dimensioni della slice e dell'hotspot.
Siamo pronti per esportare il file .htm, vediamo come. Scegliere File>Export pre<patatine &ketchup>view per aprire la finestra di ottimizzazione del file GIF (figura N). Impostiamo i valori più consoni per alleggerire il file con le ottimizzazioni di Tavolozza, Dithering o Trasparenza, e poi selezioniamo Export... Si aprirà un'altra finestra per l'esportazione del file HTML (figura O), digitiamo un nome per il file, spuntiamo la casella Put images in subfolder per esportare le immagini in una sottocartella e il gioco è fatto!
Potete scaricare qui il file index.htm con le immagini e confrontarli con i vostri.
