Making an online template

An online template on MoDeck is simply a collection of mogrt files, to create an online template, make a folder in your sync folder and add your mogrt files to it (Read this and this for more info about creating mogrts in After Effects), each folder containing 1 or more mogrts instantly becomes an online template that will now be synced to your account and accessible by anyone you invite. The name of the folder that contains the mogrts will become the name of the template, this folder can be renamed at any point to rename the template, the app will also find any sub folders that contain mogrts and these folders will be shown to editors online, so they can browse the same structure you have set up in the tempalate folder.

Once you've created your first template, open the online editor to see all of your templates in action and test things out for yourself!

You can also add preview clips to templates and individual mogrts, allowing your online editors to easily view a showcase/preview of what a video made with that template would look like, as well as quickly view the mogrts in motion on hover.

To streamline the process of making After Effects changes to your mogrts, you have the option to enable the app setting "Auto export mogrts from aeps in sync folder" with this enabled, you can now save aep files into your sync folder, any comps with Essential Graphics at the root of the project panel in this aep file will automatically be exported as mogrts into the same folder as the aep, making them available in the online editor. As well as looking in the root of the project panel, it will also look in any folders that have their comment set to modk-export, as well as any folders that are named modk-export. This allows you to quickly adjust mogrts without needing to re-export manually every time and without you needing to attempt to import mogrts into AE the alter them, the MoDeck app will automatically pull mogrt files out of the aep when you save the project.

The desktop app

The desktop app is used to sync your mogrt files to the online editor, list all edits that have been made using your templates, handle the rendering and exporting of MoDeck edits and to allow you to invite editors to use your templates. Ensure that your After Effects install location is set to the correct path in the settings so that the app can find and integrate with After Effects, you can also define a different sync folder location, by default the sync folder will be in your user directory.

The app runs in the system tray and is designed to run in the background to always watch for new edits and render and send videos to the editor in the background, click the icon in your tray to open the app window, you can also double click the icon to open your sync folder.

The app keeps a background instance of After Effects running which it uses to quickly assemble edits and render still previews for online editors without interfering with your regular After Effects usage, this background instance of AE will launch whenever the app starts up, unless you disable the app setting "Launch background AE on app start". It will also get launched whenever an online editor requests a preview or a render. The AE icon to the top right of the app indicates whether this background instance is currently online and running, when it is teal it means the instance is running, you can click this icon to close or start the background instance.

The advanced online editor (Sequence editor)

When someone is invited to edit your template, they will be able to edit it through the online editor, where they can see all your shared mogrts and their editable options to customize the options and create videos. Through the template settings on the desktop app you have the option to set whether a template will use the advanced editor or the simple editor.

Upon creating a new edit when using the advanced (sequence) editor, the settings dialog will appear where you can enter a name for this new edit, as well as add a spreadsheet or connect to JSON data to create videos from data and select a base mogrt if one has been set by the template owner. These settings can be accessed again by clicking the Settings button to the bottom left of the screen.

the strip across the bottom of the screen is the timeline, begin by either dragging a mogrt block from the main panel into the timeline, or double clicking a mogrt block to add it to the end of the timeline, the panel to the left displays all the settings for the currently selected mogrt, where an editor can change options, input text, upload media etc.

To view a preview of your changes, click the preview tab above the mogrt browser section, new previews will be fetched every time you make a change to an option, this can be disabled through the template settings on the app. The desktop app must be running on the template owners pc to be able to get previews. Be sure to define which frames to send for previews by using the modk-preview command.

The simple online editor (Journey editor)

Through the template settings on desktop app, you can define whether a template will use the simple editor.

The simple (journey) editor provides online editors with a much more basic way to create videos using your templates, online editors don't save edits, and it does not have a timeline where you drag and drop mogrts, instead, they are guided option by option through all the editable properties of your template, making the editing process far more guided and straightforward.

