Intro

With After Effects 6.0, Adobe has introduced some wonderful new functionality to the world of expressions. Most of this is the result of spectacular new features that have been added to After Effects that were not necessarily aimed at expressions but nonetheless dramatically increase the power available to the expression writer. There have also been a few changes and enhancements to the expression language itself.

New Syntax

First let's take a look at some of the changes to the expressions implementation. Multi-word objects, methods and properties are now expressed in "interCaps" format instead of using an underscore separator. For example you would write "thisComp" instead of "this_comp", or "seedRandom" instead of "seed_random". The old syntax will still work in AE 6.0 but it's recommended that you switch to the new style.

Wiggle Enhancement

wiggle() is now affected by seedRandom(), so if you're not happy with the values you're getting from wiggle() you can precede it with a call to seedRandom() and you will get different results for each seed. For example using a seed of 13,

seedRandom(13);
wiggle(3,35)

will give you different results than the same wiggle() expression without seedRandom():

wiggle(5,35)

However, wiggle() ignores the "timeless" parameter of seedRandom, which means if you did something like this:

seedRandom(13,true);
wiggle(7,15)

It would continue to wiggle on every frame. However, if you want wiggle() to hold a value for a certain number of frames, you can use the new posterizeTime() function.

posterizeTime

AE 6.0 includes a new posterizeTime() function that you can use to freeze your animation periodically at a rate that you specify. For example, this variation of our wiggle expression will give us a new random position 5 times a second:

posterizeTime(5);
wiggle(5,35)

Convert Audio to Keyframes

OK - let's get into the really fun stuff. AE 6.0 has a new Keyframe Assistant - Convert Audio to Keyframes. This assistant creates a new layer named Audio Amplitude with three sliders for left, right, and combined audio channels. The sliders have keyframes representing the comp's audio levels. So, you can now get at the comp's audio info via expressions. This almost (but not completely) eliminates the need to ever use Motion Math.

convert audio to keyframes

In the figure above, we have imported two audio files. "Hex Hi.wav" has been panned heavily to the left channel and "HexFloor.wav" has been panned to the right. Then the Keyframe Assistant "Convert Audio to Keyframes" was run, which automatically created a new null layer "Audio Amplitude" with slider controls for "Left", "Right" and "Both" channels. The scale parameter of the "Medium Yellow Solid" was linked to the left channel slider with this expression:

s = thisComp.layer("Audio Amplitude").effect("Left Channel")("Slider");
scale + [s,s]

Similarly, the scale parameter of the "Medium Cyan Solid" was linked to the right channel slider. (Note - I left the audio out of the little demo movie because it quickly gets really annoying as the movie loops. If you want to hear it, click the download link above). The result, as you can see, is that the two solids each scale up in sync with the audio channel that they are linked to.

Text!

The new integrated type tools in After Effects 6.0 are simply amazing. The built-in animators and range selectors provide the capability to quickly create incredibly powerful text animations. Adequate coverage of this subject could fill a whole tutorial (or maybe a book) and I'll leave that to somebody else. Just let me say that this one addition to After Effects is reason enough to get the upgrade. There is also an exciting aspect of this for expression writers. Not only can you control the text selectors and animators with expressions, but also (finally!) you can control the source text itself with an expression. This unleashes the full power and fury of JavaScript string processing to manipulate the content of your text animation. We'll start out with a simple example and touch on some very powerful stuff before we're done.

First, we need to talk about how to create a text layer. It's very simple - you just select the text tool, click in the comp window, and type something. After Effects will create a new layer and the text you entered also becomes the name of the layer. If you open the twirly of the new text layer in the Timeline and then open the "Text" twirly you will see the "Source Text" property. Alt/Opt click on the stopwatch to create an expression for this property. The result of your expression will become the text that gets displayed. It will have the attributes (font, size, etc.) of the first character of whatever you typed to create the layer. It's important to remember that JavaScript will attempt to treat the result of your expression as a string. If the result is a number, JavaScript will convert it to a string. This means that your expression could simply be something like this:

position[0]

and JavaScript would convert the x-coordinate of the layer's position to a string and display it. In the demo movie, I keyframed the position of the text layer to move across the screen. As you would expect, the text changes as the layer moves.

Now, we need to talk a little about how JavaScript handles strings. In JavaScript, strings are represented as a sequence of characters enclosed in single or double quotes. For example, "After Effects" and 'After Effects' are both valid strings. JavaScript treats strings as arrays, with each character occupying one location in the array. Remembering that array indexing in JavaScript starts at zero, the result of this expression:

s = "After Effects";
s[4]

would be the string "r".

In JavaScript, you can use the "+" operator to concatenate strings. For example,

"abcd" + "efgh"

results in "abcdefgh"

JavaScript provides many useful string properties and methods. We'll look at a few of them. For example, the result of

s = 'After Effects';
s.length

would be 13 (the length of the string), and the result of

s = 'After Effects';
s.toUpperCase

would be "AFTER EFFECTS".

There is a built-in JavaScript string object called, interestingly enough, "String". This object is useful for some of the string methods. For example, to create a string from character codes you could do something like this:

String.fromCharCode(48) + String.fromCharCode(49) + String.fromCharCode(50)

which creates the string "ABC" by converting the character codes for "A", "B", and "C" (48,49, and 50) to the appropriate string characters.

Another useful thing to know is that if you use the sequence "\r" in a string, it will be interpreted as a carriage return. So, if you had a string like

 "abcd\refgh"

it would display as:

abcd
efgh

