2012年11月 Archive

CreateJSでフレームラベルの先頭に数字を使うと動作しない

こんにちは、男30歳にして腹が成長中の沖です。

昨日に引き続きタイトルそのままですが、ハマったのでメモしておきます。

CreateJSでは、Flashと同じようにMovieClipにフレームラベルを付けることができます。その名前をもとに、gotoAndStop("label1");みたいにフレーム移動できるわけです。非常に直感的で便利な機能なんですが、このフレームラベルの先頭に数字を使うと、一切動作しなくなります。

Read more

Flashのタイムラインに書いたJavaScriptをToolkit for CreateJSで書き出す

はいこんにちは、友人の結婚式で静岡に行ってきた沖です。

今日はタイトルそのまんまですが、Toolkit for CreateJS(以下、Toolkit)というFlashの拡張機能の話です。Toolkitでは、Flashのタイムラインで作成したアニメーションなどの素材を、HTML5のリッチコンテンツフレームワークであるCreateJSから利用できるように変換して書き出すことができます。

そもそもCreateJSってなに?って人は、Web Designingの記事を読むか、他のブログを参照してください。

さて、本題に移ります。例えば、Flashで四角形が縮小するだけのループアニメーションを作成します。

こんな感じです。んで、これをToolkitを使ってFlashから書き出すと、↓のようにHTML5に変換できるわけです。右クリックするとFlash Playerのメニューが出ないでしょ?

これだけでもかなりスゴイわけですが、実はToolkitにはFlashで作ったアニメーション以外にも、タイムラインに書いたスクリプトを書き出す機能もついているのです!

さすがにActionScriptをJavaScriptに変換することはできませんが、直接JavaScriptを記述することができます。例えば、先ほどのアニメーションを配置しているタイムラインの1フレーム目に「this.stop();」を記述すると……

こんな感じでアニメーションが再生されなくなります。このとき、タイムラインにそのまま「this.stop();」と記述しても、ActionScriptとして認識されてしまうため、Toolkitでのパブリッシュ時には無視されてしまいます。

そのため、下のようにブロックコメントで囲った上で、先頭に半角小文字で「js」というキーワードを入れます。こうすることで、Toolkitがブロックコメントの中をJavaScriptとして認識して書き出してくれるようになります。なお、頭に半角スペースが必須です。また、「JS」のように大文字では認識されません。

1./* js
2.this.stop();
3.*/

使いどころとしては、「最初は停止していて、マウスイベントなどをきっかけに再生されるアニメーション」など、ちょっとしたタイムラインの制御が必要な場合に用いるのがよいと思います。

Toolkitは、あくまでCreateJSで使う素材(アセット)を作るための変換ツールとして位置づけられているため、Flashだけで完パケに持っていくことは避けた方が賢明です(そもそもFlash的にはただのコメントなので、補完も効かない)。

最後に、記事で使っているサンプル一式を置いておきます。参考にしてください!

それでは、よきCreateJSライフを。