A preview image is shown to the right of each option, this will automatically update to reflect the editors changes as they edit the options, when setting up a mogrt in the After Effects essential graphics panel, you can define which frame is used as a preview frame for each option by making sure that the modk-preview comment appears before that option in the essential graphics panel, drag it before any options you want this preview to be used for in the editing journey.

If you add a regular comment in the Essential Graphics panel, on the journey editor it will appear as an additional description for the option directly after that comment, allowing you to add additional details and notes about that editable property that will appear when an editor hovers on the info icon above an option.

Invite others to use your template

Through the desktop app you can invite others to access your template. To invite someone, select the template from the drop-down at the top of the app and then clicking the user management tab. You can add multiple email addresses by separating them by commas. Any editor you've invited will be notified via email and can now make videos by arranging the mogrts of the template in sequence using the online editor. any properties available in the mogrt can be edited through the online editor, with some additional features that enhance the capabilities of these mogrts.

Be sure to add hello@modeck.io to your email contacts to ensure that all notification mails are received correctly.

Adding preview clips

It is often helpful to provide your online editors with preview/showcase clips to give them an idea of what their rendered videos can look like before they've started editing, to include a video preview of a mogrt first ensure that you are using After Effects version 24.2 or later, then simply enable the option Include video preview in the mogrt export panel when exporting your mogrt from the Essential Graphics panel.

To add a preview/showcase video for the entire template, add an mp4 with the same filename as the template into the root of your sync folder, alongside the template folders, once added a play button will appear next to the name of that template, clicking this opens the video player to show that preview/showcase online.

Modk commands

Extra features are added to mogrts in the form of modk commands, these are applied by adding particular properties to your Essential Graphics panel and naming them in particular ways as presented in the table below. Many commands are applied by adding a comment to Essential Graphics and naming it with one of the commands, to add a comment, select the "Add Formatting" drop-down on the bottom left of the Essential Graphics panel and select "Add Comment."

Media replacement

To make a video or image in your After Effects project replaceable, simply drag that media layer into your Essential Graphics panel and give this option a name.

When this media item is replaced, the new media item will be cropped within the bounds of the original media item, and it will be scaled within those bounds according to the "Default Scaling" option that can be found to the right of this option in the Essential Graphics panel.

Note that you can also make a comp layer replaceable by dragging it into your Essential Graphics panel, meaning that comp will be replaced by media uploaded online, this is also helpful if you would like to make an audio layer replaceable; since Essential Graphics prevents you from adding an audio layer, just precompose that audio layer and drag that precomp into Essential Graphics.

When setting replacement media online, editors can either upload their media through the editor, or enter a filename or URL. If a filename has been entered, then the app will look for this file within the MoDeck Sync\_modk-data\User media folder, you can add extra folders for it to look in by using the setting "Add additional media folders" found in the template settings on the app. Editors online are also able to enter filenames that contain slashes to have it look within subfolders of each folder it checks (These must be forward slashes "/")

If the user has input a URL, the app will detect that it is a URL and attempt to download the media from that URL, this also supports URLs to various video platforms, such as YouTube, Vimeo, Instagram etc.

If the user has uploaded their media through the online editor, that media will be uploaded and stored online, and the app will download it and place it into the MoDeck Sync\_modk-data\User media\[EDITORS EMAIL] folder.

Editors are also able to generate speech from text in order to have that synthesized speech file replace the media in the mogrt, this is done by clicking the button "Generate speech audio file from text" at the bottom of the media selection dialog, a voice can then be selected and text entered which will become speech, the text can also be driven by data, meaning this text can be dynamically taken from an API or spreadsheet.

Useful scaling expressions

Place one of these expressions in the scale property of the layer to dynamically resize it.

STRETCH to fill entire comp (Will not maintain aspect ratio)

SCALE to always fill comp width (Will maintain aspect ratio)

SCALE to always fill comp height (Will maintain aspect ratio)

SCALE to FILL comp (no gaps)

SCALE to FIT comp (possible gaps on top and bottom or left and right)

LIMIT width

LIMIT height

LIMIT width and height

