ToolKit for CreateJSとは

ToolKit for CreateJS(以下TFC)はFlashからHTML5へ変換するためのツールキットです。下記のページからFlashのプラグインをダウンロードしインストールが可能です。

ベクトル、ビットマップ、クラシックトゥイーン、サウンドなどFlash Professionalの主要なアニメーションとイラストレーション機能を利用できます。

http://www.adobe.com/jp/products/flash/flash-to-html5.html

使い方

アニメーション

アニメーションを作る部分に関してはFlashで今まで制作してたことと同じようなことがほぼほぼ出来ます。

詳しい使い方は下記のGskinner先生の記事を参考に作ってみてください

http://www.adobe.com/jp/devnet/createjs/articles/getting-started.html

アニメーションを作る上での注意点

Flashではトゥウィーンが2種類あります。モーショントゥウィーンとクラシックトゥウィーンです。

CreateJSに書きだす時のアラートとしてモーショントゥウィーンはなるべく使わないようにしてくださいと出ます。

黒いBOXが動くアニメーションをモーショントゥウィーンとクラシックトゥウィーンの両方を表示してみました。 (gitアニにしたのでフレームレートが落ちてますがなんとなくあくまでイメージ用)

f:id:atsumo:20131106102859g:plain

アニメーション部分のソースを一部抜粋してみました。


// モーショントゥウィーン用
this.instance = new lib.box();
this.instance.setTransform(86.5,99.5,1,1,0,0,0,51.5,51.5);
//トゥウィーン
this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({x:107.5},0).wait(1).to({x:128.6},0).wait(1).to({x:149.6},0).wait(1).to({x:170.7},0).wait(1).to({x:191.7},0).wait(1).to({x:212.7},0).wait(1).to({x:233.8},0).wait(1).to({x:254.9},0).wait(1).to({x:275.9},0).wait(1).to({x:297},0).wait(1).to({x:318},0).wait(1).to({x:339.1},0).wait(1).to({x:360.1},0).wait(1).to({x:381.2},0).wait(1).to({x:402.2},0).wait(1).to({x:423.3},0).wait(1).to({x:444.3},0).wait(1).to({x:465.4},0).wait(1).to({x:486.5},0).wait(1));

//　クラシックトゥウィーン用
this.instance_1 = new lib.box();
this.instance_1.setTransform(86.5,298.9,1,1,0,0,0,51.5,51.5);
//トゥウィーン
this.timeline.addTween(cjs.Tween.get(this.instance_1).to({x:486.5},19).wait(1));

同じアニメーションでもモーショントゥウィーンとクラシックトゥウィーンだと記述方法が異なる出力がされました。モーショントゥウィーンの場合は1フレームごとの座標位置が記述されているため、アニメーションしたフレーム数分のコードが書きだされます。

今回15フレーム分のアニメーションですらこれだけの記述数になってしまうので、TFCにおいてモーショントゥウィーンはだめってことでｗ

スクリプトの書き方


/* js
this.gotoAndPlay('start');
box.addEventLisntener('click', funuction(){
console.log('click');
});
*/

上記の様に/* js */でフレームスクリプトとして書いたものはTFCでパブリッシュするときにそのフレームのスクリプトとして書きだされます。

この時


/* js
this.gotoAndPlay('start');
box.addEventLisntener('click', funuction(){
console.log('click');
});
*/

gotoAndPlay('start_as3');

godoAndPlay('start_as3');はflashをswfにパブリッシュするときには実行されますが、TFCで書きだされたjsファイルの中には書きだされません。

動きをSWFでも確認したいときもあると思うので、フレームにはjsのソースとasのソースを両方同じ意味になるように書いておくことをおすすめします。

こうなってほしい

今のTFCは機能的には不十分であり、まだまだ改善されると思うので淡い期待を持ちながら作っていきたいと思いますｗ

jsの出力場所を変更したい(flaを保存している場所から相対パスで指定できるようにしたい)
imageをSpriteSheetにして出力できるようにしたい
いろんなアニメーションを制作する中で、共通して使用するパーツが有ったりするのでそれぞれの画像の参照元を変更できるようにしたい

TFCってgithubにおいてあったらいいのになぁいちからTFCみたいなツール作るの面倒だし。かと言っていまのTFCを使ってると運用が少し大変なのでぜひどうにかしてほしい。

TFCを使ってみての所感

カードゲームみたいな所々動的に画像が変わるようなものをアニメーションで演出を付けたいなどの案件には確かに向いてるかなと思ったり。

はじめに使ってみたときは、フレームにコメントとしてjsのスクリプトを書くすこし気持ち悪い作りだなと思っていたが・・・ｗ

log.atsumo

Toolkit for CreateJSを使ってみて感じたこと