AEスクリプトでウィンドウ（GUI）をつくる方法

2017/02/22

After Effectsスクリプト(Adobe ExtendScript)で、ウィンドウやパネルといったGUIをつくる方法をまとめてみました。GUIが作れるようになると、ツールでできることが一気に広がります。その一歩が踏み出せないでいる人には、ぜひオススメしたいところです。

今回は入門編という感じで、とても初歩的なサンプルスクリプトだけ並べてみます。このページに記載した機能だけでも使えるようになれば、かなり便利になると思います。

メッセージを表示する

1行だけの場合は、alert() という書き方でメッセージウィンドウを表示できます。文字列は " " で囲みます。


alert("Hello World");

改行のある場合は " " の中で \n と書きます。ちなみに、こんなふうに第二引数を書くとウィンドウのタイトルを変更できます。


alert("AAAAA\nBBBBB\nCCCCC" , "Test Message");

確認ウィンドウを表示する

YesかNoを選ぶウィンドウを表示したい場合は confirm() と書きます。以下のコードは、Yesを選ぶと「OK!」、Noを選ぶと「NO !」というメッセージを表示します。


var cnf = confirm("Are you OK?");
if (cnf == true){
    alert("OK !");
}
else{
    alert("NO !");
}

ウィンドウを表示する

好きなサイズのウィンドウをつくることもできます。以下のコードは、250x150 ピクセルのウィンドウを表示します。


var wnd = new Window("palette", "Test Window", [0, 0, 250, 150]);
wnd.center();
wnd.show();

ウィンドウをつくるときは、モニターの左上を始点 [0, 0] として、4つの数字 [左座標, 上座標, 右座標, 下座標] で四角形を定義します。また、ここでは center() と書くことでモニターの中央に持ってきてから表示しています。

テキストを表示する

テキスト、文字を表示します。文字の位置も、ウィンドウのときと同様に4つの数字で決定します。なお、親であるウィンドウの左上が始点[0, 0]になります。


var wnd = new Window("palette", "Test Window", [0, 0, 250, 150]);
wnd.add("statictext", [30, 10, 220, 30], "AAAAA");
wnd.add("statictext", [30, 30, 220, 50], "BBBBB");
wnd.center();
wnd.show();

ボタンをつくる

ボタンをつくります。"onClick"イベントというのを使って、ボタンがクリックされたときの動作を決めることができます。以下のコードでは、OKボタンで「OK !」というメッセージを表示、Cancelボタンでウィンドウを閉じます。


var wnd = new Window("palette", "Test Window", [0, 0, 250, 150]);
var okBtn = wnd.add("button", [55, 100, 140, 135], "OK");
var cancelBtn = wnd.add("button", [155, 100, 240, 135], "Cancel");
wnd.center();
wnd.show();

okBtn.onClick = function(){
    alert("OK !");
}
cancelBtn.onClick = function(){
    wnd.close();
}

入力欄をつくる

入力欄をつくります。以下のコードでは、OKをクリックすると入力欄に入力されているテキストを表示します。


function Main()
{
    alert(input.text + " です。");
}

var wnd = new Window("palette", "Test Window", [0, 0, 250, 150]);
wnd.add("statictext", [30, 10, 220, 30], "入力欄 :");
var input = wnd.add("edittext", [30, 30, 220, 50], "AAAAA");
var okBtn = wnd.add("button", [55, 100, 140, 135], "OK");
wnd.center();
wnd.show();

okBtn.onClick = function(){
    Main();
}

チェックボックスをつくる

チェックボックスをつくります。以下のコードでは、OKボタンをクリックするとチェックがONかOFFかをメッセージ表示します。


function Main()
{
    if(checkA.value==true){
        alert("AAAAA はONです。");
    }
    else{
        alert("AAAAA はOFFです。");
    }
}

var wnd = new Window("palette", "Test Window", [0, 0, 250, 150]);
var checkA = wnd.add("checkbox", [30, 10, 220, 30],"AAAAA");
checkA.value=true;
var okBtn = wnd.add("button", [55, 100, 140, 135], "OK");
wnd.center();
wnd.show();

okBtn.onClick = function(){
    Main();
}

ラジオボタンをつくる

ラジオボタンをつくります。以下のコードは、OKボタンをクリックするとラジオボタンで選ばれている項目をメッセージ表示します。


function Main()
{
    if(rdBtnA.value==true){
        alert("AAAAAです。");
    }
    if(rdBtnB.value==true){
        alert("BBBBBです。");
    }
    if(rdBtnC.value==true){
        alert("CCCCCです。");
    }
}

var wnd = new Window("palette", "Test Window", [0, 0, 250, 150]);
var rdBtnA = wnd.add("radiobutton", [30, 10, 220, 30],"AAAAA");
var rdBtnB = wnd.add("radiobutton", [30, 30, 220, 50],"BBBBB");
var rdBtnC = wnd.add("radiobutton", [30, 50, 220, 70],"CCCCC");
rdBtnA.value=true;
var okBtn = wnd.add("button", [55, 100, 140, 135], "OK");
wnd.center();
wnd.show();

okBtn.onClick = function(){
    Main();
}

ドロップダウンリストをつくる

ドロップダウンリストをつくります。以下のコードでは、OKボタンをクリックするとドロップダウンで選ばれている項目をメッセージ表示します。


function Main()
{
    alert(drpDwn.selection.text + " です。");
}

var wnd = new Window("palette", "Test Window", [0, 0, 250, 150]);
var drpDwn = wnd.add("dropdownlist", [30, 10, 220, 30],  ["AAAAA", "BBBBB", "CCCCC"]);
drpDwn.selection=0;
var okBtn = wnd.add("button", [55, 100, 140, 135], "OK");
wnd.center();
wnd.show();

okBtn.onClick = function(){
    Main();
}

リストボックスをつくる

リストボックスをつくります。以下のコードでは、OKボタンをクリックするとリストボックスで選ばれている項目をメッセージ表示します。


function Main()
{
    alert(list.selection.text + " です。");
}

var wnd = new Window("palette", "Test Window", [0, 0, 250, 150]);
var list = wnd.add ("listbox", [30, 10, 220, 90], ["AAAAA" , "BBBBB" , "CCCCC"]);
list.selection=0;
var okBtn = wnd.add("button", [55, 100, 140, 135], "OK");
wnd.center();
wnd.show();

okBtn.onClick = function(){
    Main();
}