Useful keyframe expressions

Place one of these expressions in a property that has keyframes to dynamically change the timing of the keyframes. Also check out this tutorial about retiming keyframes for templates.

Make keyframes always animate at the end of the comp, whatever the duration is (useful for fading music or animating elements away at the end of a comp that is using modk-durationEditable or modk-setDuration)

Stretch keyframes so the animation always happens over the full duration of this comp, whatever the duration is

Global options

Add a global option by clicking the 'plus' box at the top of the template logic page, you can then define the type, name, and default value of the global option. A global options type can be either a dropdown menu, text, multiline text, media replacement or comment, on the online editor global options are presented in the exact same way as mogrt options of the same type, however they appear in their own section.

Each global option can also be set to show or hide based on the values of other global options, allowing you to only show options when other global options have specific values set, and hide options that are not relevant, to define show/hide conditions for global options, click the lines icon to the right of a global option.

Predefined sequences

If you would not like your editors to build their own sequence of mogrts, but rather have a set sequence that is altered based on the global options and your specific conditions, then you can enable a predefined sequence. To do this, select the option "Editors use a predefined sequence," you can now click the 'plus' box below this to add mogrts to this predefined sequence, you can then set show/hide conditions for each mogrt in the sequence, and link mogrt options to global options by clicking the lines icon on the bottom right of the each mogrt.

Note that this can be used to define different dimensions of the final video, you can simply add all your mogrts of varying dimensions, then define show/hide conditions so that only one dimension is shown when a specfic global dropdown value is selected.

Mogrt show/hide conditions

Show/hide conditions can be defined on a mogrt by clicking the lines icon on the bottom right of a mogrt at the bottom of the template logic page, at the bottom of the resulting dialog you will see a teal 'plus' box, click this to add a condition to show or hide this mogrt.

You are able to define separate condition groups with multiple conditions in each, as well as define the logic operator (and/or) within, and in-between each condition group. If show/hide conditions are added to a mogrt when a predefined sequence is not being used, then when a mogrt is hidden, it will be removed from both the mogrt browser panel on the online editor, as well as any time the mogrt has been used in the timeline, effectively making a mogrt not usable at all. If applied to a mogrt that's in a predefined sequence, this specific instance of the mogrt in the predefined sequence will be kept/removed in the timeline.

Linking mogrt options to global options

Each individual option within a mogrt can be driven by a global option, to do this, click the lines icon on the bottom right of a mogrt at the bottom of the template logic page, then in the resulting dialog, find the option you would like to link to a global option, and click the 'link' icon on the right of the option, you can then select the global option you would like to link this option to. When a mogrt option is linked to a global option, the link button will appear teal and show the name of the global option it is linked to. Any mogrt options that are linked to global options will no longer appear on the online editor, as it is now controlled by the global option.

Dropdown mapping

If a mogrt option is linked to a global option that is a dropdown menu, then you will need to define how each selection in the global dropdown affects this mogrt option, this is referred to as dropdown mapping, ie. you are mapping each dropdown selection to a resulting value for this mogrt option.

In the above example, a mogrt option that has the option type color has been linked to a global option that is a dropdown, therefor we must define which color this mogrt option will be set to for each dropdown selection.

If the mogrt option is a text option, then you will also see a button above the mapping "Populate all with dropdown option names" clicking this will automatically populate all dropdown mappings with the names of the dropdown options, ie. if the dropdown option is "Red" then the text option in the mogrt will be set to "Red" for this dropdown selection.

Mogrt option expressions

If a simple link to a global options value is not enough, you are able to set up a more advanced connection to global options by using an expression, meaning you can drive a mogrt options value with very specific logic as well as augment and combine values of multiple global options using a JavaScript expression. The result that the expression evaluates to, is what this mogrt options value will be set to.

Add an expression to a mogrt option by clicking the curly braces icon to the right of the mogrt option, these expressions use the same JavaScript language as expressions in After Effects. A key aspect of these expressions is that you can plug the value of any global options into your expression, do this by right clicking in the expression editor and select a global option, once your expression is ready, click "Evaluate expression" below the expression editor to view what the resulting value of your expression is.

