Animazione resa facile: Bouncing Ball - la transizione

Ora si tratta di far sì che questa palla lasci i suoi punti o il percorso di movimento, in modo che sia evidente che qui si tratta davvero di un'animazione. Deve essere chiaro che la palla deve essere spostata da A a B e che l'animatore abbia pensato attentamente come farlo. Si vuole suggerire che tutto è stato animato a mano. Per questo motivo, vogliamo visualizzare tutte le key pose.

Passo 1

Possiamo creare il percorso con l'effetto Pennello animato.

Ma prima dobbiamo creare un nuovo strato di colore. Lo impostiamo Come dimensione composizione (1) e lo posizioniamo sotto il livello "Bouncing Ball 02" (2).

Il livello si colora quindi da bianco a blu, poiché abbiamo eseguito Cambia colori..

Rinominiamo anche il livello subito in "Linee Bouncing Ball 02".

Passo 2

Cliccando con il tasto destro otteniamo un effetto: Genera>Pennello animato.

Passo 3

Impostiamo lo stile di pennellatura su Trasparente.

Ora abbiamo una Posizione, che possiamo animare e su cui possono essere disegnati i punti mentre muoviamo la palla da sinistra a destra. Per vedere meglio, regoliamo la Larghezza dei punti.

Passo 4

Al momento il problema è che le posizioni del "Bouncing Ball 02" sono separate - mentre per le "Linee Bouncing Ball 02" la Posizione è nuovamente unita.





Ma se spostiamo il livello?

Passo 5

Voglio collegare un effetto a un altro livello. E ciò funziona con l'espressione più utile che After Effects possa offrire. Ve la consiglio davvero molto quando si tratta di collegare posizioni degli effetti o punti con posizioni di livelli: L'espressione toComp.

Questa espressione prende un livello e converte le sue coordinate nelle coordinate della composizione: In alto a sinistra è 0, 0 e in basso a destra è 1280, 720. Quindi ci spostiamo di 720 pixel verso il basso e 1280 pixel verso destra.





Questa conversione funziona per tutti i livelli, indipendentemente dal fatto che siano in qualche modo sottordinati e anche se è un livello 3D.

Passo 6

After Effects converte quindi queste coordinate della composizione dello schermo e sono esattamente le coordinate richieste casualmente dal nostro effetto qui.

Quindi, clicchiamo con il tasto Alt-, digitiamo "e = " e quindi selezioniamo il livello "Bouncing Ball 02".

Si tratta di un errore di espressione, quindi faccio semplicemente clic su OK.

Passo 7

Vorrei una trasformazione delle dimensioni da questo livello.

Andiamo nello spazio di trasformazione del livello scrivendo "toComp" dopo.

Quindi vogliamo convertire un punto, ovvero il punto di ancoraggio del livello. Quindi scriviamo "e.anchorPoint" tra parentesi.

Passo 8

E funziona davvero bene così.

Il nostro punto di ancoraggio del livello viene trasformato nello spazio della composizione in base a questo livello e otteniamo questi punti.

Ci sono ancora troppi punti per me, quindi possiamo regolare nuovamente l'intervallo temporale con cui i punti vengono disegnati, modificando la Distanza (sec.).

Passo 9

Mi piace già abbastanza, lo regolo ancora un po' e rendo i singoli punti un po' più grandi.

Potresti inserire anche "[0,0,0]", che sarebbe l'angolo superiore della palla. Se inserissi "[50,50,0]", ad esempio, sarebbe esattamente al centro.





Sebbene sia possibile, vogliamo che le curve siano belle sul pavimento, quindi manteniamo l'impostazione a "(e.anchorPoint)".

Passo 10

Anche il testo dovrebbe cambiare quando cambia il colore. Ciò significa che non dovrebbe più essere "Il Bouncing Ball", ma un altro testo.

