Prima di dedicarci alla nostra prima animazione, il Bouncing Ball, vorrei prima affrontare una sfida tecnica: il testo deve essere disegnato, come se fosse stato scritto a mano. Il Fig Leaf Rag ha un'introduzione bellissima con un accento alla fine, dove posizioneremo il punto dell'esclamativo.
Ci sono diversi metodi che possono funzionare più o meno bene, a seconda della situazione in cui ci troviamo. Siccome lavoro con una tavoletta grafica, scriverò il testo e vi mostrerò come funziona l'animazione. Prima però vi mostrerò anche un altro modo per farlo, che però non è il mio preferito:
Passi 1-10
Passo 1
Voglio eliminare il livello del testo e al suo posto creare un livello di composizione, un normale livello di pixel su cui poter disegnare. Il testo deve essere all'interno del livello. Quindi creo una sottocomposizione con Ctrl+Shift+C o tramite Layer>Create subcomposition. Chiamo questo "Typo_Intro".
Passo 2
Tutti gli attributi sono stati presi, incluso Movimento caotico.
Visto che non mi interessa, clicco su Movimento caotico, premo Ctrl+X e incollo tutto un livello sopra ("Fig Leaf Rag").
Passo 3
Torniamo alla composizione "Typo_Intro". Qui abbiamo il testo rivelato e possiamo animarlo.
La prima opzione sarebbe tramite Percorsi. Prendo lo Strumento penna e traccio sulla scritta la prima linea della lettera A. Poi interrompo e clicco da qualche parte nel vuoto tenendo premuto Ctrl- e termino così il percorso attuale, prima di tracciare la seconda linea dell'A.
Ripeto il processo, interrompo, clicco da qualche parte nel vuoto tenendo premuto Ctrl- e traccio la prossima linea e così via, fino a che l'intero testo sia tracciato.
Passo 4
Ora applico un effetto. Lo possiamo trovare come Contorno nella versione CC in Generazione. Prima del CS6 era chiamato Effetto tratto.
Scegliamo un mascherino o spuntiamo l'opzione Tutte le maschere per far disegnare queste maschere.
Passo 5
Nascondo i mascherini con questo piccolo simbolo e coloro il Percorso di rosso. Posso anche regolare la Dimensione, ma solo globalmente per tutti i mascherini.
E posso, una volta riportati in vista i mascherini, spostare e adattare i singoli punti in modo che il testo bianco sottostante venga coperto.
Passo 6
Il bello è che qui ho uno slider di Inizio- e Fine-: Trascino da inizio a fine e posso far disegnare tutto il testo.
Funziona molto bene, ma non si ha un controllo esatto. Ad esempio bisogna usare sempre lo stesso spessore di linea, quindi non si può variare tra linee più sottili e più spesse.
Perciò vi voglio mostrare un altro metodo che secondo me è un po' più veloce di tracciare tutto singolarmente …
Passo 7
In questo caso preferisco usare il metodo un po' più rapido con il Pennello.
Questo Pennello però non può essere applicato ai livelli di testo. Quindi dobbiamo creare di nuovo una sottocomposizione e chiamarla "Typo_Statisch". Possiamo già lavorare in questa sottocomposizione.
Passo 8
Appena vogliamo usare il Pennello e facciamo doppio clic sulla modalità Pennello, si apre il pannello layer e solo lì possiamo lavorare con il Pennello.
Sono anche comparsi due nuovi pannelli: Pennello e Dipingere. Nel pannello Pennello possiamo regolare dimensioni, durezza ecc. del pennello.
E nel pannello Dipingere possiamo selezionare il tipo di pittura. Inizialmente è impostato su costante, ma lo cambio in Pittura animata.
Faccio un tratto, poi un altro e ancora un altro - ma una volta finito un tratto, scompare misteriosamente.
Passaggio 9
Quando torno all'altro tab e mi sposto lungo la timeline, vedo che tutte le linee sono lì e vengono disegnate automaticamente.
Passaggio 10
Se si preme UU per tutte le proprietà modificate, otteniamo qui sotto molte sotto-proprietà.
Per ciascuna anche l'inizio e la fine vengono mostrati.
Inoltre, possiamo modificare la distanza, la durezza e persino la posizione di ciascuna linea - anche dopo che è stata disegnata.
Continua semplicemente: Passaggi 11-20
Passaggio 11
Cancello di nuovo tutto, per avere una visione più chiara.
Tiro di nuovo una nuova linea e se sei nella vista delle livelli, vedi il percorso. Questo è ciò che viene salvato.
Supponiamo che la linea disegnata non mi piaccia, posso anche ridisegnarla, selezionandola e semplicemente ridisegnandola. Viene aggiornata e sovrascritta semplicemente.
Passaggio 12
Voglio fare lo stesso con il testo, perché è il modo più veloce per animare qualcosa del genere.
Quindi, riduco leggermente il mio diametro e con la tavoletta grafica seguo il testo e lo disegno qui dentro.
Passaggio 13
Ho disegnato tutte le linee e se lo riproduciamo nella timeline, vediamo anche che tutto è lì.
Se premo U, riotteniamo tutti i keyframe.
Passaggio 14
Se premo il tasto Ü, la finestra su cui passo il mouse viene massimizzata. In questo caso la timeline. In questo modo ho più spazio e posso distinguere meglio gli elementi che spiccano. Li allontano un po' per far sì che tutti abbiano circa la stessa durata.
Passaggio 15
Facciamo riprodurre.
A proposito: se per caso hai premuto il tasto Bloc Maiusc per errore, After Effects non si aggiorna più. Riceverai quindi il messaggio Disattiva Bloc Maiusc per aggiornare la vista.
Quando facciamo riprodurre ora, After Effects inizia a disegnare tutte le lettere contemporaneamente. Dovrebbe però iniziare all'inizio e procedere verso la fine. Ed è proprio questo il punto dolente. Per raggiungere quello che voglio, dovrei sincronizzare manualmente ogni linea - una dopo l'altra. È un bel lavoro. Vorrei farlo più velocemente.
Nel prossimo passaggio ti spiegherò come fare - ma prima selezioniamo tutte le linee.
Passaggio 16
Pertanto, prendo uno script che imposta questi keyframe uno dopo l'altro.
Questo script l'ho scritto io stesso e naturalmente te l'ho dato. Lo trovi nella cartella Script con il nome Sequence strokes. Chi conosce il film "Sequenze livelli da After Effects" può farsi un'idea di cosa fa lo script.
Apro lo script in Extend Script e lo eseguo.
Passaggio 17
Ora abbiamo praticamente una scala di keyframe e il testo viene disegnato passo dopo passo. Ancora un po' lentamente.
Dobbiamo accelerare. Per farlo selezioniamo tutto, prendiamo l'ultimo keyframe che troviamo, premiamo il tasto Alt e lo trasciniamo su fino a 5 secondi.
In questo modo va già molto più veloce.
L'ultimo punto deve essere leggermente ritardato, ma ci occuperemo subito di questo.
Passaggio 18
Vorrei parlare anche del valore di offset. Questo influisce sulle transizioni tra i keyframe:
Se guardiamo attualmente le transizioni dei keyframe, il successivo inizia sempre esattamente dove finisce il precedente (a).
Se non voglio questo e per esempio preferisco avere due fotogrammi di pausa tra due linee, inserisco un 2 in offset.
Naturalmente devo selezionare di nuovo tutti i pennelli prima di poter attivare lo script. Con Ctrl+A posso selezionarli tutti insieme.
O forse desidero che i fotogrammi si sovrappongano, quindi imposto il valore -2 in offset. In questo modo il prossimo andrebbe sempre due fotogrammi indietro rispetto a quello effettivo. Tuttavia, se si è accorciato così rapidamente come qui, non ha senso. Vado bene così com'è e lascio 2 come valore di offset.
Passaggio 19
Quello che voglio cambiare sicuramente è il timing del punto esclamativo. Vorrei sincronizzarlo meglio con la musica.
Per questa ragione ho bisogno anche della musica nella composizione. Quindi vado alla scheda "Fig Leaf Rag" e copio il file.
Poi torno eventualmente nella composizione con un Alt-clic e la inserisco qui.
Passaggio 20
Ora vediamo dove sono le due posizioni di cui abbiamo bisogno. Per fare ciò utilizzo il tastierino numerico e premo il tasto virgola per creare un'anteprima. Premo il tasto * sul tastierino numerico per impostare un marcatore. Nei dispositivi senza tastierino numerico, soprattutto su Mac, sarebbero cmd+virgola per l'anteprima e cmd+8 per il marcatore.
Ora faccio suonare la musica e posiziono i marcatori esattamente nei punti in cui dovrebbero arrivare la linea e il punto del punto esclamativo (1). Proprio nei due accenti della melodia.
Quindi ho posizionato due marcatori: con il primo voglio completare la linea del punto esclamativo e con il secondo posizionare il punto.
Imposto la guida sul primo marcatore e passo alla composizione "Typo_Statisch". Qui sposto il frame corrispondente sulla guida, che indica la linea del punto esclamativo (2).
Faccio la stessa cosa con il secondo marcatore, che indica la posizione del punto: imposto la guida sul marcatore, torno alla composizione e sposto il frame di conseguenza.
Ultimi passaggi
Passaggio 21
Vorrei che la linea del punto esclamativo venisse disegnata più lentamente rispetto alla scritta precedente, in modo che l'accento sia maggiormente sul punto esclamativo (1).
E la scritta in generale dovrebbe essere completata un po' più velocemente. Quindi seleziono tutto ciò che precede (2) e lo sposto leggermente in avanti (3).
In questo modo il timing è perfetto.
Passaggio 22
Abbiamo dipinto sopra il testo e ora apportiamo ulteriori modifiche.
Prima duplico il livello "Typo_Statisch" e rimuovo l'effetto di pittura nel livello inferiore.
Passaggio 23
Nel livello superiore abbiamo il testo dipinto e sotto di esso l'originale bianco.
Nel livello inferiore abbiamo il normale testo bianco.
Se seleziono la casella di controllo Disegna sulla trasparenza nel livello superiore, rimangono solo le linee rosse disegnate.
Passaggio 24
Quindi il livello superiore deve essere utilizzato come maschera per quello inferiore.
Se la maschera non viene visualizzata, clicca semplicemente su Attiva/Disattiva modi di fusione in fondo, quindi verrà visualizzata la Maschera in movimento BewMas.
Poi posso selezionare una Maschera alfa e ottenere esattamente il risultato di cui ho bisogno. Cioè, ovunque vengano disegnate queste linee, il mio testo originale sarà visibile.
Tuttavia, qualcosa è scivolato via, perché all'inizio già c'è la lettera A.
Passaggio 25
Quindi è meglio selezionare ancora una volta tutti i pennelli con una selezione a righello dal basso verso l'alto (1) e quindi escludere i due frame del punto esclamativo con la selezione più Shift (2). I due sono già perfettamente posizionati temporalmente.
Poi sposto il primo frame in basso leggermente a destra, in modo che la A non sia visibile all'inizio.
Ora funziona.
Passaggio 26
Abbiamo fatto questo nella sottocomposizione, qui abbiamo ancora l'effetto Spostamento turbolento.
Se guardiamo il tutto in questa composizione, non solo lo vediamo in giallo e il colore cambia, ma si muove anche.
Passaggio 27
È meraviglioso e si abbina perfettamente, ma il colore dovrebbe cambiare solo dopo, o per ora non cambiare affatto. Quindi per ora rimane disattivato Cambio colori.
Così abbiamo completato i primi 4 secondi del trailer e ci vediamo nel prossimo segmento del tutorial, con il Bouncing Ball.
