You all know that I’m a expression junkie. You’ve seen my tutorial and my approach to animating things. I hate keyframes, I love expressions. Even though sometimes I find using expressions very frustrating. Theres no way to declare global variables, create your own functions, or extend the build-in functionality. But there actually is a nice way to deal with that that you might not be aware of.

This is going to be very interesting if you have any programming experience. Any programming language will do: C++, PHP, Ruby, Visual Basic, Java, or even ActionScript. AE Expressions are based on JavaScript, so they are not only object oriented. You can also use any JavaScritp syntax and build-in functions that are not listed anywhere in AE itself. Unfortunately some things will not work as expected, and sometimes you might even get an error message, when everything is ok. When that happens simply turn off the expression and turn it back on again, or select all, cut it out, press Enter, and then paste it again making sure that you don’t have any white spaces in the beginning or end of the expression. That helps sometimes.

For example:

var currentTime = new Date();

In Javascript this creates a new variable that holds the Date object, that if no attributes are used in the constructor points to the current local time represented in milliseconds. If you’d try that in expressions you’d get an error. AE will force you to pass some attributes to the constructor. But that doesn’t mean we’ll not gonna have any fun.

Create a new text layer, and in the text source property try this code:

this;

Aaaahhh…. Ok. We’re getting somewhere. But what is this (object Layer) thing? Lets find out. Next piece of code will enumerate all properties of the object Layer.

Replace the above code with this one:

myPropList = []; //declare new array
currentFrame = timeToFrames(time, 1 / thisComp.frameDuration, false);
targetObj = this;
for (var itm in targetObj) {
myPropList.push(itm);
}
myPropList[currentFrame];

Now use PageUp and PageDown to go through frames of your composition. On each frame you should see different properties of the layer. It’s interesting, but lets move to something more useful.

Lets say you’re doing a text based animation. For example a counter that should go from 0000 to 9999. Notice that it’s 0000 to 9999, not 0 to 9999. So to do that you’d have to write a bunch of code to add additional 0 at the beginning, right? But what if you could design a function to do that for you? Since you can have functions in Javascript, it’s worth to try it in expressions as well. So lets try it.

function formatNumber (val, basestr) {
return basestr.substr (0, (basestr.length - val.toString().length)) +  val.toString();
}

formatNumber(132, "0000");

This little piece of code takes two parameters. First one is the numeric value, and the second one is the output format for that value. So for example, if you have a number 132, and an output format 0000 as the result you’ll get 0132. Also, if your number is 132 and output format is ABCDEF the result will be ABC132. As you see this is a pretty useful function. The only downside is that each time you want to use it you have to write it from scratch. Not very optimal solution.

So how do you make your own functions reusable in expressions?

As said before - expressions are Javascript based pieces of code, and that means you can basically use any Javascript syntax. There fore why not try using #include statement? Let’s try it out. Copy the formatNumber function to your clipboard and save it as a file on your hard drive. Let’s assume that the path to the file is "c:\myUtils.java". Having that file setup everything left to do is to import it like that:

#include 'file:///c:\\myUtils.java'
formatNumber(132, "0000");

If you’re on Windows you might want to save your file in the Support Files directory that you can find inside of After Effects installation directory. The default path for that is C:\Program Files\Adobe\Adobe After Effects CS3\Support Files\. I’m guessing that on a Mac this should be similar, but you will probably have to option-click on your AE directory and choose “Show package content”. After that you can navigate to /Applications/Adobe After Effects CS3/Adobe After Effects CS3.ap/Contents/Resources/ and put the file there. Than you’ll be able to simply use #import 'file:///myUtils.java' instead of providing the whole path to your file.

You can also use this technique to drive variable values from an external file. For example:

myText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ultricies sapien et justo. Vestibulum et erat id ante imperdiet sollicitudin. Ut sed ligula ac mauris tempus egestas. Donec vel risus."

Please keep in mind that this is a hack and it’s not officially supported, although I think it will work with any expression-enabled AE version. Try to keep your code libraries as small as possible. Group your functions to separate files to help organize your code. Remember that each time you import a file all it’s content is being processed my AE expression engine and this may slow things down quite a bit.

I hope you found this article useful. Leave a comment and let me know what you think.
Thanks for reading.