JSFLでオーサリング環境を拡張してみる

「JSFLでオーサリング環境を拡張してみる」と偉そうなタイトルですが、イメージとしてはExcelのマクロ作成と同じようなものです。

JSFLというのは簡単に言うと、flaファイルを制御するためのAPIで、JavaScriptで記述するものです。

例えば、Excelを使っていて同じような事を何度も繰り返し行うような時に、VBAによりマクロを書く事で自動化できたりします。

これと同じような事がFlashオーサリング環境(「Flash 8」、「Flash CS3」とか)で出来るというわけです。

Excelのマクロと同じぐらい強力で、オーサリング環境で普段マウス・キーボードでやっている事はほぼ全て実現可能！！

あるレイヤーに適当に配置されたMovieClipをワンクリックでキレイに整列させてみたり。
なんて事もできちゃいます。

まぁ、別に知らなくても問題無いけど・・興味本位で触ってみたので、まとめておきます。

って事で、前置きはこれぐらいにして。

試しに、下記のようなものを作ってみました。

新規シンボルを作成

下記４つの属性を選択させる事で、シンボルを作成する
１．シンボル名
２．形
３．色
４．サイズ
５．基準点

選択画面

この画面でOKボタンを押すと下記のシンボルが作成されます。
（ダイアログがやけに長いのは気にしないで下さい。。）

作成されたシンボル

以下、スクリプト。

新規シンボル作成.jsfl

var path = fl.configURI + "Commands/createNewSymbol/dialog.xml";
var panel = fl.getDocumentDOM().xmlPanel(path);

dialog.xml

<?xml version="1.0" encoding="UTF-8"?>
<dialog id="createsymbol_ui" title="新規シンボル作成">
	<flash id="createsymbol_ui" width="300" height="400" src="dialog.swf" />
</dialog>

command.jsfl

function createNewSymbol(name, model, color, width, height, align) {
	var doc = fl.getDocumentDOM();
	var lib = doc.library;

	lib.addNewItem('movie clip', name);
	lib.setItemProperty('linkageExportForAS', false);
	lib.setItemProperty('linkageExportForRS', false);

	lib.editItem(name);

	var fill = doc.getCustomFill();
	fill.color = color;
	fill.style = "solid";
	doc.setCustomFill(fill);

	if (model == 'rect') {
		doc.addNewRectangle({left:0, top:0, right:Number(width), bottom:Number(height)}, 0);
	} else if (model == 'circle') {
		doc.addNewOval({left:0, top:0, right:Number(width), bottom:Number(height)});
	}

	fl.xmlui.accept();
	doc.selectAll();
	var rect = doc.getSelectionRect();
	var w = rect.right - rect.left;
	var h = rect.bottom - rect.top;

	var l = -w / 2;
	if (align.indexOf("L") > -1) l = 0;
	else if (align.indexOf("R") > -1) l = -w;
	var t = -h / 2;
	if (align.indexOf("T") > -1) t = 0;
	else if (align.indexOf("B") > -1) t = -h;

	doc.setSelectionBounds({left:l, top:t, right:l + w, bottom:t + h});
	doc.exitEditMode();
}

dialog.fla（SWF作成用flaファイル）

var _id:Number = 0;

for (var i:Number = 0; i < 9; i++) {
	this["box_" + i].onRelease = function():Void {
		var id:Number = Number(this._name.split("_")[1]);
		onSelectBox(id);
	};
}

function onSelectBox(id:Number):Void {
	_id = id;
	for (var i:Number = 0; i < 9; i++) {
		if (i == id) {
			this["box_" + i].gotoAndStop(2);
		} else {
			this["box_" + i].gotoAndStop(1);
		}
	}
}

cancel_btn.onRelease = function():Void {
	MMExecute("fl.xmlui.cancel();");
};

ok_btn.onRelease = function():Void {;
	var jsfl:String = 'fl.configURI + "Commands/createNewSymbol/command.jsfl"'; 
	var func:String = 'createNewSymbol';
	var name:String = name_input.text;
	var model:String = modelGroup.selection.data;
	var color:String = '#' + color_input.text;
	var width:String = width_input.text;
	var height:String = height_input.text;
	var point:String = ['LT', 'T', 'RT', 'L', '', 'R', 'LB', 'B', 'RB'][_id];

	// command.jsflのcreateNewSymbol関数を実行
	MMExecute('fl.runScript(' + jsfl + ',"' + func + '","' + name + '","' + model + '","' + 
							color + '","' + width + '","' + height + '","' + point + '");');
};

onSelectBox(0);

これらのファイルを下記ディレクトリに置いておきます。

Windowsの場合

C:\Documents and Settings\<ユーザ名>\Local Settings\Application Data\Macromedia\Flash 8\ja\Configuration\Commands\
　　新規シンボル作成.jsfl
　　createNewSymbol
　　　　command.jsfl
　　　　dialog.swf（dialog.flaで生成したSWFファイル）
　　　　dialog.xml

Macの場合

/Users/<ユーザ名>/Library/Application Support/Macromedia/Flash 8/ja/Configuration/Commands/
　　新規シンボル作成.jsfl
　　createNewSymbol
　　　　command.jsfl
　　　　dialog.swf（dialog.flaで生成したSWFファイル）
　　　　dialog.xml

ファイルを置くと下記のようにオーサリング環境のメニューに「新規シンボル作成」というコマンドが表示されます。
ファイル名「新規シンボル作成.jsfl」から拡張子を取り除いたものがコマンド名になります。
これをクリックすると先ほどのウィンドウが表示されるわけです。

Commandsディレクトリ直下に置いてあるJSFLファイルが、コマンドとして自動的に表示されます。

ちなみに、今回のサンプルではダイアログをSWFを作成して表示していますが、XULでユーザインターフェースを定義する事もできます。
（FlashではXULのサブセットをサポートしているようです。）

XULについては・・簡単に言うとMozilla系ブラウザで使用できるユーザインターフェース定義言語です。
詳しくは、Flashのヘルプで「XML to UI」を検索してみると良いかも。

ここまでで、JSFLのサンプルを作ってみましたが・・

JSFLのAPIを覚えるのが大変。。

何て思いそうですが、たいがいのスクリプトはFlashが吐き出してくれるのです。
実際は、そのスクリプトを参考にしつつっていう感じになります。

で、その方法。
まずはヒストリパネルを表示します。
デフォルトでは表示されていないので、下記から表示させます。

メニューバーのウィンドウ->他のパネル->ヒストリ

このヒストリウィンドウに何も表示されていない場合は、適当に操作してみて下さい。
例えば、新規シンボルを追加してみましょう。
そうすると下記のようなヒストリが表示されたと思います。

ここで、表示されているヒストリを全て選択した状態で、右クリックから「ステップのコピー」を選択します。
あとは適当なテキストエディタに貼り付けて見ると、下記のスクリプトが貼り付けられます。

var lib = fl.getDocumentDOM().library;
lib.addNewItem('movie clip');
if (lib.getItemProperty('linkageImportForRS') == true) {
lib.setItemProperty('linkageImportForRS', false);
}
else {
lib.setItemProperty('linkageExportForAS', false);
lib.setItemProperty('linkageExportForRS', false);
}

fl.getDocumentDOM().enterEditMode('');

こんな感じで、マクロとして登録したい動作を実際に行い、ヒストリからスクリプトをコピーしてあげるとだいぶ楽に作る事ができますね。