株式会社antsのホームページへようこそ。

Flash JavaScript APIでオーサリングを効率化(その2)

1
Posted in Lab. By tanaka

前回は[ヒストリ]パネルから保存してコマンドを作成しました。オーサリング時の操作を再現するだけで事足りるコマンドであれば、手っ取り早い方法です。ただ、マウス操作の数値等も具体的に記録されてしまうため、汎用的なコマンドを作るには向かない面もあります。スクリプトが苦手でないなら最初からJSFLを書いてしまったほうが確実です。

いきなりJSFLを書いてしまおう

では、早速JSFLを記述してコマンドを作ってみましょう。JSFLはJavaScriptですから、シンタックスはActionScript 1.0と変わりません。FLAファイルを操作するための独自のメソッドやプロパティさえ覚えればいいのです。今回は、シンボルの基準点を中央に変更するコマンドを作ることにしました。次のソースコードを見てください。

基準点変更JSFL

var doc = fl.getDocumentDOM();
if (doc.selection.length) {
  doc.enterEditMode();
  doc.selectAll();
  var rect = doc.getSelectionRect();
  var w = rect.right - rect.left;
  var h = rect.bottom - rect.top;
  var l = -w / 2;
  var t = -h / 2;
  doc.setSelectionBounds({left:l, top:t, right:l + w, bottom:t + h});
  doc.exitEditMode();
  var mat = doc.selection[0].matrix;
  mat.tx += rect.left - l;
  mat.ty += rect.top - t;
  doc.selection[0].matrix = mat;
  doc.setTransformationPoint({x:0, y:0});
}

手動で基準点を変更するときは、ステージ上でインスタンスをダブルクリックするなどして編集モードに入り、中のシェイプや画像を移動した後で編集モードを抜ける、といった動作を行いますよね。それをイメージしてスクリプトを組んでみました。

■基準点が真ん中になるようにしたい
基準点を中央に変更

FLAファイルを操作するうえで一番肝心なのは、編集中のFLAファイルを特定することです。これにはfl.getDocumentDOM()メソッドを使います。何をするにもまずコレからです。ステージで選択されているオブジェクトは、document.selectionプロパティに格納されます。このプロパティは配列なので、要素の数が0でなければ何かしら選択されていることになります。要素が0ならすることがありません。

document.enterEditMode()メソッドを実行すると、その名の通りシンボル編集モードになります。ただし、オブジェクトを複数選択している場合はエラー ダイアログが表示されます。まあ理解はできますね。とりあえず1個で手を打ちましょう。document.selectAll()メソッドは「すべて選択」ということです。こちらも文字通りで分かりやすいです。document.getSelectionRect()メソッドは、選択中のオブジェクトが収まる矩形の座標を教えてくれます。値は{left:座標, top:座標, right:座標, bottom:座標}といったObjectオブジェクトです。

座標が分かってしまえば、基準点が真ん中になるように移動すればよいだけです。座標を計算して、先ほど取得した矩形と同じObjectオブジェクト形式でdocument.setSelectionBounds()メソッドに渡すと、選択しているオブジェクトを移動できます。矩形の縦横サイズを変更して渡せば拡大/縮小もできるわけですが、今回は必要ないですね。

移動が終わったらdocument.exitEditMode()メソッドで編集モードを抜けて終わりです。が、ソースではまだ何かやっています。何をしているかというと、インスタンスの見た目の座標が編集前と同じ位置になるようにしているんです。基準点の位置を変えると、相対的にインスタンスの位置がずれてしまいますからね。ここで使っているelement.matrixプロパティには、オブジェクトのスケール/傾斜/位置を保持したMatrixオブジェクトが格納されています。位置情報に当たるのがmatrix.tx/matrix.tyで、オブジェクトの基準点がドキュメント内のどの座標にあるかということを示しています。これをずらして再設定すれば、見た目には位置が変わらないというワケです。

■基準点を変更しただけだとインスタンスの位置がずれる
インスタンスの位置ずれ

最後のdocument.setTransformationPoint()メソッドは変形時の中心点を移動するメソッドで、(0, 0)を指定すると基準点の位置になります。これはおまけです。JSFLができたら試しにステージでグラフィックやムービークリップのインスタンスを選択して実行してみましょう。基準点が真ん中になれば成功です。

複数選択できるようにスクリプトを拡張してみる

スクリプトに手を加えれば、複数選択にも対応できそうです。でもここでは微妙に視点を変えて、ステージ上ではなくライブラリ内で複数選択したシンボルを編集するように変えてみましょう。変更後のソースは次のようになりました。ステージでやりたかった人も残念ですが我慢して見てください。

ライブラリでの複数選択対応JSFL

var doc = fl.getDocumentDOM();
var items = doc.library.getSelectedItems();
for (var i = 0; i < items.length; i++) {
  doc.library.editItem(items[i].name);
  doc.selectAll();
  var rect = doc.getSelectionRect();
  var w = rect.right - rect.left;
  var h = rect.bottom - rect.top;
  var l = -w / 2;
  var t = -h / 2;
  doc.setSelectionBounds({left:l, top:t, right:l + w, bottom:t + h});
  doc.exitEditMode();
}

ライブラリはdocument.libraryプロパティで取得できます。編集中のFLAファイルのライブラリであればfl.getDocumentDOM().libraryとなります。これに対してlibrary.getSelectedItems()メソッドを使うと選択中のアイテムを配列として取得できます。あとは、for文で配列内のアイテムそれぞれに対して先ほどの編集作業を行うだけです。少し違うのは、document.enterEditMode()メソッドの代わりにlibrary.editItem()メソッドを使っている点です。ライブラリのアイテムを編集するときは、このメソッドを使います。あと、位置調整やおまけで付けていた中心点の移動もやっていません。そもそもライブラリのシンボルですからやりようがありませんね。

今回は前回よりコマンドらしいコマンドになった気がしますが、ストイックに基準点を真ん中にされても困ります。次回はこれにインターフェイスを付けて基準点の位置を選べるようにする予定です。

One Response to “Flash JavaScript APIでオーサリングを効率化(その2)”
  1. 9server.net

    座標の小数点以下を四捨五入するjsfl作った

    jsfl練習。
    そして開発能率UP化。
    下記のエントリを 参考にさせて頂きました。有難う御座います。
    ants Lab. | Flash | Flash …