index

• 01 モーショントゥイーンは[クラシックトゥイーン]を使うか[フレームアニメーションに変換]する
• 02 [クラシックトゥイーン]でもモーションガイドが使われていたらフレームアニメーションにする
• 03 [シェイプトゥイーン]は[キーフレームに変換]してから[トゥイーンの削除]
• 04 [アクション]パネルにJavaScriptのコードを書く
• 05 [Toolkit for CreateJS]から書出されるファイル
• 06 参考リンク

■サンプルファイル(Flash CS6形式/約135KB)

本稿は2012年5月23日20:30から配信されたADC OnAir第2回 「Stage3Dを学ぼう！Flashで2Dコンテンツ」のコーナー「奈緒のトニカクやってみよう！」(録画00:41:00-00:56:00)でご紹介した内容を、簡単にまとめたものです。

「Adobe Flash Professional Toolkit for CreateJS」はFlash Professionalの機能拡張で、FlashコンテンツをCreateJSおよびHTML5用にパブリッシュします。おもにトゥイーンアニメーションをいくつかパブリッシュして見ながら、設定の注意やコツをご紹介します。

01 モーショントゥイーンは[クラシックトゥイーン]を使うか[フレームアニメーションに変換]する
[Toolkit for CreateJS]パネル(図001)でFlashムービー(FLA)ファイルをパブリッシュすると、CreateJSを適用してHTML5に対応したHTMLドキュメントやJavaScriptおよび素材のファイルが書出されます。

まずは、簡単なモーショントゥイーンをつくって、モーションパスを少しカーブさせます(図002)。

図002■モーショントゥィーンでアニメーションをつくる

[ムービープレビュー]で、先にFlash(SWF)ムービーのアニメーションを確かめます。つぎに、[Toolkit for CreateJS]パネル(前掲図001)の[パブリッシュ]ボタンを押すと、書出されたHTMLドキュメントがブラウザでプレビューされます。

警告 :
サポート範囲外の機能が使用されています : モーショントゥイーン。代わりにクラシックトゥイーンを使用してください。

これは今のところ、Flash CS4 Professionalから備わった新しいモーショントゥイーンがパブリッシュできず、CS3以前から使われている[クラシックトゥイーン]でトゥイーンアニメーションはつくらなければならないということです。けれど、[クラシックトゥイーン]では、モーションパスでアニメーションの動きを細かく操作できません。その場合、[モーショントゥイーン]がつくられたフレームで右クリックし、[フレームアニメーションに変換]を選びます(図003)。

↓

すると、トゥイーンではなくフレーム単位のアニメーションになりますから、[Toolkit for CreateJS]で問題なく[パブリッシュ]できます。ただし、アニメーションに修正が入りそうなときは、[フレームアニメーションに変換]する前のファイルを控えておきましょう。[フレームアニメーションに変換]しても、シンボルのグラフィックアセットはFlashと同じように使い回されますので、書出したデータがことさらに膨らむということはありません。

02 [クラシックトゥイーン]でもモーションガイドが使われていたらフレームアニメーションにする
[クラシックトゥイーン]でもモーションガイドを使えば、アニメーションの動きは自由に決められます(図004)。けれど、[Toolkit for CreateJS]で[パブリッシュ]しても、モーションガイドは無視されます。

警告 :
サポート範囲外の機能が使用されています : モーションガイド。

図004■モーションガイドを用いた[クラシックトゥイーン]

ここでも、[クラシックトゥイーン]をフレームアニメーションにすれば、モーションガイドどおりの動きが[Toolkit for CreateJS]で[パブリッシュ]できます。ただし、[クラシックトゥイーン]では[フレームアニメーションに変換]というメニューが表れません。トゥイーンのフレームすべてを選んで[キーフレームに変換](ショートカット[F6])します。使うメニューが違うのでご注意ください。

03 [シェイプトゥイーン]は[キーフレームに変換]してから[トゥイーンの削除]
[シェイプトゥイーン]もそのままでは[Toolkit for CreateJS]で[パブリッシュ]できません(図005)。やはり、フレームアニメーションに直さなければならないのです。

警告 :
シェイプトゥイーンはサポートしていません。

