Animazione resa facile: I colori

Per quanto riguarda il concept dei colori, avevamo pensato di rendere il tutto molto semplice e ridotto, con uno sfondo blu e un testo giallo. Blu e giallo sono colori complementari, molto leggibili e si distinguono bene l'uno dall'altro.

Potremmo teoricamente creare una nuova area di colore, rendendo il blu e colorando il testo di giallo. Potremmo farlo, ma otterremmo il problema di come sovrapporre un pennello sull'intera immagine durante l'animazione, che inverta i colori.

Potremmo provare a creare un livello di regolazione tramite Livello>Nuovo>Livello di regolazione o premendo Ctrl+Alt+Y e poi aggiungervi l'effetto di Inversione canali. Ma vedremmo che in realtà i nostri colori non sono completamente complementari. Per il blu, l'arancione è complementare e qui non si adatta bene, non riusciamo a trovare i colori.




Ma voglio assolutamente farlo e c'è un modo.

Passo 1

Realizzeremo il seguente procedimento: prenderemo l'area di colore blu reale e premendo Ctrl+Shift+Y o andando su Livello>Regolazioni per l'area di colore imposteremo il colore su nero.

Quindi verrà modificato in modo ottimale e After Effects rinominerà anche l'area di colore.

Scriveremo il testo "Animazione facile" semplicemente in bianco.

Ora abbiamo nero e bianco senza trasparenza e possiamo invertirli facilmente.





Ma voglio blu e giallo.

Passo 2

Quindi creiamo un altro livello di regolazioni premendo Ctrl+Alt+Y ("Livello di regolazione 2") e applichiamo l'effetto Effetti>Correzione colore>Colorazione.

L'effetto è molto semplice, mappa i colori in modo lineare. Prende nero e bianco e assegna un'altra tonalità.

Poi prendiamo il nero e adattiamo il nostro blu. Ho già annotato un codice colore "008FF" che è questo bel blu.

E adattiamo il bianco al giallo, il valore del colore è "FFF000", un giallo davvero intenso.

Passo 3

Ora che abbiamo applicato questo dopo il livello di inversione. Cambierò anche il nome a tutto in "Cambia Colori" e "Colorize".

Chiudiamo anche il livello superiore, perché non dovremo mai più toccarlo.

Se attivo e disattivo "Cambia Colori", otteniamo un'inversione meravigliosa dei colori, senza passare all'arancione o al lilla.





Ma come gestiamo la transizione? Possiamo spostare il livello "Cambia Colori" da sinistra a destra o dall'alto al basso nell'immagine e creare così una transizione. Ma non è così interessante.

Vorrei fare qualcosa in più, dividere il tutto in strisce e far scorrere queste strisce sull'immagine per rompere un po' di più i bordi. Come possiamo fare al meglio?

Passo 4

Ci sono degli effetti appositi come ad esempio in Effetti>Effetti transizione; c'è il Line Sweep, che va in una certa direzione, ma prima viene completata una linea prima che inizi la successiva.

Non è abbastanza irregolare per me.

Passo 5

Quindi è meglio farlo con le Maschere. Faccio un doppio clic sull'icona della maschera e creo una maschera che corrisponda esattamente alle mie misure. È una funzione molto pratica che useremo ancora in seguito.

Passo 6

Desidero suddividere questa maschera in 20 pezzi, in modo da avere 20 colonne singole. Questo non è possibile con gli strumenti standard di After Effects.

Ma in situazioni del genere scrivo semplicemente uno script. Per le funzioni che utilizziamo qui, ho incluso gli script nel relativo tutorial.

Troveremo Layer Chainer, Mask Slicer e Sequence Strokes. Mask Slicer è ciò di cui abbiamo bisogno qui, come potete immaginare.

Questo simbolo prima del nome file appartiene all'Extendscript Toolkit, che posso lanciare qui. Quando lo apro, si avvierà anche questo Extendscript Toolkit.

Questo toolkit deve essere installato separatamente, poiché non è installato di default. È necessario occuparsene, è facile farlo tramite CreativeCloud.

In questo script ci sono alcune Impostazioni. Non ho creato un'interfaccia utente per tutti gli script, poiché li uso per uso personale. Questo significa che dovete modificare direttamente tutte le impostazioni nel file di testo.

In questo caso possiamo cambiare due valori: il numero di "noOfSplices", cioè quante fette singole desideriamo alla fine.

E "separateLayers", che può essere true o false. Con true verrà aggiunto uno strato separato per ogni fetta.

Facciamo un test con 4 fette, ...

... passare ad After Effects e selezionare la maschera che desideriamo ritagliare. Questo è molto importante.

Successivamente selezioniamo After Effects CC come destinazione dell'applicazione. Vedete, ci sono anche altri programmi, questo toolkit serve per scrivere e testare script.

In questo caso selezioniamo quindi After Effects, poi premo il pulsante Play ...

