Code an After Effects Script in Under 30 Minutes

okay [Music] hey everyone so last week we had nate lovell on the channel talking to us at a very high level about writing scripts for after effects and sort of introducing the topic to us and by popular demand in the comments of that video we've got him back today and we're going to watch him in real time write a complete script with the user interface from end to end so yeah that's good that's good that's good all right nate well thank you for coming back for a second video yeah no problem um so yeah by popular demand in the comments uh we got you back to do a video where you're going to actually do some coding live in front of us i guess pre-recorded so you're going to make essentially a script start to finish is that right yeah today i'm going to make a script and our goal is to basically select some layers i have a bunch of layers here and i want to create an expression control on each of these or i can link say a slider control to the scale and anytime i change this slider um i want it to actually change the scale of my layer but since i have so many layers doing it one by one might take a while so i think we can save a lot of time by creating a script that does it for us nice so you're going to make basically it's going to be a script that when runs will give you control over the scale of as many layers that you have selected and there'll be a you said there's going to be a ui as well yeah i think we could just have a very simple thing that lets us click on a button and it's going to take if we have one two 500 layers selected and it will allow us to easily control each of their scales with the slider control so i mean it sounds good to me i'm excited to see what's about to happen in the next several minutes so i guess i'll just let you take it away if you wouldn't mind explaining um kind of step by step what you're doing as you do it i'll only interject if i if i'm really lost okay no problem so to get started you need to open something to code with usually um i personally use adobe's tool called extend script which is super useful i'm going to put it on the side here so i can easily go back and forth this is why windows is pretty nice but basically what i'm going to do is tell the program that i'm using after effects and in this case i'm using 2021 and the first thing i want to do is just create something super simple which allows us to when we run the script press a button so in sort of scripting to create an interface we need to create a window and a window is just like any application this is a window here this is a window we're going to create our own window so what i'll do is create a variable which is basically something we can store something and we're going to store this window so we can access it add some things to it or whatever and i'm just going to call a window and in order to create a window in scripting we just need to say new window and basically after that we add some parentheses and anything we put inside of these parentheses are going to be the details of our window now there are different types of windows it's a little bit complicated but we always pretty much want to make a palette type window so we type in palette and then we can also set the name of what our window is going to be let's just call it my script just so we can see it um then after that it's a little bit uh annoying that we have to put this but i put undefined usually you would put in some custom size if you wanted your window to be you know full screen small this is where you would put in like the width and the height but when you say undefined it's going to automatically decide how big it is based on what you put inside of it so now if we want to see this i just need to grab my window and again this could be anything it could be win it could be w i'm going to grab my thing that refers to this window and say dot show and we use parentheses to indicate that we're performing an action and now if i basically have this connected if you don't have you know extend script to connect directly to after effects you can save this script file we'll just call it uh save on my desktop and call it basic script if you wanted to run this without a special program you'd go to file scripts run script file and then navigate to your file and choose basic script and now you can see we have this tiny little window you can't even see the name yet so now what we want to do go ahead oh sorry to cut you off is it it's possible though to just run run that script from extend script and then it will automatically run in after effects if they're both open right so if i close this and i make sure i'm connected to whatever version of after effects i have open here and i and i hit this run button or the shortcut is f5 it will then just automatically run it for me so i don't have to go all the way through file scripts run script file but as you can see this is super small we can't even see the name or anything so let's create another variable again this can be anything it's just a name we'll just call it button we'll set this equal to um we're now going to reference our window we need to add a button inside of our window so we just say window and we're going to add something now similar to when we said show we're going to be executing some kind of action called add what are we going to add well the first parameter required to add something is what kind of thing you want to add and we want to add a button so not to be confused with this maybe we could call this um start button to remove the confusion there we want to add a button and i don't know if we can actually just run this yeah we can so we can we can now see we have a button but it's empty so what we want to do then is give it some text the second parameter in add similar to here is just kind of something you have to learn is where you put the size of your button but i don't want to define any particular size i want it to auto generate the size so i leave it as undefined and then we can put in the name as this third parameter so what did you say it was going to be starch this is such an important decision it is run run exclamation mark yeah you got it exclamation mark so now we've created a button with the random size basically we don't have to worry about the size and the text is going to say run so if i go ahead and just update this you can see now we have our run button yeah right now nothing is happening so that's kind of the last step is to actually make this talk to after effects to do something and what we wanted it to do was take every selected layer and we wanted to control the scale with an expression linked to a slider control so we want to basically with the script add a slider control to each one of these layers and then apply an expression to the scale so now we're going to do is we need to tell the scripts when we click on the button to do something so what we want to do is take our button and say start button and the way we tell it when it's being clicked we want to do something it's called an on click listener so we just use the text on click and it uses this thing called camel case in here which starts the first word in lower case and every other word is capital so we say on click and we're going to set that equal to a bunch of code and we need to create what's called a function which is basically just a storage container for a bunch of instructions so we're going to say when we take our start button and we click on it we're going to run some code and this code needs to be inside of brackets it's just a standard convention so anything we put inside of this block of code here is going to be what happens when we click on our button to illustrate how this works i'll just do what's called an alert in javascript you can alert something which just sends a pop-up on the on screen so we can just say hello there now when i go ahead and click on my button i get a message saying hello there so we know that whenever we click on this something's gonna happen so next we need to get some after effects information the first thing we want to get is the composition of with all these layers we can't just tell after effects or we can't just tell the script to identify what layers are open we need to first know what the composition is so what i'll do is create a variable a container we'll call it comp short for composition and the way we get uh it's very very common in scripting the way we get the current composition that's open is by saying app which refers to after effects or the application and now we need to go down and say app.project because we have a project open in after effects so inside of after effects inside of the current project we want to grab the what's called active item now the active item just refers again to when we have a composition open here so similar what we did to what we did before we can alert information and have a pop-up on screen this is a great way to see how our script is doing so i can say alert comp and now if i click on my button i get something that says object comp item which means that we have a composition inside of that variable and i could even say dot name and get the name of my composition what if is it possible to have an active item be something besides a comp yes it is in fact we could have something selected over here in the project panel like for example i could select the solids folder and then that would become the item as you can see solids so there is a secondary check you can use to make sure make sure that it's a composition but i think for this tutorial it's easiest just to assume that it's going to be you have it open here and clicked on it so now that we know we have a composition it's referring to this composition now we need to get all of our layers and we wanted to do it based on the selected layers we didn't want to just choose everything there could be a whole bunch of other layers that we don't want to select in here so luckily there's a thing built into scripting where we can just grab the selected layers very easily so let's just say var to make a variable and we'll call this our we'll just say layers and what we're going to do is then grab our composition object so now we're referencing our composition here and all we have to do is say dot selected layers and this will automatically give us a list of all of the layers we have selected in the composition if we have a bunch of other layers that aren't selected it's not going to select these so again going with to make sure that we have uh the right information i'm going to alert layers and see if it gives us our selected layers so when i run this it gives us here a list we can tell us a list because there's these commas an object av layer av layer and those are all indicate indicative of a layer selected so next we're going to do something called a loop in programming a loop is where you go through a series of elements it could be one two three a million different things and each time through we can perform an operation on it so what's called a for loop in programming allows us to increment through all of the things and since we have in this case five layers we can go through each of these five layers and perform something so the syntax for this is we have four and then in parentheses uh we put the information about this loop and then similar to our function which we created over here we need brackets everything inside of these brackets is what's performed this is just a standard programming technique and there's plenty of resources in all sorts of languages to learn this so inside of the for loop we start by creating a variable and we're just going to give any variable usually the default variable people use is i and you want to set the value of this variable to something and because we're looping through something we're going to start with 0. then we go ahead and say i we're going to go up till a certain point how many times do we need to run through these layers well we need to run through it for as many layers as there are so we'll say less than our layers dot length now our layers has five different layers in it and that means we're going to go from zero till it reaches below fives and then we're going to add our increment which just changes the value of i each time this might not make sense quite yet but now if we go ahead and say alert i we're going to get 0 1 2 three and four now that just shows us that with this little tiny bit of code we can run through a whole bunch of different operations without having to type that code five times let's say just to summarize we have when we click the button it runs that function and then it runs whatever happens inside the for loop for as many times as there are layers correct and if i wanted to use say not layers if i just put the number 10 then i can choose that it's going to go through and do this 9 different times or 10 times now you see that we can get the value of i each time so it starts at 0 and ends at 4 because we have 5 layers in order to get each of the layers we can simply say layers we have our layers here and we need to connect i to our layers we want to get layer 1 layer 2 layer 3 layer 4 and layer 5. the way we do that is by just using brackets here and by saying layers i it's going to get the first layer the second layer the third layer the fourth layer so if i say run this you can see i'm going to get av layer av layer a b layer av layer doesn't tell us exactly what we're looking at so what i can say is grab the dot name of each of those and now i'm going to get my solid solid 2 solid 3 solid 4 and solid 5. so now we know that we're accessing each of our layers one by one but in this case we want to add a slider effect and then link that to the scale first we need to add a slider effect the slider effect we're going to use is under effect expression controls slider control now the way we're going to add this is by first we're going to refer to our layer the current layer we're looking at and again this is going to go layer one two three four so layers i just refers to the current layer that we're working with in this loop what we're going to do is then say dot effects this refers to any effects applied to our layer all of the things that are visible here in the effect controls panel and then we're going to add property the way we add any effect in scripting is by adding a property you can also add properties to things like masks or shape layers but in this case we're going to be adding an effect property now the way we do this is by just providing it with the name of the effect we want to add so what i'll do is say slider control make sure the casing is correct and now if i run this i'm going to select all five of my layers and hit run you can see now all five of the layers are now going to have that effect control applied so all we have to do is loop through all of our items refer to the effects and add the name of our effect we want to add i see okay so the part that i was getting a little bit confused on and i'm glad that you you explained it but so add property in after effects a property would be something like the scale property correct but in this case in scripting property is a little different in this case your slider control effect is a property correct i would say the best rule of thumb is almost anything that has a drop down like this or has a keyframe toggle is a property oh okay so i see yeah my mind is slowly like dissolving and then reforming inside my brain so perfect that's how we learn this is perfect now that we've added our slider control uh well we need to think about what we would do practically in after effects without a script to achieve what we're trying to achieve and that would be to apply a scale expression and link that to our slider so what i'm gonna do first is we should probably set the slider control to be some value first like a hundred like so that means a hundred percent of our scale then what we'd want to do is we'd set an expression and we would probably link it to here and then we would have control so let's go ahead and actually remember since we just made this let's just copy this expression and we're going to use this inside of the script to apply it so let's take our layer our current layer which is layers i and now let's apply the scale expression the way we do this is we first want to refer to the scale property the easiest way to do this is just to say layer dot property and we want the scale property if you are i should have this as a side note if you are using a different language of after effects the way to do this is much more complicated so we want to refer to this property called scale inside of our layer and what we can actually do let's alert this and see if we get something i'll just select one layer so we don't get a million pop-ups and you can see we get a property property doesn't really tell us what we have here so let's say scale dot value we can get the actual value of our scale if i run this i i then get an array full of my x y and z scale values so this means it will provide the z scale even though it's not a 3d enabled layer correct because the information is still contained inside of there for when you turn it to be a 3d layer it's just it's just hidden so now we know that this is the way we refer to this layer scale instead of dealing with say the value we can actually just say expression what is the expression um actually if i alert the expression since i have an expression applied it should give me the text of my expression here so yes we we get our expression but the way we can actually instead of just reading it we want to set it to be a new expression so we'll say expression is equal to our expression text except this needs to be inside of quotes that way it knows it's a text and i'll use single quotes because if you notice in our expression itself it already uses double quotes so i'll use single quotes to contain my expression and because this is this is two lines here i'm going to go ahead and just make it one line so it it looks nice you got a question is your first single quote in the right spot it's not thank you is this what it feels like to be made like all the time oh yeah if i were to say put like a random random character in here it would mess up the entire script so sometimes those little tiny mistakes are very hard to find so we're setting our expression of our scale equal to this this bit of text expression is just text so we copied and pasted our text inside of here so let's go ahead and make sure we have no expression and we'll remove our slider controls of all of our layers and let's go ahead and just use this one solid here i'll run my script and when i hit run you can see now we have our slider control being added and if i go down to my expression you can see it's now applied if i make it a little bit bigger here and if i scale up my slider control it's now going to scale my layer so maybe one last thing i want to do is because it's our slider control starts at value zero we want it to be a hundred so our layer is at one hundred percent so let's let's do that one last thing and this script should be complete so in order to do this we're going to grab our layer layers i we're going to grab effect number one because in this case we just have one effect applied and that's our slider control if you had other effects you'd want to grab the right number in this case this one would be effect number three effect number two and you just want to put the number of the effect in here then we need to refer to the slider itself can i just get go just to clarify the effect counting you start at one unlike array counting where you start at zero effects you start at one correct so if i had a bunch of color controls it starts at one two three four and then in this case my slider v5 i'm not starting at zero so because we have a simple setup we're going to refer to the very first effect we have we start with zero effects but then we apply our slider so it's effect number one then we need to grab this slider property in order to change the value we can't just grab the effects we need to say dot property and this the slider control only has one property this slider here so property number one that's going to refer to our slider then we can say we can go ahead and alert the value of this if we want to make sure we're getting it so if we go ahead and run this to try and see what the value of our slider is you can see we get 0 which matches our slider value so we know that refers to our slider instead of just grabbing the value in order to set the value we need to say dot set value and we need to put in whatever number we want this value to be in my case i want this to be 100 so i'm going to say set value to be 100 so again to reiterate this we're going to grab our layer the first effect which is our slider the first property of that effect which is our slider itself and then set the value to be a hundred so if i run this script now select my layer and hit run now we have our setup complete where we have our slider with a value of 100 we can now modify it now to do the final test you can grab all of our layers all five of them here run our script and now all of them have the individualized slider control applied we can now go through and change it and everything is set up nicely geez and i mean so doing this even talking through step by step this didn't take you hardly any time if you were i mean if you were to just do this on your own i bet it'd take you like under 10 minutes like from here would we put this in like our scripts ui folder yeah so the easiest way to run it if you're not using something like this where we can easily like connect it you could save it into your scripts folder where uh all these other defaults that come with after effects are the script ui panel however is for a different type of user interface which is actually quite complicated to make this is a floating script which means it's just a floating panel but dockable panels are what go in the script ui panel and these are ones that sort of uh just kind of fit right into the ui like this okay got it so people obviously can find you at um the nt productions youtube channel uh right what other where else can i find you around the internet um i'm on instagram at nt underscore productions and uh i also have a video hive nt underscore productions i believe uh well i'll be posting some more useful scripts and plugins and that sort of thing coming up awesome all right nate well thanks so much yeah thank you so much for having me all right so that is it a huge thanks to nate for taking time to do this and if you want to download the very script that we just watched nate make there is a link for that in the description of this video um aside from that leave a comment if you have any questions and of course hit the like button so youtube knows to promote this video um everywhere uh okay that's it thanks guys and have a good day [Music] you

Channel: ukramedia

Views: 4,012

Keywords: coding in after effects, coding in adobe after effects, how to code in adobe after effects, how to code in after effects, extendscript, writing a script for after effects, how to write a script for after effects, how to write your first script for after effects, adobe after effects, adobe after effects scripting, how to, motion graphics coding, ukramedia, ukramedia.com, andrew marston, nate lovell, nt productions, extendscript tutorial, extendscript for after effects

Id: 6AWYsTC76gs

Length: 27min 18sec (1638 seconds)

Published: Mon May 24 2021