After Effect Learning

646 Motion Graphics templates Adding controls in the Essential Graphics panel View supported properties If you want to only view the properties supported by the Essential Graphics panel, click the Solo Supported Properties button in the panel. The button filters the properties and displays the supported properties in the timeline. Modify controls You can use the Essential Graphics panel to customize controls in the following ways: • Rename a control: To rename a control, do any of the following: • Click the name field of the control and enter a new name. • Drag and highlight the current name and enter a new name. Last updated 11/4/2019

647 Motion Graphics templates • Reveal source properties: To reveal the source properties of a control in the timeline, right-click the control name and choose Reveal in Timeline from the context menu. The reveal option opens the related composition even if it is closed. • Reorder the controls: To reorder the controls, drag them up or down in the panel. The controls that you add to the Essential Graphics panel are linked to the source properties. Changing the value of a control also changes the value of the properties in the composition. For example, if you change the Opacity to 50% in the panel, the value of Opacity in the composition also changes to 50%. The composition values are simultaneously updated as you slide the value of numerical controls in the panel. To disable the live update feature, hold Option (Mac) or Alt (Win) as you slide. Create groups of controls You can group controls in the Essential Graphics panel for better navigation and to reduce clutter. This is particularly helpful when you add long lists of editable controls or the master properties of nested compositions to the panel. To create a group, click the Add Formatting menu in the lower-left corner of the Essential Graphics panel, then select Add Group. To add a control to a group, drag it over the group name. Font controls When you add a text layer to the Essential Graphics panel, you can modify and control the font family, font style, size, and faux styles of that layer in a Motion Graphics template. Use the following steps to add font property controls to the panel: 1 Add the Source Text property of a text layer to the Essential Graphics panel. 2 Click Edit Properties option on the right side of the control row. 3 In the Source Text Properties dialog, select the font properties to control from the following options: • Enable Custom Font Selection - Adds the Font Family and Font Style controls. • Enable Font Size Adjustment - Adds the Font Size control. • Enable Faux Styles - Adds Faux Bold, Faux Italic, All Caps, and Small Caps controls. Click OK. There is another option in this dialog - Use layer as fallback text box, when you check it on, you can select a comp/subcomp and a shape or clip layer to determine an alternate text box for editing the text in Premiere Pro Program Monitor. This is needed because so many mogrts have text rects which are are unusable - either offscreen, incorrect size, or incorrect placement. Last updated 11/4/2019

648 Motion Graphics templates Alternate text rects Note: Font controls are unsupported as master properties of a nested composition. Add comments in Essential Graphics panel To add comments, click the Add Comment button at the bottom of the Essential Graphics panel. You can add multiple comments, rename them, and reorder them. You can also undo and redo adding comments, reorder them, and remove them if necessary. • To rename, click the name field of the comment and enter a new name. • To reorder, drag the comment up or down the panel. To delete a comment, select the comment and press Backspace or Delete. Last updated 11/4/2019

649 Motion Graphics templates Modifying controls Note: When you duplicate a composition in the Project panel (cmd+D Mac or ctrl+D Win), After Effects duplicates properties and comments added to the Essential Graphics panel for that composition. Export as Motion Graphics templates Name the template To name or rename your Motion Graphics template, click the name field of the template, and enter a new name. Set poster frame for the template You can set the poster frame for your template. The poster frame is used as the thumbnail image for your template in Creative Cloud libraries and the Essential Graphics panel in Premiere Pro. To set the poster frame, follow these steps: 1 In the master composition, place the current-time indicator on the frame you want to select. Last updated 11/4/2019