... e torniamo ad After Effects. Ora abbiamo i nuovi livelli, ognuno dei quali è composto da un solo livello.

E se ora genero un gradiente a 4 colori, ...

... vedrete che alla fine otterremo un'immagine. Di fatto è un livello con una coordinata, solo le maschere sono state ritagliate. Ciò significa che abbiamo singoli slice di questo livello, il che può essere molto utile, poiché possiamo spostarli e ruotarli singolarmente.





Ma questo non serve qui. Voglio fare qualcosa di diverso.

Passo 7

Vorrei avere tutte le maschere su un solo livello, e non 4, ma 20.

E impostiamo seperateLayers su false. Salvo, torno su Play, ...

... e ora abbiamo tutte le 20 maschere su un unico livello.

Le marco da 1 a 20 e premo Strg+C o cmd+C. Poi cancello la maschera originale e inserisco tutte queste al suo posto qui.

Ora sono tutte lì e nel prossimo passo vorrei animarle.

Passo 8

Purtroppo le maschere non hanno proprietà di trasformazione come rotazione e scalatura, ma solo il percorso della maschera. Ma non è un problema.

Marciamo tutte le maschere e le espandiamo. Poi premiamo su Mask Path, inseriamo un fotogramma chiave e andiamo un po' più avanti nella composizione, dove sposteremo fuori dall'immagine tutte le maschere.

Passo 9

Vediamo come va. La musica suona in sottofondo, tutto bene. E ora abbiamo due fotogrammi chiave lineari, il che non è particolarmente interessante.

Vorrei renderlo un po' più interessante e non lavorare con fotogrammi chiave lineari, perché abbiamo già sentito le regole di Disney: la velocità costante non accade nella vita reale, quindi non ne abbiamo bisogno nemmeno nell'animazione.

Passo 10

Per fare ciò clicchiamo sull'Editor di grafici. Otteniamo le curve che poi studieremo nel bouncing ball.

Per limitarlo ai percorsi delle maschere, marco tutte le maschere e premo U, così otterrò tutte le proprietà animate.

Qui vediamo ora la curva di velocità, il grafico di velocità. Non è così facile da usare come la curva dei valori, vedremo ancora. Ma è utile se si desidera animare molte proprietà contemporaneamente.

Vorrei applicare un Easy Ease, sia con F9 che con questo pulsante.

Con questo il grafico è cambiato drasticamente. A sinistra avremmo una velocità costante, partiamo con una certa velocità e ci fermiamo bruscamente.

Con Easy Ease partiamo con una velocità di zero, saliamo lentamente e poi scendiamo di nuovo. È una forma parabolica.

Vorrei renderlo un po' più estremo. Per fare ciò prendo la maniglia e la sposto un po', così abbiamo davvero un picco al centro.

Vediamo come appare tutto questo ...





Lo lascio andare e vedo: Scorre direttamente sopra. Nel mezzo abbiamo un movimento molto più rapido rispetto all'inizio e alla fine. Mi piace così.

Passo 11

Avremmo potuto fare tutto questo anche con la posizione - ma perché abbiamo creato i ritagli?

Ora spostiamo tutto in modo irregolare nel tempo e disponiamo i fotogrammi chiave in modo casuale, in modo da ottenere un po' di variazione anche nella forma delle rivelazioni. Le linee non dovrebbero scorrere tutte insieme contemporaneamente.

Alla fine sembra un po' come una skyline. Quella singola linea che normalmente separerebbe la nostra immagine, vogliamo dividerla. A volte basta su un lato o solo davanti o solo dietro. Cerco di evitare che finiscano alla stessa altezza.

Sembra buono.

E vedete, quando attivate l'anteprima, sembra figo. Fantastico.

Passo 12

E possiamo prendere questo livello adesso, giralro, ridimensionarlo, spostarlo e naturalmente usarlo più volte, perché è solo l'effetto di invertire.

Lo duplichiamo, lo spostiamo temporalmente e passiamo dal giallo al blu e dal blu al giallo.





In questo caso, è visualizzato in anticipo e poi non c'è più. Dobbiamo ancora invertirlo, perché voglio che all'inizio non ci sia alcun livello e che il livello si sposti in avanti.

Quindi elimino nuovamente il livello duplicato e attivo il livello "Cambia Colori". Poi selezioniamo tutti i fotogrammi chiave tracciando un rettangolo sopra di essi.

Con un clic destro vado sul Assistente ai fotogrammi chiave e trovo in fondo Inverti ordine dei fotogrammi chiave.

Appena fatto questo, la tonalità gialla si muove dal basso al blu.

E ora dovrebbe funzionare anche se duplico di nuovo il livello e lo sposto leggermente più indietro.

Passiamo ora da un colore all'altro e ritorniamo indietro. Perfetto.





Funziona già. Il nostro prossimo obiettivo nella prossima parte di questa serie di tutorial sarà il testo.