A basic example would be if you have a global drop-down, lets call it Global dropdown, and you want a mogrt text option to be set to the value of Global dropdown, ie. whatever drop-down option is selected, the text will be set to that drop-down option text, the expression to do this would be this:

Here I've simply right clicked in the expression editor and inserted the value for Global dropdown. But what if you wanted to have a drop-down value at the bottom of the list in Global dropdown called Custom and you want to make it so that if the user selects Custom then they'll be able to set the text to their own custom text through a text input, what we could do is make another global option, make it a text field, lets name it Custom text then use an if-then in your expression to check if the drop-down is set to Custom, if so, use the value of Custom text otherwise use the value from the drop-down, the expression would look like this:

To take this a step further, you could also apply show/hide logic to the Custom text input so that it only shows if the drop-down is set to Custom. Your user is now able to pick a value from the drop-down, but also select custom if they would like to enter their own custom text value. This is quite a basic example, but the idea is that it should allow you to build much more advanced logic into your templates options and even take values from multiple different global options to do if-then checks and augment their values in useful ways.

Dealing with render issues

If you are running into errors when rendering, the best thing to try is to clear the temporary files, this is done through the app settings. It is also important to ensure that you have enough space on your drive, a full drive will cause renders to fail.

If the videos are rendering without error, but the video content itself is broken is some way, such as layout issues, timing issues or the video is just black, what you can do is go into the MoDeck temporary files at MoDeck Sync\_modk-data\Temp to find the aep that was generated for the render, then open this aep, the comp at the root of the project is the comp that would have been rendered, here you can navigate the project to see if you can spot where things went wrong, and see if there are corrections you can make to your mogrts to resolve them.

It is also possible that a background instance of After Effects has gotten stuck and was not closed correctly which could affect rendering, first close Media Encoder, then close the background instance of AE by clicking the AE icon on the app, then open you task manager and look for any instance of After Effects and close them, now start up the background AE again.

If you are seeing issues in only the preview images that are being shown on the editor, but not in the final rendered videos, then you are able to debug issues with previews by finding the aep that was generated for the preview, the aep for the latest generated preview is located in the MoDeck temp folder at MoDeck Sync\_modk-data\Temp\preview-frames\latest_preview.aep you can open this aep and see if you can spot what's causing the issue.

Installing the MoDeck AE extension

The MoDeck app communicates with After Effects by using an invisible extension which it installs onto AE automatically the first time it needs to render, the app installs this extension by adding a symlink from the extension folder stored alongside the MoDeck app, to the folder in which AE extensions are stored.

However the MoDeck app can sometimes encounter issues creating this symlink automatically, this can be caused by folder permissions, missing files etc. To address these issues you can attempt to create the symlink manually, this can be done by running a simple terminal command, follow these steps to try to create the symlink yourself:

Windows

MacOS

If you facing any trouble with this, please don't hesitate to reach out to support for guidance.

Multi machine rendering

If you would like to share the render load across multiple machines, you are able to simply install and run the app on multiple machines, all signed into the same MoDeck account, these separate instances of the app will now share the rendering requests, render requests made from the online editor will be delegated by the MoDeck server to whichever running app currently has the least amount of concurrent render requests. When running multiple instances of the app it is important to make sure all the machines are sharing the same mogrt files, there is also a file in your MoDeck template folders that was generated by the MoDeck app called ".modeck" (This file may be hidden on MacOS) in order to ensure that each template on each machine is referencing the same online template, it is important that your templates each have this same ".modeck" file alongside their mogrts, this file simply contains the unique ID for the template, when multiple machines has template folders with the same ".modeck" file, they will be referencing the same online template, so make sure you copy this file to other machines along with the mogrts.

