EasyBatch

Data to Renders in After Effects.

The extension automates the rendering of Motion Graphics Templates. Use a .csv file or input the data in the extension. Render one composition or many for each line of data. Streamline versioning of templates.

For tutorials and the user guide, see the documentation.

Development

The UI uses Svelte, vanilla css and Radix icons. To interface with After Effects, Adobe's ExtendScript.

To start development:

Use VS Code with the ExtendScript extension (only debugger maintained by Adobe).

• Clone the repository.

• Install the ExtendScript extension in VS Code.

• Run npm install to install the necessary packages.

• Set up your After Effects software for development (read the full guide here)

  • MAC: Use the tools/debug_config.sh script
  • WIN: Use tools/debug_config.bat

• Create a symlink in the folder where After Effects searches for extensions, pointing to your development dist folder. That way no copy is necessary on every build. See the scripts in tools/debug_create_symlink.

• The MainPath property of CSXS/manifest.xml is updated by vite depending on whether is run as build or serve. This is the property that tells the Adobe CEP interpreter what html file renders the UI of the extension.

  • For development, MainPath should point to dev.html. This file only contains a redirect to localhost:5173 where we develop with hot reload using Vite/Svelte.
  • For packaging, change MainPath to index.html. This is the file generated by Vite/Svelte npm_build task. Important: Since Ae uses CEF to render the extension, and it is opening it as a local file on the disk, we are subjected to Chrome's security rules. These prevent the file:// protocol from loading modules. For this reason, we use the vite-plugin-singlefile to avoid loading files.

Debugging

After you have changed the MainPath property in the manifest as suggested above, use the predefined VS Code tasks. In the VS Code command palette type task and select a task.

• npm_dev: It runs vite. This starts localhost:5173 with vite's live update. Since we setup the extension to redirect to this address, our extension will update as we save files (except for ExtendScript files, where the extension needs to be reloaded). To debug the CEF rendering the html inside After Effects, see .debug File below.
• npm_build: It runs vite build:
  • It creates the extension's entry point index.html inside dist.
  • Using viteSingleFile packages the JS modules and the CSS inside the html file.
  • Using viteStaticCopy it copies the files inside the CSXS and host folders to the dist folder.

.debug File

This file will indicate the Adobe application to start a CEF debug session using the port described in it. In this case we're using 8009. Therefore, by opening http://localhost:8009/ you can debug the CEF host rendering the extension. The .debug file has to be located inside the dist folder, and the ID of the extension, has to match the ID declared in the manifest.xml.

Important Files

CSXS/manifest.xml

This is the document that defines our extension. After Effects will scan the extensions folder and will recognize an extension by looking for any folder that contains CSXS/manifest.xml.

src/

Svelte source files. Mainly the files that have to do with UI/User Interaction.

• App.svelte Main entry point for our app.
• lib/Messaging.mjs Defines classes for communication between the UI and the CEP/ExtendScript side.
• lib/AutomatorTypes Contains the classes where the app stores its data.
• lib: PropInput, ModalAlternate, Dropdown Svelte UI components.

host/index.js

This is the ExtendScript side of our app. ExtendScript is based on ECMAScript 3 and is the language used by scripts to interact with Adobe applications. Our Svelte application can't access directly the methods of ExtendScript. For that, we need to call __adobe_cep__.evalScript().