レンダー乙女ちゅーとリアル　その２

	なんか作ってみる

ライブラリの使い方を紹介するためにライブラリを使ってスクリプトを組んでみます。

あまり実用性ないですが、
「実行するとプロジェクト内のコンポのリストを表示して、リストから選んだコンポのプロパティを表示する」
というスクリプトを組みます。

インターフェースはこんなカンジにいたしますです。
後々便利なのでこのくらいのメモ書き程度でざっと書いておくのをお勧めします。
後で変更はきっとあるけど気にシナイ

１	内部処理は後回しで、インターフェースを構築します。
といっても難しいわけじゃない。
以下のソースをエディタで書いてどっかに保存します。

	Step01
---(
/*(コンポのプロパティをみる)
<nasu>

レンダー乙女サンプルプログラム
*/
//ウインドウ作成
var w = nas.GUI.newWindow();
//表示
w.show();

---)

これをディスクに保存してください

第一行の括弧付きのコメントの中身は、nasのランチャーでみたときのボタンタイトルになります。

第二行の"<nasu>"は茄子アイコンを指定しております。
アイコンは Scripts/nas/lib/resources/Isons/　フォルダの中にあるpngファイルのファイル名から拡張子を取った文字列で指定できます。
また、指定がなければスクリプトと同じフォルダにスクリプトと同じファイル名のpng画像をさがしてそちらをアイコンとして読み込みます。


プログラムを保存する場所は、お好きな場所でかまいませんが思いつかない人は
Scripts/nas/(tools)/myScript/myProgram.jsx あたりにどうぞ

ついでに保存したフォルダに以下のようなコメントだけのファイルを"_subMenu.js(or _subMenu.jsx)"と言う名前で作成してください。

	_subMenu.js
---(
/*(お試しプログラム)
<nasu>

 */
---)
このファイルのあるフォルダは、nasのランチャーでスクリプトフォルダとして認識されます。
ボタン名やアイコンの指定はプログラムの場合と同じです。
フォルダ内に　"_subMenu.png"が存在すればそれがアイコンとして表示されます。

アイコンを自作する場合は　36x36px がお勧めです。


nasランチャーでこのプログラムをたどると茄子アイコンでプログラムが表示されるはずですので、
このアイコンをクリックして実行してみてください。

キャプチャ

このような表示になります。
nas.GUI ライブラリは足りないパラメータをデフォルトで埋めてくれるのでGUIの記述がちょびっとだけ簡単になります。

ウインドウを作るときの標準書式は、

	nas.GUI.newWindow(ウインドウ種別,タイトルテキスト,横幅,高さ,X,Y)

ですが、実は引数は全て省略可能で何も指定されないときでもウインドウを作ります。


今回はダイアログウインドウを作りますのでウインドウをいったん消して、
ソースを以下のように書き換えてください

	Step02
---(
/*(コンポのプロパティをみる)
<nasu>

レンダー乙女サンプルプログラム
*/
//ウインドウ作成
var w = nas.GUI.newWindow("dialog","コンポプロパティ",4,10,320,240);
//表示
w.show();

---)

nas.GUIライブラリでは、GUIの大きさや配置をグリッド単位で指定します。

グリッドの図

グリッドは、標準で横60pix 縦24px です。
小数点の指定も可能です。(一部無視されます)

ウインドウの初期位置だけはピクセルです。

と言うことで、最初のメモにグリッドを書き込んでみます

図

ウインドウの文字表示に２行
リストボックスに６行
１行空けてボタンに１行とります

標準的なボタンは幅２列　小さいボタンは１列くらいで考えると良いと思います。

これらの合計で「とりあえず」縦１０行　横　４列としておきます。(まずければ後で変えればおっけー)

ウインドウが開いていたら消して、以下のようにGUI部品を書き込みます。

	Step03
---(
/*(コンポのプロパティをみる)
<nasu>

レンダー乙女サンプルプログラム
*/
//ウインドウ作成
var w = nas.GUI.newWindow("dialog","コンポプロパティ",4,10,320,240);
//GUI部品
w.myLabel=nas.GUI.addStaticText(w,"コンポを選択してください",0,0,4,2);
w.myLB=nas.GUI.addListBox(w,"",null,0,1,4,6);
w.myBt1=nas.GUI.addButton(w,"View",0,9,2,1);
w.myBt2=nas.GUI.addButton(w,"Close",2,9,2,1);
//表示
w.show();
---)

