Costruire un layout simile alla griglia usando le espressioni di base

La prima cosa che dovresti tenere a mente è che non esiste un solo modo giusto di fare le cose. Soprattutto quando lavori con le espressioni, prova ad acquisire familiarità con le basi della sintassi usando la guida di riferimento o cercando su Internet, in modo da poter usare il tuo pensiero e scrivere il codice con le tue conoscenze. È un buon modo per imparare, provando, facendo errori e cercando di capire le risposte ai tuoi problemi.


Passo 1


In questo esempio ho deciso di costruire la griglia in questo modo:

Questa è la parte più importante, in cui devi decidere come sarà, perché tutte le tue espressioni dipenderanno dalla struttura dei livelli. In questo caso, puoi realizzare che il livello "A" larghezza più lo strato "B" larghezza è uguale a 1920 px o 100% della larghezza della composizione.

Passo 2


Inizia scegliendo Layer / Nuovo / Solido o usa il tasto breve: Comando + Y (Mac) o Ctrl + Y (PC). Questo aprirà la finestra di dialogo Impostazioni solido. Vai avanti e chiamalo "A" e fai clic su OK. Per ora non devi preoccuparti del colore o delle dimensioni perché useremo le espressioni per farlo. Nei file di progetto ti rendi conto che ho usato Shape Layers. Per questo non fa alcuna differenza. Se vuoi utilizzare i livelli di forma, assicurati di non aver selezionato alcun livello e fai doppio clic sull'icona Forma sulla barra degli strumenti. Creerà un Shape Layer esattamente della stessa dimensione del Comp.


Passaggio 3


Ripeti questo passaggio altre cinque volte (o con solidi o strati di forma), nominandoli in ordine alfabetico: "B", "C"? Questo è il momento per noi di riposizionare i punti di ancoraggio affinché le espressioni funzionino correttamente. Disporli come nell'immagine:


Passaggio 4


Ora è il momento di mettere le nostre logiche al lavoro. Quello che vogliamo fare è essere in grado di creare una griglia che possiamo modificare le dimensioni delle celle e mantenere un divario di dimensioni fisse tra di loro. Per fare ciò dobbiamo mettere insieme alcune idee. Prima di tutto, dovremmo ricordare che, come ho detto prima, il layer "A" larghezza + livello "B" larghezza sarà sempre uguale alla strega comp width in questo caso è 1920 px. Allo stesso modo, il livello "A" più il livello "C" o l'altezza "D" del livello sarà uguale alla strega dell'altezza comp, in questo caso 1080 px. In secondo luogo, per controllare larghezze e altezze utilizzeremo Oggetti Nulli con l'effetto Controllo cursore applicato su di essi, in modo che possiamo raccogliere i controlli di animazione su pochi livelli. Ciò detto, possiamo iniziare a creare un nuovo Oggetto Nullo scegliendo Livello / Nuovo / Null Object o premendo Command + option + shift + Y
(Mac) o Ctrl + Maiusc + Alt + Y (PC). Chiamarlo "SLIDER A B" e fare clic su OK.



Passaggio 5


Ora vai a Effetti / Controllo espressione / Controllo cursore e sceglierlo per creare un controllo a scorrimento che chiamerai "WIDTH +". Ripeti questo passaggio e assegna al secondo slider "WIDTH-". Userai
"WIDTH +" per controllare la larghezza del livello "A" e
"WIDTH-" per controllare la larghezza del livello "B". Consente di stabilire un piccolo spazio tra i due livelli aggiungendo un'espressione sul cursore dell'effetto "WIDTH-", alt + clic sul cronometro del dispositivo di scorrimento per l'effetto "WIDTH-" sul pannello Timeline:


99.5-effetto ( "WIDTH +") ( "Slider");




Poiché il valore del cursore va da 0 a 100, questa espressione manterrà il livello "A" e il livello "B" distanti l'uno dall'altro dello 0,5 percento della larghezza comp..


Passaggio 7


