Controls

List of all expression controls supported and what to look out for.
HELP
Project Settings
Color Control
Slider Control
Checkbox Control
Dropdown Control
Angle Control
Point Control
Font Control
Project Settings
To provide users with the ability to control specific aspects of the template through the online editor, it's necessary for your template to include a Project Settings layer. Essentially, this layer is a disabled adjustment layer equipped with expression controls that function as effects, enabling user interaction and customization within the template.
Example
For instance, to allow users to change the background color, you should create a Color Control. Assign it a name that aligns with the established naming conventions, and then link the Fill effect, or any other relevant effect, to this Color Control using an expression. This setup enables user customization of the background color in the template.
Custom Unit
Controls are typically interpreted as percentages (%) by default. However, if necessary, you can assign a custom unit to the controls, such as pixels (px). To change the unit, just rename the control to include your desired unit in brackets following the name. For instance, you could rename a slider as Width [px] to indicate that its measurements are in pixels.
    You can also modify the control unit through the Templater with the following steps:
  • Navigate to the Project Setting tab, where you'll find a list of all the controls you've added, with each control represented in its own row.
  • For controls that allow custom units, a text box will be available on the right side. Here, you can enter the unit you wish to use.
    • Screenshots:
    Color Control
    Refrain from creating a color control for each graphic element. Instead, focus on creating color controls for primary elements, keeping the total as low as possible. For instance, in a template with three primary colors, set up three color controls, plus one or two more for the logo and tagline colors.
    Never Use Slider Control or Angle Control to Change Colors
    At times, you might want to enable users to adjust just one aspect of a color — either the hue, saturation, or brightness — instead of all three simultaneously. In such scenarios, it's still advisable to utilize a Color Control. This approach is more user-friendly, as it allows users to choose colors from a picker rather than adjusting through a Slider or Angle control. To implement this, you can modify the hue, saturation, or brightness using expressions. As an alternative, the Hue Color script available in Author Tools or the VC Color Vibrance can be employed for these adjustments.
    Copy Code
    Slider Control
    This control enables users to adjust floating-point values, typically ranging from 0 to 100. For custom value ranges, refer to the specific guidelines down below.
    Min and Max Values
    Slider controls typically have a default range from 0 to 100, but you can assign them custom minimum and maximum values.
      To adjust the value range:
  • Right-click on the slider within the effects panel and select “Edit Value...”.
  • In the dialog box that appears, modify the “Slider Range” values according to your preferred range. The number on the left will set the minimum value, while the number on the right sets the maximum.
  • Once your desired range is specified, click OK to apply the changes.
    • An example of this customization is setting the minimum value to -50 and the maximum to 50.
    Screenshots:
    Checkbox Control
    This feature allows users to easily toggle elements or effects on and off.
    Logic
    When a Checkbox displays a check mark, it indicates that the Checkbox is activated (✅). An activated Checkbox signifies that a certain element or feature is enabled, visible, active, or set to 100% opacity.
    A Checkbox without any mark inside signifies that it is deactivated (⛔). When deactivated, it implies that the corresponding element or feature is not visible, disabled, or set to 0% opacity.
    Naming
    Avoid including terms like [on/off] or [off/on] in the Checkbox name. The functionality of a Checkbox is intuitive and follows standard Checkbox Logic, making it easily understandable for users.
    Screenshots:
    Dropdown Control
    Provides a selection of predefined options for users to choose from. These options should be established in your template as enumerated (enum) values.
    How to Add/Remove and Reorder Items
    To modify the dropdown items, including adding, removing, or reordering them, click Edit... located in the upper right corner of the effects panel. Utilize the plus and minus buttons to respectively add or remove items. For reordering, simply drag and drop the items into your desired sequence.
    Screenshots:
    How to Read Dropdown Values From Expressions
    The dropdown control provides the selected option as an integer number, with the first item in the list assigned the value of 1. It is mandatory to use the dropdown control specifically for selecting Logo Original Colors.
      For example, consider a dropdown control that offers choices between a circle, rectangle, or triangle:
  • Insert a dropdown control and label it 'Shape'.
  • Include three options: circle, rectangle, and triangle.
  • Construct three distinct layers, each corresponding to one of the shapes.
  • Apply an Opacity expression to each layer. Modify the 'if' value in the expression to 2 for the Rectangle layer and 3 for the Triangle layer.
    • Screenshots:
    More details
    Dropdown Expressions - Poster image
    Angle Control
    Users can change floating-point values from 0 to 360 degrees, mirroring the degrees-on-a-circle display seen in After Effects.
    Starting Angle
    Ensure that the starting angle in your template matches the angle depicted. To achieve this, adjust the rotation expression by adding or subtracting degrees, ensuring that an Angle Value of 0 degrees is oriented directly upwards.
    Screenshots:
    More details
    Starting Angle - Poster image
    Point Control
    This control lets users interactively select a point on the screen to determine the placement of certain elements.
    When to Add a Point Control
      ⛔ Do not use point control for:
  • Tagline position
  • Logo position
  • General placeholder positions
      • ✅ Use point control for animated graphic elements such as:
  • Background Circle
  • Background Color Ramp Start Color
  • Flare Position
  • Particle Emitter Position
  • Other Similar Elements
    • One to One Ratio
    Imagine your Render Composition has dimensions of 1280x720, and your Graphics Composition is 640x360. The point control is located within the Render Composition, while the circle you're drawing is in the Graphics Composition. Selecting the screen's center in your Render Composition returns coordinates [640, 360]. However, if you draw a circle at [640, 360] in your Graphics comp of size [640, 360], it will appear in the bottom right corner. To correct this, you need to offset the circle's value using the Graphics Composition's Anchor Point within the Render Composition.
    Screenshots:
    More details
    Point ratio - Poster image
    Font Control
    Font controls are generated automatically, reflecting all the fonts utilized in your template. Upon completing the templating process, the Templater tool will automatically gather all the fonts used from your local computer.
    Supported fonts
    Videobolt supports the latest Google Fonts library
    Not Supported
    Videobolt doesn't support Variable and Adobe fonts. To disable Adobe fonts please read the instructions below.
      Disable Adobe fonts
  • Open up Creative Clouds then click File > Preferences.
  • In Services tab disable Adobe Fonts using the toggle.
    • Screenshots: