Le animazioni e la tecnica Onion skin

Transcript

Le animazioni
e la tecnica Onion skin
07
In questo capitolo apprenderai come creare vari tipi di animazione e come utilizzare
la tecnica Onion skin. In particolare potrai comprendere come Flash gestisce le animazioni ed i fotogrammi. Imparerai come gestire i fotogrammi, come creare un’animazione fotogramma per fotogramma e come creare un’animazione interpolata di
movimento e di forma.
Flash Professional CS6 e le animazioni
Flash è molto apprezzato, già dalle versioni precedenti, per la sua capacità di generare
animazioni utilizzando la grafica vettoriale e non bitmap. Grazie alla grafica vettoriale,
Flash ti permette di creare filmati veloci e poco “pesanti’, dal punto di vista delle dimensioni dei file generati, che possono così essere fruiti agevolmente sul Web e distribuiti come “proiettore” su supporti quali pen drive e CD o DVD indipendentemente
dalla piattaforma (Windows o Mac) dell’utente.
I fotogrammi
Ogni qualvolta realizzi un’animazione, devi per forza fare ricorso ai fotogrammi, perciò approfondiamo la loro conoscenza. Ricordati: per un’animazione fluida, non a
scatti, dovresti impostare la tua animazione su un numero elevato di fotogrammi, ma
questo renderebbe il tuo documento troppo “pesante” per essere scaricato rapidamente dal browser di un utente con un modem da 28,8 Kbps.
Un’animazione è costituita da una serie di immagini statiche che, visualizzate in rapida
successione, creano l’illusione del movimento. Quando crei un’animazione in Flash
Professional CS6, ogni immagine occupa un fotogramma. Modificando gradualmente
gli oggetti inseriti nei singoli fotogrammi, è possibile simulare il movimento di un oggetto. Puoi utilizzare questa tecnica per realizzare animazioni anche molto complesse
237
07 Flash CS6 GG.indd 237
27/07/12 10:19
C A P I TO L O
!
07
e sofisticate. Un fotogramma contiene un’immagine. La rapida esecuzione di una sequenza di fotogrammi crea l’illusione del movimento.
Flash Professional CS6 prevede tre tipi di fotogrammi: fotogrammi chiave, chiave
vuoti e normali (intermedi). Analizziamoli rapidamente.
Tipi di fotogrammi
Un fotogramma chiave è un fotogramma, contenente gli oggetti e le loro impostazioni, in cui si impostano e determinano i punti chiave dell’animazione in termini
di cambiamento. Un fotogramma chiave con contenuto è rappresentato, sulla linea
temporale, da un cerchio pieno.
Quando crei un’animazione fotogramma per fotogramma, ogni fotogramma è un
fotogramma chiave.
Nell’animazione interpolata, invece, definiti i fotogrammi chiave nei punti importanti dell’animazione, generalmente all’inizio e alla fine, Flash creerà automaticamente
il contenuto dei fotogrammi intermedi.
I fotogrammi interpolati di un’animazione interpolata sono visualizzati, sulla linea
temporale, su sfondo azzurro o verde chiaro con una freccia tra i fotogrammi chiave.
I fotogrammi chiave vuoti sono privi di contenuto. Utilizza i fotogrammi chiave vuoti quando hai la necessità di modificare completamente i contenuti dello stage. Un
fotogramma chiave vuoto è indicato, sulla linea temporale, da un cerchio vuoto.
!
NOTA
Ti consiglio di creare fotogrammi chiave solo nei punti in cui
le immagini presentano variazioni, per evitare di appesantire il documento Flash, in quanto tutte le forme contenute in
ciascun fotogramma chiave sono salvate sul file e di conseguenza “appesantiscono” lo stesso.
Le operazioni sui fotogrammi
Sui fotogrammi o sui fotogrammi chiave, nella linea temporale, è possibile eseguire
svariate operazioni come ad esempio inserire, selezionare, eliminare e spostare fotogrammi o fotogrammi chiave; trascinare fotogrammi e fotogrammi chiave in una
nuova posizione sullo stesso livello o su un livello diverso; copiare e incollare fotogrammi e fotogrammi chiave; convertire fotogrammi chiave in normali fotogrammi;
aggiungere un elemento al fotogramma chiave corrente, trascinandolo dal pannello
Libreria sullo stage.
!
NOTA
Quando crei un documento Flash, nella linea temporale è
presente ed attivo un solo fotogramma.
238
27/07/12 10:19
Vediamo come effettuare alcune delle operazioni suddette!
Per inserire un nuovo fotogramma:
1. Apri il menu Inserisci e seleziona la voce Linea temporale, di seguito fai clic sulla
voce di menu Fotogramma. In alternativa premi il tasto funzione F5 (Figura 7.1).
2. Osserva nella linea temporale il nuovo fotogramma inserito (Figura 7.2).
Figura 7.1 Il percorso di menu per inserire un nuovo fotogramma.
Figura 7.2 Il nuovo fotogramma.
Per inserire un fotogramma chiave:
1. Apri il menu Inserisci e selezionala la voce Linea temporale, di seguito fai clic
sulla voce di menu Fotogramma chiave (Figura 7.3).
2. Osserva nella linea temporale il fotogramma chiave inserito (Figura 7.4).
Figura 7.3 Il percorso di menu per inserire un fotogramma chiave.
Figura 7.4 Il fotogramma chiave inserito.
239
27/07/12 10:19
C A P I TO L O
07
Per inserire un fotogramma chiave vuoto:
1. Apri il menu Inserisci e selezionala la voce Linea temporale, di seguito fai clic
sulla voce di menu Fotogramma chiave vuoto (Figura 7.5).
2. Osserva nella linea temporale il fotogramma chiave vuoto inserito (Figura 7.6).
Figura 7.5 Il percorso di menu per inserire un fotogramma chiave vuoto.
Figura 7.6 Il fotogramma chiave vuoto inserito.
Per eliminare un fotogramma:
•• Apri il menu Modifica e seleziona la voce Linea temporale, di seguito fai clic sulla
voce di menu Rimuovi fotogrammi o premi Maiusc+F5 per eliminare i fotogrammi normali (Figura 7.7).
Figura 7.7 Il percorso di menu.
240
27/07/12 10:19
Per spostare un fotogramma chiave o una sequenza di fotogrammi e il relativo
contenuto:
•• Fai clic e trascina il fotogramma chiave o la sequenza nella posizione desiderata
(Figura 7.8).
Figura 7.8 Spostamento del fotogramma nella linea temporale.
Per convertire un fotogramma chiave in un fotogramma:
1. Seleziona il fotogramma chiave da convertire (Figura 7.9).
2. Apri il menu Elabora, seleziona la voce Linea temporale e di seguito fai clic sulla
voce di menu Cancella fotogramma chiave (Figura 7.10).
Figura 7.9 Il fotogramma chiave selezionato.
Figura 7.10 Il percorso di menu.
Il fotogramma chiave cancellato e tutti i fotogrammi fino al fotogramma chiave successivo saranno sostituiti con il contenuto del fotogramma posizionato prima di quello cancellato.
241
27/07/12 10:19
C A P I TO L O
07
L’animazione fotogramma per fotogramma
L’animazione fotogramma per fotogramma è la tecnica utilizzata tradizionalmente dai
creatori di cartoni animati. Ogni fotogramma del filmato presenta delle differenze rispetto a quello precedente.
Creiamo una semplice animazione fotogramma per fotogramma:
1. Crea un nuovo documento.
2. Seleziona nella linea temporale il primo fotogramma e inserisci un fotogramma
chiave (Figura 7.11).
3. Attiva lo strumento Testo e digita ad esempio la prima lettera di FLASH, ovvero
“F”. Posizionala sullo stage in alto a sinistra (Figura 7.12).
4. Inserire un nuovo fotogramma chiave.
5. Attiva ancora una volta lo strumento Testo. Digita la seconda lettera di FLASH,
“L” (Figura 7.13).
Figura 7.11 Il nuovo fotogramma chiave inserito.
Figura 7.12 La lettera “F” inserita nello stage.
Figura 7.13 La seconda lettera inserita nello stage.
242
27/07/12 10:19
6. Prosegui ripetendo i passi 3-5 fino al completamento della parola “FLASH” (Figura 7.14).
7. Premi contemporaneamente i tasti Ctrl+Invio per riprodurre il filmato.
Figura 7.14 Il nome inserito nello stage.
!
NOTA
La durata del filmato dipende dal numero di fotogrammi
utilizzati. Se il filmato è troppo veloce bisogna aumentare il numero dei fotogrammi, se è troppo lento bisogna
diminuirlo.
La tecnica Onion skin
La tecnica Onion skin, letteralmente buccia di cipolla, ti consente di visualizzare i contenuti dei fotogrammi precedenti e successivi a quello attualmente selezionato. Questa tecnica ti permette così di regolare facilmente e millimetricamente i fotogrammi
dell’animazione, che risulterà più fluida, senza dover andare continuamente avanti e
indietro da un fotogramma all’altro. Il nome di questa tecnica deriva da una tecnica
di animazione tradizionale che consiste nel sovrapporre più fogli di carta da ricalco
traslucida per visualizzare, sfogliando velocemente i fogli, le sequenze animate.
Quando la tecnica Onion skin è attivata, generalmente solo l’oggetto del fotogramma
corrente è attivo, mentre gli oggetti sui fotogrammi precedenti e successivi a quello
corrente sono visualizzati, ma non attivi.
Per attivare e gestire la tecnica Onion skin:
1. Seleziona il primo fotogramma ed inserisci una forma tipo un cerchio nello stage
(Figura 7.15).
2. Fai clic sull’ottavo pulsante, Onion skin, in basso a partire da sinistra della sezione
fotogrammi (Figura 7.16), per attivare l’Onion skin.
243
27/07/12 10:19
C A P I TO L O
07
Figura 7.15 Il cerchio inserito nello stage.
Figura 7.16 Il pulsante Onion skin.
3. Premi il tasto funzione F6 per inserire un nuovo fotogramma chiave.
4. Seleziona il cerchio con lo strumento Selezione e spostalo (Figura 7.17).
5. Continua a spostare il cerchio ripetendo i passi 3-4.
Ora tutti i fotogrammi compresi tra i marcatori Inizio Onion skin e Fine Onion
skin (nell’intestazione della linea temporale) (Figura 7.18) nella finestra del filmato
sono visualizzati sullo stage permettendoti così un più preciso spostamento del
cerchio.
3. Fai clic sul pulsante Contorni Onion (Figura 7.19) per visualizzare come contorni
i fotogrammi inclusi nell’intervallo Onion skin.
244
27/07/12 10:19
Figura 7.17 Il cerchio spostato sullo stage.
Figura 7.18 I marcatori Inizio Onion skin e Fine Onion skin.
Figura 7.19 Il pulsante Contorni Onion skin.
245
27/07/12 10:19
C A P I TO L O
07
4. Fai clic sul pulsante Modifica più fotogrammi (Figura 7.20) per visualizzare e
modificare più fotogrammi inclusi nell’intervallo Onion skin.
5. Fai clic sul pulsante Modifica marcatori (Figura 7.21) per aprire il menu associato
(Figura 7.22) e scegli una delle voci disponibili:
• Mostra sempre marcatori visualizza i marcatori Onion skin nell’intestazione
della linea temporale, anche se la tecnica Onion skin non è attivata.
• Marcatori ancoraggio blocca i marcatori Onion skin nella posizione corrente
nell’intestazione della linea temporale.
• Intervallo marcatore 2 visualizza due fotogrammi su entrambi i lati del fotogramma corrente.
• Intervallo marcatore 5 visualizza cinque fotogrammi su entrambi i lati del fotogramma corrente.
• Intervallo marcatore totale visualizza tutti i fotogrammi su entrambi i lati del
fotogramma corrente.
Seleziona ad esempio Intervallo marcatore totale.
Figura 7.20 Il pulsante Modifica più fotogrammi.
Figura 7.21 Il pulsante Modifica marcatori.
Figura 7.22 Il menu del pulsante Modifica marcatori.
246
27/07/12 10:19
6. Sposta il cursore sulla linea temporale tra i fotogrammi ed osserva il risultato
nell’area di lavoro (Figura 7.23).
Figura 7.23 Un esempio di come appare lo stage in base alle impostazioni dell’Onion skin.
L’animazione interpolata
Al fine di semplificare al massimo l’animazione, è consentito convertire in simboli gli
oggetti che appaiono in più fotogrammi. Per creare i passaggi intermedi relativi alla
posizione, alla trasformazione o agli effetti di un oggetto, è possibile attivare una procedura di interpolazione (tweening) che disegna automaticamente gli oggetti intermedi e li dispone sui fotogrammi. L’interpolazione è la tradizionale tecnica utilizzata
dai creatori di cartoni animati. Il responsabile grafico disegna il primo e l’ultimo fotogramma chiave dell’animazione di un oggetto e delega ai suoi collaboratori il compito
di realizzare tutti disegni intermedi. In Flash Professional CS6, l’interpolazione esegue
la fusione di una o più delle istanze dello stesso simbolo, creando oggetti istanza temporanei con attributi interpolati. È consentito modificare la posizione, le trasformazioni e gli effetti delle singole istanze.
Interpolazione di forma
Questo tipo di interpolazione può avvenire solo ed esclusivamente tra due forme. Se
utilizzi questa interpolazione, inoltre, devi definire l’elemento iniziale e l’elemento finale, ognuno dei quali deve essere contenuto in un fotogramma chiave. Flash si occuperà
247
27/07/12 10:19
C A P I TO L O
07
di creare automaticamente tutti i fotogrammi intermedi necessari. Il risultato sarà un
filmato contenente un oggetto iniziale che gradualmente (dipende dal numero di fotogrammi utilizzati) si trasformerà in quello finale.
Creiamo ora, come abbiamo fatto per l’animazione fotogramma per fotogramma, una
semplice animazione con interpolazione delle forme:
2. Attiva lo strumento Rettangolo e traccia un rettangolo sullo stage (Figura 7.24).
Figura 7.24 Il rettangolo inserito nello stage.
3. Seleziona il fotogramma 48 (l’animazione così durerà 2 secondi) e premi il tasto
funzione F6 per inserire un fotogramma chiave (Figura 7.25).
4. Attiva lo strumento Selezione e fai doppio clic sul rettangolo per selezionarlo.
5. Premi il tasto Canc sulla tastiera per cancellare il rettangolo.
6. Attiva lo strumento Matita, imposta l’altezza del tratto per esempio su 15 (Figura
7.26).
Figura 7.25 Il fotogramma chiave 48.
Figura 7.26 Le impostazioni della Matita.
248
27/07/12 10:19
7. Scrivi sullo stage (Figura 7.27).
5. Seleziona, facendo clic con il pulsante destro del mouse, uno dei fotogrammi compreso tra il primo e l’ultimo.
6. Aperto il menu a discesa, seleziona la voce Crea interpolazione forma (Figura
7.28).
7. La linea temporale cambia colore ad indicare l’avvenuta interpolazione (Figura
7.29).
Figura 7.27 La lettera disegnata sullo stage.
Figura 7.28 La scelta del tipo di interpolazione.
Figura 7.29 L’interpolazione indicata nella linea temporale.
249
27/07/12 10:19
C A P I TO L O
07
8. Fai clic sul pulsante Riproduci. Come puoi notare nell’animazione, il rettangolo
cambia gradualmente forma diventando la lettera tracciata (Figura 7.30).
Figura 7.30 Il risultato dell’operazione nel fotogramma 13.
Interpolazione di movimento
Questo tipo di interpolazione è utile per spostare o ridimensionare un oggetto sullo stage. Lo spostamento di un oggetto avviene normalmente lungo una traiettoria
rettilinea, ma è possibile, tramite tecniche avanzate, ottenere traiettorie anche molto
complesse.
Ora vedremo un esempio molto semplice ma efficace ai fini della comprensione
dell’interpolazione di movimento.
Per creare un’interpolazione di movimento:
2. Attiva lo strumento Testo e inserisci una lettera sullo stage in altro sinistra (Figura
7.31).
3. Con la lettera selezionata, apri il menu Elabora e fai clic sulla voce Converti in
simbolo (Figura 7.32).
!
NOTA
Questo tipo di interpolazione può essere applicata solo ai
simboli. Pertanto tutti gli oggetti che disegni necessitano
di essere convertiti in simboli prima di poterli utilizzare in
un’interpolazione di movimento.
250
27/07/12 10:19
Figura 7.31 La lettera inserita.
Figura 7.32 Il comando Converti in simbolo.
4. All’apertura della finestra Converti in simbolo, inserisci il nome da assegnare al
simbolo e fai clic sul pulsante OK (Figura 7.33).
5. Seleziona il fotogramma 48 (l’animazione così durerà 2 secondi) e premi il tasto
funzione F5 per inserire un fotogramma (Figura 7.34).
Figura 7.33 La finestra Converti in simbolo.
251
27/07/12 10:19
C A P I TO L O
07
Figura 7.34 L’inserimento del fotogramma.
6. Seleziona nuovamente il primo fotogramma.
7. Fai clic con il pulsante destro del mouse sul primo fotogramma per aprire il menu
associato e seleziona la voce Crea interpolazione movimento (Figura 7.35).
La linea temporale cambia colore ad indicare l’avvenuta interpolazione (Figura 7.36).
Figura 7.36 L’interpolazione visualizzata nella linea temporale.
Figura 7.35 La scelta del tipo di interpolazione.
252
27/07/12 10:19
8. Seleziona ora nuovamente il fotogramma 48.
9. Attiva lo strumento Selezione.
10. Fai clic sulla lettera per selezionarla e trascinala sullo stage in basso a destra. Nota
la visualizzazione del tracciato del movimento (Figura 7.37).
11. Fai clic sul pulsante Riproduci. Come puoi notare nell’animazione, tutti fotogrammi dal 2 al 23 sono stati creati per interpolazione e automaticamente da Flash
(Figura 7.38).
Figura 7.37 Il posizionamento della lettera e il tracciato del movimento.
Figura 7.38 Fotogramma dell’animazione creato per interpolazione.
253
27/07/12 10:19
C A P I TO L O
07
Modificare il tracciato del movimento
Dopo aver creato un’interpolazione di movimento, Flash ti consente comunque di
modificare il tracciato:
•• Modificando la posizione dell’oggetto in un qualsiasi fotogramma dell’estensione di
interpolazione.
•• Spostando l’intero tracciato del movimento in una diversa posizione sullo stage.
•• Modificando la forma o le dimensioni del tracciato mediante lo strumento Selezione, Sottoselezione o Trasformazione libera.
•• Modificando la forma o le dimensioni del tracciato con il pannello Trasformazione
o la finestra di ispezione Proprietà.
•• Utilizzando i comandi Trasforma presenti nel menu Elabora.
•• Applicando un tratto personalizzato quale tracciato del movimento.
•• Utilizzando l’Editor movimento.
Puoi utilizzare l’opzione Mostra sempre tracciati di movimento per visualizzare
contemporaneamente sullo stage i tracciati del movimento di tutti i livelli. Questa
visualizzazione è utile quando progetti animazioni multiple su diversi tracciati di movimento che si intersecano tra loro. Quando selezioni un tracciato di movimento o
un’estensione di interpolazione, puoi scegliere questa opzione dal menu delle opzioni
della finestra di ispezione Proprietà.
Modifichiamo il tracciato con lo strumento Selezione:
1. Posiziona lo strumento Selezione vicino al tracciato del movimento e, quando accanto alla freccia sarà visualizzata una curva, fai clic con il tasto sinistro del mouse
e trascina (Figura 7.39. - 7.40).
3. Per accorciare o allungare il tracciato, fai clic su una delle estremità dello stesso e
trascina.
4. Per modifica il tracciato solo quando l’animazione raggiunge un certo fotogramma, seleziona il fotogramma e premi il tasto funzione F6 per trasformarlo in un
fotogramma chiave (Figura 7.41).
Figura 7.39 Il trascinamento del tracciato.
254
27/07/12 10:19
Figura 7.40 Il tracciato modificato.
Figura 7.41 Il fotogramma chiave inserito.
5. A questo punto il tracciato sarà “diviso” in due consentendoti così una maggiore
flessibilità di modifica. Aggiungi altri fotogrammi chiave per ottenere ulteriori
suddivisioni.
255
27/07/12 10:19
C A P I TO L O
07
6. Sempre con lo strumento Selezione, modifica una delle due sezioni del tracciato
(Figura 7.42).
7. Rilascia il pulsante del mouse quando il tracciato avrà assunto la forma desiderata
(Figura 7.43).
Figura 7.42 La nuova modifica del tracciato.
Figura 7.43 Il nuovo tracciato.
L’Editor movimento
L’Editor movimento ti permette non solo di visualizzare tutte le proprietà di interpolazione e i relativi fotogrammi chiave di proprietà, ma anche di rendere più accurate e
dettagliate le tue interpolazioni grazie agli specifici strumenti di cui dispone.
256
27/07/12 10:19
!
!
NOTA
NOTA
Nell’Editor movimento sono visualizzate le proprietà dell’interpolazione selezionata.
Per fotogramma chiave di proprietà si intende un fotogramma in cui viene definita una variazione delle proprietà di un
oggetto nel corso di un’animazione.
Dopo aver creato un’interpolazione nella linea temporale, come visto nei paragrafi
precedenti, l’Editor movimento ti consente di controllare ulteriormente tale interpolazione.
Nel pannello dell’Editor movimento (Figura 7.44) puoi:
Figura 7.44 L’Editor movimento.
•• Impostare il valore di singoli fotogrammi chiave di proprietà (Figura 7.45).
•• Aggiungere o rimuovere fotogrammi chiave di proprietà per proprietà singole (Figura 7.46).
•• Spostare i fotogrammi chiave di proprietà in fotogrammi diversi all’interno dell’interpolazione.
•• Copiare e incollare una curva di proprietà da una proprietà ad un’altra.
•• Invertire i fotogrammi chiave per singole proprietà.
•• Ripristinare singole proprietà o categorie di proprietà (Figura 7.47).
257
27/07/12 10:20
C A P I TO L O
07
Figura 7.45 I valori dei fotogrammi chiave di proprietà.
Figura 7.46 Il pulsante per aggiungere o rimuovere fotogrammi chiave di proprietà.
Figura 7.47 Il pulsante di ripristino valori.
•• Controllare accuratamente la forma delle curve di interpolazione della maggior
parte delle proprietà singole mediante i controlli di Bézier. Le proprietà X, Y e Z
non dispongono di controlli di Bézier.
•• Aggiungere o rimuovere filtri o effetti colore e regolarne le impostazioni.
•• Aggiungere diversi andamenti preimpostati alle singole proprietà e categorie di
proprietà.
•• Creare curve di andamento personalizzate.
•• Aggiungere un andamento personalizzato alle singole proprietà interpolate e ai
gruppi di proprietà.
•• Abilitare la modalità Vagante per le proprietà X, Y e Z di fotogrammi chiave di
proprietà singoli (Figura 7.48). La modalità Vagante ti consente di spostare un fotogramma chiave di proprietà in fotogrammi diversi o tra singoli fotogrammi per
creare movimento fluido.
258
27/07/12 10:20
Figura 7.48 La modalità Vagante.
Quando selezioni un’estensione di interpolazione nella linea temporale, un oggetto
interpolato o un tracciato del movimento nello stage, nell’Editor movimento vengono
visualizzate le curve di proprietà dell’interpolazione. L’Editor movimento visualizza le
curve di proprietà in una griglia che rappresenta i fotogrammi della linea temporale in
cui avviene l’interpolazione selezionata (Figura 7.49). Nell’Editor movimento i valori
delle proprietà interpolate sono rappresentati tramite un grafico bidimensionale per
ogni proprietà. Ogni proprietà dispone di un grafico distinto. Ciascun grafico rappresenta il tempo orizzontalmente (da sinistra a destra) e la modifica di un valore
di proprietà verticalmente. Ogni fotogramma chiave di proprietà per una specifica
proprietà è visualizzato sotto forma di punto di controllo sulla curva di proprietà per
tale proprietà.
Figura 7.49 La curve di proprietà e la griglia.
!
NOTA
L’indicatore di riproduzione è visualizzato sia nella linea
temporale sia nell’Editor movimento, sempre nel fotogramma con lo stesso numero (Figura 7.49).
259
27/07/12 10:20
C A P I TO L O
!
07
NOTA
Alcune proprietà non possono essere interpolate, in quanto possono avere un solo valore per tutta la durata di un
oggetto nella linea temporale. Un esempio è rappresentato
dalla proprietà Qualità del filtro Smussatura con gradiente.
Queste proprietà possono essere impostate nell’Editor movimento, ma non dispongono di grafici.
Per controllare in modo preciso la forma della maggior parte delle curve di proprietà
nell’Editor movimento, puoi aggiungere fotogrammi chiave di proprietà e manipolare
la curva mediante i controlli di Bézier standard. Per le proprietà X, Y e Z puoi aggiungere e rimuovere i punti di controllo sulle curve di proprietà, ma non puoi utilizzare i
controlli di Bézier.
!
NOTA
Quando modifichi i punti di controllo di una curva di proprietà, tali modifiche vengono immediatamente visualizzate nello stage.
L’Editor movimento ti consente anche di applicare l’andamento a qualsiasi curva di
proprietà. Le curve di andamento sono grafici che mostrano in che modo i valori di
una proprietà interpolata vengono interpolati nel corso del tempo. Alcune proprietà,
come la trasparenza Alfa (0-100%), presentano valori minimi o massimi che devono
essere necessariamente rispettati, pertanto non è possibile inserire valori che non rientrano nell’intervallo dei valori previsti.
Modificare una curva di andamento:
1. Crea un’interpolazione di movimento.
2. Seleziona il tracciato (Figura 7.50).
Figura 7.50 La selezione del tracciato.
260
27/07/12 10:20
3. Attiva il pannello Editor movimento (Figura 7.51).
4. Seleziona uno dei punti di controllo presenti nel grafico (Figura 7.52).
Figura 7.51 L’attivazione del pannello Editor movimento.
Figura 7.52 La selezione di un punto di controllo.
5. Trascina il punto di controllo in modo da rimodellare la curva e osserva nello
stage le modifiche apportate in tempo reale (Figura 7.53).
6. Se ti accorgi di aver bisogno di altri punti di controllo, posiziona il cursore sul fotogramma in cui vuoi inserire il punto di controllo e fai clic con il pulsante destro
del mouse. Seleziona la voce di menu Aggiungi fotogramma chiave (Figura 7.54).
261
27/07/12 10:20
C A P I TO L O
07
Figura 7.53 Le modifiche apportate.
Figura 7.54 La voce di menu Aggiungi fotogramma chiave.
7. Osserva sullo stage il nuovo punto di controllo presente sul tracciato e il nuovo
fotogramma chiave inserito nel grafico (Figura 7.55).
8. Premi contemporaneamente i tasti Ctrl+Invio per eseguire il filmato.
9. Per copiare e incollare una curva di proprietà da una proprietà ad un’altra, fai clic
con il pulsante destro del mouse sulla griglia con la curva di proprietà che vuoi
copiare e seleziona la voce di menu Copia curva (Figura 7.56).
10. Per incollarla per esempio sull’asse X della proprietà Trasformazione, fai clic con il
pulsante destro del mouse sulla griglia dell’asse X della proprietà Trasformazione
e seleziona la voce Incolla curva (Figura 7.57).
262
27/07/12 10:20
Figura 7.55 Il nuovo fotogramma chiave inserito.
Figura 7.56 La voce di menu Copia curva.
Figura 7.57 La voce di menu Incolla curva.
263
27/07/12 10:20
C A P I TO L O
07
11. Osserva la curva inserita nell’asse X della proprietà Trasformazione (Figura 7.58).
Figura 7.58 La curva inserita.
La cinematica diretta e la cinematica
inversa
La cinematica (Kinematics) descrive il movimento o lo studio del movimento. Il movimento qui è inteso nel senso più astratto, senza tener presente tutti quei parametri
quali la forza, la massa, la velocità o i valori posizionali, che producono il movimento.
Nella computer animation, si impiega la cinematica quando si deve creare un’animazione.
La cinematica diretta è il tipo standard di movimento che viene creato quando ruoti
o muovi tutti i componenti (parent) di una catena definita Armatura (Figura 7.59).
Un’armatura può essere lineare o ramificata. I rami di un’armatura che hanno origine
dallo stesso osso sono detti di pari livello. Ogni osso comprende una testa (l’estremità
tonda) e una coda (l’estremità con le punte) (Figura 7.60). Il punto in cui un osso si
connette ad un altro osso è detto giunto (Figura 7.61).
È l’animatore che decide il movimento di tutte le giunture. Il movimento dell’ultimo
elemento della catena è determinato indirettamente dall’accumulo di tutto il movimento degli altri elementi della catena. Pensa per esempio alla mano che nel momento
in cui muovi il braccio viene mossa insieme all’avambraccio.
La cinematica inversa o IK (Inverse Kinematics), chiamata anche goal-directed
motion, viene utilizzata quando la gerarchia che utilizzi ha due o più oggetti/bone
(bone=osso) e un oggetto goal selezionato per un oggetto o bone nella catena. Normalmente la cinematica inversa calcola il movimento della catena basandosi sulla posizione del goal. Di solito il goal è associato all’ultimo elemento della catena, ma in
una catena puoi avere più di un goal. Animando un oggetto goal la catena reagirà di
conseguenza.
264
27/07/12 10:20
Figura 7.59 Esempio di armatura.
Figura 7.60 Un osso.
Figura 7.61 Un giunto.
!
NOTA
L’oggetto goal è l’elemento al quale la catena d’oggetti si riferirà durante il suo spostamento. Tale termine viene usato
dai programmi di grafica 3D come Lighwave.
265
27/07/12 10:20
C A P I TO L O
07
Flash CS6 utilizza la cinematica inversa, che può essere impiegata in due modi.
•• Il primo consiste nell’articolare una serie di istanze di simboli aggiungendo ossi
per connettere ogni istanza ad un’altra. Gli ossi consentono alla catena di istanze di
simboli di muoversi come oggetto unico. Puoi per esempio utilizzare un insieme di
clip filmato, ciascuno dei quali rappresentante una parte di un corpo umano (Figura 7.59). Collegando tra di loro il dorso, la parte superiore e inferiore del braccio e la
mano, puoi creare un braccio che si muove in modo realistico. Puoi inoltre creare
un’armatura ramificata che includa le due braccia, le due gambe e la testa (Figura
7.59).
•• Il secondo tipo di utilizzo della cinematica inversa consiste nell’aggiunta di un’armatura all’interno di un oggetto forma. La forma può essere creata in modalità
Disegno unione o Disegno oggetto. Gli ossi consentono di far muovere le parti
animate della forma senza dover disegnare versioni diverse della forma o creare
un’interpolazione di forma. Puoi per esempio aggiungere ossi ad un disegno semplice di un serpente per farlo muovere e curvare (Figura 7.62).
Figura 7.62 Un “serpente”.
!
NOTA
Quando aggiungi ossi ad istanze di simboli o forme, in Flash
l’istanza o la forma e l’armatura associata vengono spostate in un nuovo livello della linea temporale, detto livello di
posa. Ogni livello di posa può contenere una sola armatura
e le istanze o la forma associate.
Flash ti mette a disposizione due strumenti per le operazioni con la cinematica inversa: lo strumento Osso, tramite il quale puoi aggiungere gli ossi alle istanze di simboli e
alle forme, e lo strumento Associazione, che ti permette di modificare le relazioni tra
ossi singoli e punti di controllo degli oggetti forma.
!
NOTA
Per utilizzare la cinematica inversa, devi specificare ActionScript 3.0 come impostazione di script nella scheda Flash
della finestra di dialogo delle impostazioni di pubblicazione
per il file FLA.
266
27/07/12 10:20
Creare un’armatura con il primo metodo
1. Crea delle istanze corrispondenti a varie parti del corpo da realizzare.
2. Posiziona le varie istanze sullo stage come mostrato in figura (7.63).
3. Attiva ora lo strumento Osso (Figura 7.64).
4. Per disegnare il primo osso, tra la testa e il collo, fai clic sulla testa e trascina fino a
raggiungere il collo (Figura 7.65).
Figura 7.63 Il posizionamento delle varie istanze.
Figura 7.64 Lo strumento Osso.
Figura 7.65 Il primo osso inserito.
5. Aggiungi il secondo osso facendo clic sulla coda del primo osso e trascinando fino
al busto (Figura 7.66).
6. Prosegui fino ad ottenere un’armatura simile a quella visualizzata in figura (Figura
7.67).
267
27/07/12 10:20
C A P I TO L O
07
7. Attiva lo strumento Selezione e fai clic per esempio sulla coda dell’osso posizionato sulla mano. Trascina l’osso e osserva come lo spostamento si trasmette fino alla
spalla (Figura 7.68).
Figura 7.66 L’aggiunta del secondo osso.
Figura 7.67 L’armatura realizzata.
Figura 7.68 Lo spostamento effettuato.
268
27/07/12 10:20
Creare un’armatura con il secondo metodo
1. Disegna sullo stage una forma con lo strumento Ovale (Figura 7.69).
2. Aggiungi degli ossi con le modalità viste sopra (Figura 7.70).
3. Attiva lo strumento Selezione e fai clic sulla coda dell’osso posizionato a destra.
Trascina l’osso e osserva come lo spostamento si trasmette su tutta la forma (Figura 7.71).
Figura 7.69 La forma disegnata.
Figura 7.70 Gli ossi inseriti.
Figura 7.71 Lo spostamento effettuato.
269
27/07/12 10:20
C A P I TO L O
07
Modificare gli ossi creati
Dopo aver creato gli ossi, è comunque possibile modificarli in diversi modi. Puoi riposizionare gli ossi e gli oggetti associati, spostare un osso all’interno di un oggetto,
modificare la lunghezza di un osso, eliminare ossi e modificare gli oggetti contenenti
gli ossi.
!
NOTA
Non puoi eseguire modifiche alla struttura degli ossi dopo
il riposizionamento dell’armatura in fotogrammi successivi
del livello di posa.
Per selezionare un osso:
1. Attiva lo strumento Selezione e fai clic per esempio sull’ultimo osso inserito. Una
volta selezionato, l’osso cambia colore (Figura 7.72) e le proprietà dell’osso selezionato vengono visualizzate nel pannello Proprietà (Figura 7.73).
Figura 7.72 La selezione di un osso.
Figura 7.73 Le proprietà dell’osso selezionato.
270
27/07/12 10:20
2. Per cambiare l’osso selezionato, usa i pulsanti Pari livello precedente, Pari livello
successivo, Elemento secondario ed Elemento superiore (Figura 7.74).
Figura 7.74 I pulsanti (a partire da sinistra) Pari livello successivo, Pari livello precedente, Elemento superiore e Elemento secondario.
!
NOTA
Per selezionare tutti gli ossi presenti dell’armatura, fai doppio clic su un osso.
Controllare il movimento
Come visto nel paragrafo precedente, quando selezioni un osso il pannello Proprietà
visualizza una serie di parametri che ti consentono di intervenire e controllare il movimento dei singoli ossi e quindi dell’intera armatura.
Per impostazione di default, ogni osso IK creato ha una lunghezza fissa. Gli ossi possono ruotare attorno al giunto principale e sull’asse X e Y, ma non possono effettuare
movimenti che richiederebbero un cambiamento della lunghezza dell’osso principale.
Puoi attivare, disattivare e limitare la rotazione di un osso e del relativo movimento
sull’asse X o Y. Di default, è attiva la rotazione degli ossi, mentre è disattivato il movimento sugli assi X e Y (Figura 7.75). Se attivi il movimento sugli assi X o Y, un osso
può muoversi sull’asse X o Y senza limiti e la lunghezza dell’osso principale cambia per
consentire il movimento.
Figura 7.75 Le proprietà di rotazione dell’osso selezionato.
271
27/07/12 10:20
C A P I TO L O
07
Impostando un valore per la velocità, puoi limitare la velocità del movimento di un
osso per creare l’effetto del peso su un osso (Figura 7.76). I valori consentiti vanno da
zero a 200.
Figura 7.76 Il valore impostato per la velocità.
•• Per consentire ad un osso selezionato di muoversi sull’asse X o Y e cambiare la
lunghezza dell’osso principale, seleziona l’opzione Attiva nella sezione Giunto: traslazione X o Giunto: traslazione Y.
La visualizzazione di una freccia a due punte perpendicolare all’osso sul giunto sta
ad indicare che il movimento sull’asse X è stato attivato, mentre la visualizzazione di
una freccia a due punte parallela all’osso sul giunto sta ad indicare che il movimento
sull’asse Y è stato attivato (Figura 7.77). Se attivi la traslazione X e Y per un osso,
risulta più semplice posizionare l’osso quando la sua rotazione è disattivata.
Figura 7.77 Le due frecce a due punte.
•• Seleziona l’opzione Limita nella sezione Giunto: traslazione X o Giunto: traslazione Y e specifica un valore per la distanza minima e massima consentita per l’osso
per limitare la quantità di movimento consentita sull’asse X o Y.
•• Deseleziona l’opzione Attiva nella sezione Giunto: rotazione per disattivare la rotazione dell’osso selezionato attorno al giunto.
•• Nella sezione Giunto: rotazione per limitare la rotazione di un osso, specifica il
valore minimo (-359) e massimo (359) per i gradi di rotazione.
I gradi di rotazione si riferiscono all’osso principale. Nella parte superiore dell’osso
viene visualizzato un arco che indica i gradi della libertà di rotazione.
272
27/07/12 10:20
•• Per impostare un osso selezionato in relazione all’osso principale, disattiva la rotazione e la traslazione sull’asse X e Y. Gli ossi diventano rigidi e seguono il movimento dell’osso principale.
Figura 7.78 L’arco visualizzato.
Effetto molla
Due proprietà degli ossi consentono ora di aggiungere elasticità agli ossi IK. Le proprietà Intensità e Smorzamento degli ossi conferiscono un movimento fisico realistico agli ossi IK integrando la fisica dinamica nel sistema di cinematica inversa degli
ossi. Queste proprietà ti permettono di creare più facilmente animazioni con proprietà fisiche sofisticate. Le proprietà Intensità e Smorzamento permettono di realizzare
movimenti realistici e altamente configurabili nelle animazioni degli ossi. È consigliabile impostare queste proprietà prima di aggiungere pose a un livello di posa.
Intensità. Questa proprietà di consente di regolare la rigidità della molla. Più alto è il
valore, più rigido risulta l’effetto molla.
Smorzamento Questa proprietà ti consente di determinare la velocità di decadimento
dell’effetto molla. Più alto è il valore, più rapida è la riduzione dell’effetto molla.
Per disattivare le proprietà Intensità e Smorzamento, seleziona il livello di posa nella
linea temporale e deseleziona la casella di controllo Abilita nella sezione Molle della
finestra di ispezione Proprietà (Figura 7.79). In questo modo potrai vedere sullo stage
le pose che hai definito nel livello di posa senza l’effetto delle proprietà Molla. I seguenti fattori incidono sull’aspetto finale dell’animazione degli ossi quando si utilizzano le
proprietà Molla.
•• Il valore della proprietà Intensità
•• Il valore della proprietà Smorzamento
•• Il numero di fotogrammi tra le pose nel livello di posa
•• Il numero totale di fotogrammi nel livello di posa
•• Il numero di fotogrammi tra la posa finale e l’ultimo fotogramma del livello di posa
Fai diverse prove con impostazioni differenti per ciascuno di questi elementi fino ad
ottenere l’effetto desiderato.
273
27/07/12 10:20
C A P I TO L O
07
Figura 7.79 La casella di controllo Abilita nella sezione Molle.
Lo strumento Associazione
Dopo aver creato una forma e la relativa armatura, muovendo l’armatura potresti ottenere una deformazione non prevista della forma stessa. Per correggere queste deformazioni, Flash ti offre uno specifico strumento. Lo strumento Associazione ti permette di modificare i collegamenti tra i singoli ossi e i punti di controllo della forma
per controllare la distorsione del tratto quando ogni osso si muove e ottenere risultati
migliori. Nel momento in cui inserisci degli ossi in una forma, si creano sulla stessa
dei punti di controllo che vengono collegati all’osso più vicino.
I punti collegati sono evidenziati in giallo, mentre l’osso selezionato è evidenziato in
rosso. I punti di controllo collegati ad un solo osso sono visualizzati come quadratini,
mentre quelli collegati a più ossi sono visualizzati come triangoli (Figura 7.80).
Figura 7.80 I punti collegati.
274
27/07/12 10:20
!
NOTA
È possibile associare più punti di controllo ad un osso e più
ossi ad un punto di controllo.
1. Attiva lo strumento Associazione (Figura 7.81).
2. Fai clic su un osso con lo strumento Associazione, per visualizzare i punti di controllo associati all’osso selezionato (Figura 7.80).
3. Per aggiungere punti di controllo all’osso selezionato, tieni premuto il tasto Ctrl e
fai clic su un punto di controllo non evidenziato (Figura 7.82).
4. Osserva il nuovo punto di controllo associato all’osso selezionato (Figura 7.83).
Figura 7.81 Lo strumento Associazione.
Figura 7.82 La selezione di un punto di controllo non evidenziato.
Figura 7.83 Il nuovo punto di controllo creato.
275
27/07/12 10:20
C A P I TO L O
07
5. Se hai creato erroneamente un punto di controllo o comunque vuoi eliminarne
uno, tieni premuto il tasto Ctrl e fai clic su un punto di controllo (di colore giallo).
6. Se invece vuoi associare un altro osso ad un punto di controllo, tieni premuto il
tasto Maiusc e fai clic sull’osso che vuoi associare al punto di controllo.
7. Per rimuovere un osso da un punto di controllo selezionato, fai clic su un osso (di
colore giallo) tenendo premuto il tasto Ctrl.
276
27/07/12 10:20

Le animazioni e la tecnica Onion skin

Transcript

Documenti analoghi

“CARLO URBANI”

Alberto Mori Tableaux Filmici

Immagini in movimento - Prof. Crescenzio Gallo

E‑PL7 Kit zoom pancake Silver

Istruzioni d`uso per i Test on-line

V ideoLAN Media Player

ALGORITMO SPUTNIK

FUJI: COMPATTE DI MEDIO FORMATO Di Michele Vacchiano