Crea un altro oggetto Null e chiamalo "SLIDER A C D", applica l'Effetto cursore e chiamalo "HEIGHT +". Questo livello sarà responsabile per gli strati "A", "C" e "D". Applicare ancora una volta l'effetto di controllo del cursore e nominarlo
"HEIGHT -". Quindi Alt + fai clic sul cronometro del cursore "HEIGHT-" e digita l'espressione che manterrà lo spazio tra le celle della griglia:


99.3-effetto ( "ALTEZZA +") ( "Slider");



In questo caso, impostiamo un intervallo di 0,7 percento per compensare il formato di composizione e rendere gli spazi verticali e orizzontali simili.


Passaggio 8


Ora, digitiamo le espressioni per il livello "A". Seleziona il livello "A" e premi "S" sulla tastiera. Questo mostrerà la proprietà di scala per questo livello. Tieni premuto il tasto "Alt" e fai clic sul cronometro della scala. Questo attiverà le espressioni per la proprietà della scala. Digitare:


wscale = thisComp.layer ("SLIDER AB"). effect ("WIDTH +") ("Slider"); hscale = thisComp.layer ("SLIDER ACD"). effect ("HEIGHT +") ("Slider"); [wscale , hscale];



La prima riga creerà una variabile denominata "wscale" che sarà equivalente al valore attribuito all'effetto Slider "WIDTH +" sul livello "Slider AB". Il secondo layer imposterà la variabile "hscale", che sarà uguale al valore contenuto nell'effetto Slider "HEIGHT +" sul layer "SLIDER ACD". La terza riga imposta le variabili sulle coordinate xey.


Passaggio 9


Crea un altro oggetto Null e chiamalo "SLIDER B E F", applica l'Effetto cursore e chiamalo "HEIGHT +". Questo livello sarà responsabile per gli strati "A", "C" e "D". Applicare ancora una volta l'effetto di controllo del cursore e nominarlo
"HEIGHT -". Quindi Alt + fai clic sul cronometro del cursore "HEIGHT-" e digita l'espressione che manterrà lo spazio tra le celle della griglia:


99.3-effetto ( "ALTEZZA +") ( "Slider");



Ora, digitiamo le espressioni per il livello "B". Seleziona il livello "B" e premi "S" sulla tastiera. Questo mostrerà la proprietà di scala per questo livello. Tieni premuto il tasto "Alt" e fai clic sul cronometro della scala. Questo attiverà le espressioni per la proprietà della scala. Digitare:


wscale = thisComp.layer ("SLIDER AB"). effect ("WIDTH -") ("Slider"); hscale = thisComp.layer ("SLIDER BEF"). effect ("HEIGHT +") ("Slider"); [ Wscale, hscale];



Alla fine di questi passaggi otterrete il corretto funzionamento dei livelli "A" e "B".


Passaggio 10


È ora di pensare ai livelli "C" e "D", "E" e "F". Ora, questa è la parte difficile. Per iniziare questo passaggio, creiamo un altro oggetto Null, chiamalo "SLIDER C D" e applica due volte l'effetto Slider Control e assegna il nome al primo
"WIDTH +" e il secondo "WIDTH-". Questo livello funzionerà per impostare i valori per le larghezze "C" e "D" dei livelli. Alt + clic sul cronometro per l'effetto "WIDTH-" e digita:


99.5-effetto ( "WIDTH +") ( "Slider");



Passaggio 11


Con il livello "C" selezionato, premi "S" sulla tastiera e Alt + Fai clic sul cronometro delle proprietà della scala per inserire un'espressione:


wscale = thisComp.layer ("SLIDER CD"). effect ("WIDTH +") ("Slider"); hscale = thisComp.layer ("SLIDER ACD"). effect ("HEIGHT -") ("Slider"); [ Wscale, hscale];


Ok, questa sarebbe l'ipotesi su come questi due layer verrebbero distribuiti sullo schermo se e solo se consideriamo che la larghezza "C" del livello più la larghezza "D" del livello sarebbe pari al 100 percento della larghezza del comp. Poiché questa premisse non è vera, poiché dipendiamo dal valore che otteniamo dal livello "SLIDER A B", dovremmo cambiare l'espressione in:


