0

In After Effects scripts, if you want your script to be able to be docked in the program's workspace, the only way to do it as far as I know is to use a resource string like this:

var res = "Group{orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
    group1: Group{orientation:'column', alignment:['fill', ''], alignChildren:['fill', ''],\
        button1: Button{text: 'Button'},\
    },\
}";
                
myPanel.grp = myPanel.add(res);

The above code creates a script UI with one button ("button1") inside a group ("group1").

I would like to know other ways to create the same resource string. Is it possible to make it using a JSON object and then stringifying it??

I know it can be done somehow, because I have inspected the Duik Bassel script that is dockable and, for example, adds elements like this:

var button1 = myPal.add( 'button' );

but I cannot understand how to do it myself.

TL;DR: I want to make a dockable scriptUI without writing a giant string all at once, but bit by bit, like a floating script.

aris melachroinos
  • 140
  • 9

2 Answers2

2

UI container elements have an add() method which allows you to add other UI elements to them, and you can treat them as normal objects.

var grp = myPanel.add("group");
grp.orientation = "column";
grp.alignment = ['fill', 'fill'];
grp.alignChildren = ['fill', 'fill'];

var group1 = grp.add("group");
…
var button1 = group1.add("button");
button1.text = 'Button'

More details and examples here: https://extendscript.docsforadobe.dev/user-interface-tools/types-of-controls.html#containers

Also worth checking out https://scriptui.joonas.me/ which is a visual scriptUI interface builder. You have to do some work on the code it produces to get panels for AE, but it's not hard.

stib
  • 3,346
  • 2
  • 30
  • 38
  • Wow that worked!!! Thank you so much for answer. I was aware of the scriptUI builder but it is only for non-dockable scripts. Please correct me if I am wrong. – aris melachroinos Oct 13 '21 at 09:16
  • The code it produces is non-dockable, but there are tutes out there that explain how you turn them into dockable ones. – stib Oct 13 '21 at 10:36
  • https://medium.com/@andreipopa191187/easiest-way-to-create-a-dockable-panel-in-adobe-after-effects-a9791d2e012a – stib Oct 13 '21 at 10:53
  • Thank you @stib. The scriptUI builder actually has the feature built in! I just found it: https://imgur.com/a/hEWlW6o – aris melachroinos Oct 13 '21 at 11:20
  • Oh, good find. I wonder if that's a new addition. – stib Oct 19 '21 at 10:34
1

extendscript still uses a 20th century version of javaScript, which doesn't have JSON built-in, but I have successfully used a JSON polyfill with it.

I used json2.js to get structured data in and out of Illustrator, and it worked beautifully, but I can see there's now a json3.js which might be better for whatever reason. This stackoverflow question addresses the differences.

To load another .js file (such as a polyfill) into your script, you need to do something like

var scriptsFolder = (new File($.fileName)).parent; //  hacky but effective
$.evalFile(scriptsFolder + "/lib/json2.js"); // load JSON polyfill

These file locations may differ in other Adobe apps. Not sure what it would be in AfterEffects. I seem to remember that InDesign has a different location for scripts. You can also hardcode the path, of course.

Good luck!

brennanyoung
  • 6,243
  • 3
  • 26
  • 44
  • Thank you for your answer. I actually want to know the method of how to construct the res string. For example with what commands can I make a new button or group etc.. In order to load json2 into my script, I have converted the library into a one-liner that I include in my script, so there are no extra files. – aris melachroinos Oct 13 '21 at 09:07