Käyttöopas Peruuta

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. After Effects for Apple silicon
    9. Planning and setup
  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. Detect edit points using Scene Edit Detection
    8. XMP metadata
  7. 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
      5. Animate faster and easier using the Properties panel
  8. Drawing, Painting, and Paths
    1. Overview of shape layers, paths, and vector graphics
    2. Paint tools: Brush, Clone Stamp, and Eraser
    3. 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. Layers, Markers, and Camera
    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, Keyframes, 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 and masks
    3. Track Mattes and Traveling Mattes
  12. Adjusting color
    1. Color basics
    2. Color management
    3. Color Correction effects
    4. OpenColorIO and ACES color management
  13. Effects and Animation Presets
    1. Effects and animation presets overview
    2. Effect list
    3. Effect Manager
    4. Simulation effects
    5. Stylize effects
    6. Audio effects
    7. Distort effects
    8. Perspective effects
    9. Channel effects
    10. Generate effects
    11. Time effects
    12. Transition effects
    13. The Rolling Shutter Repair effect
    14. Blur and Sharpen effects
    15. 3D Channel effects
    16. Utility effects
    17. Matte effects
    18. Noise and Grain effects
    19. Detail-preserving Upscale effect
    20. Obsolete effects
  14. Expressions and Automation
    1. Expressions
      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. Advanced 3D Renderer
    5. Import and add 3D models to your composition
    6. Import 3D models from Creative Cloud Libraries
    7. Image-Based Lighting
    8. Extract and animate lights and cameras from 3D models
    9. Tracking 3D camera movement
    10. Cast and accept shadows
    11. Embedded 3D model animations
    12. Shadow Catcher
    13. 3D depth data extraction
    14. Modify materials properties of a 3D layer
    15. Work in 3D Design Space
    16. 3D Transform Gizmos
    17. Do more with 3D animation
    18. Preview changes to 3D designs real time with the Mercury 3D engine
    19. 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. H.264 Encoding in After Effects
    3. Export an After Effects project as an Adobe Premiere Pro project
    4. Converting movies
    5. Multi-frame rendering
    6. Automated rendering and network rendering
    7. Rendering and exporting still images and still-image sequences
    8. 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
      1. Export After Effects project as Premiere Pro project
    3. Sync Settings in After Effects
    4. Creative Cloud Libraries in After Effects
    5. Plug-ins
    6. Cinema 4D and Cineware
  19. Collaboration: Frame.io, and Team Projects
    1. Collaboration in Premiere Pro and After Effects
    2. Frame.io
      1. Install and activate Frame.io
      2. Use Frame.io with Premiere Pro and After Effects
      3. Frequently asked questions
    3. Team Projects
      1. Get Started with Team Projects
      2. Create a Team Project
      3. Collaborate with Team Projects
  20. Memory, storage, performance
    1. Memory and storage
    2. How After Effects handles low memory issues while previewing    
    3. Improve performance
    4. Preferences
    5. GPU and GPU driver requirements for After Effects
  21. Knowledge Base
    1. Known issues
    2. Fixed issues
    3. Frequently asked questions
    4. After Effects and macOS Ventura
    5. How After Effects handles low memory issues while previewing

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.

Lataa

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.

Huomautus:

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

Pyydä apua nopeammin ja helpommin

Oletko uusi käyttäjä?