This is my personal boilerplate and build system for creating Adobe Extension Panels.
It is based on Adam Plouff's excellent Skelotron template.
- Transferring data as JSON from panel to be used within an extendscript function.
- Modal popup.
- Automatic detection of host app brightness to match panel - updating with JavaScript.
- Context and flyout menus.
- Rewritten .gulpfile, using Gulp 4.
- Added development feature to .gulpfile, allowing for quicker panel development with quicker code.
- Gulp setup for creating certificate for the extension.
- A "Make New Composition" example feature so there was something besides a blank panel in there.
- Removed Vue and Vue-dependent features 😢
Videotools is a set of Python scripts I wrote to support video pipeline workflows, including some tools to assist with panel development.
The Zombietron Cloner (zombietron-cloner.py) will automatically download the project and configure it correctly.
If you do not want to use the Zombietron Cloner, you can download and set up manually.
- Clone Zombietron from Github.
git clone https://github.com/andrewrbrady/zombietron.git- Rename the Zombietron project folder.
- cd into the new project folder.
- Install the necessary packages with npm.
npm install- Do a search and replace for all the files in the renamed Zombietron folder for YourNewToolName.
- You can try the following shell command. OSX users-please note the blank input for the sed command. This was necessary during testing.
cd ../
grep -rl Zombietron . --exclude-dir=.git | xargs sed -i '' 's/Zombietron/YourNewToolName/g'- Create a symlink between the src folder in your new directory. Change 'username' in the command below to match your system username.
ln -s /Users/${USER}/Development/YourNewToolName/src /Users/username/Library/Application Support/Adobe/CEP/extensions/YourNewToolName-
Download ZXP Installer. Open it and navigate to settings. In here you can enable extension debugging which allows you to open and use unsigned (in progress) extensions.
-
Open After Effects and navigate to Window > Extensions > YourNewToolName
-
Follow the instructions in the "Development" section to use Gulp to develop your panel.
-
Debugging may be done in Chrome at http://localhost:8073/
- This address may be set to anything you want in the invisible debug file
I personally find breaking projects down to a more granular level makes them easier to manage and less prone to mistakes. Gulp makes it easy to work on projects in many smaller files, ultimately compiling them into a single file.
- Use Gulp to watch for project changes.
gulp dev- Gulp will begin watching all files the 'dev' directory for changes.
- Make changes to your HTML, JS, and/or JSX files in the "dev" folder.
- Save your changes.
- Gulp combines all files in the dev/jsx folder into one jsx file. It then wraps this .jsx file in an anonymous function.
- Gulp combines all files in the dev/js folder into one js file. It then wraps the code within this .js file in an anonymous function.
- Gulp builds all the files from the 'dev' directory into the 'src' directory.
Your changes will now be visible in your After Effects panel by right clicking the panel and selecting "Reload", or closing and relaunching from the Window > Extensions menu.
Once you're all done and want to share with someone else you need to sign the extension. This is for security and means it can't be edited. You need to create a certificate but you only need to do this once. Reuse this certificate for future tools too.
- Download ZXPSignCmd and place it in your Applications folder.
- Type gulp and hit enter
- A brand new BrutalNameTool.zxp will now be the Zombietron/Install folder
- Install this new zxp file with ZXP Installer to make sure it works
Obviously Adam Plouff, for releasing Skeotron to the public, and everyone else in the After Effects development community.
Apache 2.0