Een rasterachtige lay-out bouwen met behulp van basisuitdrukkingen

Het eerste waar u aan moet denken, is dat er niet één juiste manier is om dingen te doen. Probeer, vooral wanneer je met uitdrukkingen werkt, kennis te krijgen van de basis van de syntaxis door de naslaggids te gebruiken of ernaar te zoeken via internet, zodat je je denken kunt gebruiken en de code met je eigen kennis kunt schrijven. Dat is een goede manier om te leren, door te proberen, fouten te maken en de antwoorden op uw problemen te achterhalen.


Stap 1


In dit voorbeeld heb ik besloten om het raster als volgt te bouwen:

Dit is het belangrijkste onderdeel, waar je moet beslissen hoe het eruit gaat zien, omdat al je expressies zullen afhangen van de structuur van de lagen. In dit geval kunt u zich realiseren dat laag "A" breedte plus laag "B" gelijk is aan 1920 px of 100% van de breedte van de compositie.

Stap 2


Begin met Laag / Nieuw / Effen te kiezen of gebruik de korte toets: Command + Y (Mac) of Ctrl + Y (PC). Hierdoor wordt het dialoogvenster Solid Settings geopend. Ga je gang en noem het "A" en klik op OK. U hoeft zich nu geen zorgen meer te maken over de kleur of maat omdat we expressies gaan gebruiken om dit te doen. In de projectbestanden realiseert u zich dat ik Shape Layers heb gebruikt. Om deze kwestie maakt het geen enkel verschil. Als u vormlagen wilt gebruiken, zorg er dan voor dat er geen laag is geselecteerd en dubbelklik op het vormpictogram op de werkbalk. Hiermee wordt een vormlaag gemaakt van exact dezelfde grootte als de Comp.


Stap 3


Herhaal deze stap nog vijf keer (of met vaste of vormlagen), noem die in alfabetische volgorde: "B", "C"? Dit is het moment voor ons om de ankerpunten te verplaatsen om de expressies goed te laten werken. Schik ze zoals op de foto:


Stap 4


Nu is het tijd om onze logica aan het werk te zetten. Wat we willen doen, is een rooster kunnen maken waarmee we de grootte van de cellen kunnen wijzigen en een kloof van vaste grootte kunnen handhaven. Hiervoor moeten we een aantal ideeën samenvoegen. Allereerst moeten we in gedachten houden dat, zoals ik al eerder zei, de breedte van laag "A" + laag "B" altijd gelijk is aan de compbreedte die in dit geval 1920 px is. Op dezelfde manier zal laag "A" hoogte plus laag "C" of Laag "D" hoogte gelijk zijn aan de hoogte die in dit geval 1080 px is. Ten tweede gebruiken we om Null-objecten te gebruiken met het effect Slider Control dat op hen wordt toegepast, zodat we de besturingselementen voor animaties kunnen verzamelen tot slechts enkele lagen. Dit gezegd zijnde, kunnen we beginnen met het maken van een nieuw nul-object door Laag te kiezen / Nieuw / leeg object of door op Command + option + shift + Y te drukken
(Mac) of Ctrl + shift + alt + Y (pc). Noem het "SLIDER A B" en klik op OK.



Stap 5


Ga nu naar Effects / Expression Control / Slider Control en kies ervoor om een ​​schuifregelaar te maken met de naam "WIDTH +". Herhaal deze stap en noem de tweede schuifregelaar "WIDTH-". Je zult gebruiken
"WIDTH +" om de breedte van laag "A" en
"WIDTH-" om de breedte van laag "B" te regelen. Laten we een klein gat maken tussen de twee lagen door een uitdrukking toe te voegen aan de schuifregelaar "WIDTH-", door alt + te klikken op de stopwatch van de schuifregelaar voor het "WIDTH-" effect op het tijdlijnpaneel:


99,5-effect ( "width +") ( "schuif");




Als de schuifregelaarwaarde van 0 naar 100 gaat, houdt deze uitdrukking de laag "A" en de laag "B" op een afstand van 0,5 procent van de comp-breedte van elkaar.


Stap 7


Maak nog een nulobject en noem het "SLIDER A C D", pas het schuifregelaareffect toe en noem het "HOOGTE +". Deze laag zal verantwoordelijk zijn voor lagen "A", "C" en "D" hoogten. Pas het schuifregelaar-effect nog een keer toe en geef het een naam
"HEIGHT -" .Toen Alt + klik op de "HEIGHT-" schuifregelaar stopwatch en typ de uitdrukking die de kloof tussen de rastercellen zal houden:


