cepheader

Getting started with HTML5 (CEP) Panels for After Effects

I’ve spent a lot of time over the past few months messing around with HTML5 panels in After Effects. There’s so much cool stuff you can do with them, but I’ll be honest: they’re also a lot more work to get working than standard scriptUI panels. That goes for both developers (“What is this ‘manifest file’ you speak of? Wait, there are two asynchronous Javascript engines running at the same time? And how the heck do I package this thing for distribution?”) and end users (“You mean I actually have to install this version-specific extension instead of just copying and pasting a file into a folder? And that process might involve the command line?”)

That sounds like a lot more work.

It is. So why would you want to bother?

Because you can hook into any of hundreds of thousands of Javascript and node.js libraries. You can connect your AE comps to external data or even hardware. You can build elaborate, lively UIs that are way more interactive than scriptUI panels. And everything you learn about building said pretty UIs is transferable to general web design; you’re not working in some weird specialized language. You can even make panels that span multiple CC apps — and make the apps talk to each other through them.

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:

CEP-structure

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.

Beyond that, if you’ve ever done website design things should look pretty familiar structurally: an index.html file that loads external Javascript and CSS files.

One of the other key pieces you’ll need is a Javascript library called CSInterface.js. Remember when I said there were two engines running at once? Well, CSInterface is the bit that enables the Javascript engine that runs the panel UI to talk to the ExtendScript engine that runs the AE commands. They’re entirely separate, which is both good (you can do two things at once!) and bad (sending data back and forth can be tricky!).

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.
  • Bracketsit’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.

11 thoughts on “Getting started with HTML5 (CEP) Panels for After Effects”

  1. Hi, can you post a link to a working zip file with a simple extension and instructions on where you deployed it? I’ve been beating my head through the wall trying to get one working in AE CC 2015.

      1. Thanks for the quick reply Victoria. I’ve actually downloaded the samples, extracted them into the /Library/Application Support/Adobe/CEP/extensions folder, turned off signature checking as all the other blog posts state and am able to get the extensions menu to show the samples. When I click on ANY of them, nothing happens except for the built in “Adobe Color Themes” extension. I went in and edited the manifest.xml on more samples to include AEFT and a broad version range [10.0,20.0] just to be safe and still the menu items do nothing. I can’t figure out for the life of me what’s wrong w/ my setup.

        Thoughts? I was hoping to see a working example you created to diagnose the problem.

  2. Hi Victoria

    How can I make a Installation panel that user can use to do some things like I have made the script and it works they way I want but I don’t want the code to be visible. Thanks in Advance

  3. Hello Victoria
    Which exactly version of Brackets and Creative Cloud Extension Builder are you using? It seems not all of them can be friends with each other :) Thanks!