Grafica  »  Guide  »  Guida Fireworks 

Creare animazioni



In Fireworks le animazioni possono essere create disegnando direttamente i singoli fotogrammi ma, soprattutto, realizzando dei simboli le cui proprietà, modificate nel tempo, diano l'illusione del movimento. Il fatto che all'interno di uno stesso documento possano coesistere non solo simboli diversi, ma anche varie istanze delle stesso simbolo, consente di creare animazioni complesse contenenti più azioni contemporanee.

Riassumendo si può dire che per creare una animazione i passi necessari sono i seguenti:

  • creare i simboli (che a loro volta possono essere animati) che dovranno comparire nell'animazione;
  • impostare le proprietà dei vari simboli, inserendo se necessario anche più istanze di uno stesso simbolo in fotogrammi diversi;
  • decidere la durata dei vari fotogrammi e se l'animazione deve essere ciclica o meno;
  • ottimizzare ed esportare l'animazione (Fireworks è in grado di esportare le animazioni sia in formato GIF che in formato SWF per Flash).

Per creare un simbolo è sufficiente scegliere Inserisci > Nuovo simbolo e nella finestra di dialogo selezionare Animazione. Nell'area di lavoro che si apre si lavora normalmente e dal pannello Fotogrammi si possono inserire o duplicare fotogrammi per ottenere un simbolo che contenga già una animazione.

Nota: quando si inserisce un simbolo formato da più fotogrammi in un documento questo risulterà comunque composto da un solo fotogramma, come accade per i pulsanti a più stati.

Per modificare le proprietà di un simbolo si può scegliere Elabora > anima > Impostazioni oppure visualizzare il pannello Oggetto. Le proprietà su cui si può agire sono:

  • fotogrammi: rappresenta il numero di fotogrammi nei quali deve comparire quel simbolo;
  • spostamento: distanza (in pixel) che deve percorrere il simbolo all'interno dell'animazione;
  • direzione: direzione (in grado) verso cui deve spostarsi il simbolo;
  • scalatura: variazione delle dimensioni del simbolo. È espressa in percentuale e può essere compresa fra 0 e 250;
  • opacità: grado di trasparenza, espresso in percentuale;
  • rotazione: angolo (espresso in gradi) di cui deve ruotare il simbolo durante l'animazione;
  • oraria e antioraria: indicano ovviamente la direzione di rotazione.

Quando si inserisce un simbolo animato in un documento, questo risulta evidenziato da un contorno tratteggiato e al suo interno è visibile un pallino rosso. Cliccando e trascinando si modifica il tracciato del simbolo, cioè il percorso lungo cui deve muoversi durante l'animazione. Il tragitto è individuato da un segmento su cui si sono dei pallini colorati: quello verde e quello rosso rappresentano rispettivamente il punto di partenza e quello di arrivo, mentre quelli azzurri indicano le posizioni del simbolo nei vari fotogrammi.

Nota: nelle animazioni è possibile importare GIF animate, in questo caso il programma le converte in simboli animati ai quali è possibile modificare le proprietà.

Dal pannello Fotogrammi si può impostare il ritardo, cioè per quanto tempo verrà visualizzato quel fotogramma. Il valore impostato di default si trova nella colonna a destra del pannello ed è espresso in centesimi di secondo. Per modificarlo è sufficiente farci doppio clic sopra e impostare il nuovo valore.

In basso a sinistra nel pannello compare il pulsante che permette di attivare o disattivare la tecnica Onion Skin. In questo modo è possibile visualizzare i fotogrammi che precedono o seguono quello selezionato. Si tratta di un metodo molto valido quando, ad esempio, ci sia la necessità di far coincidere le posizioni di due simboli in fotogrammi diversi.

Accanto al pulsante Onion Skin si trova il pulsante Ripetizione che permette di impostare quante volte il gruppo di fotogrammi deve essere ripetuto durante la riproduzione dell'animazione. L'opzione sempre permette di ottenere una animazione continua.

Nota: il valore che si sceglie indica il numero di ripetizioni successive alla prima riproduzione, quindi, se si imposta per esempio il valore 2, la sequenza sarà riprodotta tre volte.

Dal pannello Ottimizza scegliendo trasparenza indice o trasparenza alfa è possibile impostare uno o più colori da rendere trasparenti all'interno del browser. Sempre da questo pannello è importante scegliere come formato di esportazione GIF Animata. A questo punto sarà possibile vedere anche una anteprima nel browser (tasto F12) dell'animazione che altrimenti risulterebbe una immagine fissa.

Al momento dell'esportazione (File > Anteprima esportazione) controllare che il campo Formato, in alto a destra nella finestra, sia impostato su GIF Animata. Dopo aver cliccato su Esporta impostare Salva come su Solo immagine per ottenere un file GIF, scegliere invece Flash SWF per avere un documento che potrà poi essere aperto in Flash per ulteriori modifiche.

Ultimi articoli Grafica

Creare Testo 3D con Photoshop CS5

Creare una scritta sfruttando gli effetti tridimensionali...

Photoshop CS6: le novità più interessanti

Un'interfaccia rinnovata, semplificazione di comandi ripetuti,...

Digital painting con Photoshop

Creare illustrazioni digitali sfruttando la capacità del software di...

Forme e texture con Photoshop, creare una carta da gioco infuocata

Sfruttare forme vettoriali e texturing per ottenere un'illustrazione...

Attenuare rughe d'espressione e imperfezioni della pelle con Photoshop

Le tecniche per attenuare rughe d'espressione e imperfezioni della...

Altri articoli

Guide Grafica

Guida Photoshop CS5

Modifica e ottimizzazione dell'immagine, strumenti di disegno e...

Guida Photoshop CS4

Disegno, fotoritocco, effetti con Photoshop CS4: impariamo a usare...

Guida Paint Shop Pro

Paint Shop Pro è un celebre programma di fotoritocco,...

Altre guide

Newsletter @Grafica e Web Design

Ogni settimana, direttamente nella tua e-mail: guide, articoli, tutorial e FAQ su Web Design e grafica per il Web.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti