FLASH PER L`ANIMAZIONE - 1 Quando si lavora con Flash bisogna

Isa Venturi – a.s.2008/2009 – doc.Macchi – LEZ.2
FLASH PER L'ANIMAZIONE - 1
Quando si lavora con Flash bisogna un po' abituarsi a costruire oggetti e scene complesse
non come ci piace a noi ma in funzione di ciò che dobbiamo farci. Nel caso
dell'animazione gli oggetti vanno costruiti in funzione di come si vuole animare e di cosa si
vuole animare. Questo ci deve portare a pensare molto bene alla nostra animazione
prima ancora di realizzarla con questo software.
Se all'inizio questo ci creerà non poche difficoltà, perché dobbiamo rivedere la nostra
forma mentale, a lungo andare ci permetterà di risparmiare moltissimo tempo e ottimizzare
le nostre creazioni.
Questi sono gli ingredienti e la ricetta che dobbiamo utilizzare per fare un buon lavoro e
usando lo stage come tavola di lavoro:
– disegnare gli elementi grafici
– stabilire le relazioni fra gli elementi
– impostare l'interattività
– assemblare il filmato definitivo usando lo stage come palcoscenico
USO DELLE LIBRERIE
Il primo concetto che dobbiamo assimilare è quello dell'uso delle
“librerie”, una sorta di scatola dei pezzi da montare, indispensabile
per realizzare l'animazione. Nelle librerie possono essere depositati
“oggetti” di vario tipo.
Le tre tipologie di oggetti più importanti sono:
CLIP FILMATO – PULSANTE – GRAFICO
CLIP FILMATO
PULSANTE
GRAFICO
Che differenza c'è fra un tipo di simbolo e l'altro?
Proviamo a elencare sotto le caratteristiche principali:
– animazioni indipendenti dalla timeline principale
– supporto di codice Action Script
- interazione con il mouse e con la timeline
– supporto di codice Action Script
- elementi grafici statici
– animazioni dipendenti dalla timeline principale
– codice action script non supportato
Per vedere il contenuto della libreria è necessario attivare la palette corrispondente con
menù FINESTRE – LIBRERIA.
Come potete vedere nell'immagine a fianco ogni tipologia di oggetto ha una sua propria
icona che lo caratterizza.
Per creare una qualunque delle tipologie
dell'oggetto, dopo averlo disegnato senza
raggrupparlo bisogna selezionarlo e scegliere il
comando da menù: ELABORA – CONVERTI IN
SIMBOLO.
Il menù vi chiede di dare un nome al simbolo (questo è un elemento importantissimo per
potere creare l'animazione perché potremmo avere decine di simboli e dobbiamo poterci
orientare), e poi vi chiede di definire le caratteristiche del simbolo secondo le tre categorie
di cui sopra. Il simboletto indicato con la freccia rossa serve invece a definire quale, dei 9
punti esterni del simbolo è da ritenersi il punto di origine del simbolo stesso.
Il simbolo sullo stage è evidenziato con un rettangolo azzurro per differenziarlo dalla forma
libera e, lo stesso simbolo, verrà visualizzato nel pannello libreria.
Isa Venturi – a.s.2008/2009 – doc.Macchi – LEZ.2
Come potete vedere nel menù
delle proprietà il simbolo ora
viene chiamato ISTANZA.
Quindi, gli oggetti presenti
nella libreria si chiamano
SIMBOLI, ma quando lo
stesso viene portato sullo stage si chiamerà ISTANZA. È importante perché noi possiamo
avere un solo simbolo nella libreria ma molteplici istanze di quel simbolo sullo stage.
Potremmo anche dire che una istanza equivale ad una copia di un simbolo. Del simbolo
ne ha le caratteristiche anche se è possibile che una istanza abbia una dimensione
diversa dal simbolo che l'ha generata.
Per portare una istanza di un simbolo nello stage basta trascinare l'anteprima del simbolo
nella libreria nello stage.
Per modificare in modo significativo l'istanza devo modificare il simbolo da cui è stata
generata e per modificare il simbolo mi basta fare un doppio click del mouse sul simbolo
direttamente nella libreria.
Quando il software è in modalità di
modifica del simbolo viene visualizzato
nello stage il nome del simbolo e
scompare l'area grigia fuori dallo stage.
Ora qualunque modifica sarà possibile
e, una volta confermata selezionando
la scena attiva (freccia verde) e uscendo dalla modalità di modifica, tutte le istanze
verranno modificate come il simbolo.
La creazione di un simbolo potrebbe avvenire anche direttamente, senza l'uso dello stage,
utilizzando il comando INSERISCI – NUOVO SIMBOLO
Diciamo che il resto della procedura di costruzione del simbolo è assolutamente identica
alla precedente metodologia dove usiamo lo stage per costruire.
ESERCIZIO 1
– create con gli strumenti di disegno una faccia sorridente
– selezionate il disegno e create un simbolo grafico che chiamerete
“faccia”
– cancellate dallo stage il disegno
– portate dalla libreria 5 o 6 istanze del simbolo “faccia”
– cambiate la dimensione e la rotazione di alcune delle istanze
– ora modificate il simbolo
togliendo il sorriso alla faccia
– confermate le modifiche e
visualizzate cosa è successo
nello stage.
– Se volete inviarmi l'esercizio per
verificarne la correttezza usate
questo indirizzo mail:
[email protected]
Isa Venturi – a.s.2008/2009 – doc.Macchi – LEZ.2
LAVORARE CON LE LIBRERIE
Per ogni documento flash è possibile avere una sola libreria. È però
possibile utilizzare le librerie di altri documenti aperti che non sono
quello attivo nello stage. Come potete vedere nell'immagine, in Flash
sono aperti 3 documenti (1.fla – pennello2.fla – matita.fla). Nel pannello
della libreria è possibile, con un menù a tendina, selezionare la libreria di
uno qualunque dei tre documenti aperti.
È anche possibile passare da un documento all'altro tenendo bloccata la
libreria che si vuole utilizzare, selezionando l'icona che contiene la puntina (freccia rossa)
della palette libreria, così come è possibile
aprire altri pannelli libreria usando l'icona a
fianco della puntina (freccia verde).
Può succedere anche di avere la necessità di
usare la libreria di un progetto senza volerlo aprire nello stage. In
questo caso è necessario importare la libreria usando il comando
FILE – IMPORTA – APRI LIBRERIA ESTERNA
Apparirà un panello libreria che non occupa spazio come memoria
nel documento attivo nello stage e che contiene la libreria del
documento di flash indicato dall'utente. (*.FLA)
La libreria è disponibile solo per l'esportazione, non può essere
modificata. Per Utilizzare uno dei simboli della libreria posso
direttamente trascinare il simbolo richiesto nello stage o nel pannello
libreria del documento aperto.
Se il simbolo che intendo importare nella mia libreria è composto da altri simboli nidificati,
nella mia libreria dopo l'importazione apparirà l'intera gerarchia dei simboli.
L'utilizzo delle librerie non si conclude qui. Esiste anche la possibilità di attingere a librerie
sganciate dal documento di flash ma disponibili come risorsa per ogni documento in
lavorazione. Per accedere a queste librerie dovete selezionare:
FINESTRA – LIBRERIE COMUNI – PULSANTI e selezionare il simbolo desiderato
trascinandolo nello stage o nella libreria del nostro documento aperto. Se da un lato, in
questo modo, rinunciamo all'originialità del nostro progetto, usando libreria di oggetti già
fatti velocizziamo i tempi di costruzione del progetto stesso.
Queste librerie non sono altro che documenti di flash già fatti che potrete trovare nelle
cartelle di installazione di Flash
C:\Programmi\Adobe\Adobe Flash CS3\it\Configuration\Libraries
Questo significa che se vogliamo salvare librerie personalizzate, con simboli creati da noi,
che però possono venire utili in molte situazioni progettuali, dobbiamo salvare la libreria
nel percorso che vi ho indicato. La libreria che avete salvato sarà disponibile ora nel menù
delle librerie comuni e potrete usarla all'occorrenza. Ovviamente se cambiate computer
dovrete portare con voi anche le vostre librerie
personalizzate
È possibile convertire un simbolo da una tipologia all'altra
selezionando dal menù specifico del pannello libreria la voce
TIPO, come indicato nell'immagine a fianco.
È possibile anche modificare il nome del simbolo nella
libreria rimanendo in piena sicurezza che verrà
salvaguardata la gerarchia della struttura di simboli anche
nidificati. Per simboli nidificati intendo simboli che
appartengono ad altri simboli. Come vedete nel menù a
Isa Venturi – a.s.2008/2009 – doc.Macchi – LEZ.2
fianco altre sono le proprietà che è possibile editare con questo menù come la
modificazione, che avevamo visto anche precedentemente, e l'eliminazione del simbolo.
Particolarmente importante è il comando duplica che ci permette di lavorare in grande
libertà anche in simboli che contengono altri simboli nidificati.
ESERCIZIO 2
– crate il disegno di un carrellino rosso con 2 ruote dove il “carrello” è un simbolo, la
“ruota” è un simbolo e l'intero carrellino è un altro simbolo (carrello completo), come
indicato nella libreria di questa immagine. Fin qui niente di particolare.
– Duplichiamo il carrello 2 o 3 volte nello stage.
– Ipotizziamo ora di volere che nella scena uno dei carrelli abbia caricato la faccia del
bimbo che abbiamo disegnato prima; possiamo ridisegnare il carrello selezionando i
simboli che lo compongono oppure possiamo duplicare l'intero carrello che contiene
già le istanze delle ruote e modificarlo.
– Quindi duplichiamo il simbolo “carrello completo” dandogli un nome adeguato.
Entriamo nella modalità di modifica del simbolo e aggiungiamo una istanza di
faccia. Usciamo dalla modalità di modifica del simbolo e creiamo una istanza del
carrello con faccia del bimbo.
– Provate a fare la stessa
operazione disegnando un
carrello blu e un carrello
rosso e sostituendo il
carrello rosso usando il
comando SCAMBIA del
menù delle opzioni del
simbolo
Isa Venturi – a.s.2008/2009 – doc.Macchi – LEZ.2
ALTRI OGGETTI IN LIBRERIA
In libreria possiamo anche inserire altri tipi di oggetti senza relazione diretta con ciò che
costruiamo con Flash come immagini, file audio o video da utilizzare nello stage
Anche gli oggetti di tipo carattere possono essere inclusi nel documento incorporando lo
stile del font nell'animazione sicuri del fatto che l'utente potrà vedere la grafica come
l'abbiamo pensata senza avere il font installato.
PROPRIETÀ DELLE ISTANZE E PROPRIETÀ DEI SIMBOLI
Ogni istanza, come abbiamo già detto, contiene tutte le caratteristiche del simbolo più
variazioni di dimensione o posizione sullo stage. Al variare del simbolo viene variata anche
l'istanza, ma non è vero il contrario.
Sulla istanza però è possibile
modificare anche alcuni parametri
contenuti nel menù specifico delle
opzioni come ad esempio il colore fra
cui la luminosità, la tinta, la
trasparenza (Alfa) oppure la modalità AVANZATO che permette di modificare tutte e 3 le
proprietà contemporaneamente.
Le istanze possono devono avere un nome scollegato da quello del simbolo. Per
impostare un nome specifico ad ogni istanza dobbiamo digitarlo nell'apposita stringa
(freccia verde). Questo tipo di nomina delle istanze è importantissimo quando si usa il
codice Actionscript che prevede perché “chiama” le singole istanze per fargli eseguire
specifici compiti, mentre non è possibile dare un nome ad un istanza generata da un
simbolo di tipo grafico perché, per sua natura, non è in grado di interagire con il codice di
programmazione.
Per modificare l'aspetto delle istanze è possibile usare
anche il menù FILTRI che trovate
insieme a quello delle proprietà in
fondo allo stage.
Ricordate che i filtri che propone
Flash, che sono molto simili nel
funzionamento ai filtri di livello di
Photoshop. Sono applicabili solo
alle istanze clip e pulsanti e al testo
Così come è possibile modificare la modalità di fusione del colore di
una istanza su un'altra utilizzando il comando FUSIONE del menù
opzioni. Anche in questo caso il riferimento al funzionamento è simile a
quello di Photoshop per i livelli (metodo di fusione)
Isa Venturi – a.s.2008/2009 – doc.Macchi – LEZ.2
USO DEI LIVELLI DI FLASH
Come tutti i software della famiglia Adobe l'utilizzo dei livelli è alla base
della preparazione di un progetto complesso. Questo è ancora più vero
in Flash dove l'uso dei livelli ha una forte ricaduta sulla costruzione
dell'animazione che è uno degli obiettivi primari di questo software.
Non a caso lo spazio per la gestione dei livelli è integrato nella Timeline
ovvero il menù che ci permette di gestire tutta la struttura
dell'animazione.
Per aggiungere nuovi livelli selezionare l'icona corrispondente alla freccia rossa.
Per modificare la sequenza dei livelli basta trascinarli nella posizione desiderata, ovvero
sopra o sotto a quelli contigui. Il livello che sta sopra è quello che sta più in alto, o meglio,
il primo della lista: se guardiamo l'immagine è il livello ROSSO.
Il nome del livello è modificabile a piacimento con un doppio click del bottone sinistro del
mouse con successiva digitazione del nome desiderato all'interno della stringa.
L'icona della matita (freccia verde) ci indica che in questo momento stiamo lavorando sul
livello in cui essa appare.
Pur essendo quello selezionato, io posso bloccare il contenuto del livello per evitare di
muovere o modificare inavvertitamente con un click in corrispondenza della colonna
identificata con l'icona di un lucchetto (freccia blu)
L'icona con l'occhio nella colonna a fianco (freccia bianca) permette di visualizzare o non
visualizzare il contenuto del livello
La casella colorata nella colonna a fianco del lucchetto (freccia nera) ci permette di
visualizzare il contenuto del livello non con le sue proprietà di colore ma in modalità
wireframe. Con un doppio click sulla casella colorata si ha accesso ad un menù specifico
in cui possiamo cambiare il colore assegnato al livello.
Per eliminare un livello trascinarlo sull'icona del cestino (freccia azzurra).
L'icona cartellina (freccia gialla) serve per raggruppare
livelli per ottimizzare la visualizzazione.
Cliccando sul livello vengono evidenziati sullo stage tutte
le istanze che vi appartengono.
Altre modalità di impostazione del livello sono disponibili
cliccando due volte sull'icona del livello (freccia arancio)
di cui vogliamo disporre. Nel menù come potete vedere
ci possiamo trovare molte delle cose che abbiamo già
visto. Vediamo come sia possibile modificare la tipologia
del livello da normale in modalità guida, per esempio, o
in modalità maschera o cartella
LA TIMELINE
è la vera anima dell'animazione. Quando parliamo di animazione
dobbiamo pensare che tutto quello che abbiamo nello stage si deve
muovere nello spazio e nel tempo.
Isa Venturi – a.s.2008/2009 – doc.Macchi – LEZ.2
Come vedete è possibile personalizzare la visualizzazione della timeline anche se, in linea
di principio, è meglio mantenerla nella modalità normale.
Tasto invio – per attivare l'animazione
tasto . - avanti di un fotogramma
tasto , - indietro di un fotogramma
I TRE METODI DI ANIMAZIONE POSSIBILI CON FLASH
frame by frame – alla maniera dei cartoni animati di Walt Disney l'operatore costruisce
ogni singolo frame indipendenti l'uno dall'altro e li mette in sequenza.
interpolazione di forma – è la possibilità di disegnare un fotogramma iniziale e uno finale
e lasciare a flash la possibilità di disegnare i frame intermedi. Questa interpolazione
riguarda le mutazioni della forma disegnata in relazione al tempo
interpolazione di movimento - la possibilità di disegnare un fotogramma iniziale e uno
finale e lasciare a flash la possibilità di disegnare i frame intermedi. Questa interpolazione
riguarda le mutazioni della posizione della forma disegnata in relazione al tempo
A secondo del metodo che utilizzeremo le simbologie dell'animazione nella timeline
saranno diverse:
COLORE BIANCO – Fotogrammi non chiave senza animazione, vuoto
COLORE VERDE – Animazione con interpolazione di movimento
COLORE AZZURRO– Animazione con interpolazione di forma
COLORE GRIGIO – Animazione frame by frame
PALLINO VUOTO – Fotogramma senza contenuto
PALLINO PIENO – Fotogramma chiave con contenuto
RETTANGOLO – fine di una sequenza di fotogrammi
FRECCIA CONTINUA – Animazione con interpolazione di forma o di movimento
FRECCIA/LINEA TRATTEGGIATA – Interpolazione non valida
ANIMAZIONE FRAME BY FRAME
Quando lo stage è vuoto la timeline avrà un solo fotogramma
attivo, colorato di bianco e un cerchietto vuoto. Di fatto questo
cerchietto vuoto individua un fotogramma chiave. Un
fotogramma chiave è un fotogramma particolare che contiene
delle informazioni specifiche. Appena io disegno una cosa
qualunque nello stage il fotogramma bianco diventa grigio e il
cerchietto da vuoto diventa pieno.
Dovendo costruire una animazione frame by frame dobbiamo
ora disegnare un secondo fotogramma che può essere chiave,
chiave vuoto o non chiave.
Proviamo ad aggiungere un fotogramma chiave andando con il
mouse in corrispondenza del secondo frame e selezionando il
bottone destro del mouse per attivare il menù contestuale.
Inserire un fotogramma chiave significa in pratica duplicare il
contenuto del fotogramma precedente su quello selezionato.
Disegnando in sequenza i fotogrammi possiamo modificare il
Isa Venturi – a.s.2008/2009 – doc.Macchi – LEZ.2
disegno per ognuno di essi costruendo l'animazione passo passo e controllando con molta
precisione tutto ciò che succede nell'animazione.
Utilizzando il tasto INVIO possiamo vedere l'animazione direttamente nello stage.
Se inseriamo invece di un fotogramma chiave un fotogramma normale non possiamo
andare a modificare la forma, ma diciamo a Flash di mantenere invariata l'animazione per
un 12/s.
Se invece inseriamo un fotogramma chiave vuoto di fatto sospendiamo l'animazione
ripulendo anche il contenuto dello stage per dare vita ad altre forme o comunque ripartire
da una situazione iniziale.
È evidente che, anche dopo avere creato l'animazione è possibile modificarla inserendo o
cancellando fotogrammi, l'importante è che questi non siano fotogrammi chiave perchè
questo modificherebbe in modo sostanziale la nostra animazione. Eliminare o aggiungere
fotogrammi fotogrammi normali serve solo per abbreviare o allungare i tempi
dell'animazione. Attenzione che normalmente l'eliminazione del fotogramma, così come
l'aggiunta, avviene in modo verticale su tutta la timeline a meno chè noi non selezioniamo
specificatamente, il frame desiderato. Per inserire fotogrammi utilizziamo il tasto rapido
F5, per eliminare fotogrammi utilizziamo la combinazione SHIFT+F5.
È possibile anche convertire la tipologia di un fotogramma da normale, a chiave, a vuoto
usando il menù contestuale. Ricordate però che ogni fotogramma chiave aggiunto significa
un peso maggiore del documento finale.
ESERCIZIO 3
Provate a costruire una piccola animazione con una palla rossa che rimbalza sullo stage a
cui segue un rettangolo verde che ruota attraverso lo stage usando la modalità frame by
frame
ESERCIZIO 4
Ora apri il documento di Illustrator chiamato “esercizio 4.ai”. Seleziona tutto il disegno in
illustrator, seleziona il comando “copia”. Apri Flash e seleziona il comando “Incolla”
Il disegno apparirà nello stage. Ora prova a costruire una piccola animazione frame by
frame per fare muovere i cerchi a tempo di musica...
Se vuoi vedere quello che ho fatto io guarda il file esercizio 4.swf