Control Rows - Interaction

Intro

Every Layer consists of several attributes with values that can be keyframed or connected to or from other values. An attribute consists of two elements in the UI. A Control Row and a Control. The Control Row is the entire attribute row and can contain several Controls ([x, y], [r, g, b] etc.).

When the cursor is placed over a Control Row, several UI elements will appear/ highlight.

Setting Control values

To set a Control:

1. Hover over the Control.
2. Click.
3. Enter a value.

Controls can also be 'scrubbed' to set them.

1. Hover over the Control.
2. Click and hold.
3. Move the cursor left or right.

tip

For Control Rows with multiple Controls, hold Option/Alt when scrubbing or committing values to affect all Controls at the same time.

Constrain Proportions

Some int2 Controls also include a feature to constrain the proportions of the two values.

Toggling constrain proportions on/off.

When the Constrain Proportions button is enabled (green), the original width to height ratio of the two values is maintained when either dimension is changed. For example, if a Rectangle has a Width of 100 and a Height of 200, increasing the Width to 200 will increase the Height proportionally to 400 (maintaining the 1:2 ratio).

Inline Expressions

It's possible to write simple mathematical expressions within a Control. For example, entering $12*3$ will result in a value of 36.

Setting Keyframes

To set a keyframe:

1. Hover over the Control.
2. A small diamond outline icon will appear in the Control.
3. Move the cursor above this icon and click.
4. The icon will switch to a green fill. This indicates a keyframe has been set.

tip

For Control Rows with multiple Controls hold Option/Alt when clicking to create keyframes on all Controls.

The keyframe icon has 3 states:

1. No keyframe - Indicates there is no animation on the Control.
2. Keyframe Set - Indicates there is animation set on the Control.
3. Keyframe Set (at frame) - Indicates there is animation set on the Control at the current frame in the Timeline.

Cavalry has Auto Key set to on by default. This means that once a keyframe is set, any changes to the value in the Control will either set new keyframes or, in the instance where the playhead is on the same frame as an existing keyframe, update one.

Keyframes can also be set by using the Control Row's contextual menu.

1. Hover over the Control Row.
2. Right click to invoke the contextual menu.
3. Select 'Set Keyframe' to create keyframes on all channels. To create a key on a single channel choose the relevant channel to the right hand side of the window.

This window can also be used to Delete Keyframes in exactly the same way.

To remove all keyframes on a attribute/ channel use the Delete Animation option.

tip

If the timeline is on the same frame as a key frame use Cmd/Ctrl + click to delete that keyframe.

Contextual menu

Right clicking on a Control Row will bring up a menu with various options depending on the type of row and whether it contains connections or not:

• Set Keyframe - Set a keyframe for the Attribute at the current frame. Where an Attribute row contains more than one Control (e.g. int2 or double2), select the relevant Control or click on the row to create keyframes for all Controls.
• Delete Keyframe - Delete the keyframe(s) at the current frame. Where an Attribute row contains more than one Control (e.g. int2 or double2), select the relevant Control or click on the row to delete the keyframes for all Controls.
• Delete Animation - Delete all keyframes. Where an Attribute row contains more than one Control (e.g. int2 or double2), select the relevant Control or click on the row to delete all the keyframes for all Controls.
• Disconnect Input - Remove the input connection. Where an Attribute row contains more than one Control (e.g. int2 or double2), select the relevant Control or click on the row to delete the connections for all Controls.
• Duplicate and Replace - Duplicate the input connection's Layer and replace the connection with the new Layer.
• Reset Attribute to Default - Where an Attribute's value has been changed, return it to the default value.
• Rename - Rename the indices of Array Layers (Value Array, Color Array etc). This includes dynamic arrays found on the SkSL Shader or JavaScript Layers.
• Delete Selected Attributes - Delete the selected indices of Array Layers (Value Array, Color Array etc).
• Reorder - Reorder the indices of Array Layers (Value Array, Color Array etc).
• Add Expression - See Attribute Expressions.
• Add to Control Centre - Add the selected Attribute to the Control Centre.
• Add Pre-Comp Override - Add a Pre-Comp Override to the selected Attribute.
• Control with Null - Create a Null and connect its Position to the selected Attribute.
• Add Behaviour - Select a Behaviour to create and connect its Id to the selected Attribute.
• Add Array - Select an Array to create and connect its Id to the selected Attribute.
• Add Math/Script - Select a Math or JavaScript Layer to create and connect its Id to the selected Attribute.
• Add Utility - Select a Utility to create and connect its Id to the selected Attribute.
• Set Selected Attributes - Set all selected Attributes with the values from the last selected Attribute. Use Cmd/Ctrl to select multiple Attributes.
• Set Selected Layers - Set any selected Layers that include this Attribute to its value. For example, select 3 Shapes in the Scene Tree and then right click on Position for one of them.
• Copy Value - Copy the selected Attribute's values to the clipboard.
• Copy Layer Id - Copy the Layer's Id to the clipboard for use with scripting.
• Copy Scripting Path - Copy the Attribute's path to the clipboard for use with scripting. Note that these paths are case sensitive.
• Copy Generator Type - Copy the Generator's type to the clipboard for use with scripting.
• Paste Values - Paste the values copied to the clipboard to the selected Attribute. Note that data types must match.
• Reveal Generator - Reveal a Generator (e.g. Shape Type, Distribution, Noise Type etc) to the Scene Tree so that they can be connected to other Layers. Note that once a Generator has been revealed it cannot be hidden from the Scene Tree again.

Attribute Expressions

Expressions can be added to Attributes with input connections to perform mathematical operations on the values. Unlike the inline expressions that controls have, these expressions are remembered and run each time the attribute value changes. Expressions are also saved with the Scene.

info

Attribute Expressions can only be added to attributes with an input connection. Use inline expressions to perform simple, one off calculations within a control.

Set an Attribute Expression

To set an Attribute Expression:

1. Create a Rectangle
2. Connect position.x→rotation.z
3. Right click on Rotation.
4. Choose Add Expression....
5. Enter $* 2$ into the Z input (the bottom row).
6. Hit Enter.
7. Scrub Position X.

The value from Position X is passed to Rotation and doubled by the expression. For example, a Position X value of 120 will result in a Rotation value of $120 * 2 = 240$

Examples of valid expressions are:

• *2 - Multiply by 2
• /3 - Divide by 3
• %100 - Modulus 100
• ^2 - To the power of 2
• +10 - Plus 10
• sqrt(9) - Square root of 9

It's also possible to use the incoming value as part of an attribute expression. Use the string value to reference the input value.

Examples of valid expressions are:

• -(value) - Reverse an input value from a negative to positive value (or vice versa).
• sqrt(value) - Calculate the square root of the input value. If the input value is 9 the result will be 3.
• clamp(-45, value, 45) - Prevent the output value from going below -45 or above 45 even if the input value exceeds it.
• round(value/10)*10 - Round the input value to the nearest 10. round(value) defaults to the nearest integer.

See ExprTk for more available options.

Edit an Attribute Expression

Once an expression exists, it can be edited or removed with the π button on the Attribute's Control Row.

• To disable an expression - click the π button to open the Expression Window and then uncheck the relevant attribute.

• To clear/remove an expression - click the π button to open the Expression Window and then delete the expression or click the x.