【AEスクリプト】書き方02 UI

UIを作るのはかんたんです。最初は以下のようなテンプレートを使いつつ、理解を深めるのが一番手っ取り早いです。扱い方を理解してしまいましょう。

var mWdw = new Window("palette", "好きなスクリプト名", [0, 0, 200, 200]);

var mBt1 = mWdw.add("button", [10, 10, 190, 30], "Shift");
var mEt1 = mWdw.add("EditText", [100, 40, 190, 60], "3");
var mSt1 = mWdw.add("staticText", [10, 40, 80, 60], "フレーム");

mWdw.center();
mWdw.show();

mBt1.onClick = function () {
    alert("OK");
}

まずは日本語訳。

とりあえずウインドウ本体を作る。
ボタンとかのパーツをウインドウに追加。
ウインドウ位置を画面中央にして、出現させる。
ボタンを押したら処理が発動する装置を作る。

ながめてみると、英単語もそれっぽいことが書かれていますね。

STEP

とりあえずウインドウ本体を作る。

var mWdw = new Window("palette", "好きなスクリプト名", [0, 0, 200, 200]);

new Window( 〇〇 )で新規ウインドウができます。それを後で扱いやすいよう変数『mWdw』に入れています。（）の中には『ウインドウのタイプ』『ウインドウに表示されるスクリプト名』『大きさ』を入れます。ウインドウのタイプは３種類。

dialog：ウインドウが出ている間はAEの操作ができない。
palette：AE内でのウインドウ。
window；AE内扱いではない、タスクバーに独立表示されるウインドウ。

STEP

ボタンとかのパーツをウインドウに追加。

var mBt1 = mWdw.add("button", [10, 10, 190, 30], "Shift");
var mEt1 = mWdw.add("EditText", [100, 40, 190, 60], "3");
var mSt1 = mWdw.add("staticText", [10, 40, 80, 60], "フレーム");

作ったウインドウにadd( ○○ )でパーツを追加できます。（）の中身は『パーツの種類』『大きさ』『テキスト』。今回作ったパーツ３種はこちら。

button：ボタン
EditText：ユーザーが打てるテキスト欄
staticText；変更できないテキスト

種類の指定は””で囲む文字列型で行います。他パーツは『JavaScript Tools Guide』（英文）の“Types of controls”に載っています。

『大きさ』には座標を入れることに注意してください。『JavaScript Tools Guide』の“Automatic layout”に自動レイアウトの手法がありますが、座標入力でも特に問題はないでしょう。

STEP

ウインドウ位置を画面中央にして、出現させる。

mWdw.center();
mWdw.show();

作ったウインドウはデフォルトでスクリーン左上にあり、まだ出現していない状態です。なので『center()』で中央寄せ、そして『show()』で出現させています。

STEP

ボタンを押したら処理が発動する装置を作る。

mBt1.onClick = function () {
    alert("OK");
}

ボタンには『onClick』という「もしもクリックされたら発動する装置」を取り付けることが可能です。そして処理内容はfunction () {〇〇}という関数の中に書きます。

ウインドウを出現させた後に機能取り付けが行われていておかしな感じですが、これは特に問題なしです。なぜなら、出現したからといって機能追加できなくなるわけではないからですね。もちろん出現させる前に書くのでも問題ありません。自分で読みやすい、好きなほうで書いて下さい。

UIについては以上です。

よかったらシェアしてね！

URLをコピーしました！

【AEスクリプト】書き方02 UI

関連記事