Expression Controls are effects that don't seem to do anything to our compositions! But they work as UIs for expressions we create. In this post, we'll take a look at each individual control and see what it can do and how to make use of it.
As always, I strongly recommend that you grab the AE Expressions eBook for free here. There's plenty of other tutorials on using expressions on Ideas to Creations that you can use in conjunction with this one to create your own fancy expression rigs.
We'll focus mainly on how to use the controls, with examples for the more complex ones. I strongly recommend that you follow through in creating the examples, but if you're having problems, you can get the project file (CS6 and up) at the end of the tutorial.
What Are They Anyway?
Expression Controls are effects that do not have any effect on the appearance of a layer.
Their purpose is to act like a UI for your expressions, creating variables that a user can modify. They can be used as control expressions, or be controlled by expressions to return results. Those expressions can be as simple as gauges to as complex as interfere effects.
We'll take a look at each control, how to work with them and examples of how you would use them.
Their purpose is to act like a UI for your expressions, creating variables that a user can modify. They can be used as control expressions, or be controlled by expressions to return results. Those expressions can be as simple as gauges to as complex as interfere effects.
We'll take a look at each control, how to work with them and examples of how you would use them.
Slider Control
A slider is one of the simpler ones to use. It begins with a default value of 0 and has a slider ranging from 0 to 100, however it's value can be lower than 0 and greater than 100 if you manually type in a number or if you slide the yellow digits. It's real range is from -1,000,000 to 1,000,000.
Although you probably won't use such a range, it's good to know how far it can go.
A slider produces a single value, which when written as an array can be [100].
They're useful for single-digit uses, such as Opacity, Rotation, Transition Completion, or perhaps a single axis in a Position property.
I usually use sliders as "Master" controls for my expression rigs, like the gauge tutorial.
Angle Control
The Angle Control generally works a lot like the slider, perhaps the only difference being how you interact with it.
Angle Controls do not have any limit to their value, or perhaps its WAAAAY too high to see.
Angle Controls produce a value with a single dimension. Although it has 2 tweakable digits (1x 180 for example), the first digit is multiplied by 360 and added to the second. So, giving 1x120 is actually going to produce 480 in the expression calculation.
This means it can also be used like a slider, however it's generally preferred that you use it when dealing with angles. Rotation, directions and so on, because of the way it works.
The default value is 0.
Checkbox Control
This one works as a Boole operation, it's either ON or OFF.
There's not much to say other than the values it produces: 0 for OFF and 1 for ON. The default value is OFF or 0.
This can be used to toggle certain effects, enable/disable Uniform Scale and so on. Most of the time, you'll use a checkbox with an if(){}else{} expression.
Let's create our first example!
We want a Checkbox Control that toggles "Uniform Scale".
Create a new Null or solid and give it a Checkbox and two sliders "WIDTH" and "HEIGHT". You can rename everything by pressing Enter with the effect selected.
In the scale of the layer, we'll set this expression:
So if its ON (or 1), use the Width slider as the scale for both height and width (the [w,w] part), but if it's not ON (or 0), then use the individual sliders. (the [w,h] part)
Cool!
Color control is pretty useful for defining colors.
And we have:
You can use the same technique for Hue, Saturation and Brightness, but it requires a little more work, which I'll leave to you to research!
By defining the Layer Control as a variable, you can add a '.' fullstop and continue as if they layer reference was made in an... Okay, here's an example:
We want a Checkbox Control that toggles "Uniform Scale".
Create a new Null or solid and give it a Checkbox and two sliders "WIDTH" and "HEIGHT". You can rename everything by pressing Enter with the effect selected.
In the scale of the layer, we'll set this expression:
w=effect("Width")("Slider");
h=effect("Height")("Slider");
checkbox=effect("Uniform Scale")("Checkbox");
if(checkbox==1){[w,w]} else {[w,h]};
h=effect("Height")("Slider");
checkbox=effect("Uniform Scale")("Checkbox");
if(checkbox==1){[w,w]} else {[w,h]};
Note that we can't define our variables as 'width' or 'height' because those are already used to define the width and height of a layer, and our variable will be ignored. w and h will do just fine.
So if its ON (or 1), use the Width slider as the scale for both height and width (the [w,w] part), but if it's not ON (or 0), then use the individual sliders. (the [w,h] part)
Cool!
Color Control
Color control is pretty useful for defining colors.
It produces an array of 4 digits: [R,G,B,A]. Red, Green, Blue and Alpha, ranging from 0 to 1 (or higher for 32bpc)
It's important to note that the values range from 0-1, rather than 0-255 that you find in the color pickers.
This one doesn't have too many uses besides defining colors, but I'm sure you can find some uses for it.
The default value is Red [1,0,0,1];
Lets get to our second example. Create another null or solid and add three sliders and a color control. Name the sliders "RED", "GREEN" and "BLUE", then in the Color Control, add this expression:
Because sliders are quite sensitive, we can use 255 rather than 0-1 as the range. To get that working, I'm dividing each variable by 255 to bring it back to the 0-1 range for calculation. Now, when you tweak the sliders, you'll see the color box change to that color:
The inverse can also be done, converting a Color Control to RGB for each slider. Create another null or solid and add this to the RED slider:
To BLUE:
To GREEN:
This one doesn't have too many uses besides defining colors, but I'm sure you can find some uses for it.
The default value is Red [1,0,0,1];
Lets get to our second example. Create another null or solid and add three sliders and a color control. Name the sliders "RED", "GREEN" and "BLUE", then in the Color Control, add this expression:
red=effect("RED")("Slider")/255;
green=effect("GREEN")("Slider")/255;
blue=effect("BLUE")("Slider")/255;
[red,green,blue,1];
green=effect("GREEN")("Slider")/255;
blue=effect("BLUE")("Slider")/255;
[red,green,blue,1];
Because sliders are quite sensitive, we can use 255 rather than 0-1 as the range. To get that working, I'm dividing each variable by 255 to bring it back to the 0-1 range for calculation. Now, when you tweak the sliders, you'll see the color box change to that color:
 |
