Synced Dropdown Menu with Essential Properties for MOGRTs

[Wally R.]

Calling MOGRTs experts! I'd like to share my solution to a goal I solved and would like your thoughts if there's a better version to addressing this.

1. CONTEXT

• I have a Talent Name AE template meant to be distributed to other teams where they can incorporate their own talent names and titles and then export into a MOGRT.
• Some names can have appended titles like Red Team or Blue Team.
  
  • The Title Names are a different font.

2. GOAL

• In AE, I was trying to find a solution to not have the designer have to go into Expression Code.
  • I was able to achieve this using a combination of For Loops, If/Else Statements and Index references.
  • The function involves a Title Menu on all the Name Layers in which the title can be preset to either None or any Title that the designer would set up.
    
  • The flaw with using the Dropdown Menu Control effect for the Title menu is once you rename or add a Title item, you'd have to individually update the menu in every single name layer since copy-pasting the updated menu across all name layers overrides each name's respective title preset.
  • I want the optimized workflow when localizing the template to be as simple as just renaming existing names and title layers which dynamically update existing items, or duplicating existing names and title layers to add new items to the Menus.  

3. SOLUTIONS

Attached are 2 builds I achieved the solution for but both have their own pros and cons.

• V1 uses the Layer Control Effect for the Title Menu.
  
  • Pros:
    
    • Title Menu is synced & dynamically updates the when I rename or add new items.
    • Set Titles are parented to the layer.
      so even if you add new title layers between 8. Red Team & 9. Blue Team (let's say new item 9 is now [9. Orange Team] and Blue Team is now [10. Blue Team]), layers that had Blue Team titles preset will remain Blue Team, regardless if the title's layer index changes from a reordering. 
  • Cons:
    
    • Layer Control populates its menu with every layer inside the comp that it's in. 
    • Layer Control isn't able to look at comps outside its own comp.
      Since the effect needs to be in on the Name layers, the Layer Control Title Menu results in this messy interface which includes names, and the titles being all the way at the bottom. (The name layers reveal by opacity linked to the Names menu value == index, thus the titles can't be up top in the comp.)
      
      
• V2 uses the Essential Properties + Dropdown Menu Control
   
  • Pros:
    • Adopts the Dropdown Control Menu ability to enable a cleaner Title Menu interface.
    • Name layers are only One precomp, linking the name text to Layer.name
    • One precomp + Essential Properties Dropdown Menu = Menu Sync
      The Title menu items can be renamed/added just once and updates apply accross all layers
  • Cons:
    • Dropdown Control Title Menu requires an associated precomp where menu items don't dynamically update to changes made within the Titles Comp. 
      So you have to update the Title Comp And the Title Menu.
    • Set Titles are Not parented to layer. 
      Unlike the pros of Layer Control, once a title layer's index changes, you'll have to re-set that title in the corresponding layers that had the title. 

4. THE IDEAL
The following concepts would adopt the pros of both worlds if it was possible:

• 4a. Is there a way to add Layer Control Effect into Essential Properties?
  It currently doesn't seem possible, but this would be the best solution for the title parenting and item sync.
• 4b. Is there a way for Expression to read the item name in a Dropdown Menu Control?
  This could solve for Dropdown Menu Control's dependence on a mirrored precomp.

5. Lastly, does anyone have any feedback on how you would have optimize this?
Any better workflows towards a dynamic Title Menu preset appended to a name layer?

I appreciate any discussion.

- Wally

[Roland Kahlenberg · Accepted solution]

It all begins with understanding the User (newbie/intermediate/advanced and are they Editors in PPro or AE users) and keeping Naming Conventions agnostic so they can be used under different use-cases without requiring manual changes in code. Thirdly, look at using Datasets to commit the input automatically if this can be done. Fourth, when allowing for Automated workflow, always allow for Manual Input as an option; just in case there is an error in the Dataset or the Dataset has not been updated or a new use-case comes up and the template is applicable.

You'll also want to look into Design Systems; specifically, at Design Tokens and naming conventions - it's alot about creating naming agnostic conventions.

Layer Controls are not supported in the EGP and I doubt they will be since they include ALL layers in a Comp - this will create more problems for users than any expected benefit. 

There is a script (Create Drop Down from Text) at this URL (https://lova.tt/scriptlets ) that creates a Drop Menu. I've not used it so let us know if you do.

So, don't create Drop Downs with actual team names if this has to be updated frequently. It looks nice etc but it also means regular updating. An example of an agnostic name is First Team , Second Team etc. and these can be used to reference a Dataset (JSON, CSV, TSV). 

If developing for a client they will want specific names. For in-house use, agnostic names should be preferred. 

HTH


PS - If you enjoy developing world class Motion Templates and Toolkits, I have an upcoming Advanced Course. Here is a Youtube Playlist on Responsive & Adaptive MoGraph - https://youtu.be/HHn2pwWqPWA?list=PLTVytW_35OIHRy3iFmQfmzzu9Cwj-vfg_


Follow me on Twitter/X or LinkedIn for details when the course is launched.

[Wally R.]

Thank you for the thorough insight Roland!
What I attached in the post was a reduced version of the project since the original was not small enough.
I was trying to isolate the query of if there's a way for Expression to read a Title Menu's item name (which would bypass the need for an associated precomp and further reduce the steps to update the template).
Assuming the answer to this is No, then perhaps I can mark your response as the "Correct Answer."

To clarify, here's a screenshot of the EG panel that would reflect the Premiere User interface. It features a 2-name comp. It accommodates agnostic names (Talent Name #, Title 1) and a custom field for both names and single title.

I elaborate further on the template's features in my response to Shebbe below, but it's meant to be distributed to other AE Design teams out-of-house which they would modify to fill with their own talent names, titles and brand colors, and then exported to MOGRTs to their editors.

I wasn't aware of using scripts (haven't touched scripts in general) as I'd think a company could be wary of using external resources if there's usage rights/restrictions. But perhaps it can be entertained if I'm able to implement it. (Thank you for the links!)
As of now (scriptless), the workflow to update the template is mainly a 2-step process (to add an item) which is just Duplicate an existing layer and Rename the layer (or set a Title if it has a title). The same Duplicate/Rename steps to add new titles. (Not counting updating their respective menus themselves.)
 
I think linked datasets and scripting will be my next steps to learn. I subbed and looking forward to your Advanced Course!

[Roland Kahlenberg · Accepted solution]

Since your Data Structure is consistent, I'd look at using a CSV Dataset together with a MoGRT. With this pipeline, you can bypass more work on an AEP and all the Video Editor has to do is to select the updated CSV File in the Essential Graphics Panel, in PPro. 

So, each editor receives a single MoGRT just once and for each output, a seprate CSV file. 

Google "premiere pro CSV data-driven" and you should get a few good hits. Adobe Stock has a few Free Data-driven AeMoGRTs which you can look into and play with, to get to grips with how they work and also for testing the workflow - search for Data-driven in the Sdobe Stock/EGP's Browse/Search area.

And as suggested earlier, allow for Auto and Manual data input just in case updated data which Auto Mode requires is not available. I usually use a Drop Menu with two selections - (1) Data-Driven (Auto) and (Manual Input). 

You should also use the Comment Feature in the EGP to place Help Notes. I usually place such Help Notes in an EGP Group so it doesn't clutter the EGP UI. 

HTH


 

[Wally R. · Accepted solution]

Roland, an update:

I looked into Create Dropdown From Text script and it wasn't quite useful for the menu syncing that I was trying to solve. It just makes a more efficient interface to manually input the items for the menu (as opposed to clicking add for each item in the traditional way of accessing the its properties).

But your guidance on CSV Data-Driven templates did the trick!
This youtube tutorial helped me understand and implement a csv file and link it to my dropdown menu.
Updating the comp is now just 3 total steps:

1. Update the CSV file to your new items and save
2. Open the AE and allow the changes of the updated CSV
3. Update the Essentrail Graphics Panel Menu Items (Name 1 and Name 2) to match the items/order of your CSV file

And that's it. No more separate Name and Title precomps. The driver comp is much cleaner (just 4 layers) and the code much smaller and easier to read.

Thank you for all the help!

Cheers,
Walter

[Roland Kahlenberg]

Thanks for reporting back and great that you've worked it out. 

Just a couple of notes on writing Readable Code - 

1 : Use Variable Names That Explain Themselves - this helps yourself and others who have to edit or learn what you wrote. Distinctive Names are the best.

2: A good indicator, a Rule of Thumb, that you have Readable Code is to look at the last line of code. If you or someone else can quickly understand the logic/process and the variables/properties involved then you've done a good job.

3: Start off each Expression with a Comment that explains the purpose of the code.

HTH



  

[Shebbe]

Could you elaborate a bit more on how you intend for the other users to use the template? How much of the data is predefined vs what you expect them to fill in? I think depending on the use case the template can be a lot more simple with the text layers all being just a single comp and only two text layers inside for the different fonts.

[Wally R.]

For the Premiere End-User, these are the properties in their Essential Graphics. When the Name 2 menu is occupied, it becomes a 2-name comp. When it's the 1 Name comp, a name could have a pre-set title or not, and those titles could have their respective colors (like say the Red Team titles adopt a red backplate). 

What I build is a generic John Smith/Jane Doe template which is sent to outside teams with their own talent and their own titles. The incorporation of different Title font (that can have Custom-input by the end user) with different colors plus the 2 name comp is what makes this complicated. Thus making the titles (that respective team's AE designer would define/rename) as dropdown menu seemed to be the more efficient rout as linking the code to the Title Menu value can automatically trigger that set title's attributes (font/color/animation, including custom title).

The 1 name and 2 name comps look at the same Talent Name comp to pull the data from, and the 2 name can become a different branded color if both names are from the same team. 

My goal was for the AE Designer not needing to touch the code & updating with the least amount of steps. The workflow right now is just duplicate an existing name layer, rename the name and set the title menu (or add a new title using the same duplicate/rename steps). You only do it once in one comp for updating or adding names, and once in one comp for the titles. But the golden query I was hoping to find was is there a way for expression to read a Title Menu's item name (which would bypass the need for an associated precomp)? If so then the build can successfully adopt your suggestion of one comp two text layers without losing the minimal duplicate/rename just once steps.

[Shebbe]

I think I sort of understand what you're trying to do. But making the backbone of a template only sounds incredibly difficult. Not in terms of skill, but simply by how practical it is. Every user would inevitably need to have some form of customization to suit their needs. Be it fontstyle, design, but also behavior, placement etc. I think it's virtually impossible to create a generalized template that can still be adapted by designers without ever changing the way the comps / expressions work. Let alone only using it as MOGRT in Premiere rather than the open file in AE.

Dropdown Menu is especially not suited for this because it's entries cannot be linked to other instances and globally updated, so if for one party the amount of options/references need to change, the code needs to change along with it, and which name is associated with which color etc.

We often create similar type of dynamic titles for our projects but every project each time has it's own custom setup tailored to that specific setup. We always end up coding things differently here and there.

Sorry maybe not the best answer, perhaps I could come to more solution minded conclusions if we had a conversation about this on a call but my time is limited at the moment...

Good luck for now!

[Wally R.]

To further clarify, the backbone is an established group-wide style guide, and the distribution is to different teams within the same company/umbrella of the style guide. 

What's locked is the animation and Name/Title fonts. What's customizable is the names, titles, colors and the amount of names/titles.

It was a bit challenging but I was able to link other instances to the same dropdown in which all they need to do to update is match the menu items to the items in the dropdown (whether they add by duplication or rename/reorder layers) without the designer needing to touch the code. The expression uses For Loops and Layer Index where it searches for what layer became visible (triggered by the Dropdown Menu value=index), then adopts that layers' color FX, animation and text values. 

To your point perhaps I overengineered this but I wanted to achieve building a template that is easiest to update for non-code-savvy designers given the branded parameters. I appreciate your conversation and definitely would consider just the two text layers for next time.

Thanks so much!
- Wally