Scripting:How to make buttons variable with a dockable UI

[shusaku_tr]

This script is a script created using After Effects' JavaScript with a dockable UI and three buttons. Currently, the top button that is not grouped can be variable, but the bottom two buttons cannot be variable. How can we modify it to make these buttons variable, as shown in the attached sample?

Thank you.

function createDockableUI(thisObj) {
var dialog = thisObj instanceof Panel ? thisObj : new Window("palette","Proxy Setter", undefined, { resizeable: true });
return dialog;
}

function showWindow(myWindow) {
if (myWindow instanceof Window) {
myWindow.center();
myWindow.show();
}
if (myWindow instanceof Panel) {
myWindow.layout.layout(true);
myWindow.layout.resize();
}
}

var dialog = createDockableUI(this);
dialog.orientation = "column";
dialog.alignChildren = ["center","top"];
dialog.spacing = 10;
dialog.margins = 16;

var button1 = dialog.add("button", undefined, undefined, {name: "button1"});
button1.text = "Button1";
button1.preferredSize.height = 30;
button1.preferredSize.width = 130;

var group1 = dialog.add("group", undefined, {name: "group1"});
group1.orientation = "row";
group1.alignChildren = ["center","center"];
group1.spacing = 10;
group1.margins = 0;

var button2 = group1.add("button", undefined, undefined, {name: "button2"});
button2.text = "Button2";
button2.preferredSize.height = 30;
button2.preferredSize.width = 60;
var button3 = group1.add("button", undefined, undefined, {name: "button3"});
button3.text = "Button3";
button3.preferredSize.height = 30;
button3.preferredSize.width = 60;
function resizeWindow() {
var button1Height = 30;
var button2Width = 60;
var button3Width = 60;

var dialogWidth = dialog.bounds.width;
var dialogHeight = button1Height + dialog.margins.top + dialog.margins.bottom;

button1.size = [dialogWidth - dialog.margins.left - dialog.margins.right, button1Height];
button1.location = [dialog.margins.left, dialog.margins.top];

group1.size = [dialogWidth - dialog.margins.left - dialog.margins.right, button1Height];
group1.location = [dialog.margins.left, button1.location[1] + button1Height + dialog.spacing];

button2.size = [button2Width, button1Height];
button2.location = [group1.location[0] + (group1.size[0] - button2Width - button3Width - group1.spacing) / 2, 0];

button3.size = [button3Width, button1Height];
button3.location = [button2.location[0] + button2Width + group1.spacing, 0];
}

dialog.onResizing = dialog.onResize = function() {
resizeWindow();
};

showWindow(dialog);

[Mukaida]

作成したことがないので詳しくは説明できませんが、alignment プロパティでサイズを可変できるようで、onResizing、onResizeのコードを使うようです。

after effects scriptUI alignment property のワードでGoogle検索すると、スクリプトを見つけられると思います。

[tetsuoh · Accepted solution]

If you want to stretch any objects horizontally, try using the 'fill' parameter in the 'alignment' or 'alignChildren' first array property.

(function(thisObject) {
    var dialog = (thisObject instanceof Panel) ?
        thisObject :
        new Window("palette", "Proxy Setter", undefined, {
            resizeable: true,
        });

    var button1 = dialog.add("button", undefined, "Button1");
    button1.alignment = ['fill', 'top'];

    var group1 = dialog.add("group");
    group1.alignment = ['fill', 'top'];
    group1.alignChildren = ['fill', 'top'];

    var button2 = group1.add("button", undefined, "Button2");
    var button3 = group1.add("button", undefined, "Button3");

    dialog.layout.layout();

    dialog.onResizing = dialog.onResize = function() {
        dialog.layout.resize();
    };

    if (dialog instanceof Window) {
        dialog.center();
        dialog.show();
    }
}(this));

[shusaku_tr]

Thank you! It's worked perfectly..!