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」のように大文字では認識されません。

/* js
this.stop();
*/

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

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

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

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

よろしければコメントをどうぞ!

匿名希望のコメントはこちらへ

Comment Form

Trackbacks:0

TrackBack URL for this entry
https://448.jp/cgi-bin/mt/bnq48cke.cgi/1430
Listed below are links to weblogs that reference
Flashのタイムラインに書いたJavaScriptをToolkit for CreateJSで書き出す from 448.jp blog

この記事はいかがでしたか?

ぜひ共有してみてください。あなたのフィードバックが、私のモチベーションにつながります。

×