Connector

The connector is a simple yet very powerful tool to automate all kind of cause-and-consequence link between properties. Every time you need the value of any property react to the change of any other property, you should be able to use the connector to build the automation.

It simply drives a slave¹ property (or several slave properties) according to the values of a master property, a bit like what parenting does with the transformation of layers.

A single master property can control many slave properties, but to the contrary of a standard parenting (or using the native expression pickwhip in After Effects), a single slave property can be driven by several master properties. There are multiple ways to achieve that, explained in the end of this section.

This video is part of the official comprehensive video course about Duik Ángela

Before the connection

All the properties which need to be animated together are prepared using keyframes. It’s these keyframes which will be controlled by the master property, a bit like a time-remapping would do.

The first step is to animate these slave properties; you can use as many keyframes as you need, and precisely adjust the interpolations* if needed. You just have to make sure all the animations of the slave properties have exactly the same duration; if an animation needs to start after or end before the others, just copy and paste the first or last keyframe so that it starts or ends with a still part.

All animations must have the same duration

Any property of any type which can be controlled by an expression can be connected using the Connector!

Quick Connector

The quick connector creates a master slider in the effects of the selected layer, and connects all selected slave properties to this new slider.

The movement of the slave properties is controlled by their own keyframes, and can still be adjusted after the connection if needed.

In this simple example, the connector effect controls the position and the rotation of the layer.

It can be used to quickly animate many properties at once, and make sure all have the same interpolation. As the slider is a simple percentage, it is very easy to animate and set the ease influences and velocities on the keyframes.

To use the quick connector, follow these simple steps:

1. Animate the slave properties, the properties to be controlled, from their initial to final state. You can add as many keyframes as you need, and adjust interpolations too.
2. Select all the properties you’d like to control together.
3. Click on the Connector button.

If you need to have the controller in another composition, you can either use the Extract controllers tool from the parent composition, or just copy and paste the controller to the new composition, and link the percentage with an expression, simply using the pickwhip.

Read further to learn how to do more advanced stuff with the connector, using the additional panel.

Edit already connected properties

If you need to edit the slave properties after they’ve been connected, here’s what you can do:

1. Deactivate the expressions in the properties you need to edit.
2. Edit the keyframes; you can also add or remove keyframes or adjust the interpolation.
3. Reactivate the expressions.

Advanced Connector

If you need more advanced connections, you can choose one of the many other ways to connect properties and select or create a master controller.
The first step is to get to the settings panel of the connector: either click the settings button or [Shift] + [Click] the connector button.
This opens the advanced Connector panel.

The bottom line of buttons, Pick texture, Pick audio, Pick control, lets you select an existing layer or property to be used as a master controller for your connection, which you’ll connect to all slave properties you’d like to animate together.

All other buttons automatically create different types of controllers to be used to control the slave properties.

It is advised to add the needed keyframes on the slave properties first, although this could also be done or modified afterwards. Just animate the slave properties as you need them to change when the master property goes from its minimum to its maximum value.

You can then select or create the master property and configure the connection.

Connection modes

With this advanced Connector, there will be three ways to connect three different kinds of slave properties you can control using the Connector.

• Layer opacities:
  Lets you “select” the layers with the master property, i.e. switch their opacities.
  A few keyframes will be added in the opacity of the selected layers to let the master property “select and show” the layers, one by one. This is a quick and easy way to set up a selector for a bunch of layers.
• Properties:
  Like the quick connector, lets you control any kind of property.
  It simply connects all the selected properties. The movement of these properties will be controlled by their own keyframes, and can still be adjusted after the connection if needed.
• Key Morph:
  Lets you control specific Key Morph keys, and interpolate between them. It automatically sets up the selected Key Morph key effects to control them from the master property. Read the Key Morph section for more details.

For each mode, the selection you have to make is different: it’s either some layers, some properties, or some Key effects created by the Key Morph.

Pick control

To use an existing property or layer as a master controller, first select it and then click on the Pick control button.

Properties to be used as master controllers with the connector can be:

• Any numerical property, with 1, 2, or 3 dimensions (rotation, position, opacity…).
• A color
• A dropdown menu (except layer dropdown lists)

There are also special cases handled automatically; you can also select these:

• Duik IK effects
• Duik Slider, 2D-slider, Angle controllers
• Duik Effectors
• Duik Expose transform controls

When selecting one of these, the connector can automatically pick the right property for you.

When you click the Pick control button, the connection settings panel is shown.

Connector settings when using a position property as the master property

Connector settings when using an IK effect as the master control

There you can set a few parameters before finishing the connection.

• In some cases, you may have to select a specific property as a master property.
  For example, when using an IK Effect, you can either use the IK Length, the Upper stretch or the Lower stretch values. This is a nice way to connect the bending or stretching of a limb to secondary animations or adjustments.
