How to make something useful in Extendscript pt.1

This is a short tutorial on how to create a dockable, ScriptUI panel for After Effects CC, that will hold a list of expressions and add them to a selected layer/property onDoubleClick.

There are a handful of tutorials about extendscript, notably David Torno's series on ProVideoCoalition. This is a good series to watch if you're keen on learning from scratch and really getting into the coding side of things, but if you're like me and just need a basic understanding and a quick prototype turnaround then these are the essential resources:

Peter Kahrel's Script UI for dummies
He has written a properly useful guide to extendscript for InDesign which obviously translates well into After Effects, minus the AE specific objects.

Fabian The Blind
Some good layout experiments and UI snippets

The After Effects Scripting Guide
The official guide

Javascript Tools Guide
To be found in ExtendScript Toolkit / SDK .. on your computer

FreeFormatter.com
Just a neat little Javascript escape character inserter that I found useful for adding AE expressions into my code



To start with it's helpful to know there is a difference between coding a Script and a ScriptUI. After Effects sees the way Windows are constructed differently for each.

For a non-dockable script that runs from the script menu

To create a dockable ScriptUI panel that runs from the window menu

David Torno explains this well but I got confused following him because of another fundamental difference in structuring the code: code-based vs resource string.


I lost Torno a bit in his series because I thought ScriptUI would only work with resource string [above] but in fact you can code these in the simpler, more modular format that Pater Kahrel's guide is mostly written in [below].



Such is life.

Part 2 will be more about creating the window for a ScriptUI, adding buttons and calling functions.