wscale = thisComp.layer ("SLIDER CD"). effect ("WIDTH +") ("Slider"); hscale = thisComp.layer ("SLIDER ACD"). effect ("HEIGHT -") ("Slider"); (thisComp.layer ("A"). transform.scale [0] == 100) [wscale, hscale]; else [(thisComp.layer ("SLIDER AB"). effect ("WIDTH +") (" Slider ")) * thisComp.layer (" SLIDER CD "). Effect (" WIDTH + ") (" Slider ") / 100-.25, hscale];


Questo significa che solo quando la coordinata "x" nella proprietà della scala "A" è uguale a 100, il risultato sarà come impostato sulle variabili wscale e hscale. In caso contrario, la coordinata "x" verrà definita considerando lo spazio impostato sull'effetto "SLIDER A B" "WIDTH +". Sulla terza riga, ci riferiamo alla coordinata "x" usando il numero 0 tra parentesi. "0" rappresenterà la coordinata "x", "1" per la coordinata "y" e "2" per la coordinata "z". Quando si confrontano due valori diversi come nella condizione "se" della riga 3, utilizzare due segni di uguale "==".




Passaggio 12


Per calcolare l'altezza e la larghezza del livello "D", alt + clicca sul cronometro di proprietà della scala del livello e inserisci il codice:



wscale = thisComp.layer ("SLIDER CD"). effect ("WIDTH -") ("Slider"); hscale = thisComp.layer ("SLIDER ACD"). effect ("HEIGHT -") ("Slider"); if (thisComp.layer ("A"). transform.scale [0] == 100) [wscale, hscale]; else [(thisComp.layer ("SLIDER AB"). effect ("WIDTH +") ( "Slider")) * (100-thisComp.layer ("SLIDER CD"). Effect ("WIDTH +") ("Slider")) / 100-.25, hscale];


Si noti che sulla riga 6 stiamo calcolando i valori usando semplicemente il valore del cursore "WIDTH +". Questo perché non vogliamo usare il valore di
"WIDTH-" perché include la dimensione del gap.



Passaggio 13


Fatto questo passo noterai che qualcosa non va. Il livello "D" non è posizionato correttamente. Per posizionarlo nel posto giusto, dobbiamo inserire un codice che lo colleghi al limite destro del livello "A". Quindi inserisci questo codice nella proprietà position:


. X = thisComp.width * thisComp.layer ( "A") transform.scale [0] / 100; [x, 0];


Questa espressione converte semplicemente il livello del livello "A" da pixel a percentuale, in modo da permetterci di utilizzare questo valore con la proprietà scale. Poiché il Punto di ancoraggio di questo livello si trova nell'angolo in alto a destra, questa espressione posizionerà il livello nella giusta posizione.



Tempo per noi di concentrarsi sui livelli "E" e "F". Fondamentalmente è la stessa logica con cui abbiamo lavorato con i livelli "C" e "D". Iniziare a creare un nuovo oggetto Null e chiamarlo "SLIDER E F". Applicare due volte l'effetto Controllo cursore e nominare il primo
"WIDTH +" e la seconda "WIDTH-". Alt + clic sulla proprietà della scala sul livello "F".



Ci occuperemo prima del layer "F" perché è quello che si trova nella parte inferiore destra del comp e non è necessario inserire un codice per la posizione.


wscale = thisComp.layer ("SLIDER EF"). effect ("WIDTH +") ("Slider"); hscale = thisComp.layer ("SLIDER BEF"). effect ("HEIGHT -") ("Slider"); (thisComp.layer ("B"). transform.scale [0] == 100) [wscale, hscale]; else [(100-thisComp.layer ("SLIDER AB"). effect ("WIDTH +") ("Slider")) * thisComp.layer ("SLIDER EF"). Effect ("WIDTH +") ("Slider") / 100-.5, hscale];



Non dimenticare di impostare lo spazio sul cursore "Slider EF" "WIDTH-":


99.5 effetto ( "width =") ( "cursore");


Passaggio 14


Salta al livello
"E". Sulla proprietà della scala, alt + clic sul cronometro e digita:


