Nota - in questo tutorial si fa riferimento ad alcuni strumenti di trasformazione il cui uso è stato approfondito nella guida di Fireworks pubblicata su HTML.it.
In rete esistono molti siti che permettono di scaricare piccole gif animate (per esempio la sezione delle gif animate su HTML.it da cui è preso l'esempio usato in questo esercizio).
Raramente però capita di trovare esattamente quello che cercavamo, oppure saltano fuori cose che a prima vista sembrano completamente inutili. Per esempio, vi siete mai chiesti a cosa possano servire quelle piccole animazioni in cui si vedono animali o persone che si muovono sul posto, come questa?
Fireworks permette di utilizzare queste gif all'interno di altri documenti personalizzandole a piacere. Per chiarire questa funzionalità del programma modificheremo questa animazione in modo da ottenere un cane che corre lungo una strada.
Per prima cosa creiamo un nuovo documento (per esempio 200x200 px) e importiamo la nostra animazione (File > Importa). Comparirà una finestra di dialogo che ci avverte che è necessario aggiungere dei fotogrammi al documento.
L'immagine del cane che compare nel nostro documento risulta contornata da un bordo tratteggiato (come i simboli importati dalle librerie) e al centro è visibile un pallino rosso. Cliccandoci sopra e trascinandolo si visualizza il tracciato di movimento: i punti azzurri rappresentano la posizione del simbolo nei vari fotogrammi, quello rosso è il punto finale e quello verde l'iniziale.
Spostando il simbolo animato nel documento si ottiene anche lo spostamento del tracciato che comunque potrà sempre essere modificato in lunghezza e/o angolazione.
A questo punto possiamo vedere un'anteprima dell'animazione usando i pulsanti che si trovano in fondo alla finestra del documento. Se il tracciato del simbolo è orizzontale l'effetto che si ottiene è gradevole, ma se è inclinato (come se il cane corresse lungo una strada in prospettiva) l'animazione risulta poco realistica. Sarebbe opportuno dare alla figura un effetto prospettico e fare in modo che l'immagine del cane risulti progressivamente più piccola nei vari fotogrammi.
L'effetto prospettico si può ottenere molto velocemente selezionando l'immagine corrispondente al primo fotogramma e utilizzando su di essa lo strumento di trasformazione Inclina. La modifica effettuata (e qualunque altra come per esempio aumentare o diminuire le dimensioni, riflettere l'immagine, ecc.) verrà applicata automaticamente a tutti i fotogrammi.
Per personalizzre ulteriormente l'animazione si può usare il comando Elabora > Anima > Impostazioni oppure il pannello Oggetto:
- Fotogrammi - indica il numero di fotogrammi di cui è composta l'animazione. Aumentando il numero i nuovi fotogrammi vengono aggiunti in coda a quelli già esistenti e ripropongono la sequenza di immagini dell'animazione
- Scalatura - è la variazione delle dimensioni dal primo all'ultimo fotogramma. È espressa in percentuale e si possono inserire valori compresi fra 0 e 250 (valori superiori a 100 corrispondono ovviamente fattori di ingrandimento).
- Opacità - permette di impostare un effetto di dissolvenza in ingresso o in uscita. I valori possibili vanno da 0 a 100.
- Rotazione - è l'angolo di cui deve ruotare in simbolo nel passaggio dal primo all'ultimo fotogramma. Impostando valori maggiori di 360° si ottengono più rotazioni complete.
- Oraria e Antioraria - permettono di scegliere il verso della rotazione.
Aprendo il pannello Fotogrammi si accede ad altre proprietà delle animazioni. Per esempio la colonna a destra contiene dei valori numerici che rappresentano la durata, espressa in centesimi di secondo, del singolo fotogramma. Questo valore può essere modificato selezionando il fotogramma e scegliendo Proprietà dal menu Opzioni (freccia nera in alto a destra nel pannello).
Terminiamo il nostro esercizio aggiungendo degli elementi di sfondo all'animazione. Lo sfondo può essere una bitmap importata o essere composto da elementi vettoriali tracciati direttamente in Fireworks. Tutti gli elementi dello sfondo dovranno comunque trovarsi sul un livello diverso da quello in cui si trovano le immagini dell'animazione vera e propria.
In questo esempio ho aggiunto come sfondo una vecchia foto di una strada cittadina.
Per fare in modo che tutti gli elementi dello sfondo risultino visibili per l'intera durata dall'animazione è poi necessario condividere il livello fra i fotogrammi. Per questo è sufficiente fare doppio clic sul nome del livello nel pannello Livelli e selezionare Condividi tra fotogrammi.
Quando si decide di esportare l'animazione creata occorre definire alcuni parametri per ottimizzare il file che verrà creato. La cosa più importante è controllare che nel pannello Ottimizza il formato del file sia impostato su GIF animata altrimenti non sarà possibile esportare nessun tipo di movimento.
Nel pannello Fotogrammi, mediante il secondo pulsante in basso a sinistra ( 
), è possibile decidere il numero di ripetizioni dell'animazione (selezionare Sempre equivale a sceglie un ciclo continuo).
A questo punto l'animazione è pronta per essere esportata come file GIF o file di Flash SWF; in quest'ultimo caso l'animazione può essere importata in Flash e modificata ulteriormente.
