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の「コマンド」のところに出ます。

今更ながらFuseKitを試す


1年以上ぶりながら、本家にこういうことを書くのもどうかと思ったのでとりあえずこちらにメモ。普段AS3を勉強してはいるんですが、仕事上どうしてもAS2でなければならないものも多くあり、やっぱりAS2にも慣れておかないとなということで、AS2でアニメーションするときのための便利なライブラリとしてFuseKitを学習しようというお話です。

参考

FuseKitを試すのだ! (1)~

勉強になります。

インストール

MosesSupposes :: Fuse Kit

まずは上記リンクから一式DLしました。落としてきたzipファイルのcomから下を適当にフォルダに入れてFlashの設定からパスを通せばいい模様。

使う

import com.mosesSupposes.fuse.*;
ZigoEngine.simpleSetup(Shortcuts, PennerEasing);
test_mc._brightness = 100;
test_mc.tween("_brightness", 0, 1, "easeOutBack", 1);

という風に書いて、黒い四角だけ描いたムービークリップにtest_mcとつけてプレビューしたら、白い四角がtweenしつつ黒い四角になるものが完成。お次は複数tweenをする場合を見ていけばいいかな。