Share
La chiave per l'animazione, come molte altre cose, è un approccio logico e un buon flusso di lavoro. In questo tutorial, Hasier ti accompagna attraverso la pianificazione, lo sketch e il perfezionamento dell'animazione per darti il movimento che stai cercando.
Durante questo tutorial creeremo la seguente animazione:
Questo tutorial sarà diviso in 4 parti. In ogni parte esamineremo le diverse fasi della creazione di un'animazione dall'inizio alla fine. Queste sono le parti del tutorial e il loro contenuto:
Nella prima parte di questo tutorial, esamineremo le cose che devi sapere prima di iniziare ad animare. Non trascurare queste cose; pianificare la tua animazione prima di saltare direttamente in Flash ti farà risparmiare molto tempo dopo.
Il primo passo per creare un'animazione è, ovviamente, decidere cosa animare. In questo tutorial, animeremo questo:
È un semplice personaggio di spionaggio che ho inventato qualche tempo fa. Perché è così semplice, è facile animarlo. Se è la prima volta che provi ad animare, ti suggerisco di dare una spione alla mia prima di passare a personaggi più complessi.
Quindi, prendi un pezzo di carta e disegna la spia alcune volte. Animazione fotogramma per fotogramma significa disegnare la stessa cosa più e più volte, quindi dovresti sentirti a tuo agio disegnando il tuo personaggio. Ecco come lo attiro:
Una volta che conosci il tuo personaggio dentro e fuori, è tempo di iniziare a pensare di portarlo in vita. Le animazioni sono pianificate attraverso fotogrammi chiave (chiamato anche miniature). In questo tutorial mi riferirò a loro come disegni chiave in modo da non confonderli con i fotogrammi chiave di Flash. Quindi, che cos'è un disegno chiave? I disegni chiave sono i disegni che raccontano la storia e definiscono il movimento in un'animazione. In altre parole, sono un modo per riassumere l'animazione in alcuni disegni. L'esempio seguente mostra come una leggera differenza in un disegno chiave può avere un grande impatto sull'animazione finale:
Un disegno chiave deve essere pianificato all'inizio e alla fine di un movimento e ogni volta che si verifica un cambiamento di direzione o ritmo nell'animazione. Quindi, date un'altra occhiata all'animazione finale e disegnate i disegni chiave tenendo presente questi suggerimenti. Dovrebbero assomigliare a questo:
Quando hai imparato a disegnare il tuo personaggio e hai pianificato l'animazione, è ora di passare a Flash.
Inizia aprendo un nuovo documento Flash. Il valore predefinito di 12 fps è troppo basso per un'animazione, quindi per questo tutorial useremo 15 fps.
Assegna un nome allo strato corrente "BG". Seleziona un colore chiaro e disegna lo sfondo di base della scena, nel nostro caso, una stanza. Non disegnare niente di fantasia, solo gli elementi necessari per creare l'animazione approssimativa: muri, pavimento e finestra.
Per disegnare in Flash, di solito scelgo una grande dimensione del pennello con sensibilità alla pressione e riduco la levigatura a circa 10. Ciò mi dà più libertà di schizzo, dato che posso variare lo spessore della corsa quanto più desidero e avere un maggiore controllo su sharp angoli a causa del basso livellamento. Ti suggerisco di utilizzare le stesse impostazioni di me. Non preoccuparti se i tuoi tratti sembrano frastagliati; possiamo aggiustarlo alla fine.
Ora ricreeremo i disegni chiave che abbiamo realizzato in precedenza. Crea un nuovo livello e nominalo qualcosa come "Spia". Nel primo fotogramma, disegna il primo disegno chiave che hai pianificato in precedenza. Ancora una volta, basta disegnare le forme di base. Dovrebbe assomigliare a qualcosa di simile a questo:
Inserisci un fotogramma chiave vuoto (F7) nel livello "Spia". Attiva la buccia delle cipolle in modo da poter vedere la cornice precedente. Con il primo disegno come guida, disegna il secondo disegno chiave.
Ripeti lo stesso processo per il resto dei disegni chiave. Quando hai finito, dovresti avere cinque fotogrammi chiave con cinque diversi disegni chiave.
Ora arriviamo al passo più importante (e probabilmente il più difficile) nella creazione di un'animazione: sincronizzazione; calcolare il tempo tra i nostri disegni chiave. Quello che facciamo ora determinerà l'intera animazione, quindi è importante che sia fatto bene.
Seleziona il primo fotogramma nel livello "Spia" e aggiungi alcuni fotogrammi chiave vuoti (F7) tra il primo e il secondo disegno chiave. Fai lo stesso con i fotogrammi chiave rimanenti. Ecco come dovrebbe essere la tua timeline:
Prova il film (Ctrl + Invio). Come puoi vedere, i tempi sono tutti sbagliati, quindi torna nel file .fla per sistemarlo. Se il tempo tra due disegni chiave è troppo breve, aggiungi più fotogrammi chiave vuoti tra loro; se il tempo è troppo lungo, elimina alcuni fotogrammi chiave.
Dopo averlo modificato un po ', prova il film per vedere se sembra migliore di prima. Se ancora non sembra corretto, applica altre modifiche. È difficile immaginare l'animazione con solo cinque fotogrammi chiave, quindi non preoccuparti se non è perfetto in questa fase; possiamo modificare nuovamente i tempi più tardi. Finora, questo è il mio risultato:
Il nucleo della nostra animazione è ora completo, ma c'è ancora molto lavoro da fare. Innanzitutto, è necessario aggiungere altri fotogrammi chiave per rendere l'animazione fluida. I disegni che compaiono tra i disegni chiave per completare l'animazione sono opportunamente chiamati inbetweens. Disegnare le traverse è abbastanza semplice, dato che abbiamo già fatto la maggior parte del lavoro quando abbiamo realizzato i disegni chiave.
Seleziona un fotogramma chiave tra i primi due disegni chiave e attiva lo skin skin. Con due disegni come riferimento, disegna la spia a metà strada tra i disegni chiave nel fotogramma corrente.
Ripeti il processo. Disegna un nuovo keyframe tra ciascuno dei disegni chiave. Dovresti avere nove fotogrammi chiave.
Prova il film Se i tempi non sembrano giusti, ora è il momento di cambiarlo. Come ho detto prima, il timing è la parte più importante dell'animazione, quindi prenditi il tuo tempo per assicurarti che sia giusto. Dopo aver modificato i fotogrammi chiave, l'animazione dovrebbe essere simile a questa:
C'è poco altro da spiegare. Continuate ad aggiungere inbetweens tra inbetweens per appianare l'animazione fino a quando non ci sono più fotogrammi chiave vuoti rimasti. Metti alla prova il tuo film per vedere se qualcosa deve essere risolto. Questo è stato il mio risultato fino a questo stadio:
L'animazione approssimativa è ora completata. In questa parte del tutorial lavoreremo per disegnare la versione pulita del nostro personaggio.
Crea una nuova cartella e chiamala "ruvida". Trasforma i livelli "BG" e "Spia" in livelli guida in modo che non vengano visualizzati quando il filmato viene pubblicato. Blocca entrambi i livelli e inseriscili nella cartella. Crea un nuovo livello e chiamalo di nuovo "Spia". In questo strato disegneremo la versione pulita del nostro personaggio.
Cambia il colore di riempimento in nero e imposta le impostazioni del pennello come descritto al punto 4. Ora estrai i disegni che hai fatto all'inizio. Usali come riferimento per disegnare la spia sul disegno approssimativo.
Fai la stessa cosa per tutti i keyframe. Puoi usare onion skin per usare il frame precedente come riferimento.
Le cose sembrano decisamente più pulite, ma non sono ancora abbastanza pulite. Dai un'occhiata da vicino ai disegni puliti. Noterai che i tratti sono frastagliati. Potremmo lasciarli come è per questa animazione, ma se stessimo lavorando su un progetto più ampio, avremmo bisogno di ottimizzarli. L'ottimizzazione è un metodo utilizzato da Flash per rifinire una forma riducendo la quantità di curve necessarie per definire la forma.
Per ottimizzare i tratti dell'animazione, seleziona i disegni da tutti i fotogrammi (con "Modifica più fotogrammi" attivati) e fai clic su Modifica> Forma> Ottimizza (Crt + Alt + Maiusc + C). La finestra di dialogo Ottimizza curve si aprirà. È possibile regolare la quantità di livellamento con il cursore. Seleziona la casella "Utilizza più passate". Questo smussa la forma più e più volte fino a quando non è possibile ottenere ulteriori levigazioni senza alterare la forma. Quando fai clic su OK, verrà visualizzato il messaggio che mostra la percentuale della riduzione della curva.
Disattiva "modifica più fotogrammi" e dai un'occhiata ai tuoi disegni. Sono molto più agevoli ora, ma è probabile che l'ottimizzazione abbia alterato (almeno leggermente) le forme. Puoi modificarli con lo Strumento di trasformazione gratuito (Q). Assicurati che tutti i disegni siano chiusi e non abbiano spazi vuoti.
Ora è il momento di dare colore alla spia. Quindi prendi Paint Bucket (K) e riempilo! Ho usato # 000033 per la testa, # 010243 per il corpo e #FFFFFF per gli occhi.
Nota: se si fa clic con Paint Bucket all'interno del disegno e non accade nulla, significa che il disegno ha uno spazio vuoto da qualche parte. Trovalo e chiudilo con lo Strumento di trasformazione gratuito.
L'animazione è completa, ma ci sono ancora dei miglioramenti da fare. Quello che spiego qui sono semplici suggerimenti che non devi seguire parola per parola, e quindi non trascorrerò molto tempo su ognuno di essi.
Ora che abbiamo colorato la spia, abbiamo bisogno di uno sfondo altrettanto colorato. Lo scopo di questo tutorial, tuttavia, era mostrare il processo di animazione, quindi la creazione dello sfondo va oltre lo scopo di questo tutorial. Ma per coloro che sono curiosi, ecco un breve riassunto di come è stato realizzato:
Ho ricreato la stanza in Swift3D, un programma progettato per incorporare elementi 3D in Flash. Ho esportato la scena come vettori e l'ho aperta in Flash. Infine, ho apportato alcune modifiche al colore e aggiunto un bagliore giallo per la lampada.
Puoi creare lo sfondo direttamente in Flash o in qualsiasi altro modo desideri. Se vuoi usare il mio, lo troverai nei file sorgente.
Come probabilmente avrai già notato, c'è un piccolo problema che dobbiamo risolvere. Poiché il livello "Spia" si trova sopra il livello "BG", possiamo vedere la spia quando dovrebbe essere dietro il muro nei primi fotogrammi. Per coprire la parte del suo corpo che non dovrebbe essere mostrata useremo una maschera di livello.
Crea un nuovo livello, trasformalo in un livello maschera e definiscilo appropriatamente "Maschera". Rendi mascherato il livello "Spia". Se sei stato in grado di seguire questo tutorial, probabilmente conosci abbastanza bene Flash per familiarizzare con le maschere di livello, ma le esaminerò rapidamente:
Un livello maschera contiene una forma piena che consente di vedere un livello (mascherato) collegato attraverso di esso; tutte le aree vuote nel livello maschera diventeranno invisibili nel livello mascherato.
La nostra maschera deve coprire l'intera spia (in tutti i riquadri in cui deve essere nascosta una parte del suo corpo) tranne per la parte che sporge dalla finestra. Dicono che un'immagine vale più di mille parole, quindi dai un'occhiata qui sotto:
Nota: Se blocchi sia il livello maschera che il livello mascherato, vedrai l'effetto della maschera.
L'ultimo tocco che ho aggiunto all'animazione era un'ombra morbida sotto la spia. Crea un cerchio nero in un nuovo livello. Trasformalo in modo che assomigli all'ombra della spia.
Convertilo in un clip filmato e animalo in modo che segua il muro e il terreno sotto la spia (come ho detto prima, non entrerò nei dettagli, dovresti essere in grado di farlo da solo). L'ombra animata dovrebbe avere questo aspetto:
Per fare in modo che l'ombra assomigli ad un'ombra, abbassa l'alpha al 25% nella finestra di ispezione Proprietà filmato. Per renderlo morbido, aggiungi un filtro sfocatura nella scheda filtri con i parametri mostrati di seguito.
Congratulazioni! Metti alla prova il tuo film, mettiti comodo e rilassati. Ora puoi chiamarti un animatore. Ma tieni presente che questo è solo l'inizio! Guardati intorno! Ci sono infinite cose da animare! Crea i tuoi personaggi, esplora nuove tecniche, sviluppa il tuo stile e, cosa più importante: divertiti ad animare!
Ci sono molti libri sull'animazione tradizionale che ti suggerisco di dare un'occhiata. Tre libri che spiccano sono:
Se sei interessato all'animazione in Flash, dovresti andare su biteycastle.com e controllare le animazioni pluripremiate di Adam Phillips e la sua Bitey Castle Academy.
Accentsconagua