• You can choose to connect using the simple Value of the master property, or its Speed (an absolute value) or its Velocity (similar to the speed, but with a sign to know the direction).
• For multi-dimensional properties, you have to select the axis. You can only connect a single axis at once, but don’t forget you can make multiple connections to connect all axis if needed.
• The minimum and maximum values define the range in which the master property is going to be animated. Note that the motion of the slave properties is not extrapolated outside of these values.

Once you’re done with these settings, you can finish the connection by clicking one of the three bottom buttons:

• Layer opacities: a few keyframes will be added in the opacity of the selected layers to let the master property “select and show” the layers, one by one. This is a quick and easy way to set up a selector for a bunch of layers.
• Properties simply connects all the slave properties. The movement of these properties will be controlled by their own keyframes, and can still be adjusted after the connection if needed.
• Key Morph automatically sets up the selected Key Morph keys to control them from the master property. Read the Key Morph section for more details.

You can now control all slave properties with the master property.

A Connector effect is added on the master layer, to let you change the settings of the connection later if needed.

After the connection, you can still adjust the keyframes and interpolation of any slave property. To ease these adjustments, you can disable this connector effect to temporarily disable the expressions and adjust the keyframes on the slave properties.

Slider, 2D slider, Angle control

Click one of the Slider, 2D Slider or Angle buttons to create a nice control in the viewport, using shape layers.

Viewport sliders and angle controllers created by Duik.

Duik automatically populates the connector settings for you, you shouldn’t need to change anything.
The slider values go from -100 % (left or top) to 100 % (right or bottom).

The settings of the connector when used with a slider.

To connect an existing slider or angle control, just select the controller layer (and not any property) and click the Pick control button in the connector additional panel.

▷ Read the Controllers section to learn more about these controls.

Expose transform

Click the Expose transform button to create an Expose transform controller.

An Expose Transform measuring angles and distances between two layers.

Duik automatically populates the connector settings for you, you’ll just have to choose the property to be used as the master property.

The settings of the connector when used with an expose transform.

You can select one of the values measured by the Expose transform as the master property:

• 2D Absolute position
• 2D Relative position
• 2D Distance
• 3D Absolute position
• 3D Relative position
• 3D Distance
• Absolute orientation
• Relative orientation
• Angle between the layers

▷ Read the Constraints / Tools / Expose Transform section to learn more about this tool.

Layer list

Click the Layer list button to create a dropdown menu effect on the selected layer used to toggle other layers opacities.

1. Select the layer where you want to add the effect (the dropdown menu).
2. Click the Layer list button.
3. Select the slave layers.

A Layer list as created by the connector.

The dropdown now controls the display of the slave layers (using an expression in their opacities). This is very useful to rig replacements for parts of the character, for example:

• Select the shape of the hands
• Select the shape of the mouth for lipsync or expressions
• Select the shape of the eyes, to animate a blink or change the expression
• Etc.

Duik automatically populates the dropdown menu using the slave layer names, but you can edit the content later if you wish.

Effector

Click the Effector button to create a new spatial Effector in the composition.

This video is part of the official comprehensive video course about Duik Ángela

1. Select the slave properties to be controlled with the spatial effector.
2. Click the Effector button.

An effector controling layer colors and rotation.

▷ Read the Automation / Effector section to learn more about this tool.

Texture

Click the Pick texture button to create a new Effector map.

1. Select the texture layer.
2. Click the Pick texture button.
3. Select the slave properties and connect.

An Effector map effect.

The texture layer now controls the slave properties; you can choose which channel in the effects of the texture layer.

▷ Read the Automation / Effector Map section to learn more about this tool.

Audio

With the connector, you can also use the audio channel of any layer to control slave properties.

This video is part of the official comprehensive video course about Duik Ángela

1. Select the master layer, which has an audio channel.
2. Click the Pick audio button.
3. Select the slave properties.
4. Connect.

The connector creates a precomposition containing the audio layer to let you configure precisely how the audio will control the slave properties.

An audio connector precomposition.

This composition shows a black-and-white audio spectrum which you can use to select a specific wavelength to control the slave properties.

This composition contains four layers:

The layers created by the audio connector.

From bottom to top:

• The bottom layer is the original audio layer.
• The audio spectrum layer is the layer used to display the spectrum in the viewport. You should not change anything in it and keep it locked.
• The Ear controller is the layer you can use to select a specific wavelength and volume from the audio spectrum to make the connection. Move this controller over the column corresponding to the wavelength you’d like to select.
• The Audio effector controller exposes the connector settings in its effects.
  You can use these values to adjust the audio spectrum display and precisely tweak the audio connection.

The audio connector settings.

When changing these values, you’ll adjust how the audio spectrum is displayed, thus how the connection is made using the Ear controller location.

How to connect a single slave property to multiple master properties

Sometimes, you’ll need to several master properties to have influence on the same slave property. For example when animating a fake 3D head turn, you’ll probably need to connect the position and scale of some parts of the face to both the X and Y axis of a controller.

