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

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")
};

Sample 2

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")
};

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

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?

ask-the-community

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.


This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy