Archive for After Effects

OSX Drawing with Quartz 2d for After Effects Plugins; A Quartz Composer Laces Sample Plugin

[vimeo clip_id=’35717847′ width=’500′]
When working on custom projects I develop a lot of single use plugins for things like data visualization. Although I’m becoming more comfortable with OpenGL, my comfort zone for drawing is really using the tools available on OSX like Quartz 2d. After Effects is my favorite compositing environment and it took a while to build a working toolkit for OSX drawing in an After Effects plugin with things like build phases, importing frameworks, Objective-C++, CGContextRef, PF_EffectWorld, PF_Handle, etc. To help folks trying to get that toolkit together I thought I’d share a starting point XCode project as well as the base drawing code for one of the data viz tools I’m working on.

The XCode project can be a useful starting point for a developer interested in these kinds of projects. It includes linked frameworks, a reasonable memory allocation scheme (I think, more experienced devs feel free to point out any gotchas), a working example of how to use both CGContextRef and NSGraphicsContext and some useful drawing code.

The sample plugin is a Quartz Composer style laces plugin which can work nicely for connecting nodes or data visualizations. The included version is pretty bare bones, but if there is interest I am thinking about developing it in to a more full featured general purpose plugin.

This setup has worked for my needs and has been cursorily checked for bugs, leaks and crashers, but if you are going to use it for production work I’d make sure to attempt some pre-renders at the size, bit depth, etc. you are using to make sure there is not something I didn’t account for.

If you end up using the code in something you release, I’d appreciate a credit in the release notes. Tip of the hat to Edouard FISCHER for the original laces drawing code. Next up is a deeper dive into OpenGL, Quartz Composer, textures, and all kinds of fast drawing GPU goodness.

Laces Plugin for OSX After Effects
Laces Plugin Xcode Project For OSX

Comments off

Boethos, an online GUI editor to generate JSX code for After Effects

A new year and a chance for fresh starts. Luckily, Chris Green wrote something worth pointing to with Boethos, a code generator that generates JSX code for Adobe apps in conduction with the jsLinb UI Builder. It’s very nice way to generate a slick UI with a minimum of hassle and cut down on the broiler plate code writing. What more can a dev ask for?

Comments off

Todd Kopriva posts scripting changes in After Effects CS5

Not sure how I missed this when he first posted, but Todd Kopriva has posted a nice rundown on all of the scripting changes made in After Effects CS5. Also glad to hear there will be an update to the Scripting Reference docs that were getting long in the tooth. Todd and Jeff Almasol do a great job with supporting the scripting community around After Effects.

Comments off

A PixelBender Rounded Rect Generator for After Effects

Why Rounded Rects? Because Steve Jobs says they are everywhere. And because a cursory search didn’t find anything for Pixel Bender. Use this plugin to generate a solid color rounded rect or sample footage to easily add rounded corners to your footage.

Tip of the Hat to David Van Brink for his Pixel Bender efforts and especially for making me think of the generative possibilities of Pixel Bender in addition to image processing. And to Greg Best whose Core Image Kernel is the basis for this.

<languageVersion : 1.0;>
kernel RoundedRect
    namespace : "";
    vendor : "Creative Workflow Hacks: Dale Bradshaw,";
    version : 1;
    description : "Generates a Rounded Rect given an Upper Left coordinate, a Bottom Right coordinate, a Corner radius, and a Color or Sampled Footage";
    displayname: "Rounded Rect";
    input image4 image;
    output pixel4 result;
    parameter float4 color
  <defaultValue: float4(1,1,1,1);
   aeDisplayName: "Rect Color";
   aeUIControl: "aeColor";>;
   parameter bool transfer<defaultValue: false;aeUIControl: "aeCheckbox";aeDisplayName: "Sample Footage";>;
   parameter float radius<defaultValue:25.0;minValue:0.0;maxValue:100.0;>;
   parameter float2 upperLeft<aePointRelativeDefaultValue: float2(0.01, 0.01);aeDisplayName: "Upper Left";aeUIControl: "aePoint";>;
   parameter float2 bottomRight<aePointRelativeDefaultValue: float2(.98,.98);aeDisplayName: "Bottom Right";aeUIControl: "aePoint";>;
        float2 p = outCoord();
        float dist = 0.0;
        dist += (p.x < upperLeft.x + radius) ? pow((upperLeft.x + radius) - p.x, 2.0) : 0.0;
        dist += (p.y < upperLeft.y + radius) ? pow((upperLeft.y + radius) - p.y, 2.0) : 0.0;
        dist += (p.x > bottomRight.x -radius)   ? pow((bottomRight.x -radius) - p.x, 2.0)   : 0.0;
        dist += (p.y > bottomRight.y - radius)  ? pow((bottomRight.y -radius) - p.y, 2.0)   : 0.0;
        dist = sqrt(dist);
        dist = clamp(radius - dist, 0.0, 1.0);
        result = sampleNearest(image,p) * dist;
        result = color * dist;

