Building a Modern Extension for Adobe After Effects

My 17-month side-hustle journey from code-dummy to building a product

David Hawkins
Jul 15, 2019 · 17 min read
Image for post
Image for post

Semantics

I’ve learned that programs like Element are categorized as plugins. They are low-level applications with a GUI (graphical user interface), written in C or C++ or other intimidating geekery.

  • CompSetter allows you to quickly make project-wide changes to a bunch of comps, whether that’s resolution, length, etc.
  • Motion is the Swiss Army knife of shortcuts, allowing you to create interesting animations at the click of a button, as well as change the interpolation of keyframes and the placement of your anchor point.

What Are Extensions?

Before we continue, you might be interested to demo the extension.

Image for post
Image for post

CEP Engine (the Stack)

In 2013, the first version of Adobe CC was released. With it came HTML support. (Technically, Adobe Flash extensions were supported before HTML but at this point, that’s a little redundant.)


CEF — Chromium Embedded Framework

Think the Google Chrome browser in your Adobe app. It supports most of the features you see in the browser. Things like audio, video, drag-and-drop, web storage, and API frameworks.

“The CEP HTML engine does not restrict using any extension JavaScript libraries. As long as a library can be used in CEF Client or Chrome browser, it should be usable in CEP HTML Engine.”

Image for post
Image for post

HTML, CSS & JavaScript

This Chromium framework runs with familiar web technologies: HTML markup, CSS & JavaScript. It bodes very well for the future as you not only have Adobe following through with their newer native extensions (more on that later), but the underlying framework is as modern and dynamic as you can get.


Node.js

More exciting still, Node.js is also supported. (Node is actually powered by the same engine as CEP panels.)


ExtendScript

Finally, we have ExtendScript; also known as JSX or syntactically called EcmaScript 3.


HTML Panel Without ExtendScript

Although most HTML panels interface with the Adobe app, nothing says you can’t have a preview-only panel. This way, the website analogy would be even clearer.


HTML Panel Examples

As is perhaps expected, Adobe themselves have been designing newer panels in the HTML format.


Dokyu — Brainstorming

January 30, 2018 — February 28, 2018

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
(Very) rough drawn concept in notebook
Image for post
Image for post
The beautiful Frame.io UI which gave me an idea of just how customizable extensions were
Image for post
Image for post
An early version of Dokyu that included a text-to-speech facility from Amazon’s Polly API. It was eventually dropped as the quality wasn’t quite there.
Image for post
Image for post
An early timeline concept bodged together in Photoshop
Image for post
Image for post
The beautiful Fontself Maker for Illustrator
Image for post
Image for post
Researching Muserk for Premiere Pro. (Web apps work the same across all CEP paneled Adobe apps by just editing the manifest.xml file within the CSXS folder. You can choose which Adobe apps and versions to allow your app to be opened in.

Dokyu — Development

February 28, 2018 — July 14th, 2019

  1. Starting to write those first notes as quickly as possible and without too much judgment on my ability to do anything with that information. Just get an idea of what people might be prepared to pay for with what interests you from a development standpoint and what is realistically possible in line with what’s already available. (Although, if you have specialist knowledge to justify reinventing the wheel, your situation might be different.)
  2. From there on, it just kind of evolved slowly but surely, step-by-step, revisiting the brainstorming process as I encountered obstacles or new information.
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
A more chiseled concept of the idea
Image for post
Image for post
Dokyu contains two apps in one; Motion and Media. The first two images are early implementations of that.
Image for post
Image for post
Dokyu contains two apps in one; Motion and Media. The first two images are early implementations of that.
Image for post
Image for post
An early build of Dokyu Motion, with the awesome Tippy tooltips!
Image for post
Image for post
Image for post
Image for post

Closing Words

If you have any questions, feel free to reach out. If you are curious to see the published version of Dokyu, there’s a web demo at my homepage: https://3dmybusiness.com/


Resources

Remember that ExtendScript is now a legacy language so update to a modern cross-compatible syntax where you can.

Paid resources

“HTML Panels are implemented in a variety of Adobe Creative Cloud applications; the course is based on Adobe Photoshop, yet Panels’ architecture is shared among them all.”

Free resources

Better Programming

Advice for programmers.

David Hawkins

Written by

Distracted designer. Thoughts on #Psychology, #Economics, #Philosophy. Author on https://medium.com/@papacuppa. Video maker on https://youtube.com/c/PapaCuppa

Better Programming

Advice for programmers.

David Hawkins

Written by

Distracted designer. Thoughts on #Psychology, #Economics, #Philosophy. Author on https://medium.com/@papacuppa. Video maker on https://youtube.com/c/PapaCuppa

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store