Grafica  »  Articoli  »  Fireworks 

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:

1. creare un simbolo di animazione mediante la creazione di un simbolo o trasformando un oggetto in simbolo;
2. accedere alle proprietà simbolo per impostare le caratteristiche dell'animazione;
3. impostare nelle proprietà dei fotogrammi la velocità del movimento dell'animazione;
4. 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.

Altri articoli

Altre guide

Altre newsletter