That sounds like a lot more work.
It is. So why would you want to bother?
That sounds awesome. What are the drawbacks?
There’s very little documentation for these panels in general, and almost nothing After Effects-specific. (Though I’m trying to help by posting this.) A decent chunk of the existing documentation is out of date, too.
There’s a lot of stuff that works in one Adobe app but not others, or that only works in one version of AE. Not only are they incompatible with any pre-CC versions of AE, there are different versions of CEP (the Common Extensibility Platform, the framework the panels run on) for each application release.
There are a lot of things that seem like they should be easy to do but require workarounds. Even getting a totally blank panel to show up takes work, and possibly a registry edit.
And you’re going to have to learn a lot about callback functions.
So you still want to make one, huh? Here’s how to get started.
These panels have a standard structure and a couple required files. You can build the whole thing from scratch, copy one of Adobe’s sample panels, or use a template generator. You’ll want to give the project one of those reverse-URL-style names, e.g. com.yourname.panelname.
You’ll end up with a structure that looks roughly like this:
For AE to be able to see your panel you need a manifest.xml file. This is where you specify which applications it’s for (and which versions thereof), where CEP should look for your ExtendScript files, and other basic-but-important stuff like what your panel is called and how big it should be.
My development setup (Adjust to your own needs as necessary, there’s no one “right” way to work):
- Bitbucket/SourceTree: Unlike GitHub, Bitbucket private repositories are free for up to five users. Version control is really important, as there are so many moving parts that I find myself breaking things on the regular.
- Brackets: it’s a nice text editor to develop in, and has a very useful extension by David Deraedt called
- Creative Cloud Extension Builder that will create CEP extension templates for you. Once I’ve created a new panel, I move it from the directory AE wants it in to where I’ve set up my Bitbucket repository, then use Link Shell Extension to create a symbolic link from there back to the CEP folder. That way, I don’t have to deal with permissions issues, but AE still sees the extension. (Note: I’m on Windows; you can do something similar on OSX with different tools.)
- Bootstrap as an HTML/CSS/JS UI framework. The Cyborg theme gets you pretty close to something Adobe-ish (Adobish?), though I’ve had to customize a lot of elements — panels usually need to be much more compact than websites. Bootstrap is widely used and well-documented, so almost anything you want to do with it is a quick Google search away.
- Chrome for remote debugging (Safari used to work, but is no longer an option with CEP 6). Since I’m only making an AE-compatible panel, my .debug file looks like this (replace the extension ID with your own panel’s name):
<?xml version="1.0" encoding="UTF-8"?> <ExtensionList> <Extension Id="com.yourname.yourpanel"> <HostList> <!-- AfterEffects --> <Host Name="AEFT" Port="8092" /> </HostList> </Extension> </ExtensionList>
And hey, with remote debugging you can test CSS edits in Chrome’s dev tools and watch your panel update live in AE!
- ExtendScript Toolkit for debugging the AE side of the code
- Trello to track my progress
Okay, now that I’ve made a panel, how do I open it in AE? I put the folder in the right place, but it’s not showing up under Window > Extensions!
By default, unsigned extensions are hidden. Here’s how to show them. You’ll need to do this for each version of AE/CEP you’re developing for.
Are my end users going to have to edit their registries, too?
Let’s hope not. But making sure they won’t have to means more work for you.
Once you’ve created a finished panel, you can pack it up into a signed ZXP file using ZXPSignCMD. Follow Davide Barranca’s excellent tutorial for this process. Really, go read his entire blog. There’s a ton of good stuff in there.
There are a few options for installation, some more automatic than others:
- Distribute your panel via Adobe Add-Ons
- Use Adobe’s command line installer
- Use ZXPInstaller, a drag-and-drop version of the command line installer. Works well for me, even though it seems to think AE panels are Photoshop panels. It still puts them in the right place.
- Bundle PS-Installer with your script. This will require some customization to make it work with After Effects, as it is Photoshop-specific.
Note: DO NOT use Adobe Extension Manager to install panels. It has been discontinued, and it puts AE extensions in the wrong place. While we’re at it, you may see references to Extension Builder 3. Don’t use that either. It has also been discontinued, and doesn’t support AE.
Further reading, because this post is already 1100 words long:
You’ll want to bookmark Adobe’s offical documentation: https://github.com/Adobe-CEP/CEP-Resources
There’s lots of good stuff in the cookbooks, and the links at the bottom are worth a read as well.
Hopefully that’s enough info to get you started. Panels are cool, once you’re through all these extra bits!
Next up: sending data back and forth. This is where it gets fun.