nas.GUI.add○○()　メソッドはGUI部品を作って返す関数です。

リストボックスは、後で修正するのでとりあえず空っぽのまま初期化してあります。
位置やサイズはグリッド単位で指定します。
微妙なサイズのパーツ調整は小数点指定してください。


表示

さてできたかな

ウインドウを消して、部品に機能を割り付けてゆきます。
ソースにボタンイベントを加えてゆきます。
	Step04
---(
/*(コンポのプロパティをみる)
<nasu>

レンダー乙女サンプルプログラム
*/
//ウインドウ作成
	var w = nas.GUI.newWindow("dialog","コンポプロパティ",4,10,320,240);
//GUI部品
	w.myLabel=nas.GUI.addStaticText(w,"コンポを選択してください",0,0,4,2);
	w.myLB=nas.GUI.addListBox(w,"",null,0,1,4,6);
	w.myBt1=nas.GUI.addButton(w,"View",0,9,2,1);
	w.myBt2=nas.GUI.addButton(w,"Close",2,9,2,1);
//GUIイベント
	w.myBt1.onClick=function(){return;};
	w.myBt2.onClick=function(){this.parent.close()};
//表示
	w.show();
---)

上のソースを書き込んで実行してみてください。

ボタン1の単にリターンしている関数は仮の関数です。
ここに「プロパティ表示」機能を割り付ける予定なのですが、まだ、本体部分がないのでダミーで書いてあります。
GUIのプログラムではこのような

ボタン２の内容はウインドウ全体を閉じるメソッドです。
ボタンオブジェクトのプロパティとして関数を書くので、関数内部ではthisがボタン自身を指します。
ボタンのparentオブジェクトにはボタンが所属するウインドウが参照されているので、そのclose()メソッドを呼んで、ウインドウ全体を閉じています。
こうすることで
	w.close();
と記述することを避けることができます。
このプログラムの場合は、ダイアログ表示なので上記のようにコードを書いてもほとんどのケースで正常に動きますが、
プログラム起動後にグローバルの変数　"w"の内容が変わった際に期待しない動作を起すことを防ぐことができます。


プロジェクト内のコンポのリストを取得

プロジェクト内のコンポを一覧表示したいのでまずコンポをリストします。

	アイテムリスト
---(
//コンポのリストを取得して表示用の文字列を作る

	var myComps=app.project.pickItems("composition");
	if(! (myComps instanceof Array)){myComps=[]};

	var nameList=new Array();
	for(var idx=0; idx<myComps.length; idx++){
		nameList.push(myComps[idx].index+":"+myComps[idx].name)
	};//表示用の名前を配列にする
---)
app.project.pickItems()メソッドはレンダー乙女拡張機能です。指定した種類のアイテムを配列で戻します。
指定が何もないときは全てのアイテムを配列で戻します(app.project.items　と同じ)
ケースによってはnullが返される場合がありますので、戻り値を判定して配列以外なら空配列を作っておきます。

そのままではアイテムの配列なのでアイテムインデックスとコンポ名をくっつけてボックスに表示するための名前リストを作っておきます。

これを、元のソースに書き込んで
リストボックスの初期化を修正します

	Step05
---(
/*(コンポのプロパティをみる)
<nasu>

レンダー乙女サンプルプログラム
*/
//データ初期化
//コンポのリストを取得して表示用の文字列を作る

	var myComps=app.project.pickItems("composition");
	if(! (myComps instanceof Array)){myComps=[]};

	var nameList=new Array();
	for(var idx=0; idx<myComps.length; idx++){
		nameList.push(myComps[idx].index+":"+myComps[idx].name)
	};//表示用の名前を配列にする

//ウインドウ作成
	var w = nas.GUI.newWindow("dialog","コンポプロパティ",4,10,320,240);
//GUI部品
	w.myLabel=nas.GUI.addStaticText(w,"コンポを選択してください",0,0,4,1);

	w.myLB=nas.GUI.addListBox(w,nameList,null,0,1,4,6,"multiselect");

	w.myBt1=nas.GUI.addButton(w,"View",0,9,2,1);
	w.myBt2=nas.GUI.addButton(w,"Close",2,9,2,1);
//GUIイベント
	w.myBt1.onClick=function(){return;};
	w.myBt2.onClick=function(){this.parent.close()};

//表示
w.show();

---)

リストボックスにデータを与えて初期化します。

	w.myLB=nas.GUI.addListBox(w,nameList,null,0,1,4,6,"multiselect");

