Category Archives: Tutorials

Tutorials in Photoshop, After Effects and other animation and design software.

HTML5 (CEP) Panels for After Effects: Fixes, hacks and workarounds

I’m collecting a bunch of handy little code snippets and solutions from various developers so they don’t get lost. Here are a few to get things started:

CEP 6.1 changes

CEP 6.1 (CC2015.1) includes changes to node.js implementation.

Adobe has posted a sample panel showing how to work in the new structure.

Command line switches

You can use Chrome’s command line switches to change panel behavior and/or limits, as well as for debugging purposes. Add them to your manifest.xml file, like so:


Need a really long console.log()?

From Bruce Bullis:

Here’s a fix to the Chrome Debugger’s unwillingness to scroll past 99 Console() items, for extensions running in current Adobe apps.

Install Styler – Chrome Web Store
Go to your debug page http://localhost:8001/ (or whatever port you’ve designated)
Click on Styler extension icon (to right of address box)
Add “html /deep/ * { min-width: 0; min-height: 0; }” to the css.

Shorter filepath to CEP cookies

Since CEP panels are really just browser windows, you can store settings in cookies. If you need to access those cookies directly, they live here:


H/T Zack Lovatt

Refreshing the panel without closing and reopening it

If you’re just working on your UI and not interactions with the host app, you can add a refresh link to your panel and save yourself a few clicks.

<a href="javascript:history.go(0)">Click to refresh the panel</a>

H/T Jonas Hummelstrand

Want to talk to a bunch of devs?

Join the Motion Design Artists Slack. We’re all figuring this out together and happy to help.



HTML5 (CEP) Panels for After Effects: two engines for the price of one

As I mentioned in my previous post, one of the keys to CEP panels is that they contain two distinct Javascript engines: the more modern one that runs and interacts with the panel UI (in what’s basically an embedded Chrome window), and the ExtendScript (JSX) engine, which is based on an older version of Javascript and interacts with the host application.

They’re asynchronous, which means they’re perfectly happy to ignore each other and run on their own thread at their own pace. But a UI that couldn’t talk to the host application wouldn’t be very useful, so this post is all about getting the two engines to work together.

Sending data from one to the other can sometimes feel a bit like this:

There are a few tricks to make it easier, though, and to make sure the data’s being sent at the right time.

Calling ExtendScript functions from Javascript

You’ll probably need to do this a lot. But I have good news: it’s easy!