It is up to you to ensure that each machine has the same mogrt files, in template folders that have the same name, and the same ".modeck" file in each of those template folders. Note that this will not speed up individual renders, but rather distribute each edits to render simultaneously on different machines, good for when you will need to render many different edits all at once.

Transitioning between mogrts

The easiest way to add transitions between each mogrt in the sequence is to simply add your transition animation at the beginning of each mogrt and have elements animate in on transparency, since each new mogrt will be added on top of the last, this will animate in on top of the previous, if doing it this way, make sure you use the modk-overlap command so that the intro animation happens on top of the previous mogrt in the sequence. But what if you have a mogrt that has editable duration and you want elements in it to animate away at the end of that mogrt? For this you can either use protected regions in your mogrt, if using protected regions make sure that your modk-durationEditable command has "stretch" added to it, or you can set up the outro animations in the mogrt to have their keyframes linked to the duration of the comp, this way that animation will always be shifted to the end of the comp, no matter what it has been changed to through the online editor.

And what about a scenario where you do not want a transition to show at the beginning of the mogrt if it is the first mogrt of the sequence? This can be done using the modk-index command, using this command you can determine if a mogrt has an index of 0, meaning it is the first in the sequence, use an expression on the opacity of the transition layers to hide them if the index is 0.

A combination of modk-index, modk-count and expressions driven by the mogrts comp duration can be used in any number of ways to make the mogrts in the sequence responsive to the order and arrangement they appear in the finished video, allowing you to make templates capable of creating videos suitable to a very broad range of applications.

Using spreadsheets

once you've added a spreadsheet you'll be able to edit its data by typing into individual cells and adding rows and columns. Once a spreadsheet has been added you will see a button appear alongside every option for each mogrt, clicking this link-to-data button will allow you to link that option to a selected column from the csv file, when this edit is rendered it will now render a new video for every row of the spreadsheet, inputting the data from each row into the appropriate options that have been linked. All the rendered video files for this set will be uploaded as a zip file and the editor will be able to download this zip file in the same way they would download a single video file.

Spreadsheet columns can be linked to file inputs, meaning you're able to render multiple videos each using different image or video files, you can simply enter the filenames of files from your media library into spreadsheet cells, then link that column to a file input option of a mogrt, an easier way to do this is to right click on a cell and select "Add a media file" this lets you select a file from your media library to place in that cell. You are also able to use any files that exist in the folder MoDeck Sync\_modk-data\User media in the sync folder of machine running the desktop app, just add it's filename into a spreadsheet cell, when an edit is being assembled by the app, it will always look for media files in that User media folder. You can also add media in the form of a URL that directs to an image or video, the desktop app will detect that it is a URL and download the required media to place it into your template.

When creating a template in AE you can also define default spreadsheet data that will be added to all new edits made with that template, to do this just add the csv data to the Essential Graphics in any one of the mogrts of that template, to add csv data to Essential Graphics, import your csv file into your AE project, place that csv file into one of your comps, twirl open that csv layer and you will see a "data" property group, drag this "data" into your Essential Graphics panel and it will be added as a spreadsheet option.

Using JSON data

Connecting properties to JSON data works very similarly to connecting to spreadsheet data, but with JSON data the data is pulled from an online URL, once you've clicked "Connect JSON data" in the editor settings, you will see an input for entering a URL, enter a URL that leads to your JSON file or API that returns JSON data (The URL must be an HTTPS URL, as opposed to HTTP). Much like with spreadsheet linking, after entering this URL you will see a button next to all of your editable properties, clicking this button will present you with the JSON data that was pulled from the URL, you can now navigate this data and click on one of the JSON values to link that value to this mogrt property, note that this data will be fetched by the desktop app every time this edit is rendered, so the data it renders with will always be current. Just like with spreadsheets you can link media inputs to values from JSON data that are URLs leading to media files, the desktop app will detect that it is a URL and download the media from that URL to use as the replacement media.

