Plainly Videos After Effects Plugin

This repository contains code for the After Effects Plugin created to support Plainly Videos users to collaborate with the Plainly platform from within After Effects.

Plugin features

• Export zip: Gather all project assets and fonts, then compress them into a single zip file for easy sharing.

Installation

Using ZXP/UXP Installer

1. Download the latest plainly-plugin.zxp from the latest release.
2. Download ZXP/UXP Installer developed by aescripts + aeplugins. During the installation process make sure to check Install ZXP/UXP Installer.
3. Drag & drop plainly-plugin.zxp into ZXP/UXP Installer.

Manual installation

1. Download the latest plainly-plugin.zxp from the latest release.

2. Run the Command Prompt / Terminal, navigate to Unified Plugin Installer Agent application folder, and install the plugin:

   Windows: Run in Command Prompt:

   cd "C:\Program Files\Common Files\Adobe\Adobe Desktop Common\RemoteComponents\UPI\UnifiedPluginInstallerAgent"
   UnifiedPluginInstallerAgent.exe /install 'path\to\plainly-plugin.zxp'

   MacOS: Run in Terminal:

   cd "/Library/Application Support/Adobe/Adobe Desktop Common/RemoteComponents/UPI/UnifiedPluginInstallerAgent/UnifiedPluginInstallerAgent.app/Contents/MacOS"
   ./UnifiedPluginInstallerAgent --install '/path/to/plainly-plugin.zxp'

3. Open Adobe After Effects, navigate to Window -> Extensions, and select Plainly Videos to start the extension.

NOTE

The manual installation is successful if the install command outputs similar log entry:

Installing extension with file path = C:\Users\plainly\plainly-plugin.zxp
Installation Successful for extension with file path = C:\Users\plainly\plainly-plugin.zxp for all users

You can read more about the Unified Plugin Installer Agent and its available commands.

How to uninstall

If you wish to uninstall the plugin you can do that via Unified Plugin Installer Agent or in Creative Cloud > Stock & Marketplace > Plugins > Manage plugins

Development

Prerequisites

Before running or developing the plugin, ensure you have the following:

• Node.js: Version 20.11.1
• Adobe After Effects
• Check how to turn on Debugging Unsigned Extensions

Run

To install and run the extension:

1. Clone this repository to a location of your choice:

   git clone https://github.com/plainly-videos/after-effects-plugin.git

2. Create a symbolic link to the required folder:

   Windows: Run the following command in Powershell:

   "New-Item -Path 'C:\Program Files\Common Files\Adobe\CEP\extensions\com.plainlyvideos.after-effects-plugin' -ItemType SymbolicLink -Value 'full\path\to\after-effects-plugin'"

   Replace full\path\to\after-effects-plugin with the path where you cloned the repository.

   MacOS: Run the following command in the Terminal:

   ln -s 'full/path/to/after-effects-plugin' '/Library/Application Support/Adobe/CEP/extensions/com.plainlyvideos.after-effects-plugin'

   Replace full/path/to/after-effects-plugin with the path where you cloned the repository.

3. Install dependencies and build the project:

   yarn install && yarn build

4. Open Adobe After Effects, navigate to Window -> Extensions, and select Plainly Videos to start the extension.

Project structure

The plugin is built using Vite, Node.js, and React. Below is an overview of the project's key components:

• CSXS/manifest.xml - Defines the extension configuration
• src/ - Contains the plugin's source code, including the React components and utility functions
• src/lib - Contains Adobe CEP library files
• src/jsx - Holds ExtendScripts files
• src/node - Contains Node related source code
• .debug - File for debugging the extension

Debugging

To debug the plugin:

• Ensure the extension is active in Adobe After Effects.
• Open your browser and navigate to http://localhost:8088/.
• Access the plugin interface for debugging.

Notes:

• If you make changes to the manifest.xml config file, restart Adobe After Effects.
• Run yarn build to build extension for production.
• Run yarn build-test to build extension for staging.
• Run yarn dev to work on extension in development mode. After making changes, use Reload extension button on UI to see changes.

NOTE: When running one of these two commands for the first time yarn build, yarn build-test or yarn dev make sure to restart Adobe After Effects, because manifest.xml file is changed for either production, test or development mode.

Additional Resources

For a comprehensive guide to Adobe CEP development, refer to the Getting Started guides