animate ccでHTML5書き出し

1.「YouWin!」の文字をアニメーションをつけてHTML5書き出しする。

下の画像はgifで書き出してます。

2.photoshopで512pxのサイズで「YouWin!」を分割したアトラス画像を作ります。

後でanimate ccで画像にマスクをかけて文字を分解して使います。

画像サイズの大きさは下記の順番で拡大していく

8 16 32 64 128 256 512 1024 2048 4096 8192 16384 32768

なぜphotoshopで512pxのサイズの画像を作るのか？

文字をバラバラでanimate ccに読み込ますと、

書き出した時に勝手にアトラスの画像を生成します。

無駄に大きいサイズで画像が書き出されるので、

それを防ぐために、photoshopで画像を無駄なく配置したアトラス画像を書き出します。

画像をanimate ccに読み込み「Y」にマスクをかけます。

全ての文字にマスクをかけて、文字をバラバラにします。

文字をレイヤーに分けて動きをつけて、いきます。

最後に「youwin!」の文字が出たらストップさせて止めたいので、

赤枠の所にアクションを書きます。

this.stop();

これで再生が止まります。

以前のFlash Lite 1.1ではstop();で止まっていたが、

HTML5に書き出す時はthis.が必要になる。