Le animazioni e la tecnica Onion skin

Transcript

1 07 Le animazioni e la tecnica Onion skin 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

2 CA P I TO LO 0 7!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

3 Le animazioni e la tecnica Onion skin 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

4 CA P I TO LO 0 7 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

5 Le animazioni e la tecnica Onion skin 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

6 CA P I TO LO 0 7 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

7 Le animazioni e la tecnica Onion skin 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

8 CA P I TO LO 0 7 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

9 Le animazioni e la tecnica Onion skin 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

10 CA P I TO LO 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

11 Le animazioni e la tecnica Onion skin 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

12 CA P I TO LO 0 7 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: 1. Crea un nuovo documento. 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

13 Le animazioni e la tecnica Onion skin 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

14 CA P I TO LO 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: 1. Crea un nuovo documento. 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

15 Le animazioni e la tecnica Onion skin 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

16 CA P I TO LO 0 7 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

17 Le animazioni e la tecnica Onion skin 8. Seleziona ora nuovamente il fotogramma 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

18 CA P I TO LO 0 7 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 ). 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

19 Le animazioni e la tecnica Onion skin 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

20 CA P I TO LO 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

21 Le animazioni e la tecnica Onion skin! NOTA Nell Editor movimento sono visualizzate le proprietà dell interpolazione selezionata.! NOTA 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

22 CA P I TO LO 0 7 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

23 Le animazioni e la tecnica Onion skin 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

24 CA P I TO LO 0 7! 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

25 Le animazioni e la tecnica Onion skin 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

26 CA P I TO LO 0 7 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 Le animazioni e la tecnica Onion skin 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

28 CA P I TO LO 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

29 Le animazioni e la tecnica Onion skin 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

30 CA P I TO LO 0 7 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 Action- Script 3.0 come impostazione di script nella scheda Flash della finestra di dialogo delle impostazioni di pubblicazione per il file FLA. 266

31 Creare un armatura con il primo metodo Le animazioni e la tecnica Onion skin 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

32 CA P I TO LO 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

33 Creare un armatura con il secondo metodo Le animazioni e la tecnica Onion skin 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

34 CA P I TO LO 0 7 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

35 Le animazioni e la tecnica Onion skin 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

36 CA P I TO LO 0 7 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

37 Le animazioni e la tecnica Onion skin 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

38 CA P I TO LO 0 7 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

39 Le animazioni e la tecnica Onion skin! 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

40 CA P I TO LO 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