Skip to main content
Known Participant
February 26, 2023
Answered

Scripting:How to make buttons variable with a dockable UI

  • February 26, 2023
  • 2 replies
  • 834 views

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);

 

This topic has been closed for replies.
Correct answer stunning_Sunflower16B7

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));

 

2 replies

Participating Frequently
February 27, 2023

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));

 

Known Participant
February 27, 2023

Thank you! It's worked perfectly..!

Community Expert
February 27, 2023

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


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