Download db_roundedRect.pbk Pixel Bender kernel

This Kernel is set up as After Effects plugin, but it should be relatively easy to setup for Flash. I’ll update it when I get a chance to check it out.

Comments (7)

ProRes, After Effects, Final Cut And Gamma Shifts

Todd Kopriva posts a handy guide on how to avoid gamma shifts in an After Effects/Final Cut workflow using ProRes 4444. Gamma shifts have been the bane of my existence over the years and Todd gives a nice step-by-step and points to some good supporting resources.

Comments off

UV Mapping and After Effects

Jerzy Drozda (maltaanon), in his usual understated way, introduced Youveelizer his plugin for integrating UV Mapping in After Effects via a Pixel Bender plugin. It’s a really nice, tightly integrated plugin/workflow/training in the maltaannon style.

If you’d like to explore the UV Mapping concept in a developer style with a little less hyperbole, take a look at AE: Projecting a Movie onto a Complex Surface where David van Brink walks you through his experiments and includes a sample AE project.

Pixel Bender is really exciting. A very accessible kernel-style image processing platform without the baggage and overhead of digging into the AE SDK. There is also a useful subset of the kernel language that works in Flash, like these 3D Normal Mapping experiments. Give it a try.

Comments (4)

Oustanding geekery at

Looks like I’m a little late to the party, but I’m catching up with some great posts at I’ve always admired David Van Brink’s qt_tools project, A great open source command-line set of tools for dealing with Quicktime, and it looks like he’s now sharing more quick hits of his pixel, motion and scripting explorations. Very fun David.

Comments (2)

Doing something interesting with our Socket Object and XML; A slightly flawed Flickr reader for AE CS3 on the Mac

Last time, we talked about using a Socket Object in After Effects CS3 to parse a data feed with E4X XML parsing. There are a lot of useful workflow operations I can think of that could make use of data feeds, but After Effects is a visual medium, so let’s do something visual, let’s import a set of flickr photos matching a tag. This is a proof of concept script, and before you plunge into experimenting you should check the terms of service of the web feed provider and respect the use of images you download. That said, let’s take a look at some code.
Read the rest of this entry »

Comments (5)

Using the Socket Object to fetch XML for parsing in After Effects CS3

I had an email conversation with Matt, who wanted to fetch some xml to play with the new E4X XML parsing in AE CS3. We’re still waiting for the ExtendScript HttpConnection Object to show up in After Effects, but we do have access to the Socket Object. The Socket Object is a little low level, but if you are using web feeds and don’t need authentication it’s actually pretty easy.

This code segment outlines the basics.

webConnect = new Socket;
response = new String;

if("","UTF-8")) {

webConnect.write('GET /current/currentpicks?format=xml HTTP/1.0nn');

response    =;

response = response.toString();

var xmlStart = response.indexOf("<?xml");
var xmlString = response.substring(xmlStart, response.length);



} else {

alert (""unable to open webConnect via Socket"")


We open a Socket and connect to, in this case, a feedburner feed. We use the read() method to read in the XML, and since the Socket object includes the header we use indexOf to find the beginning of the XML and substring to read to the end of the line.

A couple of gotchas in the code. In this case the header tells us the document encoding is utf-8 so we explicity set it with"","UTF-8")

Also, when Matt and I were initially exploring this we were just getting the header. It looks like a GET request with

response    =

allows a block response, and the later content was going off into the ether, If we used

response    =;

with a sufficiently large number to include all of the XML we got all of the contents of the XML file. This seems like a really bad idea, since we’ll never know the size of the XML file unless we munge some headers and setting it arbitrarily high also seems like a bad idea. Can someone who’s spent more time with the Socket object leave a comment or email me on how to handle the block response or alternatives to setting a big count for the read() method? I’d appreciate it.

Anyway, that’s the basic idea. You’d then parse the xmlString variable and do fun stuff with it. One heads up, the sample above includes namespaces, so be sure to read the section on namespaces in the Scripting Guide.

Comments (2)

FCPToAE going (mostly) CS3 Only

Just a quick heads up that I’ve decided to focus my efforts on FCPToAE and related tools to the CS3 Suite only. With a strong subset of ECMA-357 (E4X) (pdf link) parsing in Extendscript 2, it doesn’t make a lot of sense to keep inventing workarounds to FCP-XML parsing. I do plan on incorporating bug fixes to the scripting side of the equation to the AE 7 app, so it’ll stay feature compliant to the current state, but I won’t be updating new features.

This will definitely make things a lot easier to develop tools, and it opens up a whole new slew of possibilites for Web 2.0 mashup tools and explorations when combined with After Effects Socket or new HttpConnection support. kuler explorer anyone? If you’re a scripter, you owe it to yourself to check out the ExtendScript Toolkit (ESTK) 2.0 there are a lot of features that sort of “hide” in Extendscript that aren’t obvious in the After Effects CS3 scripting guide(pdf link).

Comments (9)

Older Posts »