You can also use JSON data to render multiple versions of a video, this is done by clicking "Select array for multiple video rendering" under the URL input, this will show the JSON data from the URL, where you can select an array element from the JSON data which you would like to use as the array to iterate over to generate videos, a video will be rendered for every element of this array, any properties linked to JSON data that is part of this array will get its data from each new array element for each video.

When using JSON data, you also have the ability to schedule renders to continuously render at set times and days, to do this, select the "Schedule render" switch below the JSON URLs in the edits settings, you can then select the interval to render, every time a render is initiated, new data is fetched from your JSON URL.

Once JSON data has been added to an edit, you will also have the ability to right click on just about any text input and insert text from JSON data, meaning you can combine a value pulled from a JSON URL into other text, this can even be done with the URL inputs for the JSON data itself, meaning you can add a new URL, then insert text from another URL into that URL, essentially chaining JSON requests. This can also be done with media inputs; once you've clicked on "Select media" on a media input, you can right click in the text input at the top of the media selection dialog to dynamically insert values from data into the filename or URL that this media item will use.

Color schemes and logo

To customize the color scheme and logo of the editor, open the online editor and access the settings via the profile icon and the top right, on the left side of the settings page select "Customize," here you can upload a logo and adjust colors.

If an editor has been invited to templates from multiple users, then their edit selection page will use the default color scheme and logo, but the relevant customizations will be applied in the mogrt editor page. When an editor accesses your template via a Magic link it will always apply your color scheme and logo to the edit selection page and mogrt editor page.

When adding a logo, keep in mind that this logo will be shown at a small size on the top left of the editor, so avoid using logos with intricate details, it is generally preferable to use a solid color, iconic logo that is a png with transparency.

When setting up your color scheme, avoid setting the "primary" color to something that is overly bright or highly saturated as it will overpower the interface and become distracting.

Magic links and embedding the editor on your site

"Magic links" are links that can be created with the desktop app and provided to others to allow them to easily edit your templates without them needing a MoDeck account, anyone who has a link will be able to make edits and request renders for that template.

To create a magic link, open the desktop app, navigate to the template which you would like to create a link for, then select user management, here you will see a magic links section where you can enter a name to be associated with this link and an email where render notifications will be sent to, once created you can then copy the link to send to anyone you would like to provide access to this template.

All notifications for renders made through a magic link will be sent to the email address associated with that link, this is the email entered when you are creating the magic link on the desktop app, you can also leave the email field blank to have it set to your own email address, meaning you will receive all notifications of renders for edits created through this link.

You can also associate multiple emails with one link, do this by clicking "Add email" on an existing magic link, if more than one email is associated with a link then a password will be required to use the link, the password they enter will determine which email their notifications go to, get the password for each email by clicking "Copy pass" next to the email under Magic links on the desktop app. You can also include the password in the link itself, that way when the user opens the link they will not need to enter the password, do this by adding it to the end of the magic link URL as a query string called "p" basically just add "&p=PASSWORD" onto the end of the URL (replacing PASSWORD with the password, eg. https://app.modeck.io/?m=0123456789&d=0123456789&p=tgarxiwb)

These magic links can also be embedded onto your own site using an iframe, simply click "Copy embed code" and you will be able to paste this html into your own site, it may be required that you adjust the css accordingly so that the sizing works correctly on your site.

Customizing notification emails

Notification emails for new invitations and new renders can be entirely customized, this is only possible if you have enabled "Use own email for notification emails" in the app settings. This is an enterprise feature.

Emailer customization is done per template, through the User management section of the app. You can either do a simple customization where you only change the button that appears in the emails (Customize button text and button link to point your users somewhere other than the MoDeck editor) or you can replace the entire HTML of the emailers that are sent.

Dynamic text is added into these buttons or email html templates using double curly braces (eg. {{editName}}) below are all the possible dynamic values that can be used in custom templates, note that some of these are not used in some of the mails (eg. editName would not be present in new invite emails).

• {{deckName}}
• {{editName}}
• {{deckID}}
• {{editID}}
• {{magicLinkHash}}
• {{hashPass}}