Use expressions to create drop-down lists in Motion Graphics templates

  1. After Effects User Guide
  2. Beta releases
    1. Beta Program Overview
    2. After Effects Beta Home
  3. Getting started
    1. Get started with After Effects
    2. What's new in After Effects 
    3. Release Notes | After Effects
    4. After Effects system requirements
    5. Keyboard shortcuts in After Effects
    6. Supported File formats | After Effects
    7. Hardware recommendations
    8. Planning and setup
    9. Setup and installation
  4. Workspaces
    1. General user interface items
    2. Get to know After Effects interface
    3. Workflows
    4. Workspaces, panels, and viewers
  5. Projects and compositions
    1. Projects
    2. Composition basics
    3. Precomposing, nesting, and pre-rendering
    4. View detailed performance information with the Composition Profiler
    5. CINEMA 4D Composition Renderer
  6. Importing footage
    1. Preparing and importing still images
    2. Importing from After Effects and Adobe Premiere Pro
    3. Importing and interpreting video and audio
    4. Preparing and importing 3D image files
    5. Importing and interpreting footage items
    6. Working with footage items
    7. XMP metadata
  7. Working with text and graphics
    1. Text
      1. Formatting characters and the Character panel
      2. Text effects
      3. Creating and editing text layers
      4. Formatting paragraphs and the Paragraph panel
      5. Extruding text and shape layers
      6. Animating text
      7. Examples and resources for text animation
      8. Live Text Templates
    2. Motion Graphics
      1. Work with Motion Graphics templates in After Effects
      2. Use expressions to create drop-down lists in Motion Graphics templates
      3. Work with Essential Properties to create Motion Graphics templates
      4. Replace images and videos in Motion Graphics templates and Essential Properties
  8. Drawing, painting, and paths
    1. Overview of shape layers, paths, and vector graphics
    2. Paint tools: Brush, Clone Stamp, and Eraser
    3. How to taper shape strokes
    4. Shape attributes, paint operations, and path operations for shape layers
    5. Use Offset Paths shape effect to alter shapes
    6. Creating shapes
    7. Create masks
    8. Remove objects from your videos with the Content-Aware Fill panel
    9. Roto Brush and Refine Matte
  9. Working with layers
    1. Selecting and arranging layers
    2. Blending modes and layer styles
    3. 3D layers
    4. Layer properties
    5. Creating layers
    6. Managing layers
    7. Layer markers and composition markers
    8. Cameras, lights, and points of interest
  10. Animation, keyframing, motion tracking, and keying
    1. Animation
      1. Animation basics
      2. Animating with Puppet tools
      3. Managing and animating shape paths and masks
      4. Animating Sketch and Capture shapes using After Effects
      5. Assorted animation tools
      6. Work with Data-driven animation
    2. Keyframe
      1. Keyframe interpolation
      2. Setting, selecting, and deleting keyframes
      3. Editing, moving, and copying keyframes
    3. Motion tracking
      1. Tracking and stabilizing motion
      2. Face Tracking
      3. Mask Tracking
      4. Mask Reference
      5. Speed
      6. Time-stretching and time-remapping
      7. Timecode and time display units
    4. Keying
      1. Keying
      2. Keying effects
  11. Transparency and compositing
    1. Compositing and transparency overview and resources
    2. Alpha channels, masks, and mattes
  12. Adjusting color
    1. Color basics
    2. Use the Adobe Color Themes extension
    3. Color management
    4. Color Correction effects
  13. Effects and animation presets
    1. Effects and animation presets overview
    2. Effect list
    3. Simulation effects
    4. Stylize effects
    5. Audio effects
    6. Distort effects
    7. Perspective effects
    8. Channel effects
    9. Generate effects
    10. Transition effects
    11. The Rolling Shutter Repair effect
    12. Blur and Sharpen effects
    13. 3D Channel effects
    14. Utility effects
    15. Matte effects
    16. Noise and Grain effects
    17. Detail-preserving Upscale effect
    18. Obsolete effects
  14. Expressions and automation
    1. Expression
      1. Expression basics
      2. Understanding the expression language
      3. Using expression controls
      4. Syntax differences between the JavaScript and Legacy ExtendScript expression engines
      5. Editing expressions
      6. Expression errors
      7. Using the Expressions editor
      8. Use expressions to edit and access text properties
      9. Expression language reference
      10. Expression examples
    2. Automation
      1. Automation
      2. Scripts
  15. Immersive video, VR, and 3D
    1. Construct VR environments in After Effects
    2. Apply immersive video effects
    3. Compositing tools for VR/360 videos
    4. Tracking 3D camera movement
    5. Work in 3D Design Space
    6. Preview changes to 3D designs real time with the Real-Time Engine
    7. Add responsive design to your graphics 
  16. Views and previews
    1. Previewing
    2. Video preview with Mercury Transmit
    3. Modifying and using views
  17. Rendering and exporting
    1. Basics of rendering and exporting
    2. Export an After Effects project as an Adobe Premiere Pro project
    3. Converting movies
    4. Multi-frame rendering
    5. Automated rendering and network rendering
    6. Rendering and exporting still images and still-image sequences
    7. Using the GoPro CineForm codec in After Effects
  18. Working with other applications
    1. Dynamic Link and After Effects
    2. Working with After Effects and other applications
    3. Sync Settings in After Effects
    4. Collaborate with Team Projects
    5. Share and manage changes with Team Project collaborators
    6. Creative Cloud Libraries in After Effects
    7. Plug-ins
    8. CINEMA 4D and Cineware
  19. Memory, storage, performance
    1. Memory and storage
    2. Improve performance
    3. Preferences
    4. GPU and GPU driver requirements for After Effects