Rinominiamo il livello "Cambia colori" in "Cambia colori 01" e ne facciamo una copia. Questa copia la chiamiamo "Cambia colori 01 - MASCHERA 01". Possiamo numerare tranquillamente le maschere, poiché ne avremo bisogno di più.

Dato che le maschere non funzionano con gli strati di regolazione, rimuoviamo l'icona dello strato di regolazione.

Non abbiamo bisogno nemmeno di invertire qui, quindi lo eliminiamo.

Vogliamo solo questa maschera, semplicemente gli stessi keyframe nello stesso momento della striscia della maschera.

Passo 11

Poi clicco sull'opzione "Palla rimbalzante" e seleziono di nuovo Attiva/Disattiva modalità.

Adesso imposto - simile a prima, quando abbiamo disegnato le linee e fatto apparire il testo - il Tracciatore di forma su Maschera alfa invertita.

A questo punto, la palla rimbalzante sarà visibile solo dove non è presente la maschera. Non appena la maschera si sposta via, la palla rimbalzante potrà anche terminare.

Passo 12

Ricordate sempre di ritagliare le immagini. Anche qui - ho premuto accidentalmente il tasto Windows ed è comparso. Premo Alt+Ö per tagliare, Alt+Ä per posizionare alla fine.

Ora è di nuovo a posto.

Perché dovrei ritagliare le immagini? Non è necessario per le performance di After Effects, poiché il programma capisce già di non dover renderizzare ciò che è dietro. Ma se devo apportare modifiche a un'immagine che si estende per l'intera durata della composizione, allora potrei avere problemi. Facciamo un esperimento:

Faccio un rendering anticipato (RAM) con un'immagine che si estende per l'intera durata della composizione. All'inizio sembra tutto bene, ma a un certo punto vorrei avere un spazio leggermente più ampio. Ma se lo modifico ora - Puff - l'intero rendering anticipato va perso. Questo può diventare molto fastidioso.

E questo cambia se le immagini sono ritagliate. Con un rendering anticipato, se modifico il spazio, il rendering anticipato rimane nella parte anteriore e scompare solo dall'inizio dell'immagine corrente. Non è necessario ricomputare tutto da capo.

Questo è il vero vantaggio del ritagliare le immagini.

Anche in questi due punti è consigliabile ritagliare le immagini per mantenerne la chiarezza.

Passo 13

Nel punto in cui la palla rientra, abbiamo bisogno del secondo testo.

Quindi duplichiamo le due immagini "Cambia Colori 01 - MASCHERA 01" e "La palla rimbalzante" e spostiamo i duplicati in alto (1).

Poi posizioniamo il livello di regolazione con la striscia colorata nel posto giusto (2) e inizialmente lo estendiamo (3) fino alla fine della composizione; lo ritaglieremo più precisamente più avanti.

La copia dell'immagine "Palla rimbalzante" la impostiamo su Canale alfa e poi diventa "L'ESERCIZIO PRINCIPALE E PIÙ IMPORTANTE" (4).

Riduco leggermente il campo di testo e inserisco più spazi tra le righe, mettendo il tutto più in alto.

Passo 14

Facciamo un'altra RAM-preview - e all'improvviso tutta questa storia di transizioni a strisce o di cambiamenti di colore ha senso, perché struttura il video. Divide tra una posizione di domanda e una di spiegazione, introducendo così un nuovo capitolo. E inoltre, ha un bell'aspetto, specialmente perché avviene in mezzo al movimento e il movimento non ne risente affatto.

Il prossimo passo è far sì che questa palla non esploda qui - possiamo eliminarla subito - ma che cada verso destra.

Non abbiamo nemmeno un secondo effetto sonoro per questo. Muoviamo l'immagine "Plop" direttamente accanto a "Palla rimbalzante 01".





E ci rivedremo nella prossima parte della serie tutorial quando faremo cadere la palla da qui: "Palla cadente - Sovrapposizione di animazioni".