Hello everyone in today's After Effects tutorial we're going to be taking a look at how to create a simple extension.
Now an extension is basically a combination of HTML, CSS,
javascript, as well as scripting or JavaScript extended.
Today we're going to be taking a look at creating this color palette manager, which simply works like this.
And if you want to check out the guy who made that videos channel
Go ahead and go to the link in the description down below. He makes a lot of really cool motion graphics videos, and he's French.
So like the video showed the basic way this works is we have our footage here.
We click on the Add button. It then analyzes our footage.
And then once it's finished analyzing our footage,
it'll pop the color scheme it finds or color palette, into the extension over here. From there
we can actually go back into one of these compositions, and
we can go up and click on the comp button on any of these, and it's going to add these colors into the composition.
Now the basic difference just for those of you who don't know, between a script and an extension, is an extension is basically
HTML that controls scripts.
And a script is something that just controls After Effects. So with this we have both the advantage of having custom UIs based on html5
and css3, as well as the functionality of ExtendScript.
So as a preface if you're not familiar at all with coding whatsoever, this tutorial might be a little bit
too advanced because we're not going to be going line by line through the code.
We're going to be coding a little bit and explaining a lot more.
So basically inside of our folder for our extension,
We're going to have our index.html file, which is going to be our main UI. We'll have a JSX folder with our After Effects script.
Another JS folder with our main JavaScript functionality, as well as a CS interface library,
which is going to link between After Effects scripts, as well as the interface.
Then we have a CSXS folder with our manifest file. This is an XML file that's going to contain basically our script's data.
If you've ever programmed for Android or iPhone it's going to be a lot similar to that when we're defining our
basically ID for our extension.
Then we have our CSS folder, which is just our Styles and an assets folder with our logo.
One thing to note is inside of our JavaScript and libs folder, our CSInterface.js version is very important.
In the description you'll find a link to this github repo where we have different versions of
CEP. And again CEP is just the bridge basically between an After Effects script and all the HTML code that we have.
So you'll want to download a different version depending on the compatibility you want with different versions of After Effects.
If you get version 4
which is the most early version, it's going to work with everything from After Effects CC 2014 and above.
And if you get version 8 it's going to work with CC 2018 and above. So I'd recommend
starting off with version 4 point X, and getting that to get started.
 