99,3-effect ( "HOOGTE +") ( "schuif");



In dit geval hebben we een tussenruimte van 0,7 procent ingesteld om het compositieformaat te compenseren en de verticale en horizontale openingen op elkaar te laten lijken.


Stap 8


Laten we nu de uitdrukkingen voor laag "A" typen. Selecteer laag "A" en druk op "S" op het toetsenbord. Dit toont de schaaleigenschap voor deze laag. Houd de "Alt" -toets ingedrukt en klik op de schaal stopwatch. Hierdoor worden de expressies voor de schaaleigenschap geactiveerd. Typ in:


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



De eerste regel maakt een variabele met de naam 'wscale' die gelijk is aan de waarde die wordt toegeschreven aan het 'WIDTH +' schuifregelaareffect op de laag 'Schuifregelaar AB'. De tweede laag stelt de 'hscale'-variabele in, die gelijk is aan de waarde in het Schuifeffect "HOOGTE +" op laag "SLIDER ACD". De derde regel stelt de variabelen in op de x- en y-coördinaten.


Stap 9


Maak nog een nulobject en noem het "SLIDER B E F", pas het schuifregelaareffect toe en noem het "HOOGTE +". Deze laag zal verantwoordelijk zijn voor lagen "A", "C" en "D" hoogten. Pas het schuifregelaar-effect nog een keer toe en geef het een naam
"HEIGHT -" .Toen Alt + klik op de "HEIGHT-" schuifregelaar stopwatch en typ de uitdrukking die de kloof tussen de rastercellen zal houden:


99,3-effect ( "HOOGTE +") ( "schuif");



Laten we nu de uitdrukkingen voor laag "B" typen. Selecteer laag "B" en druk op "S" op het toetsenbord. Dit toont de schaaleigenschap voor deze laag. Houd de "Alt" -toets ingedrukt en klik op de schaal stopwatch. Hierdoor worden de expressies voor de schaaleigenschap geactiveerd. Typ in:


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



Aan het einde van die stappen krijg je de lagen "A" en "B" goed.


Stap 10


Tijd om ons te laten nadenken over lagen "C" en "D", "E" en "F". Dit is het lastige gedeelte. Om deze stap te beginnen, laten we nog een nulobject maken, het "SLIDER C D" noemen en twee keer het effect Slider Control toepassen en de eerste een naam geven
"WIDTH +" en de tweede "WIDTH-". Deze laag zal werken om de waarden voor lagen "C" en "D" -breedten in te stellen. Alt + klik op de stopwatch voor het "WIDTH-" -effect en typ:


99,5-effect ( "width +") ( "schuif");



Stap 11


Met laag "C" geselecteerd, druk op "S" op het toetsenbord en Alt + klik op de schaaleigenschap stopwatch om een ​​uitdrukking in te voegen:


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


Ok, dit zou de gok zijn over hoe deze twee lagen op het scherm zouden worden verdeeld als en alleen als we bedenken dat laag "C" breedte plus laag "D" breedte gelijk zou zijn aan 100 procent van de comp breedte. Omdat deze premisse niet waar is, omdat we afhankelijk zijn van de waarde die we krijgen van de laag "SLIDER A B", moeten we de uitdrukking wijzigen 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];


Dit betekent dat alleen wanneer de "x" -coördinaat in laag "A" -schaalfactor gelijk is aan 100, het resultaat is zoals ingesteld op de variabelen wscale en hscale. Anders wordt de "x" -coördinaat gedefinieerd met inachtneming van de ruimte die is ingesteld op "SLIDER A B" -effect "WIDTH +". Op de derde regel verwijzen we naar de "x" -coördinaat met behulp van het cijfer 0 tussen de haakjes. "0" staat voor "x" -coördinaat, "1" voor de "y" -coördinaat en "2" voor de "z" -coördinaat. Wanneer u twee verschillende waarden vergelijkt als in regel 3 "als" -voorwaarde, gebruikt u twee tekens van gelijke "==".




Stap 12


Om de hoogte en breedte van laag "D" te berekenen, alt + klikt u op de schaaleigenschap stopwatch van de laag en voegt u de code in:



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];


Merk op dat we op regel 6 de waarden berekenen met alleen de "WIDTH +" schuifregelaarwaarde. Dat komt omdat we de waarde van niet willen gebruiken
"WIDTH-" omdat het de opening bevat.



Stap 13