Depending on the slave property type, there are several ways to connect it to multiple master properties.

Layer position, rotation or scale properties

In the specific case of transform properties, the easiest way to have multiple connections is to use parenting. Just add a null layer as a parent of the slave layer, and make new connections in the transform properties of this parent layer.

Bézier shapes (masks or shape layers)

To rig Bézier shapes, it’s usually easier to control them using pins ³. As the pins controlling the Bézier shape are standard layers, you can then rig them as any other controller, and make multiple connections with the other methods described here.

Numerical properties

The quickest and easiest way to make multiple connections on any numerical property (angle, position, percent, color…) is to add a List ⁴ on the property; you can then add as many connections as you need, and even other animations, expressions, or Duik automations…

Examples

Adjust the shape of a joint (elbow, knee…) when it bends

With the connector, it’s very easy to automate the animation of the shape of an arm, a leg, or any limb, when it moves and bends, for example to adjust the cloths, animate the muscles, or just fix the design of the joint.

1. Animate the controller of the limb, to make it bend. Note that this is easier done in FK than IK.
2. Animate what you need to automate (the Bézier paths of the shape, the position of some pins, etc.)
3. Select the controller layer (the one with the IK effect)
4. Click the Pick control button in the additional panel of the connector.

The connector settings are automatically set for you, using the IK Length, which is the distance between the root and the end of the limb (between the hip and the foot, or the shoulder and the hand for example). This is very handy as it’ll work no matter the orientation of the limb, and also takes the stretch into account, so that you can use the same method and the same connection to also adjust the shape of the limb when it is stretched. Despite its name, it also works when animating using FK.

Connector settings when using an IK effect as the master control

You can then select the animated slave properties and make the connection.

Controlling a head turn

1. Precompose the head if you can. This is not mandatory but helps a lot organizing the layers.
2. Animate the head turn either horizontally or vertically.
3. In the additional panel of the connector, either create a slider, a 2D slider (if you plan to connect the other axis), or pick an existing property you’d like to use to animate the head turn.
4. Select the slave properties you’ve just animated.
5. Connect.

If you’d like to also connect the other axis for a complete fake 3D turn, these are the additional steps:

1. Animate the other axis of the turn in the head precomposition. Be careful: do not add or replace keyframes on already animated and connected properties. If you need to animate an already connected property, the easiest way is to first add a List ⁴.
   Read the section above about multiple connections for more details.
2. In the additional panel of the connector, either create a new slider, select the 2D Slider you’ve created before, or pick an existing property you’d like to use to animate the head turn.
3. Select the slave properties you’ve just animated.
4. Connect.

Create nice visual selectors for layers: phonemes, hand shapes, eye shapes…

With the connector, it is very easy to create nice visual selectors for layers, to select some limb shapes for example.

Single Line

1. Create a background for the selector. It’s usually a single layer showing available shapes in line or column, and will be used as a reference for the selector. Cells in the column or line must be perfect squares.
2. Create a controller, which will be moved above the background layer created at the previous step. It can be a border, or a solid color with a reduced opacity or a nice blending mode for example. Make sure the anchor point is centered in this layer.
3. Animate the controller’s position, to make its anchor point go from just before the first cell to just before the last cell.
4. Select the position property of the controller layer.
5. Click the Pick property button in the additionnal panel of the connector.
6. Select the slave layers.
7. Connect to opacities.

When animating the selector,
go from just before the first cell
to just after the last cell.

Grid

To arrange the available shapes in a grid, the process is almost the same as for a simple line, but using a few precompositions.

1. Precompose (or group if you’re in Photoshop, Illustrator, Krita, The Gimp…) the available slave layers to group them by column. You need one precomposition per column in the controller.
2. Create a background for the selector. It’s usually a single layer showing available shapes in a grid. Cells must be perfect squares. Shapes available for each column must correspond to a column precomposition you’ve made at the previous step.
3. Create a controller, which will be moved above the background layer created at the previous step. It can be a border, or a solid color with a reduced opacity or a nice blending mode for example. Make sure the anchor point is centered in this layer.
4. Animate the controller’s X position, to make its anchor point go from just before the leftmost cell to just before the rightmost cell.
5. Select the position property of the controller layer.
6. Click the Pick property button in the additional panel of the connector. Select the X axis in the panel.
7. Select the column precompositions.
8. Connect to opacities. The selector now selects all the shapes from the same column when you move it horizontally. Let’s now make the connection to show the right line when you move it vertically.
9. Animate the controller’s Y position, to make its anchor point go from just before the topmost cell to just before the last cell.
10. If you’ve closed the additional panel of the connector, select again the position property of the controller layer and Click the Pick property button.
11. Select the Y axis in the additional panel of the connector.
12. For each column precomposition:
    1. Select all the layers inside the precomposition
    2. Connect to opacities.
    3. Repeat for all columns.