OK - now we know enough to be really dangerous. Suppose we wanted to create a random 8x4 grid of hexidecimal characters (hexidecimal is used to represent base 16 numbers and consists of the digits 0 thru 9 and the letters A thru F). Let's take a look at an expression that will do this:

numRows = 4;
numChars = 8;
holdFrames = 5;

seed = Math.floor(time/(holdFrames*thisComp.frameDuration));
seedRandom(seed,true);

s = "";
j = 0;
while(j < numRows){
  k = 0;
  while (k < numChars){
    c = Math.floor(random(48,64));
    if (c > 57) c += 7;
    s += String.fromCharCode(c);
    k += 1;
  }
  s += "\r";
  j += 1;
}
s

Let's talk a little about this expression. The first three lines just define the size of the grid and how long to hold each set of random numbers. The next two lines just set the random seed to a new number for each set of 5 frames. Then our string variable ("s") is set to a null string. A null string is just a string of length zero with no characters in it (yet). The rest of the expression is just two nested loops that actually build the random array in our string variable. The outer loop (the one indexed by "j" just sequences through the rows of the grid, adding a carriage return ("\r") at the end of each row. The inner loop (the one indexed by "k") goes through the current row character by character and generates a random number that will either be between 48 and 57 ("0" through "9") or between 65 and 70 ("A" through "F") and converts the resulting character code to a character and concatenates it with our output string variable "s". I'll leave it as an exercise for you to figure out any details I've left out in this brief description.

Time to Split

Let's look at one more text thing before we move on to something else. split() is another JavaScript string method that adds a lot of power to our text expressions. The way it works is to split a long string into an array of smaller strings. It splits the string wherever it encounters a delimiter character that you specify. Consider this expression:

s = "honesty,integrity,loyalty,compassion,empathy";
s.split(",")[2]

This expression splits the string "s" wherever it finds a comma. Each of the words between the commas is then accessible via an array index. In this example, index zero would give us "honesty" and (as in our expression) index 2 would give us "loyalty". This gives us an incredibly powerful method to change our source text on the fly with an expression. Here's another version of the expression for source text that will hold each of the words for one second:

holdTime = 1.0;
s = "honesty,integrity,loyalty,compassion,empathy";
j = Math.floor(time/holdTime);
s.split(",")[j]

Note that this expression will generate an error after "empathy" when it runs out of words. Normally I would put in some code to check for that, but I wanted to keep the clutter down for demonstration purposes.

For completeness, I'll include the two other expressions I used to generate the demo movie. Here's the one for scale:

hold = .5;
expand = .5;
t =time%(hold + expand);

if(t <  hold){
  [100,100]
}else{
  linear(t,hold,hold + expand,[100,100],[700,700])
}

And here's the one for opacity:

fade = .25;
hold = .5;

t = time%(fade + hold + fade);
if(t < fade){
  linear(t,0,fade,0,100)
}else if (t < (fade + hold)){
  100
}else{
  linear(t,fade+hold,fade+hold+fade,100,0)
}

Let's Paint!

Another wonderful new feature introduced in After Effects 6.0 is the integrated paint engine. Like the new text engine, this is a feature that deserves its own tutorial. Here I'll just touch on some things you can do with expressions that make the paint tools even more interesting. For this example, I selected the brush tool and drew one squiggly stroke. I then applied this expression to the stroke's end parameter:

freq = .5;
50*(1-Math.cos(freq*time*Math.PI*2))

Then I applied this expression to the stroke's color parameter:

if (index <=4){
  linear(index,1,4,[0,1,1,1],[1,0,1,1])
}else if (index <= 8){
  linear(index,5,8,[1,0,1,1],[1,1,0,1])
}else{
  linear(index,9,12,[1,1,0,1],[0,1,1,1])
}

Finally, I applied this expression to the stroke's rotation property:

(index-1)*30

Then I duplicated the stroke 11 times. The result of all this is the pinwheel-looking thing you see here. If you download the movie, you'll see that it grows from the center out and then recedes back to the center every two seconds. Note that the duplicates position and color themselves via the expressions so it is all automatic once you set up the expressions for the original stroke and make the duplicates. This is a really simple example, but the possibilities are endless for procedural paint animations like this.

Liquify!

Another of the very cool additions to After Effects 6.0 is the liquify effect/tool set. Liquify has a couple of parameters that are interesting to apply expressions to. For this example, I distorted the image with the liquify tools and then applied the following expression to the "Distortion Percentage" parameter.

freq = 2;
(1-Math.cos(freq*time*Math.PI*2))*50

The result is an oscillation between 0% of the effect applied the effect fully applied. I think with a little care in creating the distortion you could use an expression with the "end" parameter to create a pleasant "waving in the wind" effect.

Using Tracker Data

Finally, a lot of work went into improving the tracker in AE 6.0. One of the new features that is of special interest to expression writers is the option to produce raw tracking data, which means that the tracking data isn't applied to another layer, it's applied to a property of the layer being tracked called "Attach Point". You can then, of course, access this data with an expression. In this demo, I tracked the head of the guy on the hang glider using the "Raw" Track Type option. Then I applied this expression to a bunch of colored dots:

L= thisComp.layer("Hang Glider.avi")
masterPos = L.motionTracker("Tracker 1")("Track Point 1").attachPoint
masterPos + wiggle(4,45) - position

This causes the dots to "swarm" around the head of the guy on the hang glider. Silly example, but I think it demonstrates that the concept has possibilities.

Well, that's end of our tour of the new features of After Effects 6.0 that expand the universe of the expression writer. This is an amazing upgrade made even more powerful by the new possibilities for using expressions.