Skip to main content
Known Participant
February 26, 2023
해결됨

Scripting:How to make buttons variable with a dockable UI

  • February 26, 2023
  • 2 답변들
  • 834 조회

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

 

이 주제는 답변이 닫혔습니다.
최고의 답변: 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 답변

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

 

shusaku_tr작성자
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検索すると、スクリプトを見つけられると思います。