650 Motion Graphics templates 2 Click the Set Poster Time button in the Essential Graphics panel. Export a template To export your composition as a Motion Graphics template, follow these steps: 1 Click the Export Motion Graphics Template button at the bottom of the Essential Graphics panel. Compositions in the hierarchy of the master composition are included in the template. 2 In the Export As Motion Graphics Template dialog, click the Destination menu. The available destinations are: • Creative Cloud Libraries: Add templates to your Creative Cloud Libraries. • Essential Graphics: Add templates to the local folder by default. Templates stored in the Essential Graphics folder are directly available in the Essential Graphics panel in Premiere Pro. • Local Drive: Save templates to a local directory. The templates you save to your local directory are not automatically available in the Essential Graphics panel in Premiere Pro. Exporting the Motion Graphics templates Select a check box under Compatibility: • Warn me if this Motion Graphics template uses fonts that are not available from Adobe Fonts: Enable this option if you want After Effects to warn you if any fonts used by the composition are not available on Adobe Fonts. • Warn me if After Effects needs to be installed in order to customize this Motion Graphics template: Enable this option if you only want to export After Effects independent features - for example, any third-party plug-ins. For more information on adding assets to Creative Cloud Libraries, see Creative Cloud Libraries in After Effects. Note: These options only display warnings, they do not modify the content of the Motion Graphics template. To edit the project to meet the requirements, cancel the export and make the changes, then export the Motion Graphics template again. Last updated 11/4/2019

651 Motion Graphics templates 3 Choose the export destination from the Destination menu and click OK. Note: You can author Motion Graphics templates (.mogrt files) that do not require the user to have After Effects installed on their computer to customize them. Make sure that your templates meet the following requirements to ensure an After Effects install is not required for the user of your .mogrt: • Only the Classic 3D composition renderer is supported; the CINEMA 4D and Ray-traced 3D renderers are not supported. • All effects included with After Effects are supported, except: Camera-Shake Deblur, Synthetic Aperture Color Finesse, Maxon CINEWARE, Puppet, and Warp Stabilizer. • Dynamic Link footage is not supported such as Premiere Pro sequences or Character Animator CC scenes in an After Effects composition. • FLV format footage and third-party plug-ins are not supported. Open Motion Graphics templates as a project To edit your After Effects Motion Graphics template (.mogrt files), you can open them in After Effects as a Project file. After you edit the template, re-export it as a .mogrt file. To open a Motion Graphics template as a project, use the following steps: 1 Select File > Open Project. In the Open Project dialog, select a .mogrt file, then click Open. When you open a .mogrt as a project, After Effects extracts the project file and assets. In the Extract \"<filename>.mogrt\" dialog, choose a location to extract the .mogrt contents, then click Extract. You can also modify a Motion Graphics template used in a sequence in Premiere Pro 12.1 with the following steps: 1 In After Effects, open the .mogrt file as a project. Modify one or more compositions, or add or change controls in the Essential Graphics panel. 2 After you make the edits, in the Essential Graphics panel, click Export Motion Graphics Template button. You can either replace the original .mogrt file or select a new location or name for the updated file. 3 In Premiere Pro, hold Option (MacOS) or Alt (Win) and drag the new or updated .mogrt from the Browse tab of the Essential Graphics panel and over the existing .mogrt clip in the sequence. Premiere Pro updates the Edit tab of the Essential Graphics panel with the new controls. 1 In After Effects, open the .mogrt file as a project. Modify the compositions, or add or modify controls in the Essential Graphics panel. 2 After you edit, in the Essential Graphics panel, click Export Motion Graphics Template button. You can either replace the original .mogrt file or select a new location or name for the updated file. 3 In Premiere Pro, in the Browse tab of the Essential Graphics panel, hold Opt (MacOS) or Alt (Win) and drag the new or updated .mogrt over the existing .mogrt clip in the sequence. Premiere Pro updates the Edit tab of the Essential Graphics panel with the new controls. Last updated 11/4/2019

