AEスクリプトのUIでイベントハンドラを使ってみる

2017/02/28

AEスクリプト（Adobe ExtendScript）のUIには、イベントハンドラ(event handler)という機能がいくつか用意されています。この機能を使うことで、たとえば「ボタンがクリックされる」というようなイベント(event)が発生したときに、特定の処理を実行させることができます。

今回はこのイベントハンドラを使用して、クリックすると表示が変化するというような、動的(Dynamic)なUIをつくってみたいと思います。OnClick, OnChange, OnChangingといった比較的よく利用できそうなイベントハンドラを使ったサンプルスクリプトを紹介します。

チェックボックスをクリックすると、GUIが変化する

以下のサンプルコードは、チェックボックスをクリックすると変化するGUIを作成します。onClickを使います。


var wnd = new Window("palette", "Test Window", [0, 0, 250, 150]);
var checkA = wnd.add("checkbox", [30, 10, 220, 30],"入力欄を表示");
checkA.value=false;
var input = wnd.add("edittext", [30, 40, 220, 60]);
input.visible = false;
wnd.center();
wnd.show();

checkA.onClick = function(){
    if(checkA.value == true){
        input.visible = true;
    }
    else{
        input.visible = false;
    }
}

チェックがオフの状態では入力欄はありません。

チェックをオンにすると、入力欄が現れます。

ドロップダウンリストを変えると、GUIが変化する

以下のサンプルコードは、ドロップダウンを変えると変化するGUIを作成します。onChangeを使います。


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;
myText = wnd.add("statictext", [30, 40, 220, 60], drpDwn.selection.text);
wnd.center();
wnd.show();

drpDwn.onChange = function(){
    myText.text = drpDwn.selection.text;
}

デフォルトではドロップダウンで選択されている「AAAAA」が下の文字に出ています。

ドロップダウンを「BBBBB」に変えると、下の文字も連動して「BBBBB」に変わります。

リストボックスの選択を変えると、GUIが変化する

以下のサンプルコードは、リストボックスの選択を変えると変化するGUIを作成します。onChangeを使用します。


var wnd = new Window("palette", "Test Window", [0, 0, 250, 150]);
var list = wnd.add ("listbox", [30, 10, 220, 70], ["AAAAA" , "BBBBB" , "CCCCC"]);
list.selection=0;
myText = wnd.add("statictext", [30, 80, 220, 100], list.selection.text);
wnd.center();
wnd.show();

list.onChange = function(){
    myText.text = list.selection.text;
}

デフォルトでは「AAAAA」になっています。

リストボックスで「BBBBB」をクリックして選ぶと、下の文字も「BBBBB」に変わります。

なお、onChange の代わりに onDoubleClick にすると、ダブルクリックしたときだけ変化するようになります。このonDoubleClickが使えるのはリストボックスだけです。

スライダーを変更すると、GUIが変化する

以下のサンプルコードは、スライダーを触ると変化するGUIを作成します。onChangingを使用します。


var wnd = new Window("palette", "Test Window", [0, 0, 250, 150]);
mySlider = wnd.add ("slider" , [30, 10, 220, 30], 50, 0, 100);
wnd.add("statictext", [30, 30, 50, 50], "0");
wnd.add("statictext", [220, 30, 240, 50], "100");
var curValue = wnd.add("statictext", [30, 70, 220, 90], mySlider.value);
wnd.center();
wnd.show();

mySlider.onChanging = function(){
    curValue.text = Math.round(mySlider.value);
}

デフォルトではスライダーは50になっています。

スライダーを変更すると、下の数字も連動して変わります。

文字を入力すると、GUIが変化する

以下のサンプルコードは、文字を打ち込むと変化するGUIを作成します。onChangingを使用します。


var wnd = new Window("palette", "Test Window", [0, 0, 250, 150]);
var input = wnd.add("edittext", [30, 10, 220, 30]);
var output = wnd.add("statictext", [30, 40, 220, 60], "");
wnd.center();
wnd.show();

input.onChanging = function(){
    output.text = input.text;
}

文字を入力すると、下に同じ文字が現れます。

入力欄の内容が変化するGUI

以下のサンプルコードは、ボタンをクリックすると、入力欄の内容が変化するGUIを作成します。


var wnd = new Window("palette", "Test Window", [0, 0, 250, 150]);
var myBtn = wnd.add("button", [30, 10, 160, 30], "選択アイテム名を取得");
var input = wnd.add("edittext", [30, 40, 220, 60]);
wnd.center();
wnd.show();

myBtn.onClick = function(){
    input.text = app.project.selection[0].name;
}

プロジェクトパネルでコンポジション、フッテージ等を選択して、「選択アイテム名を取得」ボタンをクリックしてください。