Cose che devi sapere per creare qualcosa del genere in After Effects:
Come realizzare un progetto e composizioni
Quando avvii AE, puoi premere Cmd+Nper creare un nuovo Progetto con una composizione al suo interno.
Se hai già un Progetto aperto, premendo Cmd+Nsi crea solo una nuova Composizione.
In questo progetto, ho usato 2 composizioni. GUIcomp per contenere la GUI e le sue animazioni. iphonecomp per contenere sia lo sfondo che il GUIcomp.
La seconda composizione con animazioni della GUI dovrebbe avere le stesse dimensioni dello schermo o almeno avere le stesse proporzioni. Più tardi, quando lo posizionerai sullo schermo, potrebbe allungarsi per apparire strano se le proporzioni sono disattivate.
Importazione di immagini in AE
After Effects ha un sistema abbastanza buono per importare file .psd, ma non mi piace usarlo perché se perdi la posizione, sposta o rinomina il file .psd, dopo gli effetti non lo trovi e devi sostituire i filmati per ogni strato separatamente.
Se importi una cartella di immagini nei progetti e tu, ad esempio. rinominare la cartella delle immagini, è necessario sostituire solo un metraggio dell'immagine e tutte le immagini mancanti vengono ripristinate (purché tutte le immagini mancanti esistano nella stessa cartella). Anche in questo modo c'è meno confusione.
Come importare immagini in un progetto
Fare clic con il tasto destro all'interno del pannello Progetto a sinistra e scegliere: Import > Multiple files
... oppure puoi semplicemente trascinare i file in quel pannello
Ho usato slicy per esportare le mie immagini da Photoshop.
Quali oggetti dovresti salvare come file immagine separati
In sostanza, vorrai salvare tutti gli oggetti in movimento separatamente. Potrebbe anche essere necessario salvare alcuni oggetti statici separatamente.
In questo progetto avrei potuto potenzialmente salvare l'intestazione e il piè di pagina come uno, ma l'intestazione aveva un'ombra che supera il primo pulsante, quindi ho dovuto salvarli separatamente.
Ecco una panoramica di come ho salvato i miei file di immagine in Photoshop prima di importarli in AE.
Animazione 101
Posiziona animazione:
- Posiziona animazione:
- Seleziona il tuo oggetto nell'elenco sul lato sinistro della sequenza temporale.
- stampa P
- Fai clic sull'icona del cronometro che si trova ora sotto il livello selezionato. Ciò aggiunge automaticamente il primo fotogramma chiave, ovunque sia l'indicatore del tempo (è la linea rossa nella sequenza temporale).
- sposta l'indicatore del tempo in avanti nella sequenza temporale. Trascinalo o Cmd+{Arrow left or right}oCmd+Shift+{Arrow left or right}
- nel visualizzatore composizione, trascina l'oggetto nella posizione in cui vuoi che si sposti (puoi anche usarlo Shift+arrow keys, proprio come in Photoshop o trascinando i valori numerici.).
- Un altro fotogramma chiave appare nella sequenza temporale e ora hai un'animazione.
- È possibile riprodurre l'animazione premendo space
Spostare i fotogrammi chiave più vicini l'uno all'altro per accelerare l'animazione o allontanarsi l'uno dall'altro per rallentarlo.
Animazioni continue dopo una pausa.
uno scenario: hai animato qualcosa da A a B e vuoi metterti in pausa per X quantità di millisecondi e poi passare da B a C.
Quando hai animato la B, vai avanti nella timeline e fai clic sull'icona del fotogramma chiave sul lato sinistro, qui: 
Dovrebbe apparire in grigio, quindi non preoccuparti. Ciò significa solo che non esiste un fotogramma chiave in quella posizione
Poiché il fotogramma chiave # 2 e la trasformazione del fotogramma chiave # 3 appena creati hanno gli stessi valori, ora c'è una pausa tra questi due fotogrammi chiave. Quindi è possibile continuare ad animare normalmente, spostandosi in avanti nella sequenza temporale e modificando nuovamente i valori.
Animare altre cose, come Rotazione o Opacità
Volevo solo prendermi questo tempo per dirti che funzionano tutti come animazioni di posizione (... meno il trascinamento).
Basta usare i cursori numerici visualizzati quando si premono i tasti di scelta rapida di seguito.
Tasti di scelta rapida per diversi metodi di trasformazione:
- P - Posizione
- T - Opacità
- R - Rotazione
- S - Scala
- A - Punto di ancoraggio
Basta selezionare gli oggetti e premere uno di questi tasti di scelta rapida e iniziare l'animazione. Se non selezioni nulla, rivela i metodi di trasformazione per ciascun oggetto nel comp.
Come asservire oggetti ad altri oggetti
Nel pannello Comp noterai un elenco a discesa Genitore su ogni oggetto.
Puoi usarlo per definire un genitore per un oggetto.
Se poi sposti il genitore, noterai che l'elemento figlio ora si sposta con esso. Lo stesso vale per le animazioni associate all'elemento Parent.
Se animi l'oggetto Parent da ruotare, il Figlio seguirà ...
Aggiungi elasticità alla tua animazione
Quindi forse hai notato che l'animazione dei pulsanti non si ferma a un muro, ma si ferma in modo molto elastico.
Espressioni After Effect possono essere utilizzate per raggiungere questo obiettivo (può fare anche molto di più).
Per applicare lo script di espressione a un'animazione, Alt+{mouse click}il cronometro e incollalo.
L'espressione che ho usato nella mia animazione pulsante
Le prime 3 variabili amp, freq, decaypossono essere modificate per ottenere risultati diversi.
Puoi applicare lo stesso script alle animazioni basate sul movimento. Ad esempio, l'animazione dell'opacità non è interessata.
Può anche essere trovato qui.
amp = .1;
freq = 1.0;
decay = 9.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}}
if (n == 0){ t = 0;
}else{
t = time - key(n).time;
}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value}
Facilitare ....
Quindi questa è un'altra cosa che può rendere l'animazione molto meno lineare, proprio come lo script Expression sopra.
Ho usato Ease Ease in quel "cerchio indicatore tattile" per farlo sembrare un po 'più umano come il movimento.
È possibile selezionare uno o più fotogrammi chiave e fare clic con il pulsante destro del mouse su uno di essi.
Quindi dall'elenco: Keyframe assistant > Easy Ease
Uso spesso la facilità, perché sono pigro ...
Foto o non è successo ...
Ecco una semplice animazione di posizione che dimostra come l'allentamento e questo particolare script di espressioni possano avere un impatto enorme sull'animazione.
Inserimento di composizioni / filmati animati in uno schermo
Quindi, dopo che la GUI è stata animata, è tempo di posizionarla sullo schermo del dispositivo.
- Posiziona comp GUI in comp. IPhone, proprio come metti le immagini in una composizione.
- Fai doppio clic su iPhone comp nel pannello Progetto
- Seleziona GUI comp
- Dal menu in alto
Effects > Distort > Corner pin
- Quindi trascina ogni angolo per abbinare gli angoli dello schermo del dispositivo.
Esportazione in .gif
AE non ha un metodo nativo per farlo, ma non preoccuparti, ci sono modi.
Preferisco fare questo:
- Fai clic su una composizione in
Projects panel
Composition > Add to render queue Cmd+Ctrl+M- Quindi, in basso, dove normalmente si trova la sequenza temporale, scegli cosa esportare e dove.
- Di solito esporto un .mov senza perdita di dati
- Se fai clic su "Impostazioni rendering", puoi scegliere un framerate, altrimenti utilizzerà il framerate Comp
- Quindi premi render nell'angolo in alto a destra o quel pannello.
- Trova il file esportato e aprilo in Photoshop.
- Salva per il web Cmd+Shift+Alt+S
Onestamente non è poi così male ...
Esportazione come file video
Quindi, anche se il metodo sopra ti mostra come esportare un file lossless, non è il modo in cui dovresti esportare i file video.
Lo fai in questo modo:
- Salva il tuo file di progetto.
- Fai clic su una composizione nel
Projects panel(se ne hai più di una)
Composition > Add to adobe media encoder queue Cmd+Alt+M- Trascina un predefinito dalla colonna di destra alla colonna di sinistra
- Premi avvia.
- Se non si sceglie la cartella di esportazione, per impostazione predefinita va proprio accanto al file di progetto.
Come sostituire i filmati
Quindi AE non riesce a trovare i tuoi file? Fai questo:
- Fare clic con il tasto destro su uno dei filmati mancanti nel pannello Progetto
- Dalla lista
Replace footage > File...
- Individua i filmati e le cose
Altri tasti di scelta rapida utili
- U- Rivela tutti i fotogrammi chiave usati nel comp (se non hai selezionato nulla). Molto utile quando è necessario spostare più fotogrammi chiave contemporaneamente, ad esempio.
- U( Tocca due volte ): rivela tutto ciò che è stato modificato.
- E( Tocca due volte ): rivela tutte le espressioni utilizzate.
- J - Passa al fotogramma chiave precedente.
- K - Passa al fotogramma chiave successivo.
- space - Riproduce comp
- Io hometasto: sposta l'indicatore del tempo corrente all'inizio della sequenza temporale.
- Cmd+K - Impostazioni di composizione correnti.
- Cmd+I - Importa file.
- Alt+{Arrow keys left and right} - Seleziona i fotogrammi chiave e premi i tasti di scelta rapida per spostarli.
- Alt+Shift+{Arrow keys left and right} - Seleziona i fotogrammi chiave e premi i tasti di scelta rapida per spostarli.
I file di progetto possono essere trovati here.