effect("Color Control")("Color")[0]*255
To BLUE:
effect("Color Control")("Color")[1]*255
To GREEN:
effect("Color Control")("Color")[2]*255
And we have:
 |
| i2c_ColorValues Coming Soon! |
Point Control
A point control allows you to define an X & Y point in your composition. It works like the point control in a Gradient Ramp effect.
It produces an array of 2 values, [X,Y]. These being the X and Y positions of the selected point respectively. This can be used to define anchor points, point a layer in a certain direction and so on.
The default value is usually 1/2 the dimensions of the layer its applied to. For 3D, the third axis is zero.
Depending on your version of AE, you might find the "3D Point Control", which adds the third dimension to give [X,Y,Z]. It works the same way as the 2D Point Control.
Layer Control
This is an interesting one. A layer control produces an "object" value, referring to a specific layer in the comp. I used Layer Controls in the "Parent CC Particle World to Null" preset.
They can be used to create a reference layer, which you can then use to expand on an expression, for example, extracting the position properties of the layer that is selected in it.
By defining the Layer Control as a variable, you can add a '.' fullstop and continue as if they layer reference was made in an... Okay, here's an example:
I'm going to create another new Null object and give it a layer control. In that layer's Position property, I'll put this:
effect("Layer Control")("Layer").position
Now, I'll just create and move around a bunch of Nulls all over the comp. When you change the "Layer" in the Layer Control, you'll see that it snaps to the selected layer, which is pretty cool.
This way, you will retrieve the position of the layer defined in the Layer control, which can be in the layer itself or in a different one, but it has to be in the same composition.
This way, you will retrieve the position of the layer defined in the Layer control, which can be in the layer itself or in a different one, but it has to be in the same composition.
I really like this control especially with presets, as it makes work a lot easier for the end user who probably doesn't want to dig into code. Be warned that setting it to "None" (by mistake, perhaps) will break any expressions that refer to it, so you may want to include a try{}catch(err){} around it to fix it.
Now It's All Yours
Now, it's all up to you to utilize the expression controls in your projects. Feel free to drop any questions in the comment section below and I'll give feedback as soon as I can. Thanks for reading, and here is the project file for CS6 and up:
 |
| Click to download (99 KB) |
Thanks for reading! Your comments are appreciated!
Catch more examples by visiting the expressions label.
Catch more examples by visiting the expressions label.