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.
- Export zip: Gather all project assets and fonts, then compress them into a single zip file for easy sharing.
- Upload project: Upload active project directly to Plainly platform.
- Acquire the plugin at Adobe Exchange - Creative Cloud.
- Open Creative Cloud application.
- Navigate to Stock & Marketplace > Plugins > All plugins
- Search for
Plainly Videos
, click install and proceed with the installation process.
- Download the latest
plainly-plugin.zxp
from the latest release. - Download ZXP/UXP Installer developed by aescripts + aeplugins. During the installation process make sure to check
Install ZXP/UXP Installer
. - Drag & drop
plainly-plugin.zxp
into ZXP/UXP Installer.
-
Download the latest
plainly-plugin.zxp
from the latest release. -
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'
-
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.
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
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
To install and run the extension:
-
Clone this repository to a location of your choice:
git clone https://github.com/plainly-videos/after-effects-plugin.git
-
Navigate to the cloned
after-effects-plugin
folder. -
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 (Get-Location).Path"
MacOS: Run the following command in the Terminal:
ln -s "$(pwd)" '/Library/Application Support/Adobe/CEP/extensions/com.plainlyvideos.after-effects-plugin'
-
Install
aescripts
dependencies and build for productioncd plainly-aescripts && yarn install && yarn build
-
Install
plugin
dependencies and build for productioncd plainly-plugin && yarn install && yarn build
-
Open Adobe After Effects, navigate to Window -> Extensions, and select Plainly Videos to start the extension.
To prepare extension for signing:
- While inside
after-effects-plugin
directory, runpackage
scriptyarn package
This script will output a package
directory, that will consist out of CSXS/manifest.xml
, plainly-aescripts/dist
and plainly-plugin/dist
ready to be signed using a sign tool.
You can read details about a ZXPSignCmd tool and its available commands.
The plugin is built using Node.js, React and its bundled with Webpack. Below is an overview of the project's key components:
CSXS/manifest.xml
- Defines the extension configurationplainly-aescripts/src/
- Houses the scripts executed within After Effectsplainly-plugin/src/
- Contains the plugin's source code, including the React components, Node.js functions, and utility functionsplainly-plugin/src/lib
- Contains Adobe CEP library filesplainly-plugin/src/jsx
- Holds ExtendScripts filesplainly-plugin/src/node
- Contains Node related source code.debug
- File for debugging the extension
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.
- 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. - All scripts above exist in both
plainly-aescripts
andplainly-plugin
. - Changes in
plainly-aescripts
requires extension to be reopened.
NOTE: When running one of these three 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.
For a comprehensive guide to Adobe CEP development, refer to the Getting Started guides