There’s a special function, evalScript(), included with CEP’s CSInterface.js library that enables you to call both embedded ExtendScript and functions saved in a separate file. It’s good practice to separate them (and means you won’t have to do all your AE scripting within quotes!).

  1. Include your .jsx file in CSXS/manifest.xml, like so:
  2. You need to reference the CSInterface library in order to use its functions, so make sure you have
     var csInterface = new CSInterface();

    at the top of your .js file.

  3. Now you can use csInterface.evalScript() to call:
    • Embedded ExtendScript:
      csInterface.evalScript('app.project.items.addComp("Sample", 1920, 1080, 1, 1, 23.976)');
    • An external ExtendScript function:
      Include the function in your JSX file, like so:

      function addSampleComp() {
           app.project.items.addComp("Sample", 1920, 1080, 1, 1, 23.976);

      Then call it from the JS side:


Sending data from Javascript to ExtendScript

Let’s get fancier.

Note the quote marks surrounding  the ExtendScript code above. The Javascript engine sees each of those code snippets as one big string. If you need to pass the value of a Javascript variable to ExtendScript, you’ll need to concatenate strings around the variable:

var compName = "Sample";
csInterface.evalScript('app.project.items.addComp("' + compName + '", 1920, 1080, 1, 1, 23.976)');

Note that the inner (double) quotes are still there! ExtendScript strings need to be in quotes too, so you end up with quotes within quotes. This is one of the first things I check when debugging — it’s easy to forget to include the inner quote marks.

What about functions with multiple arguments?

csInterface.evalScript('setFilepath("' + pathType + '","' + result + '")');

Hmm. But I need to send a lot of data.
Pass an object of any size using JSON.stringify().

csInterface.evalScript('initRecording(' + JSON.stringify(recData) + ')');

You don’t need to parse the object on the JSX side before accessing it.

Calling Javascript functions from ExtendScript

I cheated a bit with the last example. In my actual script, that line looks a little different:

csInterface.evalScript('initRecording(' + tracktype + ',' + JSON.stringify(recData) + ')', setRecVars);

There’s a second, optional part to .evalScript(). In this example, setRecVars is a callback function. That means the Javascript engine waits for ExtendScript to complete whatever it needs to do, then lets the Javascript engine know it’s done, and that it can go ahead and execute that function.

You can call a function you’ve declared elsewhere in your script, like I’ve done in this example, or you can add a one-off anonymous function.

function callbackFunction(){
     // Do some stuff
csInterface.evalScript('someFunction()', callbackFunction);


csInterface.evalScript('someFunction()', function(){
     // Do some stuff

I’m not going to go too in-depth on callbacks here, but they are vital to CEP panel development. Not only can you do things like change your UI based on the comp you just created, you can chain a bunch of these functions together and pingpong your way across the JS-JSX divide.

Sending data from Extendscript to Javascript

The simplest method is to return a single value, and handle it with a callback function, as above.

When you need to transmit more information, things get trickier. The official documentation suggests an elaborate process involving the use of the plugPlugExternalObject library to dispatch events with payloads. You can ignore those recommendations, and simply send send data from JSX to JS as stringified JSON.

Well, I say “simply” but there are two big caveats:

  • JSON isn’t built into ExtendScript, so you’ll need to download the library and include it at the top of your JSX file:
#include "../js/libs/json2.js"
  • Much more confusingly, JSON.stringify() doesn’t like packing up “circular values” — values that refer to other values. For example, if you’ve shortened app.project.activeItem to a variable called theComp, sending  the JS engine a reference to a layer as theComp.layer(index) won’t work. Fortunately, Michael Delaney figured out a solution:
// Michael Delaney's fix to strip out circular functions
        function (data, out) {
            var e, k, results;
            if (out === null) {
                out = {};
            if (!data) {
                return void 0;
            if (typeof data === 'object') {
                results = [];
                for (k in data) {
                    if (k === "theComp" || k === "parentFolder" || k === "source") {
                        if (data[k]) {
                            out[k] = data[k].id;
                return results;
            } else {
                return data;

This function replaces circular references with their specific ID values. Run your outgoing object through it before returning your data object as JSON, and it should work.

return JSON.stringify(data);

On the JS side, handle the JSX data by using JSON.parse() to parse the result in the callback function. Here’s a simple example that notifies the user if an error occurred and changes a variable:

function endRecording(result) {
    returnedData = JSON.parse(result);
    if (returnedData.warning !== undefined) {
    ready = returnedData.ready;


Referring to another file from ExtendScript

I’ll add one last thing as a bonus, because it took me way too long to figure this one out.

Say you have a preset saved as an .ffx file in the same directory as your JSX file. You’d think you could just use .applyPreset(File(“presetfile.ffx”)), right?


There’s a weird quirk of CEP panels where, when you call its functions via JS, your JSX file doesn’t know its own directory. This shouldn’t be this hard, but here’s my super awesome workaround (note sarcasm):

On the JSX side:

var presetFile;
function setJSXpath(pathdata) {
      presetFile = File(pathdata + "presetfile.ffx");

On the JS side (which does know its directory):

var JSXpath = (window.location.href.substr(0, location.href.lastIndexOf("/") + 1) + "jsx/").toString();

csInterface.evalScript('setJSXpath("' + JSXpath + '")');

Not elegant, but it works.¯\_(?)_/¯


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:


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"?> 
     <Extension Id="com.yourname.yourpanel">
     <!-- AfterEffects -->
     <Host Name="AEFT" Port="8092" />

    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:

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.

Pacific - Sample

Adventures in map animation with QGIS, After Effects/C4D and Illustrator

Before I start this tutorial I need to complain about something:
The Pacific Theatre of WWII is a huge pain to map. We were fighting over some SERIOUSLY TINY ISLANDS. Even just finding a vector map that includes them is difficult, and when you go to add labels, well… zoom out wide enough to see where in the world you are, and you can’t see the places you’re trying to pinpoint.

QGIS to the rescue! Yes, it’s finally time to make our own maps.

I’m not gonna get too technical here (I’m still learning this stuff myself), but this will hopefully serve as a useful workflow reference to help animators on their way to becoming DIY cartographers.

So what is GIS, anyway?

You’ve heard of data-driven design? This is some of the stuff that’s driving the data for data-driven design. GIS stands for Geographic Information Systems — basically, all things digital mapping. If you’ve only ever worked with maps designed by someone else before, learning to use GIS software will enable you to go much deeper: not only can you create your own maps from raw data, you can measure exact distances, do all kinds of cool analytical work, go nuts with custom styling and even change map projections on the fly.

There are lots of different GIS applications, but we’ll be using QGIS because it’s free, open-source, and outputs files in a usable format. You can download it here.

Grab some data

To get started, you’ll need to import some map data. Shapefiles (.shp, usually accompanied by additional files with other extensions) are the main way to get outlines into GIS software. These are basically just geographically-linked vectors, and there are tons of them available for you to use.

Here are a couple sources for shapefiles you can use for anything you want:

You can also use OpenStreetMap data freely. If you’re working with a small enough area (think neighborhood, not country), you can even grab the vectors you need right within QGIS. Here’s a nice tutorial using OSM to generate a map of London’s pubs that covers that import process.

Another way to get data into QGIS is to import KML files. This is the way to work with points you’ve mapped using Google Maps Engine or Google Earth. Maps Engine is a lifesaver if someone gives you a giant spreadsheet of poorly labeled locations. You can upload a CSV (100 locations at a time with the free version, but breaking a big dataset into chunks is easy enough), tell it which columns contain the location info, and be amazed when it figures out what the guy who sent you the spreadsheet meant when he abbreviated California as “Calf”. mapsengine

There are also thousands of maps made by other people whose points you can borrow. Once you get everything correctly positioned on the map, click the folder icon in the top left corner and choose “Export to KML”.

Import your data

Now that you have some data to work with, open QGIS and create a new project.

Add your dataset by choosing the appropriate import button for its file format. The importers are located on left side of the screen as well as in the Layer menu, where they are more helpfully labeled. addvectorlayer

Add Vector Layer is likely to be your go-to choice — that’s the right option for shapefiles, KML and CSV data, among others.

If you attempt to import KML from Google Maps Engine and get a blank layer instead, there’s a workaround: open the file you downloaded in Google Earth, resave as KML and try again. (Note: Google Earth may give you a KMZ file, which is a zipped KML. Just change the extension to .zip and unzip to import into QGIS.)

The earth isn’t a perfect sphere, so you’ll need to choose a geographic coordinate reference system (CRS) to make sure your points land in the right place. WGS84 is the standard you’re likely to be working with.

As long as it knows its original format, QGIS can reproject data on the fly. You can set these options in the CRS settings in Project > Project Properties. QGIS ships with a couple thousand options, and if those aren’t enough you can make your own custom projections.


You can also add points directly within QGIS through a process called geocoding. Enable the Geocoding plugin by going to Plugins > Manage and Install Plugins, and you’ll be able to search for locations one at a time and pin them to your map. (If you have a ton of addresses to batch through, you can follow this tutorial instead.)


geocode-japan  geocode-tokyo

You can also “reverse geocode” — click on a point and ask QGIS to label it. I’ve had a handful of issues with this plugin, namely that my added points disappear after a program restart, so you’ll probably want to export your Geocoding layer as a shapefile then reimport it. It’s also still using the deprecated labeling engine, so things may scale weirdly — you can switch to the new labeler in the layer settings.

There are a wide variety of other plugins that can be installed the same way as Geocoding. I’ve found a couple especially handy: QGIS doesn’t really do curved paths, but I needed to create a bunch of arcs connecting points to a single city — think airline destination map style — so to get that working, I:

  1. Exported my locations via MMQGIS‘s Geometry Export to CSV menu, manually added the target city to each with the same ID valuelocations-for-points2one
  2. Reimported and ran that file through Points2One to generate the connections as straight lines.straight-lines-b-29
  3. Once I output the lines, I used Illustrator’s Warp:Arch effect to make them into curves, then animated them in After Effects. Convoluted, but it worked nicely.Map With Curves - B-29 Contractors


This “do a thing – export the layer – reimport as a new layer – delete original” process probably sounds weird to you, but it seems to be the primary QGIS workflow and we’ll be using it a lot. Advance warning: you’re going to end up with a lot of fiddly little shapefile files. You should probably decide where you’re going to keep them now, before they end up scattered across your hard drive.

Position and style your map

Moving around in QGIS isn’t that different from, say, Google Maps — with one big exception. Global shapefiles are usually centered on the Atlantic, and if you need to generate something Pacific-centered you can’t just roll the map around to the other side. I followed these instructions, which are tricky but seem to work. (If you know of a better method, please tell me!)


To customize the look of your layers and/or add labels to your points, double-click on the layer name. You’ll find a million options inside. QGIS even supports blend modes, which look great but don’t work with vector export — they’re still super-helpful though for previewing purposes. To change both the line and fill styling, click on Style, then click the default Simple Fill in the Symbol Layers list to get to the full parameter set. From this screen, you can also access more advanced options. Make sure to check out the line and pattern fills; they do some neat things if you’re going for a more abstract look for your map. Here’s Australia with polka dots and kittens:


Get your vectors out of QGIS

And now for an annoying extra step. Once you have a map you’re happy with, you can’t just go “Save as > PDF”. Instead we’re going to be using a tool called the Print Composer for this bit.

Note: If you’re attempting to create a map of the whole world, you should avoid using the highest-resolution land data from Natural Earth. I can’t get it to import properly into Illustrator for the life of me. I can, however, use the high-res shapefiles as long as I’m only exporting a smaller portion of the globe. They’re really nice to work with when you’re dealing with all the aforementioned tiny Pacific islands.

Go to Project > New Print Composer and give your new preset a name.

Click the Add New Map icon (looks like an unrolling sheet of paper), and drag a rectangle the size of the page. If you want to match your current view in QGIS, and it looks like the map’s the wrong size, go to Item Properties and click “Set to map canvas extent.”


Now you can save as a PDF.

If you plan to map your data onto a sphere (either in C4D or with CC Sphere), export your file as an equirectangular projection, with the extents set to X min = -180, Y min = -90, X max = 180, Y max =90. You’ll probably need to crop the resulting file/change the artboard size, too, since QGIS exports documents in the shape of the paper it’s “printing” them on. 3600×1800 is a good choice of final image size, since it’s easy to keep the math consistent if you need to add something later by hand — just multiply your degrees by 10.

Open your map in Illustrator

Here’s where we’re going to turn a flat vector map into something we can use in After Effects.


When you bring the PDF into Illustrator, everything comes in nested within a single layer. You’ll have a lot more design flexibility later on if you take a couple minutes to break up the map components into multiple layers. When there are lots and lots of paths, I find the easiest way to pull the pieces apart is to select one part of one element,  go to Select > Same > [Relevant appearance attribute], then cut and paste in place (Ctrl + Alt + V) on a new layer. If you want to be able to link to your points in AE, use the Release to Layers feature, then drag them out to be top-level layers.



You can add additional styling at this point, too. Using the art brushes on country border strokes is an especially nice effect:


Label your layers, and save as an Illustrator file, or export your image in your favorite C4D texture format.

Protip: To import Illustrator paths straight into C4D, you need to save them as Illustrator 8.

Now on to After Effects and/or C4D

This is the easy bit. Well, easy for you, assuming you already know After Effects or C4D. For AE, just import your AI file as a composition, drop the layers in your comp and animate and composite away as you would any other map. Here are stills from two relatively simple variations on the same dataset:

Pacific - Sample

Pacific - Sample2

Map - Saipan A

Map - Saipan B

The only real differences between the two are color and texture — you can go much further than this.

Even though QGIS’s text labels aren’t much good for animating directly, I tend to import them anyway (I usually stick them all on one layer). They’re a handy a guide for creating native AE text labels. You can do the same thing with points, or import them as individual layers so they’re easy to alt-replace with precomped animation like the concentric rings above. Having georeferenced guides to refer to even when you’re creating new elements from scratch opens up a lot of possibilities. If someone makes a late change to graphic (never happens, right?), it also makes map additions so much easier: you can go back to QGIS, use your saved Map Composer preset to export new borders or geolocated points, and they should line up exactly.

If you want a little bit of 3D and have either 1) a good enough GPU or 2) enough patience to use the Ray Tracer, you can choose “Create Shapes from Vector Layer”, switch to RT rendering and extrude the shapes. It takes forever to render, but you can do some interesting and/or very weird stuff this way. This also lets you apply Shape Layer effects like Wiggle Paths.

For C4D, you have a couple of options:

Image as texture (those of you with just C4D Lite: you can totally do this in Lite): create a new material, import an image file of your map as a texture, throw it on a sphere, style as desired. Add some splines connecting points and you have a snazzy 3D globe. Alternatively, import the AI paths and do a whole bunch of extruding for a fancy 3D ‘flat’ map that renders faster than with the AE Ray Tracer.

Wrap your vectors around a sphere (you’ll need more than Lite, as this uses the Wrap deformer): follow the instructions here.

Things to watch out for

  • When it comes to the shapefiles inside your project, QGIS is a DESTRUCTIVE EDITOR. I learned this the hard way: I accidentally deleted the whole world at one point. If you want to move some borders around, right click on the layer and Save As… before you go into edit mode.
  • The QGIS team is in the process of replacing their labeling engine, and as of 2.2.0 the new one automatically converts text to curves on export. If you want to preserve the labels as editable text, you should use the deprecated label system — or wait a few weeks. They’re supposed to be fixing this.
  • Don’t get too fancy designing backgrounds in QGIS. They only export for me about a third of the time. Do that stuff in AI or AE — or Photoshop.

Keep your head on: Automating scaling in KinectToPin with Z-axis data

I’ve spent a lot of time recently creating the latest version of KinectToPin’s UI Panel for After Effects. It has a ton of great new features, and makes things a lot easier to use.

But now that that’s out, I’m working on something new that gets around one of the biggest remaining issues with rigging 2.5D Kinect characters: automating layer scaling based on Z-distance. It’s one of the most annoying things to deal with, and until now the best options were “stay in one depth plane” or “manually scale things up and down.” Ugh.

The guy on the left is what happened if you walked back and forth toward the camera and didn’t account for it:

KinectToPin - AutoZ 1

KinectToPin - AutoZ 2

The little expression I came up with this morning turns the same character with the same mocap data into the guy on the right.

Keep in mind this is an experimental feature and at the moment only works for camera-facing characters. It won’t be added to the UI Panel until I’ve worked out the necessary layer space transforms and a couple bugs. In the meantime, if you’d like to try it out, do the following: The new code will be added to the UI Panel shortly, but if you’re eager to try it out, here it is:

In the 3D template, set this as the “mocap” layer’s position expression:

mocap = thisLayer;
try{cam = thisComp.activeCamera;}catch(err){ cam = mocap};
torso = mocap.effect("torso")("3D Point");
tW = mocap.toWorld(torso);
fW = cam.fromWorld(tW);

I swear, it seems like the main thing I’ve been doing for the last year and a half is finding ways to make people’s heads stop flying off. This is yet another.

KinectToPin FAQ and Installation Guide


This FAQ’s a bit out of date. Check out the new KinectToPin website for the latest version of the software and how to use it — it’s dramatically easier now.


It’s been pretty incredible seeing KinectToPin generate interest all over the world, but I’ve also had a lot of feedback about how difficult and frustrating it is to get it working. One of my big priorities right now is to find ways to make that easier. But in the meantime, here’s some additional helpful information:


Is this 3D/can I use it with Maya etc.?
– No, it isn’t 3D (although the Z data is recorded to the XML, and it is open source, so, uh, you can go wild and make something 3D out of it); if you want to use your Kinect with a 3D app try BreckelKinect (Windows only).

What hardware can I use?
– KinectToPin works with the standard Xbox Kinect, as well as the Xtion (a generic Kinect by Asus), although I’ve not gotten that running successfully on my own machine. Has not been tested with Kinect for Windows as far as I know.

Help! I recorded a really long track and I can’t get it converted from XML!
– If you have an xml file that is more than a couple of minutes long, KinectToPin may crash when you try to turn it into AE keyframes. Nick has an older converter-only tool for Processing called FlaePin that may work where KinectToPin fails.

Help! After Effects is giving me grayed-out puppet pins!
– This is a known bug with the Puppet Tool. You need to create dummy pins for all fifteen points before you paste in your tracking data or you’ll get these weird unusable pins.

Help! Microsoft’s Kinect drivers keep installing themselves automatically and taking over for OpenNI!
– You can fix this in Device Manager. Follow David Menard’s instructions here.



The folks behind SimpleOpenNI have created some handy software bundles that will help get you up and running a lot faster. Go to this site and find your relevant link(s) in the “Downloads” menu on the lefthand side of the page. You’ll still need to download Processing separately, as well as KinectToPin itself. Follow the instructions in Part 2 of my tutorial series to get those configured.

In hopes of simplifying things a bit more, I’m also compiling a list of the different configurations people have managed to get working. If you’d like to add your setup, post in the comments using this format:

Capture Hardware:
OpenNI/NITE version (or bundle source):
SensorKinect version:
OSCeleton version:
Recording with simpleopenNI v. OSCeleton?
After Effects version:


Kinect MoCap Animation in After Effects

Tutorial links: Part 1: Getting Started | Part 2: Motion Capture with KinectToPin | Part 3: Building the Puppet Rigging Template | Part 4: Rigging a Digital Puppet

More info: A better way to control the puppet’s head | FAQ and Installation Guide

Project files: Click here to download the After Effects project (CS5+).

Quick note: the text is just transcripts of the videos, so you can read or watch as you prefer.


Faux 3D Stroke

Get the look of Trapcode’s 3D Stroke with no plugins!

So Trapcode’s 3D Stroke is a great After Effects plugin with a long history. And it’s only about a hundred bucks, so if you make a living animating just go buy the real thing. It’s a lot less hacky.

If you’re a cheap bastard, though, or if you enjoy using AE features in ways they’re not designed to be used, have I got the free preset for you!
Continue reading


Kinect MoCap Animation in After Effects — Part 4: Rigging a Digital Puppet


This tutorial is now obsolete. Check out the new KinectToPin website for the latest version of the software and how to use it — it’s dramatically easier now.


Kinect MoCap Animation in After Effects

Tutorial links: Part 1: Getting Started | Part 2: Motion Capture with KinectToPin | Part 3: Building the Puppet Rigging Template | Part 4: Rigging a Digital Puppet

More info: A better way to control the puppet’s head | FAQ and Installation Guide

Project files: Click here to download the After Effects project (CS5+).

Quick note: the text is just transcripts of the videos, so you can read or watch as you prefer.


Yes, it’s the part you’ve all been waiting for: it’s finally time to set up your character layers!

This was originally going to be in Part 3, but there are so many steps I realized I needed to break things down a bit more.

Continue reading