wscale = thisComp.layer ("SLIDER EF"). effect ("WIDTH +") ("Slider"); hscale = thisComp.layer ("SLIDER BEF"). effect ("HEIGHT -") ("Slider"); (thisComp.layer ("B"). transform.scale [0] == 100) [wscale, hscale]; else [(100-thisComp.layer ("SLIDER AB"). effect ("WIDTH +") ("Slider")) * (100-thisComp.layer ("SLIDER EF"). Effect ("WIDTH +") ("Slider")) / 100-.5, hscale];



Passaggio 15


Ora vai alla proprietà position e digita il codice:


Bscalex = thisComp.width * thisComp.layer ( "B") transform.scale [0] /100;x=thisComp.width-Bscalex;. [X, thisComp.height];


Questo codice otterrà il livello "E" sulla giusta posizione calcolando la larghezza del comp meno il valore della dimensione del livello "B".



Passaggio 16


Ok, ora la griglia è pronta. Ci sono solo alcune cose che possiamo fare ora per renderlo più facile da usare, come il serraggio dei valori dai cursori.


Per visualizzare meglio i controlli, ho creato altri oggetti null che ho chiamato in seguito al "gap" che rappresentano visivamente. Poi ho inserito il codice pinza (limita il valore tra altri due valori) impostando e controllando come funzionava e con questo set:



Oggetto Null "VERTICAL1": rappresenta la prima linea verticale da sinistra a destra della griglia. Ho inserito questo codice nell'effetto Controllo cursore che ho applicato su di esso:


morsetto (valore, 1,99);


Oggetto Null "VERTICAL2": rappresenta la seconda linea verticale della griglia. Inserisci questo codice:


morsetto (valore, -1100);


Oggetto Null "VERTICAL3": rappresenta la terza linea verticale della griglia. Inserisci questo codice:


morsetto (valore, 1,99);


Oggetto Null "HORIZONTAL1": rappresenta la prima linea verticale dall'alto verso il basso della griglia. Inserisci questo codice:


morsetto (valore, 1.100);


Oggetto Null "HORIZONTAL2": rappresenta la seconda linea verticale dall'alto verso il basso della griglia. Inserisci questo codice:


morsetto (valore, 1.100);



Ora colleghiamo i cursori "WIDTH +" e "HEIGHT +" affinché funzioni. Facciamolo con il plettro. Assomiglia a questo:



Passaggio 17


Tutto è pronto, è tempo per noi di inserire le immagini. Seleziona l'immagine numero 1 dal pannello Progetto. Fare clic e trascinarlo sotto il livello "A" sul pannello Timeline. Scegliete Matte alfa "A" dal menu a discesa Track Matte. Ripeti questo passaggio per i livelli "B",
"C", "D", "E", "F", posizionando l'immagine come preferisci. Nel mio caso li ho impostati come nell'immagine:



Passaggio 18


Per creare un movimento imposto i fotogrammi chiave per alcune delle posizioni di posizione e di scala dei livelli dell'immagine. Consente di animare la griglia. Sentiti libero di animare come preferisci, imposta i fotogrammi chiave e prova il film.


Passaggio 19


Ho aggiunto alcuni ritocchi alla composizione per renderla migliore. Per prima cosa ho creato un livello di regolazione scegliendo Livello / Nuovo / Livello di regolazione o facendo clic su Comando + Opzione + Y (Mac) / Ctrl + Alt + Y (PC) e applicato il filtro Sfocatura rapida sotto Effetto / Sfocatura e Precisione / Sfocatura rapida. Puoi trovarlo più facilmente digitando il nome dell'effetto nel pannello Effetti e predefiniti. Imposta la sfocatura su 1.0.



Passaggio 20


Quindi crea un solido nero, applica una maschera di ellisse su di esso facendo doppio clic sull'icona Maschera ellisse sulla barra degli strumenti. Premi "MM" sulla tastiera per rivelare le proprietà della maschera o "F" per mostrare solo la proprietà Feather maschera e impostarla su 250, quindi, se hai appena rivelato la proprietà Feather maschera, premi "TT" sulla tastiera per mostrare la Maschera Opacity Property e impostalo su 80%. Scegli Sottrai dal menu a discesa Maschera. Questo creerà una vignetta che darà maggiore enfasi a ciò che sta accadendo al centro dello schermo.