652 Motion Graphics templates Work with data-driven Motion Graphics templates Data-driven Motion Graphics templates allow you to quickly and accurately customize bar charts, line graphs, and more, without manual entry or deep knowledge of motion graphics. With this feature, you can add controls for CSV (comma-separated value) and TSV (tab-separated value) spreadsheet data to the Essential Graphics panel. When you export these Motion Graphics templates with data controls to Premiere Pro, you can modify or replace them in Premiere Pro. Another use is that the data controls in the Essential Graphics panel can work as a data browser or editor for CSV or TSV data layers in your composition without exporting it as a template. When you add a composition with spreadsheet data to the panel, the panel displays all the related data which is editable. If you are working with a nested composition, the data controls are not accessible as master properties of that composition. Use the following steps to add data controls to the Essential Graphics panel: 1 Import a CSV or TSV file into your project and add it to your composition. 2 In the Timeline panel, twirl open the layer properties for the data layer. 3 Select and drag the data property group of the layer to the Essential Graphics panel. You can modify the following properties for spreadsheet data in the Essential Graphics panel: • Spreadsheet Properties: Click Edit Properties to the right of the data group to modify the following: • Data property type: Choose the data type for the values in each column. Use this to change how the spreadsheet values are represented in Premiere Pro. An After Effects author sets the type for each column in After Effects. In Premiere Pro, the type translates as either a text string, a hot text slider for numbers, or a hexadecimal value for color (for example, #EE0473). • Minimum Rows: In Premiere Pro, you can modify the number of rows used in the Motion Graphics template. Set the minimum number of rows allowed. • Rows: In Premiere Pro, you can modify the number of rows used in the Motion Graphics template. Set the maximum number of rows allowed. • Data properties: • Column names: Modify the column names that display in the Motion Graphics template. • Data values: Modify the value of a spreadsheet cell. To choose the row you edit, change the Row menu at the top of the Data values group. Note: When you add the Data property group of a data layer to the panel, it removes the expressions that link the data properties of the layer to the source data file. It changes them to static values. If you modify the source data file outside of After Effects, the static data values automatically update. For more information on how to use these templates in Premiere Pro, see Work with data-driven Motion Graphics templates. Note: If you are working with .tsv files, specifically with Excel in German (but this impacts any language that uses a comma instead of a decimal), Excel saves the .tsv files as .txt files. You need to manually change the file extension to .tsv before attaching it to a Motion Graphics template in Premiere Pro. Alternatively, you can use other spreadsheet tools like Open Office or Google Sheets. Last updated 11/4/2019

653 Motion Graphics templates Basics of Master Properties Master Properties work as master controls that allow you to access layer and effect properties of a composition when it is nested in another composition. This can be time-saving when you build complex animations across multiple nested compositions as you don't have to open separate precompositions to view their properties. Master Properties can override their original values and keyframes, which allows you to reuse the same composition as multiple instances with different values. The source composition remains the same, your edits only create instances that you can render after editing your comp. For detailed information, see Work with Master Properties to create Motion Graphics templates. • Item Title • Item Title • Item Title • Item Title • Item Title Use expressions to create dropdown menus in the Essential Graphics panel When you author a Motion Graphics template, it is common to keep the MOGRT flexible for editors using them in Premiere Pro by giving sliders and checkboxes to customize properties. However, for more complex workflows with multiple options, using sliders or checkboxes is not always intiuitive, and is time consuming. You can use the Dropdown Menu Control which is especially helpful for authors of Motion Graphics Templates and editors in Premiere Pro as the menu makes it easier to have more control options and a simpler experience to adjust parameters. For detailed information, see Use expressions to create drop-down lists in Motion Graphics templates. For more information on how it works in Premiere Pro, see Use Motion Graphics templates in Premiere Pro. Use expressions to create drop-down lists in Motion Graphics templates When you author a Work with Motion Graphics templates in After Effects(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. Last updated 11/4/2019

654 Motion Graphics templates 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, download the sample AE project file and get started. 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. Last updated 11/4/2019

655 Motion Graphics templates 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. 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\") }; Last updated 11/4/2019

656 Motion Graphics templates 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 Last updated 11/4/2019

657 Motion Graphics templates 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. Last updated 11/4/2019

658 Motion Graphics templates • 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. 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. Work with Master Properties to create Motion Graphics templates Master Properties work as master controls that allow you to access layer and effect properties of a composition when it is nested in another composition. This can be time-saving when you build complex animations across multiple nested compositions as you don't have to open separate precompositions to view their properties. Master Properties can override their original values and keyframes, which allows you to reuse the same composition as multiple instances with different values. The source composition remains the same, your edits only create instances that you can render after editing your comp. Refer to the Glossary of terms for a list of terms used to explain Master Properties. To create Master Properties, in the Essential Graphics panel, add properties from a nested composition, or nest the composition (Layer > Precompose) after you add the properties. For more information on the property types supported by the Essential Graphics panel, see Types of supported controls. Once you nest the composition, the Timeline panel displays the Master Properties group of the precomposition layer. The core workflow to create Master Properties is similar to how you create controls for a Motion Graphics template. The difference is how you use the properties - whether you use the master properties on a precomposition in After Effects or on a Motion Graphics template in Premiere Pro. Glossary of terms Refer to the glossary of terms (existing and new) to understand the commonly used terms when you work with compositions and Master Properties: • Nest and Precomposition Last updated 11/4/2019

659 Motion Graphics templates Nest and Precomposition Nest: To place a composition inside other composition. Precomposition: A composition that is nested inside another composition in a project. • Parent composition and Child composition Parent composition and Child composition hierarchy When a composition, for example - Comp A is placed inside another composition, for example - Comp B, Comp A becomes the Parent composition which contains Comp B - the Child composition. • Master composition and Master property Master Properties and Master Composition Last updated 11/4/2019

660 Motion Graphics templates A composition you set as Master in the Essential Graphics panel is the Master composition. For a master composition, when you add a layer or effect property from the Timeline to the Essential Graphics panel, the property is called the Master property. • Source property Source property The layer or effect property that a master property refers to. • Linked property Linked property A master property of a precomposition when the source property is not modified • Unlinked property Unlinked property A master property of a precomposition when the source property is modified. • Override Last updated 11/4/2019

661 Motion Graphics templates To change the value, keyframe, or expression of a master property on a precomposition. Work with Master Properties Linked properties - When you nest a master composition, the master properties of that precomposition link to the source properties. For example, if Comp B is nested in Comp A, the effect and layer properties of Comp B are the source properties. From Comp B, the properties that you add to the Essential Graphics panel are the Master Properties. When you modify the source properties, master properties of the precomposition also change. Unlinked properties - When you modify master properties of the precomposition, however, they become unlinked. Unlinking creates an instance of the master composition. You can modify both the master properties and the source properties independently. When you modify a master property, it overrides the value or keyframes of the source property. The precomposition is a unique instance of the master composition and only this instance renders with the modified value or keyframes. Pull and Push buttons When you modify a master property, the Pull and Push buttons in the Timeline panel are enabled, and the name of the master property turns bold. These are the indications that a property is unlinked. The Pull and Push buttons relink a master property with the source property. There are Pull and Push buttons for each master property, and for the entire Master Properties group. • Pull discards the modified value, keyframes, and expression of a master property. • Push applies the modified value, keyframes, and expression of a master property to the source property. After you click either the Pull or Push button, master properties again link to their source properties, and disable the Pull and Push buttons. Pull and Push buttons When you push a modified master property back to source property, all instances of the same master composition are updated if the same master property is linked. For example, you create a master composition for a credit roll and nest it multiple times, and modify the color master property on only one of the precompositions. When you push the new color value back to source value, all instances of the master composition render with the new color value. Relink Master Properties • To relink multiple master properties of a precomposition with their source properties: Select the specific master properties and click the Pull or Push button on the Master Properties group. Last updated 11/4/2019

662 Motion Graphics templates Relink multiple master properties • To relink all master properties of a precomposition with their source properties: Deselect all master properties in the Timeline panel and click the Pull or Push button on the Master Properties group. Modify Source Text master properties In the context of a parent composition, you cannot use the Type tools to modify Source Text master properties in the Composition panel. To modify the text string of a Source Text master property, do either of the following: • Right-click the Source Text master property and select Edit Value. Edit the text string in the dialog, then click OK. • Apply an expression to the Source Text master property. Ensure to include double quotes around the new string. For example, \"She sells seashells by the sea shore.\" Last updated 11/4/2019