extendscript after effects 2022 resize the buttons

Question

I need to resize my buttons as it is taking up space.

I draw a custom 6 button mock image onto the original image. I want all my buttons to be layed out like that 3 buttons on each line.

var w = new Window('dialog', "ALL IN ONE TOOLBOX 2022", u);
    w.orientation = 'column';
    // w.margins = 5;
    // w.spacing = 10;
    w.alignChildren = ['fill', 'fill'];
myButton =  w.add( "button", undefined, "Create Solid", { name: "ok" } );
myButton0 =  w.add("button", undefined, "Create Null", {name:"ok"});
myButton1 =  w.add("button", undefined, "Create shape", {name:"ok"});
myButton2 =  w.add("button", undefined, "Parallel light", {name:"ok"});
myButton3 =  w.add("button", undefined, "Spot Light", {name:"ok"});
myButton4 =  w.add("button", undefined, "Point Light", {name:"ok"});
myButton5 =  w.add("button", undefined, "Ambient Light", {name:"ok"});
myButton6 =  w.add("button", undefined, "Regular Light", {name:"ok"});
myButton7 =  w.add("button", undefined, "Create Camera", {name:"ok"});
myButton8 =  w.add("button", undefined, "Create Ajustment", {name:"ok"})

i even added this dont work still remains same

myButton =  w.add("button", [50, 30, 150, 60], "Create Solid", {name:"ok"});
myButton0 =  w.add("button", [50, 30, 150, 60], "Create Null", {name:"ok"});
myButton1 =  w.add("button", [50, 30, 150, 60], "Create shape", {name:"ok"});
myButton2 =  w.add("button", [50, 30, 150, 60], "Parallel light", {name:"ok"});
myButton3 =  w.add("button", [50, 30, 150, 60], "Spot Light", {name:"ok"});
myButton4 =  w.add("button", [50, 30, 150, 60], "Point Light", {name:"ok"});
myButton5 =  w.add("button", [50, 30, 150, 60], "Ambient Light", {name:"ok"});
myButton6 =  w.add("button", [50, 30, 150, 60], "Regular Light", {name:"ok"});
myButton7 =  w.add("button", [50, 30, 150, 60], "Create Camera", {name:"ok"});
myButton8 =  w.add("button", [50, 30, 150, 60], "Create Ajustment", {name:"ok"});

Clif · Accepted Answer · 2022-05-31T01:31:09.777

I believe what you are looking for is 'groups'. The code below gave me the following layout:

var btnWidth = 116;

// BTNGRP
// ======
var btnGrp = w.add("group", undefined, {name: "btnGrp"}); 
    btnGrp.orientation = "column"; 
    btnGrp.alignChildren = ["center","center"]; 
    btnGrp.spacing = 10; 
    btnGrp.margins = 0; 

// R1GRP
// =====
var r1Grp = btnGrp.add("group", undefined, {name: "r1Grp"}); 
    r1Grp.orientation = "row"; 
    r1Grp.alignChildren = ["left","center"]; 
    r1Grp.spacing = 10; 
    r1Grp.margins = 0; 

var btn1 = r1Grp.add("button", undefined, undefined, {name: "btn1"}); 
    btn1.text = "Create Solid"; 
    btn1.preferredSize.width = btnWidth; 

var btn2 = r1Grp.add("button", undefined, undefined, {name: "btn2"}); 
    btn2.text = "Create Null"; 
    btn2.preferredSize.width = btnWidth; 

var btn3 = r1Grp.add("button", undefined, undefined, {name: "btn3"}); 
    btn3.text = "Create Shape"; 
    btn3.preferredSize.width = btnWidth; 

// R2GRP
// =====
var r2Grp = btnGrp.add("group", undefined, {name: "r2Grp"}); 
    r2Grp.orientation = "row"; 
    r2Grp.alignChildren = ["left","center"]; 
    r2Grp.spacing = 10; 
    r2Grp.margins = 0; 

var btn4 = r2Grp.add("button", undefined, undefined, {name: "btn4"}); 
    btn4.text = "Parallel Light"; 
    btn4.preferredSize.width = btnWidth; 

var btn5 = r2Grp.add("button", undefined, undefined, {name: "btn5"}); 
    btn5.text = "Spot Light"; 
    btn5.preferredSize.width = btnWidth; 

var btn6 = r2Grp.add("button", undefined, undefined, {name: "btn6"}); 
    btn6.text = "Point Light"; 
    btn6.preferredSize.width = btnWidth; 

// R3GRP
// =====
var r3Grp = btnGrp.add("group", undefined, {name: "r3Grp"}); 
    r3Grp.orientation = "row"; 
    r3Grp.alignChildren = ["left","center"]; 
    r3Grp.spacing = 10; 
    r3Grp.margins = 0; 

var btn7 = r3Grp.add("button", undefined, undefined, {name: "btn7"}); 
    btn7.text = "Ambient Light"; 
    btn7.preferredSize.width = btnWidth; 

var btn8 = r3Grp.add("button", undefined, undefined, {name: "btn8"}); 
    btn8.text = "Regular Light"; 
    btn8.preferredSize.width = btnWidth; 

var btn9 = r3Grp.add("button", undefined, undefined, {name: "btn9"}); 
    btn9.text = "Create Camera"; 
    btn9.preferredSize.width = btnWidth; 

// R4GRP
// =====
var r4Grp = btnGrp.add("group", undefined, {name: "r4Grp"}); 
    r4Grp.orientation = "row"; 
    r4Grp.alignChildren = ["left","center"]; 
    r4Grp.spacing = 10; 
    r4Grp.margins = 0; 

var btn10 = r4Grp.add("button", undefined, undefined, {name: "btn10"}); 
    btn10.text = "Create Adjustment"; 
    btn10.preferredSize.width = btnWidth;

The very first group is set to columns to allow stacking of the subsequent groups. All of the other groups are set to row to allow the three buttons to be aligned.

Set the top group's alignCenter to be ["center","center"] in order for the rows to be center aligned.

In order to get the buttons to be the same size, I set their preferredSize.width to be large enough to allow space for the button with the largest amount of text, which happened to be "Create Adjustment" and with a value that happened to be 116. I placed this in the btnWidth variable. This may need to be changed if you add more buttons and need to accommodate one with larger text.

Hopefully this will be enough to set you in the right direction!

after your update kindly comment https://i.ibb.co/yB3nSYS/2022-05-31-062305.png maybe tweak or sugggestions. — hans, May 31 '22 at 05:24
Hey, it's looking great. The only change you may want to consider is converting your buttons into image buttons instead of text. That is, of course, a lot more work. But would probably allow for better design choices. If you decide to do this, don't forget to add a tooltip using something like `btn1.helpTip = "New Solid"`. — Clif, May 31 '22 at 15:41

extendscript after effects 2022 resize the buttons

1 Answers1