Als je deze stappen uitvoert, merk je dat er iets mis is. Laag "D" staat niet goed. Om het op de juiste plaats te plaatsen, moeten we een code invoegen die het verbindt met de rechtergrens van laag "A". Dus typ deze code in op de eigenschap position:


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


Deze uitdrukking converteert alleen de grootte van laag "A" van pixels naar percentage, zodat we deze waarde kunnen gebruiken met de eigenschap scale. Omdat het ankerpunt van deze laag zich in de rechterbovenhoek bevindt, plaatst deze uitdrukking de laag op de juiste positie.



Tijd voor ons om ons te concentreren op lagen "E" en "F". Het is eigenlijk dezelfde logica die we gebruikten om lagen "C" en "D" te gebruiken. Begin met het maken van een nieuw nulobject en noem het "SLIDER E F". Tweemaal het schuifregelaareffect toepassen en de eerste een naam geven
"WIDTH +" en de tweede "WIDTH-". Alt + klik op de schaaleigenschap op laag "F".



We zullen eerst de laag "F" behandelen omdat deze zich aan de rechterkant van de comp bevindt, en we hoeven geen code in te voegen voor de positie.


wscale = thisComp.layer ("SLIDER EF"). effect ("WIDTH +") ("Slider"); hscale = thisComp.layer ("SLIDER BEF"). effect ("HEIGHT -") ("Slider"); als (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];



Vergeet niet om het gat in de schuifregelaar "Slider EF" "WIDTH-" in te stellen:


99,5-effect ( "width =") ( "schuif");


Stap 14


Spring naar laag
"E". Op de schaaleigenschap, alt + klik op de stopwatch en typ in:


wscale = thisComp.layer ("SLIDER EF"). effect ("WIDTH +") ("Slider"); hscale = thisComp.layer ("SLIDER BEF"). effect ("HEIGHT -") ("Slider"); als (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];



Stap 15


Ga nu naar de eigenschap position en typ de code in:


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


Deze code krijgt laag "E" op de juiste positie en berekent de breedte van de comp minus de waarde van de grootte van laag "B".



Stap 16


Ok, nu is het rooster klaar. Er zijn slechts een paar dingen die we nu kunnen doen om het gemakkelijker te gebruiken te maken, zoals het vastzetten van de waarden van de schuifregelaars.


Om de besturingselementen beter te visualiseren, heb ik andere Null-objecten gemaakt die ik heb genoemd naar de "opening" die ze visueel weergeven. Daarna heb ik de klemcode ingevoegd (beperkt de waarde tussen twee andere waarden) door in te stellen en te controleren hoe het werkte en kwam met deze set:



Null-object "VERTICAL1": vertegenwoordigt de eerste verticale lijn van links naar rechts van het raster. Ik heb deze code ingevoegd in het effect Slider Control dat ik erop heb toegepast:


clamp (waarde, 1,99);


Null-object "VERTICAL2": vertegenwoordigt de tweede verticale lijn van het raster. Voer deze code in:


clamp (waarde -1100);


Null-object "VERTICAL3": vertegenwoordigt de derde verticale lijn van het raster. Voer deze code in:


clamp (waarde, 1,99);


Null-object "HORIZONTAL1": vertegenwoordigt de eerste verticale lijn van boven naar beneden van het raster. Voer deze code in:


clamp (value, 1100);


Null-object "HORIZONTAL2": vertegenwoordigt de tweede verticale lijn van boven naar beneden van het raster. Voer deze code in:


clamp (value, 1100);



Laten we ze nu koppelen aan de schuifregelaars "WIDTH +" en "HEIGHT +" om dit te laten werken. Laten we dat doen met de pick-whip. Het zou er zo uit moeten zien:



Stap 17


Alles is ingesteld, het is tijd voor ons om de foto's in te voegen. Selecteer afbeelding nummer 1 in het projectvenster. Klik en sleep het onder de laag "A" in het tijdlijnpaneel. Kies Alpha Matte "A" in het vervolgkeuzemenu Track Matte. Herhaal deze stappen voor lagen "B",
"C", "D", "E", "F", de afbeelding plaatsen zoals u dat wilt. In mijn geval stel ik ze als op de foto:



Stap 18


Om een ​​beweging te maken, stel ik keyframes in voor enkele van de positie- en schaaleigenschappen van de beeldlagen. Laat het rooster animeren. Je kunt vrij bewegen zoals je wilt, keyframes instellen en de film testen.


Stap 19


