AEJoy —— 安利一个神器网站【JS】

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

安利一个神器网站

今天要推荐的是这个神器网站，它可以轻松地为 AE 脚本定制 UI 界面。 该神器网站的界面如下

上图是一开始该网站给我们提供的 Sample UI。 当然我们要自定义定制我们的 UI 也是非常方便的：

添加自定义控件

点击 Delete 按钮清空自带的 Sample UI，然后拖动左侧 Add Items 的控件至画面中心的对话框内即可。如果我们想要对控件进行分组、分面板，它也是能够支持。

删除控件

如果后悔拖动了某个控件，则可以在左侧的 Structure 树形面板中选择 “x” 来删除该控件。

编辑控件的具体属性

如果需要更进一步的编辑某个控件的属性，则可以在 Item Properties 中进行编辑。

自定义的 UI 界面如下

支持的快捷键

一键导出 jsx 文件

点击 Export 按钮出现如上界面，然后点击红框标记的按钮导出脚本，之后便可在 AE 中运行，生成的 UI 界面如下

生成的完整代码如下

/*
Code for Import https://scriptui.joonas.me — (Triple click to select): 
{"activeId":8,"items":{"item-0":{"id":0,"type":"Dialog","parentId":false,"style":{"enabled":true,"varName":null,"windowType":"Dialog","creationProps":{"su1PanelCoordinates":false,"maximizeButton":false,"minimizeButton":false,"independent":false,"closeButton":true,"borderless":false,"resizeable":false},"text":"Dialog","preferredSize":[0,0],"margins":16,"orientation":"column","spacing":10,"alignChildren":["center","top"]}},"item-1":{"id":1,"type":"Button","parentId":0,"style":{"enabled":true,"varName":null,"text":"Button","justify":"center","preferredSize":[0,0],"alignment":null,"helpTip":null}},"item-2":{"id":2,"type":"Group","parentId":0,"style":{"enabled":true,"varName":null,"preferredSize":[0,0],"margins":0,"orientation":"row","spacing":10,"alignChildren":["left","center"],"alignment":null}},"item-3":{"id":3,"type":"Group","parentId":0,"style":{"enabled":true,"varName":null,"preferredSize":[0,0],"margins":0,"orientation":"row","spacing":10,"alignChildren":["left","center"],"alignment":null}},"item-4":{"id":4,"type":"Button","parentId":3,"style":{"enabled":true,"varName":null,"text":"Button","justify":"center","preferredSize":[0,0],"alignment":null,"helpTip":null}},"item-5":{"id":5,"type":"Checkbox","parentId":3,"style":{"enabled":true,"varName":null,"text":"Checkbox","preferredSize":[0,0],"alignment":null,"helpTip":null}},"item-6":{"id":6,"type":"RadioButton","parentId":2,"style":{"enabled":true,"varName":null,"text":"RadioButton","preferredSize":[0,0],"alignment":null,"helpTip":null}},"item-7":{"id":7,"type":"Divider","parentId":2,"style":{"enabled":true,"varName":null}},"item-8":{"id":8,"type":"Slider","parentId":2,"style":{"enabled":true,"varName":null,"preferredSize":[0,0],"alignment":null,"helpTip":null}}},"order":[0,1,2,6,7,8,3,5,4],"settings":{"importJSON":true,"indentSize":false,"cepExport":false,"includeCSSJS":true,"showDialog":true,"functionWrapper":false,"afterEffectsDockable":false,"itemReferenceList":"None"}}
*/ 

// DIALOG
// ======
var dialog = new Window("dialog"); 
    dialog.text = "Dialog"; 
    dialog.orientation = "column"; 
    dialog.alignChildren = ["center","top"]; 
    dialog.spacing = 10; 
    dialog.margins = 16; 

var button1 = dialog.add("button", undefined, undefined, {name: "button1"}); 
    button1.text = "Button"; 

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

var radiobutton1 = group1.add("radiobutton", undefined, undefined, {name: "radiobutton1"}); 
    radiobutton1.text = "RadioButton"; 

var divider1 = group1.add("panel", undefined, undefined, {name: "divider1"}); 
    divider1.alignment = "fill"; 

var slider1 = group1.add("slider", undefined, undefined, undefined, undefined, {name: "slider1"}); 
    slider1.minvalue = 0; 
    slider1.maxvalue = 100; 
    slider1.value = 50; 

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

var checkbox1 = group2.add("checkbox", undefined, undefined, {name: "checkbox1"}); 
    checkbox1.text = "Checkbox"; 

var button2 = group2.add("button", undefined, undefined, {name: "button2"}); 
    button2.text = "Button"; 

dialog.show();

ps：除了支持导出成 CSS 和 JS 格式，它还支持导出 HTML 格式