LE ANIMAZIONI E LA TECNICA ONION SKIN

Transcript

1 10-Cap07_FLCS3.qxd :07 Pagina 197 CAPITOLO 7 LE ANIMAZIONI E LA TECNICA ONION SKIN In questo capitolo In questo capitolo apprenderai come creare vari tipi di animazione e utilizzare la tecnica Onion skin. In particolare potrai comprendere come Flash gestisce le animazioni e 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.

2 10-Cap07_FLCS3.qxd :07 Pagina FLASH CS3 PROFESSIONAL E LE ANIMAZIONI Flash è molto apprezzato, già dalle precedenti versioni, 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-Rom, indipendentemente dalla piattaforma (WIN o MAC) utilizzata dall utente. I FOTOGRAMMI Ogni qualvolta realizzi un animazione, devi per forza fare ricorso ai fotogrammi, quindi 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 che utilizza un modem a 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 CS3 Professional, 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 e sofisticate. Ogni fotogramma contiene un immagine; la rapida esecuzione di una sequenza di fotogrammi crea l illusione del movimento. Flash CS3 Professional prevede tre tipi di fotogrammi: fotogrammi chiave, chiave vuoti e normali (intermedi). Analizziamoli rapidamente. TIPIDIFOTOGRAMMI Un fotogramma chiave è un fotogramma contenente gli oggetti e le loro impostazioni, in cui si impostano e determinano, in termini di cambiamento, i punti chiave dell animazione. 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 dell animazione) 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.

3 10-Cap07_FLCS3.qxd :07 Pagina 199 CAPITOLO 7 LE ANIMAZIONI E LA TECNICA ONION SKIN 199 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 Nella linea temporale è possibile eseguire svariate operazioni su fotogrammi o fotogrammi chiave. Per esempio puoi inserire, selezionare, eliminare e spostare i fotogrammi; trascinarli in una nuova posizione sullo stesso livello o su un livello diverso; copiarli e incollarli; convertirli; aggiungere un elemento al fotogramma chiave corrente, trascinandolo dal pannello Libreria sullo stage. Quando crei un documento Flash, nella linea temporale è presente e attivo un solo fotogramma. Vediamo come effettuare alcune delle operazioni suddette. Per inserire un nuovo fotogramma 1. Apri il menu Inserisci e selezionala la voce Linea temporale, quindi fai clic sulla voce Fotogramma. In alternativa, premi il tasto funzione F5 (vedi figura 7.1). Figura 7.1 Il percorso di menu per inserire un nuovo fotogramma. 2. Osserva nella linea temporale il nuovo fotogramma inserito (vedi figura 7.2). Figura 7.2 Il nuovo fotogramma. Per inserire un fotogramma chiave 1. Apri in menu Inserisci e selezionala la voce Linea temporale, quindi fai clic sulla voce Fotogramma chiave (vedi figura 7.3).

4 10-Cap07_FLCS3.qxd :07 Pagina Figura 7.3 Il percorso di menu per inserire un fotogramma chiave. 2. Osserva nella linea temporale il fotogramma chiave inserito (vedi figura 7.4). Figura 7.4 Il fotogramma chiave inserito. Per inserire un fotogramma chiave vuoto 1. Apri in menu Inserisci e selezionala la voce Linea temporale, quindi fai clic sulla voce Fotogramma chiave vuoto (vedi figura 7.5). Figura 7.5 Il percorso di menu per inserire un fotogramma chiave vuoto. 2. Osserva nella linea temporale il fotogramma chiave vuoto inserito (vedi figura 7.6). Figura 7.6 Il fotogramma chiave vuoto inserito. Per eliminare un fotogramma 1. Apri il menu Modifica e seleziona la voce Linea temporale, quindi fai clic sulla voce Rimuovi fotogrammi o premi MAIUSC + F5 per eliminare i fotogrammi normali (vedi figura 7.7).