Passaggio 21


In cima a tutto, mettiamo una trama di carta, chiamata "bg". Posizionalo come preferisci e imposta la modalità livello su Moltiplica nel menu a discesa.



Passaggio 22


Ora inseriamo il logo AETUTS +. Crea un nuovo comp, chiamalo LOGO e trascina l'immagine del logo in esso. Sotto questo livello crea un solido nero e imposta l'opacità al 35%. Applica l'effetto Ramp scegliendo Effetto / Genera / Rampa e crea un gradiente dal nero al bianco che dovrebbe assomigliare a questo:




Passaggio 23


Ora per inserirlo, duplica il livello "F" sul comp "GRID" dividendolo in due attorno a 0; 00; 03; 13 posizionando l'Indicatore del tempo corrente in quel momento e premendo Comando + Maiusc + D (MAC) o Ctrl + Shift + D (PC) sulla tastiera. Inserisci la nuova composizione creata
"LOGO" sotto lo split layer "F2". Imposta il mascherino traccia su Alpha Matte "F2" sul livello "LOGO". Scegli la modalità AGGIUNGI. Posizionalo e ridimensionalo per centrare lo spazio della cella della griglia.





Passaggio 24


Al passo successivo, crea una nuova composizione, chiamala AETUTS_EXPRESSIONS_TUTORIAL e fai clic su OK. Inserisci la comp di GRID. Applichiamo alcuni effetti sonori. Trascina e rilascia sul comp il file
"Timesusp-Cosmic_D-190.wav". On time 0; 00; 05; 16 inserire un keyframe per la proprietà Audio Levels. Lascia il valore così com'è, passa a 0; 00; 05; 26 e modifica il valore a -48.00dB. Trascina e rilascia in orario 0; 00; 02; 00 il secondo file audio denominato
"Eerie_sp-Cosmic_D-191".



Conclusione


Ora visualizza l'anteprima del film. Fare clic su Maiusc + 0 (dal tastierino numerico) per visualizzarlo in anteprima. Se ti piace, puoi attivare il Motion Blur per il comp. Non dimenticare che se vuoi che Motion Blur funzioni, devi abilitare il pulsante Motion Blur per i livelli su cui applicare l'effetto. In questo caso, poiché utilizziamo composizioni nidificate, dovremmo attivare il pulsante Motion Blur anche nella composizione GRID e nella composizione del logo. È possibile modificare questo modificando le preferenze e abilitando gli switch affetti composizioni annidate nella categoria delle preferenze generali. Questo tipo di animazione basata su espressioni è utile quando si ha un sacco di lavoro ripetitivo all'interno del progetto e si desidera semplificarlo scrivendo questo tipo di codice. Ho apportato alcune modifiche finali per renderlo simile al modo in cui pensavo risultasse il migliore, come puoi vedere nell'anteprima finale del film e nei file di progetto. Ho usato questo in un grande progetto che ho dovuto animare molte foto su soggetti diversi. In questo esempio puoi giocare molto con i tempi e la costruzione complessiva dell'immagine sullo schermo. Prova sempre cose diverse!



Immagini Creative Commons: 1.jpg http://www.flickr.com/photos/aigle_dore/5854362904/sizes/l/in/photostream/
2.jpg http://www.flickr.com/photos/structures-nyc-photos/5601731544/sizes/o/in/photostream/
3.jpg http://www.flickr.com/photos/vincentjoly/3923658550/sizes/o/in/photostream/
4.jpg http://www.flickr.com/photos/twicepix/2181066232/sizes/o/in/photostream/
5.jpg http://www.flickr.com/photos/tsuda/235922699/sizes/o/in/photostream/
6.jpg http://www.flickr.com/photos/neilspicys/2348877473/sizes/o/in/photostream/
Suoni scaricati su Flashkit Autore: Cosmic Dreamer http://www.cosmcidreamer.be