必要条件

この記事に必要な予備知識

必要な予備知識

以前のバージョンの Flash Professional

 

必要なアドビ製品

ユーザーレベル

すべて

Toolkit for CreateJS for Flash Professional CS6をインストールするには、単純にAdobe Extension Manager CS6を使ってToolkit for CreateJS.zxpを開き、Flash Professionalを再起動するだけです。

※本記事の内容は、2012年9月に公開されたToolkit for CreateJS 1.1をベースにしています。Toolkit for CreateJS 1.0をお使いの方は、Flash Professional CS6のアップデータを適用してください。アップデートは、Flash Professional CS6のメニューから[ヘルプ]→[アップデート...]を選び、Adobe Application Manager経由で行えます。

Window(ウィンドウ)/Other Panels(その他のパネル)/Toolkit for CreateJS」の順に選択し、パネルを開いてください。CreateJSにパブリッシュするためのキーボードショートカットを設定することもできます。このためには、「Flash(フラッシュ)/Keyboard Shortcuts...(キーボードショートカット...)」でキーボードショートカットを編集し、「Commands(コマンド)/Publish for CreateJS(CreateJS用にパブリッシュ)」でメニュー項目のショートカットを追加します。

製品全般について

この拡張機能Toolkit for CreateJSを利用することで、デザイナーやアニメーターは、Flash Professional CS6を使って、CreateJS JavaScriptライブラリを使用するHTML5プロジェクト向けのアセットを作成できます。なお、このToolkit for CreateJSは、Flash Professionalでアセットを作成するためのもので、ゲームやエクスペリエンス一式を構築するためのものではありません。

Toolkit for CreateJSでは、ベクター/ビットマップ/クラシックトゥイーン/サウンド/JavaScriptタイムラインスクリプトといった、Flashの主要なアニメーションやイラストレーション機能をサポートしています。本記事では、具体的なサポート内容を詳しく説明します。

例えば、TestFile.flaというファイル名のFLAファイルでコンテンツを作成し、Toolkit for CreateJSを実行すると、指定した出力ディレクトリに次の2つのファイルが生成されます。

  • TestFile.js:ステージとライブラリ内の全てのシンボルを表現するクラスが再利用可能な形で含まれています。
  • TestFile.html:このHTMLファイルには、アセットのプリロード、CreateJSライブラリへのリンク、ステージのインスタンス化、適切なフレーム速度で実行するためのTicker設定などのが記述されています。

このため、ユーザは書き出されたアセットを素早く確認し、編集することなく全てのアセットを自身のプロジェクトのHTMLファイルに簡単にリンクできます。

Toolkit for CreateJSは、必要なJavaScriptライブラリがまだ存在しない場合、それらのライブラリを全て、指定されたライブラリディレクトリ(デフォルトは./libs/)にコピーします。FLA形式の全ての画像とサウンドは、それぞれ./images/と./sounds/ディレクトリに書き出されます。

[Toolkit for CreateJS]パネルの[プレビュー]にチェックを入れると、パブリッシュ時に、PCのデフォルト設定されているブラウザーでHTMLファイルを開きます。

パブリッシュ時に、コンテンツ内にToolkit for CreateJSでサポートされていない機能が存在すると、[出力]パネルに警告が表示されます。

CreateJS

CreateJSは、MITライセンスで提供されている、オープンソースのJavaScriptライブラリ群です。CreateJSを使うと、HTML5用のインタラクティブなリッチコンテンツを簡単に作成できます。以下は、Toolkit for CreateJSで使用される主要なライブラリです。

  • EaselJS - HTML5のcanvas要素向けに表示リスト(Flash Playerに似たもの)/マウスインタラクション/フィルターエフェクトなどを提供します。Toolkit for CreateJSでは、あらゆるグラフィックスを表示するために使用されます。
  • TweenJS - 簡単に使うことができ、しかも非常に強力なJavaScriptトゥイーン/アニメーションライブラリです。Toolkit for CreateJSによってパブリッシュされるタイムラインアニメーションは、全てTweenJSを使用します。
  • SoundJS - Web上でオーディオを再生するためのプラグインアーキテクチャを提供します。SoundJSには、HTML5 audioタグ/WebAudio/Flash Playerを使ってサウンドを再生すためのシンプルなAPIが用意されています。Toolkit for CreateJSでは、サウンドを再生するためのデフォルトライブラリはSoundJSですが、パブリッシュされたHTML内のwindow.playSoundメソッドを修正することで簡単に上書きすることができます。
  • PreloadJS - XHR2(使用できる場合)または標準のHTMLタグを使用する、インスタンス化可能なロードキューです。スムーズな進捗管理と、強力なイベントモデルを実現します。Toolkit for CreateJSでは、パブリッシュされたHTML内のアセットをロードするために使用しますが、簡単に変更できます。

