Animazioni

Animazioni
Fig. 2
Sequenza dei fotogrammi
che dà la sensazione del
movimento.
Fig. 1
Fotogrammi: istantanee
successive di una scena.
Animazioni
In Fireworks ci sono numerose funzioni per facilitare le operazioni di creazione e
modifica di un’immagine animata.
Il modo più immediato di creare un’animazione è quello di specificare degli attributi a
oggetti chiamati animation symbols.
L’animazione di un simbolo è costituita da diversi fotogrammi (frame). Possiamo
vedere i fotogrammi come istantanee in diversi momenti successivi
di una scena (Fig.1). Visualizzate in sequenza le differenze fra un fotogramma e
l’altro creano l’illusione del movimento (Fig.2).
Nell’esercizio successivo (5) realizzeremo un’animazione in questo modo:
•creazione di un’immagine e conversione dell’immagine in animation symbol
•Specifica degli attributi dell’animazione del simbolo nell’apposita finestra di
dialogo Animate.
•Specifica della velocità dell’animazione, ottenuta inserendo un valore per la quantità
di tempo in cui viene visualizzato ogni singolo fotogramma
Impareremo inoltre come utilizzare i livelli per definire uno sfondo immobile che non
cambia durante l’animazione.
1
Esercizio 8:
Animare un oggetto grafico
L’oggetto da animare
Animazioni con traiettoria lineare
In questo esercizio creeremo un semplice oggetto a forma di stella, lo
convertiremo in animation symbol e specificheremo gli attributi
dell’animazion in modo che la stella si sposti sul foglio di lavoro –
seguendo una traiettoria lineare - fino a fermarsi accanto a un testo.
Passo1: Aprire un nuovo documento.
Passo 2: scegliere dalla barra degli strumenti lo strumento Poligono. Nella
sheda Tool Option impostare la forma a stella, il numero di punte a 5
e l'angolo a 45 gradi (campo Angle), come in figura.
Passo 3: disegnare una stella sul foglio di lavoro in alto a destra e
modificarne gli attributi Tratto, Riempimento e Effetto come indicato in
figura.
Passo 4: Selezionare la stella e aprire la finestra che ci consentirà di
convertirla in animation symbol : Modifica-> Animate-> Animate
Selection.
2
Esercizio 8:
Animare un oggetto grafico
Specificare gli attributi dell’animazione
Numero di frame
Distanza da coprire (in pixel)
Direzione del movimento
Variazione di dimensione
Variazione di opacità
Quando si crea un’animazione occorre specificarne alcuni attributi.
Nella finestra Animate è possibile specificare i seguenti attributi
dell’animazione:
• Numero di frame: questo attributo specifica il numero di fotogrammi
che si vuole includere nell’animazione. Intuitivamente il numero di frame
corrisponde al numero di “passi” compiuti dal simbolo per completare
l’animazione. Quando questo attributo viene selezionato Fireworks
automaticamente aggiunge al documento il numero di fotogrammi
richiesto per completare l’azione
• Distanza da coprire: questo attributo specifica la distanza (in pixel), che
vogliamo l’animazione copra.
• Direzione del movimento: questo attributo specifica la direzione (in
gradi – range 0-360) nella quale vogliamo si muova l’oggetto animato
• Variazione di dimensione: questo attributo specifica la percentuale di
variazione della dimensione dell’oggetto dall’inizio alla fine della
animazione. Ad esempio quando per questo attributo specifichiamo il
valore in figura (50) questo significa che durante l’animazione la
dimensione dell’oggetto verrà ridotta fino al 50% della sua dimensione
originaria.
• Variazione di opacità: questo attributo specifica il variare del grado di
opacità/trasparenza dall’inizio alla fine della animazione. Per esempio,
quando per questo attributo specifichiamo i valori in figura (da 60a 100)
questo significa che durante l’animazione l’opacità/trasparenza
dell’oggetto verrà incrementata fino al 100% della sua opacità originaria.
3
Esercizio 8:
Animare un oggetto grafico
Specificare gli attributi dell’animazione
Senso orario/anti-orario
Rotazione
• Rotazione: questo attributo specifica di quanto (in gradi) il simbolo ruota
dall’inizio alla fine dell’animazione. Per esempio, quando per questo
attributo specifichiamo il valore in figura (360) questo significa che
durante l’animazione l’oggetto compirà un intero giro su se stesso. E’
possibile specificare valori > di 360 per ottenere che l’oggetto compia più
di una rotazione. E’ possibile anche specificare il senso di rotazione
scegliendo fra orario (CW - clockwise) e anti-orario (CCW – counterclockwise)
Proseguiamo con l’esercizio…
Passo 5: Specificare per la nostra stella gli stessi attributi della figura e
cliccare su OK.
4
Esercizio 8:
Animare un oggetto grafico
Modificare il percorso dell’animazione
Fig. 2
L’editor per i
simboli
Fig. 1
la modifica del
percorso
Abbiamo creato un animation symbol, che come ogni oggetto di tipo
simbolo, viene inserito in una libreria di simboli ed è disponibile nella
finestrella Library del gruppo di pannelli Assets (risorse del documento).
Quando un simbolo di animazione è selezionato, sul documento viene
visualizzato il percorso che abbiamo specificato per l’animazione che si
muove verso il basso fino ad arrivare accanto al testo. Il punto verde sul
cammino indica il punto iniziale dell’animazione, quello rosso il punto
finale. I punto blu sul cammino rappresentano i fotogrammi intermedi.
Cliccando sulle estremità è possibile modificare il percorso dell’animazione
(lunghezza, direzione), che rimane comunque lineare (Fig.1).
Per modificare gli attributi grafici di un simbolo occorre aprire un editor
speciale, che potete aprire cliccando due volte nel riquadro tratteggiato
intorno al simbolo (Fig.2). All’interno di questo editor è possibile
modificare tutti gli attributi grafici (colore, riempimento effetti) come
avete imparato. Ricordate che ogni istanza del simbolo presente nel
documento verrà modificata.
5
Esercizio 8:
Animare un oggetto grafico
La finestra Frame
Onion skinning: opzioni
Cicli di animazione: opzioni
La finestrella Frame permette di specificare ulteriori attributi dell’animazione
lavorando sui fotogrammi che la compongono. In questa finestra vengono
elencati e numerati i fotogrammi che compongono un’animazione e ogni
fotogramma ha associate certe proprietà.
Attraverso il menu Cicli di animazione è possibile specificare, se si vuole, di
eseguire l’animazione un certo numero (anche infinito - Forever) di volte.
Nel caso si voglia eseguire l’animazione una sola volta occorre specificare
No Looping.
Le opzioni del menu Onion Skinning ci permettono di visualizzare alcuni
fotogrammi che precedono o seguono il frame corrente su cui si sta
lavorando e in certi casi questo può rivelarsi molto utile durante il lavoro
di creazione dell’animazione.
Proseguiamo con l’esercizio...
Passo 6: Scegliere nel menu Cicli di animazione l’attributo Forever.
6
Esercizio 8:
Animare un oggetto grafico
Velocità dell’animazione
Valore corrente di
Frame delay
Per modificare la velocità dell’animazione, occorre specificare un valore per il
Frame Delay. In generale il frame delay è un attributo proprio di un
fotogramma, e specifica quanto a lungo quel fotogramma viene
visualizzato nel corso dell’animazione. Questa quantità è specificata in
centesimi di secondo. Tanto più basso è il valore che inseriamo per un
fotogramma, tanto più breve è la durata di visualizzazione di quel
fotogramma. Pertanto per velocizzare la nostra animazione dovremo
selezionare tutti i fotogrammi che la compongono e specificare come
frame delay un valore inferiore a quallo attuale di 7 centesimi di secondi.
Proseguiamo con l’esercizio...
Passo 7: Selezionare tutti i fotogrammi elencati nella finestra Frame. Fare
doppio click sul rettangolo contenente il valore attuale e inserire nella
finestra di dialogo un valore inferiore a quello corrente.
7
Esercizio 8:
Animare un oggetto grafico
Fissare lo scenario dell’animazione
Fig. 1
Creazione di un nuovo livello di sfondo
Il livello di sfondo
In presenza di animazioni è utile utilizzare i livelli per la specifica di uno
sfondo che resta immobile durante l’animazione. L’idea è quella di
definire lo sfondo dell’animazione come un livello separato e di selezionare
un’apposita opzione per distribuire gli oggetti contenuti in quel livello su
tutti i fotogrammi del documento. L’opzione Condividi fra fotogrammi
per un livello può essere selezionata all’interno della finestra di dialogo
che si apre con un doppio click sul nome del livello.
Proseguiamo con l’esercizio...
Passo 8: Creare un nuovo livello e creare in questo nuovo livello un oggetto
testo consistente nella scritta Le Stelle.
Passo 9: Fare doppio click sul nome livello, rinominare il livello
background e selezionare l’opzione Share Across Frames (Fig.1).
8
Esercizio 8:
Animare un oggetto grafico
Anteprima dell’animazione
Usa Play per dare inizio all’anteprima
Passo 10: Per un’anteprima dell’animazione selezionare Preview nella barra
a schede in alto nella finestra del documento.
Passo 11: Usare la barra dei comandi in basso nella finestra del documento
per controllare l’anteprima. Fare click su play per cominciare.
9