Adobe CEP is unnecessarily difficult to start using. There's a lot to learn and I don't claim to know it all but this is my simplified setup for building new tools with this fantastically powerful platform. This book helped me a lot with understanding how data is transferred between the panel and host app and I recommend it highly.
I'm very new to build systems and so one of the key features of this setup is the ability to reload the panel with a right click and refresh the jsx at the same time –without having to build or close host app.
I am primarily an After Effects developer but this setup has been tested in Illustrator and Photoshop as well. Examples in this will be for AE but are applicable to other host apps.
- Retrieving data from AE comp - and updating the panel with Vue
- Transferring data as JSON from panel to be used within an extendscript function
- Modal popup
- Preference file saving (must be saved outside of the signed extension)
- Basic gulp setup for packaging up the extension
- Automatic detection of host app brightness to match panel - updating with Vue
- Context and flyout menus
- Skelotron - Project folder that you work in
- Gulp - How you publish and create the zxp file
If you are a person who knows about npm and gulp you can probably skip this.
- Download Node.js. It comes with a command line app called NPM that downloads a bunch of little packages that allow you to build the extension.
- Download this package and unzip it
- Open up Terminal and cd into the newly unzipped project folder
- Type
npm installand press enter to see a bunch of the fun progress bars - There will now be a node_modules folder filled with all sorts of stuff you don't need to worry about
- Do a search and replace for all the files in the Gulp and Skelotron folders for Skelotron and name it something brutal. I used Atom for this.
- Rename the Skelotron project folder to match your brutal new tool name
- Create a symbolic link (OS X/Windows) from your newly named project folder (formerly named Skelotron) to the Adobe Extensions folder. This allows you work with your project folder wherever you want it and still have it open in After Effects.
- [Mac]: /Users/username/Library/Application Support/Adobe/CEP/extensions/
- 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 > Brutal tool name
- Edit the index.html, style.css, app.js and script.jsx all you want to make it look cool and do great stuff. Bonus points if you use modal.html and modal.js.
- Debugging may be done in Chrome at http://localhost:8093/
- This address may be set to anything you want in the invisible debug file
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.
- Open terminal and cd to the location of the downloaded ZXPSignCmd
- Paste a similar string to this:
./ZXPSignCmd -selfSignedCert US GA "Battle Axe" "Adam Plouff" password cert.p12- Which roughly equates to:
- ./ZXPSignCmd -selfSignedCert [Country] [State] "[Company]" "[Author]" [password] cert.p12
- Place this new cert.p12 file in the Gulp folder
- Locate gulpfile.js and update the password on line 48 to reflect the password you used when creating the certificate file
- Back in Terminal, cd to the Gulp folder
- Type gulp and hit enter
- A brand new BrutalNameTool.zxp will now be the Gulp/dist folder
- Delete the symlink project folder
- Install this new zxp file with ZXP Installer to make sure it works
- High5 yourself for becoming a CEP developer
This package would have been a mess without the guidance and ongoing support of Zack Lovatt. He came up with the really lean evalScript() func that is changing the way I build tools and so many other real-boy coder tips. Zack is light in the dark world of Adobe tool dev.
Apache 2.0