CreateJSの詳細(デモや詳しいAPIドキュメントなど)については、CreateJS Webサイトをご覧ください。

ライブラリ

ライブラリは、JavaScriptファイル内に、libネームスペース内の再利用可能なクラスとしてパブリッシュされます。Toolkit for CreateJSは、ビットマップシンボルとタイムラインシンボルをサポートします。タイムラインシンボルは、タイムラインを持つあらゆるタイプのシンボルをサポートします。つまり、Toolkit for CreateJSはMovieClipシンボル/グラフィックシンボル/ボタンシンボルをパブリッシュできます。また、FLAファイルのステージもインスタンス化可能なクラスとしてパブリッシュされます。

SWFへのパブリッシュと同じように、生成されるJavaScriptライブラリに含まれるのは、使用しているシンボル(ステージから参照されているシンボル)か「Export for ActionScript(ActionScript用に書き出す)」で設定されているシンボルだけです。

JavaScriptクラス名は、ライブラリ項目に設定されているAS3クラス名またはライブラリ名(クラス名が設定されていない場合)に基づいたものとなります。

自分でJavaScriptで処理を書く場合、これらシンボルのインスタンス化と処理は、ActionScriptと同様の記述方法で行えます。

var myRobot = new lib.Robot(); myRobot.leftArm.rotation = 45; stage.addChild(myRobot);

ビットマップとサウンドは、出力ディレクトリに自動的にコピーされます。

シンボルには、四角の枠と共に、変換されていないシンボルのピクセル境界を示すnominalBoundsプロパティも付加されます。

タイムラインアニメーション

パブリッシュできるタイムラインアニメーションの種類には、いくつかの制限があります。

この拡張機能は、現在、カスタムイージングカーブ、新スタイルのモーショントゥイーン、インバースキネマティック、マスク、モーションガイド、シェイプトゥイーンなどの高度な機能をサポートしません(従来のクラシックトゥイーンのみ)。

また、トゥイーンが含まれるレイヤーはシンボルインスタンスを1つしか持てないという制限もあります。複数のコンテンツは持てず、レイヤーの全期間を通して同一ライブラリ項目のインスタンスでなければなりません(フレームを空にすることはできます)。

トゥイーンが含まれないレイヤーには、この拡張機能でサポートされている任意のコンテンツ(テキスト、ビットマップ、グループ、ベクターグラフィック、シンボルなど)を含めることができます。これらのレイヤー内の要素は、複数のキーフレームで再使用されます(それらの名前が一致する場合)。

このToolkitは、従来のトゥイーン、シンプルなイージング(イーズインとイーズアウト)、グラフィックインスタンス、ほとんどのプロパティのトゥイーニング、ラベル、JavaScriptによるスクリプティング(以下を参照)をサポートします。

JavaScriptによるタイムラインスクリプティング

ActionScriptパネルで、次のコメントフォーマットを使って、キーフレーム上のタイムラインにJavaScriptコードを追加できます。

/* js alert("this will run when the timeline hits this frame"); */

パブリッシュされたMovieClipシンボルは、ActionScriptに似た、タイムラインを制御するメソッドをエクスポーズします。

mc.gotoAndPlay("animateOut"); mc.gotoAndStop(10); mc.stop(); mc.play();

JavaScriptは、thisを暗黙のスコープとしては使用しません。このため、ユーザー自身でタイムラインスクリプトにスコープを指定する必要があります。例えば、次のようにします。

/* js this.onClick = function() {    this.gotoAndPlay(0); } */

注意:Flash(フレームインデックスが1から始まる)と異なり、EaselJSのタイムラインは0から始まります。インデックス付けがこのように異なるため、Flash Professionalに表示されるフレームインデックスから1を引く必要があります。例えば、gotoAndPlay(0)と指定すると、EaselJSでは再生ヘッドがムービークリップの最初のフレーム(Flash Proでフレーム1と称されるフレーム)に移動します。

インスタンスプロパティ

Toolkit for CreateJSは、あらゆるインスタンスに次のインスタンスプロパティをサポートします。

  • アルファ
  • X
  • Y
  • 回転
  • scaleX
  • scaleY
  • skewX
  • skewY

テキストインスタンス、MovieClipインスタンスとも、次の要素をサポートします。

  • シャドウ
  • グローフィルター(キャンバスでのパフォーマンスに問題があるため推奨しません)