Create Motion Graphics templates with drop-down lists that allow users to customize them in Premiere Pro.

dropdown menu control

When you author a Motion Graphics template (MOGRT), you can keep its properties flexible and enable editors to customize them in Premiere Pro. One way, you can do it is by creating sliders and check boxes. You can also create them using drop-down lists with different options.

Creating drop-down lists is beneficial because it provides more menu controls and a simpler editing experience for Premiere Pro editors. You can save these drop-down control settings as a template and use it later in different compositions and projects.

Different text options displayed when using the drop-down lists in After Effects
Different text options displayed when using the drop-down lists in After Effects

Why create drop-down lists

You can give sliders and checkboxes as editing options to editors in Premiere Pro but they can sometimes be less intuitive and more time consuming. In such cases, drop-down lists can be helpful. Use it to enable a Premiere Pro editor to choose from:

 A selection of color themes - For example, you can create a drop-down list for a group of colors you want to use for a movie title.

 Different positions or designs - For example, add a drop-down for the position of a lower third such as left or right.

 Animation options - For example, add a drop-down to select different animation durations.

 Text or asset options - For example, add a drop-down list for the different days of the week. This prevents the need for  retyping source text, and also reduces the chance of errors in post production.

Set up a drop-down list control

Use the Dropdown Menu Control effect to create drop-down lists. To understand how this feature works, follow these steps:

  1. Create a composition.
    Click the comp icon at the bottom of the projects panel, or select New Comp on the home screen.

  2. To add a text layer, select Layer > New > Text, and type the text you wish to add. For this example, let's write Morning.

  3. Open the Effects & Presets panel and search Fill Color, and drop it on the text layer.

  4. Once you have all the layers in place, in the Effects & Presets panel, search Dropdown Menu Control and drop it onto the layers. You can also access it from Effect > Expression Controls > Dropdown Menu Control.

    In the Timeline panel, twirl open the text layer properties and Alt-click the stopwatch icon next to Source Text.

    In the expression text field, copy the following expression snippet that changes the source text:

    var x = effect("Weekday")("Menu").value;

    if ( x === 1 ) {
    "Morning";
    } else if ( x === 2 ) {
    "Evening";

    } else if ( x === 3 ) {

    "Night";

    }

    Use the pick whip tool and link the dropdown menu -named as Weekday to the Source Text property.

    In the Effect Controls panel, click Edit. The dropdown menu control comes with a default menu with three items: Item 1, Item 2, Item 3.  Use this to name your menu options. You can also add more options to the menu with the + - icon. 

  5. Add another dropdown menu and rename it Color. Next, twirl open the the Fill color layer, and alt-click the Color property. To change the text color, in the expression field, copy the following text:

    dropDownIndex = effect("Color options")("Menu").value;

    switch ( dropDownIndex )
    {
    case 1: hexToRgb("FF3211");
    break;
    case 2: hexToRgb("CC1234");
    break;
    default: hexToRgb("BBB001")
    };

     Use the pick whip tool and link the dropdown menu to the Color property. Name this dropdown as Color options. You can change the color accordingly from the color chart next to the color property. 

  6. To hook up the two dropdown menu properties to each other, use the Color options pick whip tool and link it to the Weekday dropdown menu. The Color options dropdown menu references the Weekday dropdown menu, which means that the Weekday you select also changes the text color.

  7. Go ahead and drag these dropdown menu into the Essential Graphics panel, and use them to create Motion Graphics templates.

To help you get started creating a project, download this sample file.

Download

Sample expressions for drop-down list controls

Just as with other expression controls such as sliders, the values of the menu are referred to as indexes in expressions. You can copy from the sample expression below into the expression text field to achieve different results with the dropdown menu.

Note:

The names of the menu items itself are not read by the expression. Instead, it is reading the index, meaning the hierarchal position of the menu item in the list.

Sample 1: Define the color of a layer and reference it to the menu items in the dropdown control

Sample 2