Once you download this whole repo you can just going to the cep version folder of your choice,
copy and paste the CSS interface JS file into your JS Libs folder and
ensure that your version is the correct one.
There is one more thing we need to go over before we can start getting into this, and
that is setting up our PlayerDebugMode on Mac and PC.
This is basically going to allow us to run third-party extensions,
without having any issues inside of After Effects. If you don't do this you're unlikely to see your script show up in the window,
extensions area.
So on Windows what you're going to want to do is launch regedit.exe, and
this is going to allow us to edit our registries.
Then we're going to want to go to H key current user.
We'll go into software...
Adobe...
Then you can see we have CSXS, 5, 6, 7, 8, and 9.
All of these are going to be the versions of CSXS,
and any of the ones that you want to be using,
We'll need to make sure we have a property called PlayerDebugMode and the data needs to be set to 1.
So basically just right click on it, click on modify, and ensure that the value data says 1, click on OK
and make sure all that's saved.
Just to be safe,
I'd recommend going through each version, from 4 to 9, or whatever versions you may have and making sure all of them are debugged.
And then over on a Mac to do this you simply need to run terminal and then type in, defaults, right,
com.adobe.CSXS. PlayerDebugMode 1
Again, you'll want to do this for each version of CSXS or our CS Interface that you're going to be using for After Effects extensions.
Alright so now that we've gone over the basics of how this is all functioning, we can go ahead and get started.
I should mention to get to your extensions folders by default on Windows you'll want to go to your app data
So type in % app data, and then % again.
Then we'll go into Adobe...
CEP...
Extensions.
On a Mac you'll want to go to library...
application support...
Adobe...
CEP, and extensions.
So let's go ahead and get started. What we're gonna do is just create a new folder. I'm gonna call this our color palette
Two. And like I said, we're not going to be writing everything a line by line here.
So I'm gonna start off by taking all of our files inside of our color palette manager, copy them,
and I'm gonna paste them inside of our color palette two panel.
Now if I were to try and launch this, it's actually not going to change anything.
The first thing we need to do is open up our
manifest file, which is sort of the first thing that gets initialized when we call this extension.
So to start off as you can see we have our
manifest file here. It contains basically a list of XML properties that are going to correlate and tell the extension what is going on.
So let's go ahead and just go over the basics here. We start off with our extension manifest.
This is going to include the version number, which is going to be the version of our CSXS.
We have our extension bundle ID, which is currently set to com color palette.
I'm actually going to change this to palette 2. The reason for doing so is we need to change our bundle ID,
As well as our name to make sure that After Effects can distinguish this tutorial script from our original color palette manager.
So I'm just going to change that to com color palette two.
We got our extension bundle version which is just the current version of our extension, the extension bundle name,
which is the name of our bundle here? .I'll just call it 2 again.
Then a link to the XML scheme.
Then again down here under extension list. I'm going to change our extension ID,
change palette to palette two
Hosts list and hostname are very important as well. This is going to define which Adobe programs
this is going to run in, and which a version of those programs it's going to run in.
So basically this is going to run in After Effects
version 13 and above. If you wanted to specify certain versions, you can simply put in brackets,
and then basically input an array here. So if we wanted version 13 to 14, we could just do that.
But if you want one version and above you, simply just put in the one string.
Then under required runtimes we have our CSXS and version 4 again. Just to make sure that everything gets linked properly.
We have another instance of our extension ID, so I'm going to change that to palette 2.
Then under resources we have our main path, which is going to reference the first thing that loads up, which is our index.html file.
And because our manifest XML file is in a
CSXS folder, we need to go to the root folder, and then our index file.
Then we're also going to reference our script path for our After Effects script that we're going to be using.
Inside of our After Effects script we're going to have a bunch of functions to do everything for us.
Then we have the UI defined here. It's a panel type UI called color palette manager two.
And then we have the height, width, min heigh,t mid width,
max height and max width. If you set all of these to the same value,
Nothing in your UI will be able to scale up or down, so I like to do this by default.
But if you do have a
dynamic UI, you can go ahead and change the values for your Min and Max size.
Alright, so I'm gonna go ahead and save this manifest XML file. I'm gonna go and close this color palette manager and restart After Effects.
And once it loads up for us, we'll go up to window...
Extensions... and as you can see we now have color palette manager and color palette manager two.
Now this is literally a basic carbon copy of the previous script, so what I'm gonna do is reduce our HTML,
Javascript, JSX, and CSS files just a little bit, and then we're gonna go over some basic coding inside of there,
that should help you get started in making your own extensions.
So what I'm gonna
do is go back into my color palette two folder,
and load up all of my files here in my text editor or coder of choice, which is sublime. So load my
index.html. I'll load up my aftereffects.jsx file, my main.js file and
my styles.css file. So one thing
I should mention is anytime you make some major change to your manifest XML file, it's highly recommended that you restart After Effects.
Alright, so I've got our bare-bones
HTML file here, and this doesn't even include our logo, so I'm just gonna close the extension here.
So this is just a basic HTML file here. At the top
we're referencing our styles that were using which we have a styles.css
with custom styles, as well as a one called topcoat desktop dark, which I use for custom UI elements like buttons.
I'm going to go ahead and change the title here to color
palette manager two. And we also start off this HTML file with a script that
basically won't allow anyone to right-click on our extension.
Because basically if they right-click on our extension,
they'll be able to do things like copy and paste, and I don't want them to do that so I just put in this code here.
Inside of our body we're gonna have three sections.
The main div here is going to be for our logo and that area.
The next one is going to be for all of our color palettes. And the last one is going to contain our
button as well as any text that we want to the user or ourselves to debug.
So to start off we have our main div here, and make sure you check out the github repo below to get all this code.
We're gonna start off by making a div inside of here, and we'll just call it
logo
And I'll go ahead and end that. And inside of this div we're just gonna have the image for our logo here.
Which again if we remember is...
Inside of our assets folder.
So what we'll do is we'll say an image tag with the ID
Call it "logo image"
and
for the source,
we're just going to say our assets folder, and the file called logo.jpg
Then I'm also going to set up a quick style just to set the size up here. So say style equals
So the width will say
480 pixels.
For the height let's go with 120 pixels.
And then of course we'll need to close our tag there.
Now let's go ahead and just run this to make sure that it's working alright.
I'll make sure all of my files here are saved, and click on run.
As you can see we now just have our logo as well as an empty UI below it.
So inside of our span class with a body, this is where we're going to put in all of our palettes.
We're not going to be generating these right off the bat,
we're going to be using javascript to do so.
But we need to set up a quick div here just to put them all inside of. So inside of our span
I'll create a div with the ID called palettes.
Again, I like to do some inline styles here.
Just make the width
490 pixels, and the height
400 pixels.
And then of course end that div. So everything we put within this palettes div here
it's going to be our actual palettes and as well as our button to add it to the composition.
Then within our last div here you can see I looks like I actually forgot to end or start the span,
so we're actually going to be creating the starting span for this, so we'll say
span
And we'll give it a class called buttons.
I'll set its style to be basically the same as these, so...
I'll just copy and paste this. The width is good, for the height, I'm just gonna make it 45 pixels...
and close that.
Inside of our button span class I'm going to add a button.
This is gonna be the main button to run everything. We're gonna give this an ID called the add button.
and
Because I'm using a custom CSS library the top coat Desktop dark. I'm going to set this class to a topcoat
button
large.
That's just going to be a custom UI element based on that CSS.
And then we'll end this button and for the inner HTML we're just going to use a plus button. One more thing
we're going to add to the right of this is a span with the ID called "helptip".
And we'll end that. Basically what this is going to be is things that we can display to the user
or ourselves, to see if we're getting the errors of their JavaScript, etc. So we'll just say this will include
Debug info for
Everyone.
Alright, so now if we go ahead and save this... and
relaunch it. You can see we now have our main color palette logo. We have our main area here with a scroll bar
that's currently non-use. As well as our button, and some debug info.
Alright, so to finish off this we need to go ahead and include js files. The first one
we're going to use a script, and
the source for this script, let's go ahead and check here. It's going to be inside of our JS Libs folder.
So for the source we'll say - libs, and it's called CSInterface.js
And we'll close that tag here.
The second one is just in the directory above, in the js folder itself,
and the source for that is just going to be our js folder and main.js
And this is going to be important that we always reference at least our CS Interface.
We may have just our Java Script in our HTML file, however
we need to make sure that we have our CS Interface CEP library to communicate with the different languages.
Alright, so now let's move on to our main.js file. I've gone ahead and reduced it a little bit,
I'm gonna be going over all the code in a minute.
But I want to start off by teaching you guys something, and we're gonna be adding an event listener as well as using a
custom method inside of the CEP library to run some code inside of our JSX file.
So we start off here with a main function.
We've set up some variables, one called palette counter, which is just going to count how many color palettes we create.
Then we have something called a CS Interface. Now a CS Interface object is basically what I've been talking about with all this
CEP and communicating between languages. We can call this later on, which we're about to code,
to basically evaluate any function within our aftereffects.jsx file.
so if we wanted to call this main function, we could say something like
evaluate the script called aftereffects.jsx, and
then run this main function. We can also use the CS Interface.js library to pass our arguments into these functions.
So after that we basically have a simple add event listener for our logo. We've just added an onclicklistener
and every time we click on it, it's going to use our CS interface to open a link.
So if I click on this it's supposed to take me to basically my VideoHive portfolio.
It's not gonna work right now because we're missing a big chunk of code, and we need to code that right now.
So down below our event listener to go to our website,
we have a bunch of code that gets initialized by something. And the way we want to initialize all of this code
which is basically generating our color palette, is by clicking on this Add button here.
So if you're not familiar with JavaScript the way we can get elements is by using
getElementByID(), getElementsByClass(), or get them by other properties.
So I'm going to say document.getElementByID()
And what this basically means is inside of our entire HTML
document, we want to search for anything with the ID name that we're about to input. So if we look for a button.
Our button's name or our button's ID is add button so I'll copy that and
inside of document.getElementByID() inside of a string say "add button".
And I should probably use single quotes to remain consistent here.
After we have gotten our add button, what we need to do is add an event listener.
I just need the opening bracket here because I've already got all the closing ones down below. For our add event listener
we're going to pass through a couple of arguments. The first one is the event. So for this
we're just going to say it click.
Then we'll also say function.
Have this code here. So anytime we click on our add button, we want to do this function here,
which includes all of this code.
I'm going to set up some initialization things. So like I said we have this palette counter up here to count how many times
we've created a color palette.
And I said anytime we click on the Add button we need to increase it.
So since we've now clicked on our add button we need to say palette counter
paletteCounter++, to increment it up by one. And then because I don't want to have to worry about this CS Interface
Object being global, I'm going to create another CSInterface in here, so I'll sa
var addInterface is equal to a new CS Interface.
And I'm just again doing this to make sure that we don't have any conflict with this previous CSInterface that way we have property
here.
Below that I'm going to set our color values appeared back to undefined again, and the reason we're doing that is because
we're gonna be running JavaScript Extended, JavaScript, HTML and CSS.
Because these programs don't run in a sequential order. They're all running simultaneously and are asynchronous,
We need to make sure that we have variables set to undefined until we need to define them. Until the absolute
last moment. I know it's a little bit complicated,
but basically if we didn't set these color values to undefined right here, it would give us an error.
So now down below this we're finally going to get to use our
custom library method. So the way we're gonna do this is we're going to grab our first interface here,
which is addInterface, which is our CS Interface, and we're gonna say .evalScript()
And this is going to be a function here, so
I'll open
parenthesis and
again, we have all of the ending code down below, so I only need an opening paren. And now inside of a single quote string
for the first argument, we're going to call our first JS function. We're going to call the JSX function that we want to run.
So like I said before,
we want to start off by running our main function here.
So what I'm going to do inside of our
quotes here, is say main(), with our parentheses. And just like that it's going to run any time we click on the Add button,
It's going to run our main code here.
And then also we're going to say for the second argument, a function with the variable res going through it.
And a beginning parenthesis as well.
Underneath here, we're going to set up our color values finally, which remember,
we just set to undefined. But now we want to set this equal to
JSON.parse(), and we're going to be parsing
this res variable that we just arbitrarily passed through this function here.
So basically color values is going to be equal to whatever returns from this main function here.
And if we go into our main function in the JavaScript file, we're going to be returning colors,
which is an array of colors that we need our palette to be equal to. So now, once we run the main script evaluation,
the color values is going to be set to whatever gets returned from the function that we called or main() here.
And then I have a couple of variables set up here that I deleted. One called thisSplit which is an array.
One called allHex, which is also an array.
One called a div, and one called a line break.
Alright, so that's the basic coding that I wanted to teach you guys for this javascript file here. If we look down below,
let's go over this code here.
So basically we're gonna say, if our color values is not false.
If we have if we have some values in that array that we're getting back, then we want to do all of this code.
And what is this code doing? Well the first thing we're doing is we're creating a div element.
Called a palette.
This palette is going to be containing all five of our colors, as well as our comp button to add it to the composition.
So we're just going to set up some styles here, by saying palette.style.width and height is equal to these pixels.
We're going to set the ID for the palette to be palette plus the palette counter.
So the first time we click on the button, it's gonna be palette 1, and palette 2, then palette 3.
We're gonna set the palette class to palette holder, because it's going to be holding everything. And then we're going to get the palettes div.
Now if you remember,
we have this main palettes div and I said every palette is going to go inside of here in this area right here.
So what we want to do is grab this element. So we'll say document.getElementByID() palettes
And we're going to append the child called palette that we just created right here. Now a pen child basically means
you grab an element, and
you basically make a child of it, which means that it's below it.
So this image tag right here with our logo image is a child of this div called logo.
And this div is a parent to this child.
So after we've added that, what we're going to do is go through a for loop for the number of color values that we have.
Now the number of color values we'll have is always going to be five,
because we have five colors in each palette,
we're going to go through this loop five times, starting at zero, and going up till four.
Remember arrays in programming start at index zero and go up.
So we're starting at zero and then going up till we get to the length. Then we're going to basically parse all of the information.
We're going to take all of the information from our colors array, and we're going to get the RGB values from it.
Then we're going to create a div element to separate things.
So then we're going to create a div element for each of our colors here.
So we're going to say div equals create element,
and we're going to be making a div and that's going to be a nice 80x80 square.
Then for the background color,
we're going to use the values that we just pushed into this allHex array, and we're going to set that equal to that.
Then we're going to set our attribute for these little square boxes of color to be color panel.
And then finally we're going to reference our paletteCounter and append our
square of color. Then after we've created five colors for our current palette,
we're going to create a delete button. So we'll say document.createElement("button").
We're going to setup the width and height to be a square 60x60.
We'll set the margins to be all 10 pixels all around.
We're gonna have the inner HTML or the text of the button to say "comp".
I'm going to set the attribute to be a custom class called topcoat button which again is referencing our CSS.
We're gonna set the ID to be our palette counter, and then an
attribute for onclick called addtocomp. Now when we set an onclick attribute whenever we click on it,
it's going to run this function called addToComp(), which we'll go over in just a second.
Finally, we're going to get our palette counter, our current one, and we're going to add the delete button to it.
And then we're just going to add a line break.
And add that to our document. That way we can have multiple color palettes,
and they're not going to be all unorganized. So then of course make sure you close out all of your parenthesis and brackets.
A bit messy sometimes, especially when you're using evalScript(), but it should make a fair bit of sense.
So like I said when we onclick our delete button, which really isn't a delete button
I should say, this is our addToComp button.
Originally, it was gonna be a delete button, but it ended up just being an add button. It's going to run our addToComp()
function and pass through
"this", which is going to reference our button itself.
What we're gonna do inside of this function is say thisPalette is equal to our delete button or addToComp button.
Its parent element,
which is going to reference the palette we created for this individual color scheme.
Then we're going to say these colors is equal to all of our square blocks of color inside of here. As you can see we're
going to say thisPalette.getElementByClassName() and all of our color panels,
which again are these square colored panels. Then we're going to create another CS Interface inside of here,
just to make sure we have proper scope.
This time we're going to evaluate our script,
and we're going to go into our After Effects script file and
go to the function called generatePalette().
As you can see, this is basically going to generate our palette inside of After Effects,
Pre-compose it and add it to a composition. So as you can see we have our generate palette function ,and then we're also
passing through multiple arguments here. We're going to be passing through our color one, color two,
All the way up to our color five.
To make sure that we can have all of these colors inside of our script.
We also have a couple of simple functions to convert RGB to Hex, and these are pretty straightforward.
Alright, so I know that's been a lot of explanation and not a lot of coding,
but this kind of thing does take a while, it ends up being hundreds of lines of code between the different languages.
I'm going to assume that most of you guys
understand basic
CSS, where you call either a tag an ID or a class, and then you can set values like the width, height, the font size,
whether it transitions, the opacity, and much more. So this is just basic CSS here.
Just making sure the padding and sizes are all good. One more thing
I want to go over briefly here is our actual
After Effects scripting code. If you check out my youtube channel or check in the description,
there should be a link to a color palette scheme.
There should be a link to a color palette generator or color scheme generator.
And this is a script that I've created before for this channel, and what I've basically done is I've organized the code a lot more,
created more functions so that you can better tell what's going on, and
I've basically used all of that code previously, and made it into an extension. And the reason I've done that is
it's incredibly useful to make things into extensions, because dockable scripts although very useful,
they have a lot of limitations in terms of UI design, and
animation. And they have a lot of problems throughout different versions of After Effects. So using
HTML and CSS rather than just built-in scripting UI options,
can make things a lot easier and more customizable for you.
So the basic way any of this works is just like any other script. This is all recycled code.
We're gonna go through the main function and then basically run through a bunch of other stuff here.
We're gonna set up our comp and inside of our setup,
we're going to go into analyzePixels(),
and we're gonna analyze pixels, and end up doing things like calculating colors, cleaning up some text, and
just some other mathematical algorithms to get colors. So again most of this is recycled code,
and if you need to look at how this all functions,
I've got a tutorial already created for how all of this works.
And it comes with the free script as well. So now that we're gone ahead and coded all this
I'm gonna save all my files, go back into After Effects, and let's test it out!
So I'll launch my color palette manager two, and I'll dock this in the side here.
So I've got a couple of images here. I'm just going to bring into a new composition. So the first one...
I'm gonna go ahead and select my comp, make sure I have my layer here and click on add.
As you can see we have nice checks here it says
"Please select one layer".
So we need to make sure we have a layer selected, click on plus...
Now as you can see it kind of snapped back in here. This is a problem
I'm not sure how to fix yet. If you are aware of how,
I'd appreciate a comment letting me know why it would snap back like this.
As you can see it's gone through and created our color palette for this image. Let's go ahead and do this one as well.
Click on plus. And the time this takes will depend on this size of your video.
1080p usually takes roughly 10 seconds, but anything larger can take a lot longer.
So now we've successfully created a couple of color schemes here, what I can now do is click on one of my comps and click on the comp button to add it.
And I can actually go in and add a bunch of these if I wanted to. Just keep going in and adding more and more.
And this is just a great way if you're looking to do some design.
And need to konw what colors match the scene. This will really help you out.
So two more notes
I want to make before we close out this tutorial. I didn't do much with our debug help tip here.
So what you could do is say you had some code that wasn't working.
Say you went into your add button here, and something wasn't working at the beginning. What we can do is say
document.getElementByID() and
let's go ahead and check again what we called the ID for this. It's called a "helptip".
So we'll say helptip, and we're going to set the inner HTML. Which is basically referenced in the text equal to
"You are now clicking on the Add button". And now if I go ahead and run this...
It currently says "this will include debug info for everyone".
And I'll run this, and now it says you are now clicking on the Add button.
So if you don't want to use alerts which you can in both JavaScript and JavaScript Extended,
what you can do is have a text element that you can update, and you can display values in here and check if they're
undefined or null, and find out what problems you're having.
And one cool thing about this script, is that we can actually scroll down here if we add more color palettes.
Which allows us to have a nice,
concise UI with lots of color palettes. One more thing you might have noticed is if we relaunch our palette here,
you can see it doesn't maintain the same colors at all they all disappear.
What you could do is implement a function that basically writes the
color information to a file, and then every time you relaunch the program, it will reload those color palettes, and
basically run through this function again to get all of them generated.
Alright guys, well that's gonna do it for this tutorial.
I hope you enjoyed! And of course if you have any questions, be sure to leave them in the comments down below.
Be sure to check out all of the code on github, all of the links in the description to the CEP Library,
as well as references to other videos,
which should help you understand these better. And of course hit the like button if you enjoyed, and the subscribe button if you want
to be notified of when new videos come out!
Thanks again for watching this first tutorial of this kind on my channel. How to make a simple extension.
We'll see you guys next time!
