Tutorial: Bring AE keyframe data into Processing

In this tutorial we’ll see how we can animate objects in after effects, with any level of precision and interpolation control, and then bring this keyframes data into processing, to further use in runtime applications. After Effects allows us to grab keyframe data, and export it into a text file. We can then bring this data into processing, and use it to animate elements, exactly as they were animated in After-Effects. We will animate a bouncing ball in AE, refine the animation using the graph editor, and then replicate it in processing. This animation can then be implemented in any real-time, interactive application.

Animate in After-Efects 
Create a new composition. Make it 1280x720 pixels by size, and 30fps. Remember these values, as they will have to be repeated in Processing in order to replicate the same composition and motion speed. Create a new square solid, 300x300 size. The size information also has to be brought into Processing later. Apply a mask to the solid (right-click on the solid -> mask -> new mask). Type MM in succesion to reveal the mask properties, and select shape to change the mask shape to ellipse. Now we have our ball, ready to animate.

Change the mask shape to ellipse to draw a circle

Now, animate the ball, to bounce across the screen. We don’t need many keyframes to create this kind of motion. This animation is built to seamlessly loop, so that when it is brought into processing it can play for as long as the sketch is running. We now have a simple animation of a bouncing ball. Notice that all keyframes and interpolation are linear, so far.

Let’s fine-tune the animation by adjusting the temporal interpolation (speed, eases) on the graph editor, to simulate a more natural motion.

At this point we can already grab the keyframe data and bring it into Processing. This is done by selecting all the keyframes of the property (position in this case) by clicking on the name of the property in the timeline. Once all the keyframes are highlighted (colored yellow) hit Command+C to copy the keyframe data to the clipboard. We usually do that in order to paste these keyframes into another layer, but this time we will paste them into a text document. (On a mac, start TextEdit and create a new document)

Surprise! The keyframes data is pasted into the text document, as a coherent well organized list, of all the keyframes, their timestamp and the different values that each parameter has on the timeline. From here, we should be able to import this as a text file into Processing, parse the text lines, and extract the keyframes data, to be used to animate objects in code. But before we do that, there are a few more steps to take. The first thing to do, is to convert the text document to a plain-text (.txt) in case it’s not already that way. TextEdit on mac creates rich text (.rtf) files by default, which are not as simple to use in Processing. In TextEdit, go to Format menu and select Make Plain Text. Save the file and name it AE_keys.txt Next, let’s clean up the file a little, to make the parsing in code easier to sort through the lines of the file. Select and delete all the textual information in the document, and leave only the lines with the keyframes data. Save again. the document should look like this now:

The file is now ready to be parsed in the Processing sketch, but there is still one piece of data missing. After-effects doesn’t paste any interpolation data into the text data of the keyframes, neither spatial nor temporal, so Processing only has the keyframes to work with. While it’s possible to write additional code to interpolate between the keyframes, it would be very difficult to precisely replicate the fine-tuning that was done in the graph editor.

The solution for this is a bit of a hack, but it gets the job done. We will create a keyframe for each frame on the timeline, and when brought into processing will replicate, frame by frame the exact motion as it was in AE. In order to do this Alt-click on the stopwatch icon of the position property, this will enable expressions for this property, but we only need the expression to help us generate all the in-betweens as actual keyframe data. hit the enter key, or click anywhere outside the expression field to apply it. This default expression transform.position doesn’t do anything but follow the existing values that the keyframes dictate. 

Select all the keyframes again. Right-click on any of the keyframe and select keyframe assistant -> convert expression into keyframes. This will generate continuous keyframes for each frame on the timeline, replicating the original interpolation, precisely. (switch to graph editor view to see for yourself)

 

frame by frame keyframes

Now we can bring the keyframe data with the full animation baked into the frame-by-frame keyframes, and reflects any kind of interpolation that was applied in AE. You may want to duplicate the original layer, with the fewer keyframes, in case any editing of the animation will be needed, as editing this amount of keyframes is not practical.

Repeat the copying, pasting and cleaning up of the text file, in preparation for use in Processing.

lots of keyframes

 

Apply in Processing

Launch Processing. Create a new Processing sketch. Name it and save it in the Processing sketchbook. In the Sketch folder create a folder named data.  Place the prepped text file in the data folder.

We have to create an array of String() objects, to contain all the lines from the text document, each line is a single keyframe with two or three members (2D or 3D), which we can access separately, and then apply to position values of our Processing animation.

1
 String[] lines;  // a string array to contain the lines from a text file 

Inside setup() initialize the String array by loading the text file into it

1
 lines = loadStrings("AE_keys_all.txt")

Inside draw(), create a new array of strings called keys, and use split to acces the lines array one line at a time, in accordance with the time/frame count, by using modulo. The keys array only takes the content from a single line in the lines array, and grabs the single values from each line, as separated by space.

1
String[] keys = split(lines[frameCount%lines.length], " ");

Create variables for X and Y position, based on members 2 and 3 in the keys array, and apply them to an ellipse, the exact same size as our original solid (300x300 pixels).

1
2
3
int x = int(keys[2]) ;
int y = int(keys[3]) ;
ellipse(x, y,300,300);

When running this sketch, a looping animation of a bouncing ball displays in a loop, virtually identical to its AE origin. It is also easy to edit and change the animation, and just replace the keyframe information in the text file, without a need to change the code.

Here is the entire Processing code to apply AE keyframes into a sketch.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
String[] lines; // a string array to contain the lines from a text file

void setup() {
size(1280, 720);
background(0);
noStroke();
fill(255);
ellipseMode(CENTER); // define the origin (anchor point) in a similar way to AE (center of a layer)
frameRate(30); // maker sure to use the same frame rate as the AE composition
lines = loadStrings("AE_keys_all.txt");     // load the text file into the String array
smooth();
}

void draw() {
background(0);

String[] keys = split(lines[frameCount%lines.length], " "); // split the text file into and array lines

// each line is an array with 3 members for x,y and z keyframe data separated by space
int x = int(keys[2]) ;
int y = int(keys[3]) ;
ellipse(x, y,300,300);

}
}

Now its time to think of interesting ways to apply this easy integration workflow between After-Effects and Processing!