5 10-Cap07_FLCS3.qxd :07 Pagina 201 CAPITOLO 7 LE ANIMAZIONI E LA TECNICA ONION SKIN 201 Figura 7.7 Il percorso di menu. Per spostare un fotogramma chiave o una sequenza di fotogrammi e il relativo contenuto 1. Fai clic e trascina il fotogramma chiave o la sequenza nella posizione desiderata (vedi 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 (vedi figura 7.9). Figura 7.9 Il fotogramma chiave selezionato. 2. Apri il menu Elabora, seleziona la voce Linea temporale, quindi fai clic sulla voce Cancella fotogramma chiave (vedi figura 7.10).

6 10-Cap07_FLCS3.qxd :07 Pagina 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. L ANIMAZIONE FOTOGRAMMA PER FOTOGRAMMA L animazione fotogramma per fotogramma è stata la tradizionale tecnica usata dai creatori di cartoni animati. Ogni fotogramma del filmato presenta delle differenze da quello precedente. Creiamo una semplice animazione fotogramma per fotogramma. 1. Crea un nuovo documento. 2. Seleziona nella linea temporale il primo fotogramma e premi il tasto funzione F6 per inserire un fotogramma chiave (vedi figura 7.11). Figura 7.11 Il nuovo fotogramma chiave inserito. 3. Attiva lo strumento Testo e digita per esempio la prima lettera del mio nome (ma tu puoi chiaramente digitare la lettera del tuo nome) e quindi digita B. Posizionala sullo stage in alto a sinistra (vedi figura 7.12). Figura 7.12 La lettera B inserita nello stage.

7 10-Cap07_FLCS3.qxd :07 Pagina 203 CAPITOLO 7 LE ANIMAZIONI E LA TECNICA ONION SKIN Premi ancora una volta il tasto funzione F6 per inserire un nuovo fotogramma chiave. 5. Attiva ancora una volta lo strumento Testo. Digita la seconda lettera del mio nome, R (vedi figura 7.13). Figura 7.13 La seconda lettera inserita nello stage. 6. Prosegui ripetendo i passi 3-5 fino al completamento del nome BRUNO (vedi figura 7.14). Figura 7.14 Il nome inserito nello stage. 7. Premi contemporaneamente i tasti CTRL + INVIO per eseguire il filmato. La durata del filmato dipende dal numero di fotogrammi utilizzati. Se il filmato è troppo rapido bisogna aumentare il numero dei fotogrammi, viceversa se è troppo lento bisogna diminuirlo.

8 10-Cap07_FLCS3.qxd :07 Pagina 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, la quale 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 procedi come segue. 1. Seleziona il primo fotogramma. 2. Fai clic sul secondo pulsante, Tecnica Onion skin, in basso a sinistra della sezione fotogrammi (vedi figura 7.15). Figura 7.15 Il pulsante Tecnica Onion skin. Ora, nella finestra del filmato, tutti i fotogrammi compresi tra i marcatori Inizio Onion skin e Fine Onion skin (nell intestazione della linea temporale) (vedi figura 7.16) sono sovrapposti come un unico fotogramma. Figura 7.16 I marcatori Inizio e Fine Onion skin. 3. Fai clic sul pulsante Contorni Onion (vedi figura 7.17) per visualizzare come contorni i fotogrammi inclusi nell intervallo Onion skin. Figura 7.17 Il pulsante Contorni Onion skin.

9 10-Cap07_FLCS3.qxd :07 Pagina 205 CAPITOLO 7 LE ANIMAZIONI E LA TECNICA ONION SKIN Fai clic sul pulsante Modifica più fotogrammi (vedi figura 7.18) per visualizzare e modificare più fotogrammi inclusi nell intervallo Onion skin. Figura 7.18 Il pulsante Modifica più fotogrammi. 5. Fai clic sul pulsante Elabora marcatori Onion skin (vedi figura 7.19) per aprire il menu associato (vedi figura 7.20) e scegli una delle voci previste: Mostra sempre marcatori. Visualizza i marcatori Onion skin nell intestazione della linea temporale, anche se la tecnica Onion skin non è attivata. Ancora Onion skin. Blocca i marcatori Onion skin nella posizione corrente nell intestazione della linea temporale. Onion 2. Visualizza due fotogrammi su entrambi i lati del fotogramma corrente. Figura 7.19 I pulsanti dell Onion skin. Onion 5. Visualizza cinque fotogrammi su entrambi i lati del fotogramma corrente. Onion skin su tutto. Visualizza tutti i fotogrammi su entrambi i lati del fotogramma corrente. Seleziona per esempio Onion skin su tutto. Figura 7.20 Il menu del pulsante Elabora marcatori Onion skin. 6. Sposta il cursore sulla linea temporale tra i fotogrammi e osserva il risultato nell area di lavoro (vedi figura 7.21).

10 10-Cap07_FLCS3.qxd :07 Pagina Figura 7.21 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 dell animazione. 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 usata 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 disegnare tutti disegni intermedi. In Flash CS3 Professional, 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à 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 Ovale e traccia un cerchio sullo stage (vedi figura 7.22).

11 10-Cap07_FLCS3.qxd :07 Pagina 207 CAPITOLO 7 LE ANIMAZIONI E LA TECNICA ONION SKIN 207 Figura 7.22 Il cerchio inserito nello stage. 3. Seleziona il fotogramma 20 (l animazione così durerà 20 fotogrammi) e premi il tasto funzione F6 per inserire un fotogramma chiave (vedi figura 7.23). Figura 7.23 Il fotogramma chiave Attiva lo strumento Rettangolo e traccia un rettangolo sovrapponendolo al cerchio presente sullo stage (vedi figura 7.24). Figura 7.24 Il rettangolo inserito nel fotogramma 20.

12 10-Cap07_FLCS3.qxd :07 Pagina Seleziona nuovamente il primo fotogramma. 6. Nella finestra di ispezione Proprietà apri il menu associato al campo Interpolazione e seleziona la voce Forma (vedi figura 7.25). Figura 7.25 La scelta del tipo di interpolazione. 7. La linea temporale cambia colore a indicare l avvenuta interpolazione (vedi figura 7.26). Figura 7.26 L interpolazione indicata nella linea temporale. Figura 7.27 Il risultato dell operazione. 8. Premi contemporaneamente i tasti CTRL + INVIO per eseguire il filmato. Come puoi notare, nell animazione il cerchio cambia gradualmente forma in un rettangolo (vedi figura 7.27). INTERPOLAZIONE DI MOVIMENTO Questo tipo di interpolazione è utile per spostare o ridimensionare un oggetto sullo stage. Lo spostamento di un oggetto normalmente avviene lungo una traiettoria rettilinea, ma tramite tecniche avanzate è possibile ottenere traiettorie anche molto complesse.

13 10-Cap07_FLCS3.qxd :07 Pagina 209 CAPITOLO 7 LE ANIMAZIONI E LA TECNICA ONION SKIN 209 Nel nostro esempio ci limiteremo a un esempio molto semplice, ma importante ai fini della comprensione dell interpolazione di movimento. Per creare un interpolazione di movimento procedi come segue. 1. Crea un nuovo documento. 2. Attiva lo strumento Ovale e traccia un cerchio sullo stage in altro a sinistra (vedi figura 7.28). Figura 7.28 Creazione dell oggetto. 3. Con l oggetto attivo, apri il menu Elabora e fai clic sulla voce Converti in simbolo (vedi figura 7.29). Figura 7.29 Il comando Converti in simbolo. 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.

14 10-Cap07_FLCS3.qxd :07 Pagina All apertura della finestra Converti in simbolo inserisci il nome da assegnare al simbolo e fai clic sul pulsante OK (vedi figura 7.30). Figura 7.30 La finestra Converti in simbolo. 5. Seleziona il fotogramma 20 (l animazione così durerà 20 fotogrammi) e premi il tasto funzione F6 per inserire un fotogramma chiave (vedi figura 7.31). Figura 7.31 L inserimento del fotogramma chiave. 6. Attiva lo strumento Freccia. 7. Fai clic sul simbolo del cerchio per selezionarlo e trascinalo sullo stage in basso a destra (vedi figura 7.32).

15 10-Cap07_FLCS3.qxd :07 Pagina 211 CAPITOLO 7 LE ANIMAZIONI E LA TECNICA ONION SKIN 211 Figura 7.32 Il posizionamento del cerchio. 8. Seleziona nuovamente il primo fotogramma. 9. Nella finestra di ispezione Proprietà apri il menu associato al campo Interpolazione e seleziona la voce Movimento (vedi figura 7.33). Figura 7.33 La scelta del tipo di interpolazione. La linea temporale cambia colore a indicare l avvenuta interpolazione (vedi figura 7.34). Figura 7.34 L interpolazione visualizzata nella linea temporale.

16 10-Cap07_FLCS3.qxd :07 Pagina Premi contemporaneamente i tasti CTRL + INVIO per eseguire il filmato. Come puoi notare, nell animazione tutti fotogrammi dal 2 al 19 sono stati creati per interpolazione e automaticamente da Flash (vedi figura 7.35). Figura 7.35 Fotogramma dell animazione creato per interpolazione.