Flash Toolkit for CreateJSを試してみる その2

Ameba事業本部ソーシャルゲームディビジョンで
ディベロッパーをしておりますコサカです。
前回からの続きです。

今回は実際にFLASHを使ってHTML5出力をするスクリプトを書いていきます。

まずはアニメーションやスクリプトの前に、
パブリッシュされたHTMLがどのように記述されているか見てみましょう。

実際のサンプルはコチラ

上記のように、
ステージ上にパスデータとgifデータを配置して、
前回のようにHTMLでパブリッシュしてみました。

アニメーションもスクリプトもないわけですから問題なく表示されます。
iPhoneでもAndroidでも確認できました。

(余談ですがSEOなどを考慮しないでいいならば、静的なページデザインを
HTMLコーディングする、最も楽チンで最速な方法なのでは？)

さて先ほどの画面のソースを見てみましょう。

まずは47行目
stage上のオブジェクトはすべてcanvasで出力されているのが分かります。

次に17～26行目あたり
stageに読み込ませていた画像データをプリロードしています。
gifデータがimages配下にpngに変換されて読み込まれています。

39行目では
フレームレートが指定されていますね。

その他の細かいことは置いておいて、
sample-1.js  を覗いてみましょう。


10～20行目でテキストデータの定義
25-27行目でパスデータだったアメーバロゴの定義がされています。

ざっくりとでしたが、このように
stegeの情報をHTMLとjsで書き出してくれるのが特徴ですので、
スクリプトをあとから修正することも可能なのです。

次にアメーバロゴを動かしてみます。
前回のエラー一覧にあったように、
クラシックトゥイーンを含むレイヤー上には、シンボルインスタンスを 1 つしか配置できません。ですので、アメーバロゴを1レイヤーに置き、MCに変換してからクラシックトゥイーンで動かしてみます。

アメーバロゴが上から落ちてきてバウンドして止まる
という簡単なアニメーションです。

動くサンプルはコチラ 

イージングもちゃんと再現されていますね。

注意点が一つあります。
このアニメーションのスクリプトを一部抜粋したのが以下です。

// symbols: 
(lib.シンボル1 = function() {
this.initialize();

// レイヤー 1
this.instance = new lib.トゥイーン4("synched",0);
this.instance.setTransform(32.5,33.5);

this.addChild(this.instance);
}).prototype = p = new Container();
 
シンボルやトゥイーンに名前を付けないと
上記のように日本語がそのまま変数名になってしまいます。
それでも問題なく動くようなのですが、文字化け対策のために、
全てのシンボル、トゥイーンに英数で名前を付けたほうが良いです。

さていよいよ、アニメーション制御のスクリプトを書いてみます。
まずはもっともよく使う？指定位置に飛ばすスクリプトです。

■AS
//trace("end");
this.gotoAndPlay(1);
 
これをJSで書くと

■JS
/* js
//alert("end");
this.gotoAndPlay(0);
*/
 
ほとんど一緒ですね。
JSを書くときは、

スラッシュ、アスタリスク、半角スペース、"js"
で始まり、

アスタリスク、スラッシュ
で終わります。

書く場所は、従来通り、タイムライン上のアクションウィンドウを開いて書けばOKです。
/*で始まるのでコメントアウト扱いになって、少し読みにくくなってしまうのが難点です。

ここで一つ注意点
フレーム番号は 1 ではなく 0 から始まっています。
ですのでJSとASでは数字ずれます。
ラベルは使えますので
this.gotoAndPlay("repeat");
といった具合にラベルを付けるのが無難かと思います。

swfとHTML両方で書き出すなら下記のように記述すればOKです。
//trace("end")
this.gotoAndPlay(1);
/* js
//alert("end");
this.gotoAndPlay(0);
*/
  
もちろんJSですので、アニメーション関連だけでなく
自由にスクリプトを追加することもできます。

アニメーションのコールバックやタイマーを利用せず、
タイムライン上に好きなタイミングでJSでスクリプトがかけるのが
Toolkit for CreateJSの最大の魅力ではないでしょうか？


次にサンプル3のように
amebaロゴが順番に色をランダムに変えながら落ちてくるサンプルを作ります。

ここで必要なポイント

■thisの省略ができない。

ASではstop();のようにターゲットがカレントのとき省略できましたが
JSでは省略できません。

■_rootはexportRoot

ASではrootの変数やメソッドを取りたいとき
_root.hoge
でしたが
JSでは
exportRoot.hoge
と記述します。

■親オブジェクトはparent

サンプルでは未使用ですが、親オブジェクトを制御したいときは
this.parent.gotoAndStop("repeat");

といった具合に記述します。

サンプル3のスクリプト抜粋
●rootのタイムライン
stop();
cnt=0;
this.logo0.gotoAndPlay(2);
function nextAmeba()
{
cnt++;
n=cnt%3;
ran=Math.floor(Math.random()*4)+1;
this["logo"+n].logoIn.gotoAndStop(ran);
this["logo"+n].gotoAndPlay(2);
}

/* js
this.stop();
this.cnt=0;
this.logo0.gotoAndPlay(1);

this.nextAmeba=function(){

this.cnt++;
n=this.cnt%3;

this["logo"+n].gotoAndPlay(1);
//this["logo"+n].logoIn.gotoAndPlay(ran);
//↑これが効かない。
}
*/


●MC上で、下に落ちた時のスクリプト
 _root.nextAmeba();
/* js
exportRoot.nextAmeba();
*/
 

一か所スクリプトがうまく動かない箇所がありました。
this["logo"+n]のように連想配列で取得すると、
その子オブジェクトはなぜか参照できませんでした。

そのためロゴのオブジェクトの2フレーム目に同様の乱数を入れました。

サンプルは以上ですが他にも
/* js
this.hoge.onClick = function() {
alert("hogeをクリック");
}
*/
 
のようにクリックの処理を追加したり、
出力HTMLのinit()に
 Ticker.addListener(window);
と加筆し、
さらに

function tick(){
exportRoot.logo0.x+=0.1;
}

のように記述すれば、
ステージのエンターフレーム的な記述の代用もできるようです。
詳しくはEaselJSの仕様を調べてみてください。

今回のサンプルは
よりダウンロード可能です。

まとめ
Toolkit for CreateJSのほんの導入部分だけの検証でしたが
JSの知識もASの知識も少し必要なので抵抗がある方もいるかもしれませんが
しかし逆に言えば、どちらも少しの学習でできるようになると思いますので
これを機にASの人がJSを、JSの人がASを触ってみてもいいかもしれません。

前回も記載しましたがToolkit for CreateJSはFLASHで作ったものをそのまま
HTML5+JSで書き出すツールではありません。
しかし、ほんの少しの留意点と、
コーディングの拡張で、FLASHで作ったアニメーションを
再現する優秀なツールであることは確認できたと思います。


Flash Toolkit for CreateJSを試してみる 関連記事
Flash Toolkit for CreateJSを試してみる その1