→

しかも、トゥイーンのフレームすべてを[キーフレームに変換]しただけでは足りません。変換されたキーフレームの色(薄緑)は、まだ[シェイプトゥイーン]の設定が残っていることを示しています(図005)。ですから、これらのキーフレームすべてを改めて選んだうえで、[トゥイーンの削除]をしなければならないのです。

04 [アクション]パネルにJavaScriptのコードを書く
CreateJSのライブラリで本格的にコードを書こうとするときは、JavaScritp(JS)ファイルをつくることになるでしょう。でも、簡単なスクリプトなら[アクション]パネルに書くことができます。もちろん、[アクション]パネルはJavaScriptを解釈できません。そこでブロックコメント(/* */)にして一旦ActionScriptとしては無効にしたうえで、コメント先頭にキーワード「js」を加えます。

/* js
// ここにJavaScriptコードを書く
*/

そして、そのコメント領域にコードを記述すれば、[Toolkit for CreateJS]が[パブリッシュ]するとき、JavaScriptとして書出します。前述01で[フレームアニメーションに変換]したFlashムービーに、簡単なCreateJSのJavaScriptを書いてみます。

メインタイムラインは1フレームだけで、そこにムービークリップインスタンスがひとつ置いてあります。アニメーションは、このムービークリップシンボルの中のタイムラインにつくりました。メインタイムラインのインスタンスに、[プロパティ]インスペクタで名前(mc)をつけておきます(図006)。

スクリプト用のレイヤーをつくってそのフレームを選んだら、つぎのJavaScriptのコードを書きます(図006)。アニメーションするムービークリップインスタンスをクリックすると、インスタンスは画面から消えます。なお、ActionScriptに対してはコメントとして記述されていますので、[ムービープレビュー]ではコードは無視されます。

[Toolkit for CreateJS]で[パブリッシュ]すると、アニメーションは前述01のコンテンツと変わりません。けれど、動き回るインスタンスをクリックすれば、画面から消えます。

このように、onClickイベントは、ドット(.)の手前のインスタンスがクリックされたときの動きを定め、やりたいことは代入演算子=の右辺に書いたfunctionの関数本体({}内)にステートメント(命令文)として加えます^[*1]。

インスタンス名.onClick = function() {
  ステートメント
}

そして、visibleプロパティはインスタンスを表示する(true)かしない(false)かの定めとなります。

05 [Toolkit for CreateJS]から書出されるファイル
[Toolkit for CreateJS]で[パブリッシュ]すると、FLAファイルと同名のHTMLおよびJSファイルのほか、CreateJSライブラリや素材(画像・サウンド)のフォルダがつくられて必要なファイルが納められます(図007)。なお、素材のファイルがなければ、フォルダの中身は空です

FLAファイルと同じ名前のふたつのファイルのうち、HTMLドキュメントはCanvasおよびCreateJSを含んだコンテンツの初期設定を行います。そして、JSファイルがFlashのタイムラインに置かれたインスタンスの描画やアニメーションを扱っています。

たとえば、タイムラインやインスタンスの中のシェイプは、JSファイルでCreateJSを使ったJavaScriptで描かれています。ただし、デフォルトではJavaScriptの記述をコード化して圧縮しているため、判読しづらくなっています(図008)。

このJavaScriptの圧縮は[Toolkit for CreateJS]パネルの[シェイプをコンパクト化]のチェックを外せば、解いて[パブリッシュ]することができます(図009)。

コード化が解けると、CreateJSのメソッドでシェイプを描画するJavaScriptが読取れます(図010)。たとえば、moveTo()は描画の開始で、curveTo()が曲線を描き、beginFill()は塗り色を定めます。

試しにbeginFill()メソッドで定めるカラーを変えれば、そのメソッドの適用されたシェイプは塗り色が変わります(図011)。ただし、[Toolkit for CreateJS]を用いたワークフローでは、JSファイルの中のJavaScriptを直接書替えることは想定されていません。

05 参考リンク

• Adobe Flash Professional Toolkit for CreateJSについて知りたい方のためのリンク紹介
• 新登場！CreateJSとは？

作成者: 野中文雄
作成日: 2012年5月24日