Ik heb een aantal finishing touch aan de compositie toegevoegd om het er beter uit te laten zien. Eerst maakte ik een aanpassingslaag door Laag / Nieuw / Aanpassingslaag te kiezen of op Command + Option + Y (Mac) / Ctrl + Alt + Y (PC) te klikken en het Fast Blur-filter toe te passen onder Effect / Blur en Sharpen / Fast Blur. Je kunt het gemakkelijker vinden door de effectnaam in het paneel Effects & Presets in te typen. Stel de wazigheid in op 1.0.



Stap 20


Maak vervolgens een Black Solid, pas een ellipsmasker erop aan door te dubbelklikken op het pictogram Ellipse Mask op de werkbalk. Druk op "MM" op het toetsenbord om de maskereigenschappen te tonen of "F" om alleen de Mask Feather-eigenschap weer te geven en stel deze in op 250, en als u zojuist de Mask Feather-eigenschap hebt onthuld, drukt u op "TT" op het toetsenbord om de Dekking maskeren Eigenschap en stel deze in op 80%. Kies Aftrekken in het masker-vervolgkeuzemenu. Hiermee wordt een vignet gemaakt dat meer nadruk legt op wat er in het midden van het scherm gebeurt.



Stap 21


Laten we daarbovenop een papieren textuur plaatsen, "bg" genaamd. Plaats het zoals u wilt en stel de laagmodus in op Multiply in het vervolgkeuzemenu.



Stap 22


Laten we nu het AETUTS + -logo plaatsen. Maak een nieuwe comp, benoem het als LOGO en sleep de logo-afbeelding erin. Maak onder deze laag een zwarte kleur en zet de dekking op 35%. Pas het Ramp-effect toe door Effect / Genereren / Ramp te kiezen en een verloop van zwart naar wit te maken dat er als volgt uit zou moeten zien:




Stap 23


Om het in te voegen, dupliceer laag "F" op de "GRID" comp en splits deze in twee rond 0; 00; 03; 13 door de Huidige Tijd Indicator op dat moment te plaatsen en op Command + Shift + D (MAC) of Ctrl te drukken + Shift + D (pc) op het toetsenbord. Plaats de nieuw gemaakte compositie
"LOGO" onder de gesplitste laag "F2". Zet de track matte op Alpha Matte "F2" op de laag "LOGO". Kies de modus ADD. Plaats het en schaal het een beetje om de ruimte van de rastercel te centreren.





Stap 24


Volgende stap, maak een nieuwe compositie, noem deze AETUTS_EXPRESSIONS_TUTORIAL en klik op OK. Laat de GRID-comp erin verdwijnen. Laten we wat geluidseffecten toepassen. Versleep het bestand naar de comp
"Timesusp-Cosmic_D-190.wav". Op tijd 0; 00; 05; 16 voegt u een hoofdframe in voor de eigenschap Audio Levels. Laat de waarde zoals deze is, spring naar 0; 00; 05; 26 en verander de waarde naar -48.00dB. Drag en drop op tijd 0; 00; 02; 00 het tweede audiobestand met de naam
"Eerie_sp-Cosmic_D-191".



Conclusie


Bekijk nu een voorbeeld van de film. Klik op Shift + 0 (vanaf het numerieke toetsenblok) om er een voorbeeld van te bekijken. Als u wilt, kunt u de bewegingsonscherpte inschakelen voor de comp. Vergeet niet dat als je wilt dat Motion Blur werkt, je de Motion Blur-knop moet habiliteren voor de lagen waarop je het effect wilt toepassen. In dit geval moeten we, terwijl we geneste composities gebruiken, de Motion Blur-knop ook inschakelen in de GRID-compositie en de Logo-compositie. U kunt dit wijzigen door de voorkeuren te bewerken en de schakelaars in te schakelen Genestelde composities in de categorie Algemene voorkeuren. Dit soort op expressie gebaseerde animatie is handig als u veel repetitief werk in uw project hebt en u het wilt vereenvoudigen door dit soort code te schrijven. Ik heb een aantal laatste wijzigingen doorgevoerd om het uiterlijk te laten lijken zoals ik dacht dat het er het beste uitziet, zoals je kunt zien in de uiteindelijke filmvoorvertoning en in de projectbestanden. Ik heb deze gebruikt in een groot project dat ik veel foto's over verschillende onderwerpen moest animeren. In dit voorbeeld kunt u veel spelen met timing en de algehele constructie van de afbeelding op het scherm. Probeer altijd verschillende dingen!



Creative Commons-afbeeldingen: 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/
Geluiden gedownload bij Flashkit Auteur: Cosmic Dreamer http://www.cosmcidreamer.be