シンボルインスタンスについては、このToolkitは次のものもサポートします。

  • cacheAsBitmap(cache()コールに変換される)
  • "add"ブレンドモード
  • グラフィックモードプロパティ(ループ、1回再生、単一フレームおよび最初のフレーム)

注意:Flashと異なり、EaselJSはアニメートされたコンテンツのキャッシュを自動的に更新することはありません。MovieClipインスタンスをキャッシュする場合、スクリプティングを追加しない限りアニメーションは正常に更新されません。

このToolkitは、現在、カラー変換、3D変換、フィルターの追加をサポートしていません。

MovieClip、グラフィック、ボタン

複数のフレームを使用したMovieClipシンボル、グラフィックシンボル、ボタンシンボルは、すべてタイムラインを持つEaselJS MovieClipとしてパブリッシュされます。フレームを1つだけ使用したシンボルは、EaselJSコンテナとしてパブリッシュされます。

ボタンは、インタラクティビティは加えられずに、純粋なムービークリップとしてパブリッシュされます。現在、インタラクティビティ(ボタンの状態など)はコードを使って個別に追加する必要があります。

MovieClipインスタンスは、インスタンスプロパティ(.mode、.loopおよび.startPosition)に基づいて、グラフィックインスタンスとして動作します。個別のグラフィックタイプは存在しません。

テキスト

テキストについては、次のプロパティがサポートされます。

  • テキスト
  • 行の高さ
  • フォント
  • フォントサイズ
  • カラー
  • 位置ぞろえ(左、右、中央)
  • 太字
  • イタリック

注意:複数行にわたるテキストは、予期しない表示状態になることがあります。可能な限り、キャンバスコンテンツ上にレイヤー化されたHTMLとCSSを介してテキストを表示することをお勧めします。この処理には、EaselJSのDOMElementクラスが役立ちます。

ベクターグラフィック

ほとんどのベクターアートは正しくパブリッシュされます。現在、楕円(非円形)の放射状グラデーションはサポートされていません。同様に、ビットマップ(パターンとも呼ばれる)の塗りつぶしで、塗りつぶしの変換はサポートされません。スケールされたシェイプや、サブピクセルレベルのストロークサイズを使用するシェイプでは、ストローク幅が異なることにも気付くはずです。

ベクター出力で問題が発生する場合は、そのシェイプを選択し、「Modify(修正)」メニューの「Break Apart(分解)」を選択してみてください。

一般には、シェイプを最適化することをお勧めします(「Modify(修正)/Shape(シェイプ)/Optimize(最適化)」)。特に、Illustratorなどの他のツールから読み込んだコンテンツにはこの方法が有効です。最適化を行うと、パブリッシュにかかる時間とファイルサイズが相当抑えられます。

ベクターベースのアニメーションの場合、フレームごとにベクターを再描画するのではなく、トゥイーン機能を使ってベクターアートを含んだシンボルを作成することをお勧めします(足のシンボルの作成をトゥイーンに任せるなど)。ベクターアートを含むシンボルをトゥイーンで作成すると、ファイルサイズが小さくなり、パブリッシュ時間も短縮されます。このテクニックの例は、サンプルFLAを参照してください。

サウンド

サウンドはライブラリから書き出されます。サウンドのループ、サウンドの繰り返しなどのタイムラインサウンドがサポートされます。サウンドの書き出しはMP3で行われます。

注意:Flash Proでは書き出すことができるサウンドが制限されます。詳しくは、以下の「サウンドの書き出しの問題」を参照してください。

ブラウザーの中にはMP3サウンドファイルをサポートしないものがあります。広範なサポートを考慮して、OGGサウンドファイルを手動で追加することもできます。

サウンドは、ブラウザーのオーディオ規定によって制限されます。例えば、iOSではサウンドが極度に限定されます。詳しくは、SoundJSドキュメントを参照してください。

このToolkitは、ストリームサウンド、スタートサウンド、およびイベントサウンドを区別しません。このToolkitは、「Stop」同期アクションやサウンドエフェクトをサポートしません。ループと繰り返しの回数設定もサポートしません。

サウンドの書き出しの問題

Flash Proでは、FLAから確実に書き出されるサウンドが限定されます。しかし、今後出るバージョンではこの制限を解決することを期待しています。

