JSFLに触れてみる

前回FuseKitについて書きつつも何故かタイムラインでの作業をしていたら、いろいろ面倒なことがあることに気づいた。タイムラインベースで作成していると直感的にオブジェを置いたり動かしたりできるのはいい。でも中心点が真ん中になってないとか、画像の座標に小数点以下が含まれてて画像がぼけるとかでちょっと面倒な作業ができてしまう。

作ってる時は面倒だなぁと思うだけだったんですが、それを作り終わってさてどうしようとなった時に、「そうだ、JSFLってものがあるじゃないか」と思い当たったので、勉強がてら作成してみました。

最初はとっつきにくいと思ったんですが、ActionScript,JavaScriptがある程度分かれば、少しのサンプルと公式ドキュメントがあれば、ある程度のことはできそうです。

とりあえず、上記サイトさんを参考に、動きとしてはほぼ同じですが、ステージ上のオブジェクトの座標を四捨五入して配置しなおすものを作成してみた。

/**
 * ステージ上に配置されたオブジェクトの座標の小数点以下を四捨五入するjsfl
 */
var doc = fl.getDocumentDOM();

var aryLayers = doc.getTimeline().layers;
//各レイヤー
for(var i = 0; i < aryLayers.length; i++){
    var aryFrames = aryLayers[i].frames;
    //各フレーム
    for(var j = 0; j < aryFrames.length; j++){
        //キーフレームでなければ次へ
        if(j != aryFrames[j].startFrame){continue;}
        //各エレメント
        var aryElements = aryFrames[j].elements;
        for(var k = 0; k < aryElements.length; k++){
            var elem = aryElements[k];
            //インスタンスの場合
            if(elem.elementType == 'instance'){
                var mat = elem.matrix;
                mat.tx = Math.round(mat.tx);
                mat.ty = Math.round(mat.ty);
                elem.matrix = mat;
            }
            //シェイプの場合は頂点を移動
            else if(elem.elementType == 'shape'){
                elem.beginEdit();
                var aryVertices = elem.vertices;
                for(var l = 0; l < aryVertices.length; l++){
                    var vtx = aryVertices[l];
                    var posX = Math.round(vtx.x);
                    var posY = Math.round(vtx.y);
                    vtx.setLocation(posX, posY);
                }
                elem.endEdit();
            }
        }
    }
}

シェイプの時は無理矢理頂点を取って、四捨五入してみたら一応移動はしました。シェイプの元の大きさが変わってしまう場合があるので、使う方がいたら注意してください。

利用方法は、こちらを参考に。

普通は上記Configuration内にあるCommandsに入れるようです。付けたファイル名がそのままFlashIDEの「コマンド」のところに出ます。