dropDownIndex = thisComp.layer("Null 2").effect("Dropdown Menu Control")("Menu").value;

switch ( dropDownIndex )
{
case 1: hexToRgb("FF4678");
break;
case 2: hexToRgb("CC1234");
break;
default: hexToRgb("BBB007")
};

Changing colors using the expression snippet
Changing colors using the expression snippet

dropDownIndex = thisComp.layer("Null 2").effect("Dropdown Menu Control")("Menu").value;

switch ( dropDownIndex )
{
case 1: hexToRgb("FF3211");
break;
case 2: hexToRgb("CC1234");
break;
default: hexToRgb("BBB001")
};

Sample 2: Use source text with a dropdown menu control

If you have a dropdown menu with the following menu items in this order:

  1. Monday
  2. Tuesday
  3. Wednesday

Monday is index 1, Tuesday is index 2, as long it is the second item in the list. If you rename Tuesday to anything else, the expression does not break since it is still at index 2.

Here a simple example for using source text with a Dropdown Menu Control:

x = comp("CompName").layer("LayerName").effect("Dropdown Menu Control")("Menu");

if (x == 1) {

text.sourceText = ("Monday");

if (x == 2) {

text.sourceText = ("Tuesday");

}

if (x == 3) { 

text.sourceText = ("Wednesday");

}

Sample 3: Define the source text of a text layer and reference it to the menu items in the dropdown control

var listItems = [

"Lambs",
"Pups",
"Not a thing",
];
var dropDownValue = effect("Dropdown Menu Control")("Menu").value;
listItems[ dropDownValue - 1 ];

 

var x = effect("Dropdown Menu Control")("Menu").value;if ( x === 1 ) {
"Lambs";
} else if ( x === 2 ) {
"Pups";
} else {
"Not a thing";
}

 

x = effect("Dropdown Menu Control")("Menu").value;
switch (x) {
case 1 : "dog";
break;
case 2 : "cat";
break;
default : "default" }

Things to keep in mind when using drop-down list controls

  • Always rename the drop-down list control to something that reflects the contents best.
  • The menu options in the Dropdown Menu Control effect are not case or text sensitive. This means, even if you rename the menu items, the expression does not break. However, they are position sensitive, so changing the position of the menu option breaks the expression.
  • Maintain a balance between the different components used in your motion graphics templates. For instances where there are ranges, go for sliders, and in instances where there are options like yes or no, use checkboxes. 
  • The dropdown menu that you link all the other dropdown menus to becomes the parent. The dropdown menus in the comp reference the parent menu and behave accordingly.

Scripting support for Dropdown Menu Control

Property.setPropertyParameters()

Method:

app.project.item(index).layer(index).propertySpec.setPropertyParameters([param-array])

Description:

Sets parameters for a Property.

Notes

  • Dropdown Menu Control effect (matchname : ADBE Dropdown Control) is the only property that allows parameters to be set. 
  • An exception is raised whenever this method fails.
  • To check if a property allows parameter to be set, check with isDropdownEffect before calling this method (see Property.isDropdownEffect.)

Parameter details:

param-array

An array of strings. This method will overwrite the existing set of menu items with the provided array of strings. 

There are a few restrictions on the strings specified as menu items:

1.     Empty item strings are not allowed

2.     Duplicate item strings are not allowed

3.     The character “|” is not allowed in the item strings.

4.     Only strings are allowed.

5.     Item strings should be in ASCII or MultiByte encodable in the current code-page. In other words, the item strings should be provided in the script of the running system. For example : Specifying the item strings in Japanese while running the script on an English system will create dropdown effect with illegible characters in the item strings. 

Note:- The string “(-“ - can be specified as of the item strings. These appear as separator lines in the dropdown menu. The author needs to remember that the separator lines will claim an index for each of themselves. 

Example:

Dropdowneffect  = Dropdowneffect.setPropertyParameters(["Monday", "Wednesday", "Friday", "Sunday"]);

The above statement will edit the dropdown menu to have Monday, Wednesday, Friday, Sunday as the items. The returned property is the updated one and should be used for all further uses.

Returns:

The updated property. The user should note that the property object on which this method is called becomes invalid because of the internal implementation and so the returned property should be used for all further uses.

Property.isDropdownEffect

Method:

app.project.item(index).layer(index).propertySpec.isDropdownEffect

Description:

Returns true if the property is a Dropdown Menu Control effect.

Examples:

appliedEffect.property("Menu").isDropdownEffect  // returns true

appliedEffect.property("Color").isDropdownEffect  // returns false  

appliedEffect.property("Feather").isDropdownEffect  // returns false

Return:

Boolean

Have a question or an idea?

If you have a question to ask or an idea to share, come and participate in our After Effects community. We would love to hear from you and see your Motion Graphics templates.

Adobe logo

Sign in to your account