サウンドを書き出す際にエラーメッセージが表示された場合は、次の操作を試してみてください。

  1. FLAに読み込もうとしているそのサウンドがMP3であり、160kbps以下でエンコードされているかを確認します。
  2. MP3メタデータの削除を試します。これは、Flash Professionalと一緒にインストールされるAdobe Media Encoderアプリケーションを使って行えます。
  • メタデータを削除するオプションを設定するには:
    • Adobe Media Encoderを起動します。
    • 「Preferences(環境設定)」ダイアログボックスを開きます。
    • ダイアログの左側に表示されるメタデータアイテムをクリックします。
    • 「Export Options(オプションを書き出し)」メニューを「None(なし)」に設定します。
    • 「Preservation Rules(保存規制)」メニューを「Exclude All(すべてを除外)」に設定します。
    • 「OK」をクリックして「Preferences(環境設定)」ダイアログボックスを閉じます。
  • 個々のWAV/MP3ファイルを処理するには:
    • メインAMEウィンドウで「Add Source(追加)」ボタンをクリックします。
    • ファイルを開くダイアログボックスから、MP3ファイルまたはWAVファイルを選択します。
    • 以上の操作でサウンドファイルがキューに入ります。
    • 「F4V」とあるドロップダウンを「MP3」(これが出力フォーマット)に変更します。
    • 出力のビットレート(160kbps以下)を選択します。
    • 緑色の「run(実行)」ボタンをクリックします。

新しいサウンドをFLAに読み込み、オリジナルサウンドを置き換えるか削除します。

  1. まだ問題が継続する場合は、エラーメッセージに示される名前に従ってソースファイルの名前を変更し、それらを手動でサウンドディレクトリに移します。続いて、エラーの生成を防ぐ処置として、パネル内の「sounds(サウンド)」オプションをオフにします。

画像

画像も、JPGフォーマットまたはPNG32フォーマットでライブラリから書き出されます。画像に透過が含まれるか、ユーザーが圧縮タイプをlosslessに設定してある(オリジナルソースがJPGではない)場合を除き、Toolkit for CreateJSは、JPGを使用します。このToolkitは、JPG出力される各画像に対して、「properties(プロパティ)」ダイアログボックスに指定された品質設定を使用します。

パネル制御

ここでは、パネル上の各制御について簡単に説明します。

Toolkit設定

  • 「Publish(パブリッシュ)」 - 一番手前のFLAがCreateJS用としてパブリッシュされます。
  • 「Preview(プレビュー)」 - オンにすると、パブリッシュが完了した時点でデフォルトのブラウザーにHTMLの表示が試みられます。
  • 「Help (?)((?))」- デフォルトブラウザーに、パネルのオンラインヘルプを表示します。

タイムライン設定

  • 「Loop(ループ)」 - オンにすると、タイムラインがループします。オフにすると、最後まで再生された時点でタイムラインが停止します。

パブリッシュ設定

  • 「Output(出力ファイル)」 -FLAがパブリッシュされるディレクトリです。デフォルトはFLAと同じディレクトリです。ブラウズボタン「...」を使って変更できます。
  • 「Images, Sounds, JavaScript libraries(イメージ、サウンド、JSのライブラリ」 - 画像、サウンドおよびサポートしているJavaScriptライブラリの書き出し先となる相対URLです。右側のチェックボックスをオフにすると、画像はFLAから書き出されませんが、指定されたパスは画像URLのアセンブルに使用されます。これは、多数のメディアが含まれているFLAからのパブリッシュをスピードアップしたり、変更したJavaScriptライブラリの上書きを防いだりする目的で使用できます。
  • 「Publish HTML(HTMLをパブリッシュ)」 - オフにすると、HTMLファイルは生成されません。「Preview(プレビュー)」がオンになっていると、HTMLファイルが存在する場合にはそのHTMLファイルの表示が試みられます。これは、変更したHTMLファイルの上書きを防ぐのに便利です。
  • 「Include hidden layers(非表示レイヤーを含める)」 - オフにすると、隠されたレイヤーは出力に含まれません。
  • 「Compact shapes(シェイプをコンパクト化)」 - オンにすると、ベクター命令がコンパクトなフォームで出力されます。読みやすい詳細命令を書き出す場合は、オフにしてください(学習目的に便利)。
  • 「Hosted libraries(ホストのライブラリを使用)」 - オンにすると、code.createjs.comでCreateJS CDN上でホスト管理されたライブラリのコピーが出力に使用されます。ホスト管理すると、ライブラリをキャッシュ化し、様々なサイトで共有できます。

次のステップ

サンプルを使って作業を開始する場合は、「Flash Professional Toolkit for CreateJSのファーストステップガイド」に目を通してください。

Toolkit for CreateJSの詳細およびドキュメントについては、Adobe Developer Connectionをご覧ください。

CreateJSライブラリの詳細およびドキュメントについては、CreateJS Webサイトをご覧ください。