[AfterEffects] ScriptUIチートシート - 三日月館【別館】開発・制作Tips集

AfterEffects ExtendScriptでのScriptUIのメモです。
Adobe公式のスクリプトガイドでの各コントロールの作成方法は下記も参照。
https://estk.aenhancers.com/4%20-%20User-Interface%20Tools/control-objects.html
各コントロールの使用方法は下記も参照。
https://estk.aenhancers.com/4%20-%20User-Interface%20Tools/types-of-controls.html

■ScriptUIパネルとして実行された際はPanelオブジェクトを取得し、それ以外の場合はWindowオブジェクトを作成する

var window = (this instanceof Panel) ? this : new Window('palette', 'Window Title', undefined, {resizeable: true});

■子オブジェクトの配置設定

window.orientation = 'column';  // 縦に並べる
window.alignChildren = 'left';  // 左寄せ

■スタティックテキスト

// スタティックテキスト作成
var staticText = window.add('statictext', undefined, 'Static Text');

■ボタン

// ボタン作成
var button = window.add('button', undefined, 'Button');
// ボタン押下イベント
button.onClick = function() {
    alert(button.text);  // ボタンキャプションの取得
}

■エディットテキスト

// エディットテキスト作成
var editText = window.add('edittext', undefined, 'Edit Text');
// テキスト変更完了イベント（Enter押下かフォーカスを失うと発生）
editText.onChange = function() {
    alert(editText.text);  // エディットボックスのテキストの取得
}
// テキスト変更イベント（テキストが変わるたびに発生）
editText.onChanging = function() {
    //alert(editText.text);
}

■チェックボックス

// チェックボックス作成
var checkBox = window.add('checkbox', undefined, 'Check Box');
// チェックボックス押下イベント
checkBox.onClick = function() {
    alert(checkBox.value);  // チェックボックスの状態を取得（boolean）
}

■スライダー

// スライダー作成 ("slider" [, bounds, value, minvalue, maxvalue, {creation_properties}])
var slider = window.add('slider', undefined, 0, -100, 100);
// スライダー値変更完了イベント（値の変更が終わった時に発生）
slider.onChange = function() {
    alert(slider.value);  // スライダーの値の取得
}
// スライダー値変更イベント（スライダーの移動のたびに発生）
slider.onChanging = function() {
    //alert(slider.value);
}

■ドロップダウンリスト

// ドロップダウンリスト作成 ( "dropdownlist", bounds [, items, {creation_properties}] )
var dropdownList = window.add('dropdownlist', undefined);
// リスト要素の追加
dropdownList.add('item', 'A');
dropdownList.add('item', 'B');
dropdownList.add('item', 'C');
dropdownList.add('item', '-');  // セパレータ
dropdownList.add('item', 'D');
// 選択値の設定（0開始のインデックス値でも設定可能）
dropdownList.selection = 'A';
// アイテム選択イベント
dropdownList.onChange = function() {
    alert(dropdownList.selection);  // 選択値の取得
}

■リストボックス

// リストボックス作成 ("listbox", bounds [, items, {creation_properties}])
var listBox = window.add('listbox', undefined);
// リスト要素の追加
listBox.add('item', 'A');
listBox.add('item', 'B');
listBox.add('item', '-');  // セパレータ
listBox.add('item', 'C');
// 選択値の設定（0開始のインデックス値でも設定可能）
listBox.selection = 'A';
// アイテム選択イベント
listBox.onChange = function() {
    alert(listBox.selection);  // 選択値の取得
}
// アイテムダブルクリックイベント
listBox.onDoubleClick = function() {
    //alert(listBox.selection);
}

■複数列リストボックス

// 複数列リストボックス作成
var multiColumnListBox = window.add('listbox', [0, 0, 300, 100], undefined, {numberOfColumns: 2, showHeaders: true, columnTitles: ['Col1', 'Col2']});
// リスト要素の追加
var item1 = multiColumnListBox.add('item', 'A');
var item2 = multiColumnListBox.add('item', 'B');
item1.subItems[0].text = 'A2';  // 2列目のテキスト設定
item2.subItems[0].text = 'B2';

■ツリービュー

// ツリービュー作成
var treeView = window.add('treeview', [0, 0, 300, 100]);
// リスト要素の追加
var root1 = treeView.add('node', 'Root1');
var child1 = root1.add('node', 'Child1');
var child2 = root1.add('node', 'Child2');
var child21 = child2.add('node', 'Child21');
var child22 = child2.add('node', 'Child22');
var child3 = root1.add('node', 'Child3');
var root2 = treeView.add('node', 'Root2');
// アイテム選択イベント
treeView.onChange = function() {
    alert(treeView.selection);  // 選択値の取得
}

■グループ

// グループ作成
var group = window.add('group', undefined, 'ButtonGroup');
// グループ内の配置設定
group.orientation = 'row';  // 横に並べる
group.alignChildren = 'left';  // 左寄せ
// グループ内にコントロールを追加
group.add('button', undefined, 'Button1');
group.add('button', undefined, 'Button2');
group.add('button', undefined, 'Button3');

■パネル

// パネル作成（グループと違い「タイトル」と「ボーダーライン」が表示される）
var panel = window.add('panel', undefined, 'Panel Title');
// パネル内の配置設定
panel.orientation = 'row';  // 横に並べる
panel.alignChildren = 'left';  // 左寄せ
// グループ内にコントロールを追加
panel.add('button', undefined, 'Button1');
panel.add('button', undefined, 'Button2');
panel.add('button', undefined, 'Button3');

■コントロールのサイズ設定

var bounds = [0, 0, 60, 60];
window.add('button', bounds, 'Button');

■UIの設定と表示

window.onResizing = window.onResize = function() { 
this.layout.resize(); };
if (window instanceof Window) {
    window.center();
    window.show();
} else {
    window.layout.layout(true);
    window.layout.resize();
}

---

このページのタグ一覧
AfterEffects ExtendScript チートシート プログラミング

---

最終更新日：2020/05/17

---