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

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.

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:

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

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.

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

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:

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?