先ほど空だった部分に配列を置くように変更されています。

addListBox(親オブジェクト,表示値リスト,選択ID,左,上,幅,高さ,オプション)
上の書式でリストボックスを初期化できます。
nasライブラリを使っている場合は、AE6.5環境でもリストボックス相当機能が使用可能です。

新ライブラリではAE7以降ならボックスにネイティブのリストボックスを使用します。

選択IDは0から始まるアイテムのIDです。単独の数値か　またはIDの配列で指定します。
最後のオプションには "editable","multiselect"のいずれかが書き込めます。
multiselect　は複数アイテムの同時選択ができます。
edeitable では入力ボックスがついて任意の値が入力できるようになります。(複数選択不可)


最後に肝心の表示部分を作成します。

	プロパティ表示
---(
		var msg="";
		for(var idx=0;idx<this.parent.myLB.selected.length;idx++)
		{
			msg+=" index :"	+myComps[idx].index	+nas.GUI.LineFeed;
			msg+="------------------------------------"	+nas.GUI.LineFeed;
			msg+="name :"	+myComps[idx].name	+nas.GUI.LineFeed;
			msg+="width :"	+myComps[idx].width	+" / ";
			msg+="height :"	+myComps[idx].height	+nas.GUI.LineFeed;
			msg+="aspect :"	+myComps[idx].pixelAspect	+nas.GUI.LineFeed;
			msg+=nas.GUI.LineFeed;
		}
		alert(msg)
---)
nasのリストボックスは以下のプロパティを持っています。

	value	現在の値　マルチセレクトの場合は値の配列
	selected	現在選択されているID マルチセレクトの場合はIDの配列 編集可能でかつユーザ入力値がある場合はnull
	options	現在の値リスト配列
	checks	値リストがチェックされているかどうかのブーリアン配列

リストボックスの状態の操作には以下のメソッドが使用できます

	check(ID)	を指定してチェックを操作する
	setOptions(表示値リスト,選択ID)	リストで丸ごと操作する(入れ替え)

残念ながらAEほかのAdobeScriptのListItemとの互換性はありません。
かわりと言うのもヘンですが、入力ボックス付きリストボックスの(一部ではコンボボックスと呼ばれています)機能が使用可能です。

ネイティブのGUIコントロールと同じようにonChange()メソッドの値を上書きしてコントロールからイベント駆動することが可能です。


これをボタン１のイベント関数としてかきこみます。

	Step06
---(
/*(コンポのプロパティをみる)
<nasu>

レンダー乙女サンプルプログラム
*/
///データ初期化
var myComps=app.project.pickItems("composition");
if(! (myComps instanceof Array)){myComps=[]};

var nameList=new Array();
for(var idx=0; idx<myComps.length; idx++){nameList.push(myComps[idx].index+":"+myComps[idx].name)};//表示用の名前を配列にする


//ウインドウ作成
var w = nas.GUI.newWindow("dialog","コンポプロパティ",4,10,320,240);
//GUI部品
w.myLabel=nas.GUI.addStaticText(w,"コンポを選択してください",0,0,4,1);
w.myLB=nas.GUI.addListBox(w,nameList,null,0,1,4,6,"multiselect");
w.myBt1=nas.GUI.addButton(w,"View",0,9,2,1);
w.myBt2=nas.GUI.addButton(w,"Close",2,9,2,1);
//GUIイベント
	w.myBt1.onClick=function()
	{
	  if(this.parent.myLB.selected.length){
		var msg="";
		for(var idx=0;idx<this.parent.myLB.selected.length;idx++)
		{
			msg+=" index :"	+myComps[idx].index	+nas.GUI.LineFeed;
			msg+="------------------------------------"	+nas.GUI.LineFeed;
			msg+="name :"	+myComps[idx].name	+nas.GUI.LineFeed;
			msg+="width :"	+myComps[idx].width	+" / ";
			msg+="height :"	+myComps[idx].height	+nas.GUI.LineFeed;
			msg+="aspect :"	+myComps[idx].pixelAspect	+nas.GUI.LineFeed;
			msg+=nas.GUI.LineFeed;
		}
		alert(msg);
	  }else{
		alert("コンポが選択されていません");
	  }
	};
	w.myBt2.onClick=function(){this.parent.close()};

//表示
w.show();

---)
キャプチャ

nasライブラリチュートリアル　その１でした

次回はパレットを使ったプログラムを作ります。


