Flash Professional CS5とFlash Builder 4によるアニメーションとActionScriptの連携

Adobe Flash Builder 4は、ActionScript 3およびFlexフレームワークを対象としたEclipseベースのIDEです。この環境の登場によって、Flashデベロッパーは、インタラクティブコンテンツの作成にAdobe Flash Professionalを使用する際に、生産性の高いコード開発環境を利用できるようになりました。

Flash ProfessionalコンテンツでクラスベースのActionScriptコード（タイムラインベースのActionScriptコードではなく）を使用するのは、多くのデザイナーにとってなじみのないことかもしれませんが、少しでも複雑なプロジェクトを扱う場合には、再使用可能なコードの利点は大きなものになります。この手法では、デベロッパーとデザイナーが協力して作業するための新しいワークフローが可能になり、プロジェクトのデザインとロジックをより明確に分離できるようになります。

この記事では、新しいFlash Builder 4とFlash Professional CS5の統合機能の概要を紹介し、ActionScriptクラスで制御される単純なキャラクターアニメーションの作成を通じて、改良されたワークフローについて説明します（図1のボタンをクリックすると、完成したアニメーションが見られます）。さらに、完成した作業結果をFlexプロジェクトに取り込む方法と、リッチインターネットアプリケーション（RIA）のコンテンツやビジュアルコンポーネントを再使用する方法も説明します。

図1. このチュートリアルで作成する単純なプロジェクト。表示されたボタンは、MovieClipを起動し、ActionScriptを使用したアニメーションを再生します（ボタンをクリックするとサンプルが表示されます）。

注意：サンプルプロジェクトのチュートリアルステップは、Flash Professionalでのアニメーションの基礎を理解している読者向けに、意図的に簡潔にしてあります。すなわち、この記事の主題は、ActionScriptとMovieClipシンボルの統合の技術的側面にあります。

この節では、サンプルプロジェクトで扱うツールとワークフローの概要を紹介します。Flash Professionalのツールに十分に慣れている方は、この節は飛ばし読みするか、チュートリアルに直接進んでもかまいません。Flash ProfessionalとFlash Builderを初めてお使いになる方は、このままお読みください。

Flash Professional CS5の使用

Flash Professionalの主な目的は、デザイナー向けの機能を使用してアニメーションやビジュアルコンテンツを開発することです。当初、Adobe Flash Playerの最も魅力的な特長は、軽量なベクトルコンテンツをWeb上に表示できることでした。その後、Flash Playerの機能が拡大するにつれて、Flash Professionalのアニメーション機能の範囲も広がり、様々な種類のクリエイティブ作業をサポートするようになりました。

Flash Professionalの最新バージョンには、ビジュアルデザイナーのための強力な機能アップデートがいくつか含まれています。Flash Professional CS4（およびFlash Player 10）では、3D回転およびアニメーションツール、アニメーションアーマチュアを作成するためのBoneツール、アニメーションのモーションのXML定義に基づく高度なモーショントウィーン（ビジュアルに生成されたアニメーションを異なるタイムラインやプロジェクトで再使用したり別の目的に使用したりすることが可能）などが導入されています。Flash Professional CS5では、テキストレイアウトフレームワークの導入によるテキストサポートの改善、CFF（Compact Font Format ）を使用した新しい種類のフォント埋め込みの導入により、ビジュアルデベロッパーが使用可能なツールがさらに増えました。また、Flash Professional CS5では、コード開発環境であるFlex SDKおよびFlash Builderとの間のワークフローおよび統合も改善されています。

最初に理解すべきことは、扱うファイルのタイプです。

• FLA：Flashで新しいファイルを作成する場合は、FLAファイルと呼ばれるものを作成します。FLAファイルは、コンテンツの構築と公開のために使用する編集可能なマスターファイルであり、PhotoshopのPSDファイルに考え方としては似ています。このファイルはプロジェクトのソースファイルの一部として保存しておき、編集の際はここに戻りますが、表示のためにサーバーにパブリッシュするのはこのファイルではありません。FLAファイルの拡張子は.flaです。
• SWF：作業結果を他の人に見せるために配布する場合、FLAからSWFファイルをパブリッシュします。SWFはFLAファイルを圧縮して編集不可にしたものであり、PSDファイルからエクスポートするJPGまたはPNGファイルに考え方としては似ています。SWFファイルの拡張子は.swfです。
• HTML：Flash ProfessionalからSWFをパブリッシュする際に、SWFをWebページに埋め込んで表示するためのHTMLページをパブリッシュすることもできます。このファイルはオプションであり、他のツールでも作成できますが、必要なファイルをすべてFlash Professionalから生成できるのは便利です。最終的には、SWFとHTMLページをサーバーにアップロードして、Webブラウザーで表示できるようにします。

このチュートリアルの作業では、Flash Professional CS5ワークスペースの次に示す機能を使用します。

• ステージ：ステージとは、メインタイムライン上の領域です。この領域上にグラフィックスが表示され、Flashムービー（SWFファイル）のファイル寸法を基準として配置されます。この領域は、他のデザインツールのキャンバスやアートボードに似ています。
• タイムライン：Flashコンテンツは、それぞれ1つのタイムラインを含むムービークリップシンボルの系列によって構成されます。各タイムラインは、レイヤーとフレームから構成されます。レイヤーは、他のデザインツールの場合と同様、コンテンツを分離する役割を果たします。フレームは、コンテンツの時間的変化（アニメーションまたはグラフィックスステート）を表現します。FLAファイルを作成すると、メインタイムラインがデフォルトビューとして表示されます。メインタイムラインは、ファイルのルートコンテナです。
• ライブラリ：メインタイムライン以外のすべてのムービークリップは、FLAドキュメントのライブラリに保存されます。ライブラリパネルには、再使用可能なオブジェクトの集合が保持されます。ライブラリは各FLAファイルに1つずつあります。これには、シンボル、フォント、画像、埋め込みサウンドおよびビデオといった再使用可能なコンテンツが含まれます。
• シンボルとインスタンス：シンボルは、再使用可能なFlashオブジェクトの定義です。例えば、シンボルには、グラフィック、アニメーション全体、その他のアセットの集合が含まれる場合があります。シンボルはライブラリ内にのみ存在します。シンボルをタイムライン上で使用する場合は、シンボルのインスタンスを作成します。ここで重要なのは、シンボルのインスタンスをいくつ作成しても、ムービーのファイルサイズは大きくは増加しないということです。シンボルはいつでも編集でき、編集するとすべてのインスタンスが更新されます。
• プロパティ：個々のシンボルインスタンスを異なる方法で編集するには、インスタンスのプロパティを使用します。プロパティは、インスタンスの性質を記述する変数です。シンボルインスタンスの核となる部分は常に親シンボルと同じですが、インスタンスのプロパティを変更することで、サイズ、位置、色、透明度といった性質を独自に変更できます。これは、トウィーンアニメーションを作成するための鍵となる概念です。インスタンスのプロパティを編集するには、プロパティパネルまたはタイムラインに添付されたActionScriptコードを使用します。

以下の部分ではFlash Professionalの他の様々な機能を扱いますが、主要な要素はここまでの説明で紹介されています。Flash Professional CS5のユーザーインターフェイスの詳細については、FlashオンラインドキュメントのFlashワークフローとワークスペースを参照してください。

Flash Builder 4の使用

Flash Builder（以前の名称はFlex Builder）は、オープンソースFlexフレームワークによるクロスプラットフォームRIAの開発をサポートします。Flexは基本的に、アプリケーション開発の生産性を向上させるためのビジュアルコンポーネントとActionScriptクラスの集合です。Flexには、宣言的なXMLベースのマークアップ言語がActionScriptに加えて装備されており、他の言語の経験を持つプログラマーにとって魅力的です。

FlexはFlash Playerで動作するRIAの主要な開発手段として広く採用されてきましたが、一部のデベロッパーは、ActionScriptだけを使用する（すなわち、Flexフレームワークを使用しない）開発向けにFlex Builder（現在はFlash Builder）を使用することを選んでいました。

Flash BuilderではFlash Professional CS5との統合機能が導入されたので、FlashデベロッパーはFlash Builderの利点とFlash Professionalの強みを組み合わせることができるようになりました。Flash ProfessionalでもActionScriptファイルの作成と編集は可能ですが、Flash Builderのワークフローは大幅に改良されています。製品名の変更は、Flash Player向けコンテンツの開発が、FlashおよびFlexの枠を超えて、現在Flash Platformと呼ばれるようになったいくつかのツールを横断する統合ワークフローを含むようになったことを反映しています。

Flash Builderの強みの1つは、コードの作成と管理に関する機能です。ActionScriptファイルの作成のための充実したサポートとショートカット、コーディングプロセスを効率化するコードヒント、コンパイル時のコードチェック、デバッグツールなどが用意されています。

このワークフローで扱うファイルタイプのいくつかを以下に示します。

• AS：Flash Professional/Flash Builderのワークフローでは、Flash BuilderでActionScriptファイルを作成します。ActionScriptファイルは一般的にクラスと呼ばれます。ActionScriptクラスは、コード内の再使用可能なオブジェクトを定義します。これは、Flashでシンボルが再使用可能なビジュアルオブジェクトを定義するのに似ています。ActionScriptクラスは、パッケージと呼ばれるフォルダー構造に保存されます。クラスの概念については、この後の部分で詳しく説明します（それほど難しくはないので、初めての方でも心配はいりません）。ActionScriptファイルの拡張子は.asです。
• MXML：MXMLは、Flex SDKでFlexベースのSWFファイルの作成に用いられるXMLベースのマークアップ言語です。MXMLファイルはFlexプロジェクトでのみ用いられ、Flash Professionalプロジェクトでは使用されませんが、Flexでの作業の基本となるものなので、知っておく必要があります。MXMLは、Flash Builderで作業する際によく目にする用語です。
• HTML、XML、CSS：Flash Builderでは、他の標準のWebテクノロジーに基づくテキストファイルを編集することもできます。

Flash Builderでチュートリアルの作業を行う際には、次のワークスペース機能を使用します。

• コードエディター：コードエディターはワークスペースの中心となるビューであり、ActionScriptファイルで作成するコードが表示されています。
• パッケージエクスプローラー：パッケージエクスプローラーは通常はユーザーインターフェイスの左上にあり、Flash Builderプロジェクト内のファイルをわかりやすく示しています。プロジェクトの作業中に、このビューから、ファイルを起動したり、アセットをビジュアルに管理したりできます。
• アウトライン：アウトラインビューには、変数や関数などのActionScriptファイルの様々な要素が表示されます。このパネルでは、ファイルのコンテンツの概要を表示したり、ファイルの特定の部分にスクロールせずに移動したりできます。これは特に、大規模なスクリプトを開発する際に便利です（実際に仕事を始めるとスクリプトはすぐ大規模になります）。
• 問題：問題ビューには、ActionScriptファイル中で見つかったコーディングエラーが表示されます。この機能では、ファイルを保存するたびにプロジェクト内のコードが評価されます。このリアルタイムのエラーチェック機能により、問題をその場で発見できるので、時間を大幅に節約できます。この機能では、エラーの原因であるコード行に直接移動できます。

Flash Builderユーザーインターフェイスの基本について詳しく知るには、Flash BuilderオンラインドキュメントのFlash Builderワークベンチの基礎（「特に「Flash開発パースペクティブ」の節）を参照してください。

統合ワークフロー

新しいワークフロー統合では、Flash Professionalを通常の方法で使用し、Flash Builderは主に2つの用途に使用します。1つはActionScript開発を効率的に進めるためのコードエディターとして、もう1つはリアルタイムのコードデバッグツールとしてです。Flashデベロッパーの観点から見たこのワークフローの利点は、ほとんどの作業を既になじんでいる方法で行いながら、コード開発が必要なときにFlash Builderを使用できることです。Flash Builderの側から見てもこのワークフローはなじみ深いものであり、Control+Enter（Windows）またはCommand+Return（Mac）を押してFlash Professionalのムービープレビューモードを呼び出すこともできます。

サンプルプロジェクト構造の理解

Flash ProfessionalでアクションやActionScriptコードを作成するのに慣れている方は、コード開発にわざわざ別のツールを使用する必要があるのだろうかと思われるかもしれません（筆者自身、何年か前にテキストエディターをFlash Professionalと組み合わせて使用し始めたときに、同じことを考えました）。その答えは、より整理されて読みやすく理解しやすく、プロジェクト間での再使用が容易なコードを、より短時間で作成できるということです。さらに、Flash Builderに移行することで、コーディングショートカットやデバッグの強力なサポートが得られるとともに、コードをFLAファイルから分離できます。

次の節では、FLAファイルとActionScriptファイルを、付属のプロジェクトフォルダーに保存します。FLAファイルのライブラリ構造にはビットマップ画像とシンボルが含まれ、それらをActionScriptから制御することでアニメーションを作成します。

チュートリアルのFlex部分では、次に示すFlash Builder 4ファイルのデフォルトのワークスペースフォルダーに作業結果を保存します。 [ユーザー]/Flash Builder 4/FlexCharacterAnimation/src

アプリケーションプログラミングインターフェイス（API）とは、単にオブジェクトに割り当てられた変数と関数の名前を指します。これらは、オブジェクトを記述するか、オブジェクトに何かをさせる役割を果たします。例えば、ムービークリップシンボルでアニメーションを作成する場合、ムービークリップのActionScript APIを使用して、タイムラインの開始と停止を行います（play()とstop()はMovieClip APIの関数の例です）。また、アニメーションがどのフレームにあるかを知るには、ムービークリップのcurrentFrameプロパティを使用します（currentFrameはMovieClip APIのプロパティの例です）。Flash Professionalで、タイムラインを制御するためにplay()およびstop()アクションを使用したことがある方もおられるでしょう。このチュートリアルでは、単純なキャラクターアニメーションのためのカスタムAPIを作成する方法を示します。これには、特定のグラフィックステートを引き起こすコントロールが含まれます。その過程で、ActionScriptコードの作成のための推奨事項についても説明します。

概要

次に示すのは、シンボルのグラフィックアセットをセットアップし、ActionScriptで制御するための手順です。シンボルでアニメーションを作成する方法をご存じなら、この手順のステップの多くは既におなじみでしょう。このワークフローでの違いは、タイムライン内のフレームを、停止アクションとフレームラベルでセクション化することです。通常のアニメーションのようにタイムライン内を初めから終わりまで再生するのではなく、ActionScriptを使用してタイムラインを制御し、コマンドで特定のフレームに移動します。

開発作業のActionScript側では、アニメーションのフレームラベルとセクションをコード環境から使用可能にします。このためには、フレームラベルに対応するプロパティと、グラフィックステートを表示するシンボルを呼び出すショートカット関数を含む、単純なスクリプトフォーマットを作成します。さらに一歩を進めて、アニメーションキューで定義されたステートのシーケンスに基づいて、再生するアニメーションを呼び出す、もう1つのスクリプトを作成します。結果として、シンボル用のコードコントロールの定義と実装の両方ができます。

この手法の利点は、実行時にActionScriptでアニメーションを動的に制御できることです。これにより、動きをランダムにしたり、アニメーションステートのデータ駆動シーケンスを再生したり、ユーザーの操作に対して視覚的に面白い方法で応答したりといった、様々な可能性が開けます。

プロジェクトのセットアップ

今後の作業をスムーズに進められるように、最初にプロジェクト専用のフォルダーを作成し、その中でプロジェクトを開発することにしましょう。筆者は通常、クライアントまたは組織用のフォルダーを作成し、その中にプロジェクトフォルダーを作成します。

以下の手順で、プロジェクトをセットアップします。

1. この記事のサンプルZIPファイルをダウンロードし、デスクトップ上に展開します。
2. 作成されたフォルダーを開き、その内容を確認します。

project フォルダーは、このチュートリアルの手順において、作業用のルートフォルダーになります。FLAファイルとActionScriptファイルはこのフォルダーに保存します。

project_completed フォルダーには、チュートリアルの完成した動作するサンプルが入っています。その中の flash フォルダーには、チュートリアルの第1部の作業結果が入っており、 flex フォルダーには、同じファイルをFlexプロジェクトのサンプル用に変更したものが入っています。問題が起きたときは、これらのファイルを参照して解読してみてください。

Flash Professional CS5でのアニメーションの作成

次のステップでは、プロジェクトのビジュアルな焦点として用いられるグラフィックステートを作成します。グラフィックステートは、ボタンまたはActionScriptで制御できるアバターキャラクターの表現を表します。このチュートリアルでは、キャラクターを作成するための基本的なステップ、すなわち表現ステート、ロゴまたはラベル、実行時にアニメーションを制御するActionScript APIについて説明します。簡単にするために、シンボルは付属のグラフィックスを使用したフレーム単位のアニメーションとして作成されます。

キャラクターアニメーションには、キャラクターの目がいくつかの状態を取るように見せるグラフィックスが含まれています（図2を参照）。状態とは、デフォルト、またたき、左向き、右向き、上向きです。

以下の手順で、FLAファイルをセットアップします。

1. Flash Professional CS5を開き、File（ファイル）／New（新規）／ActionScript 3.0（ActionScript 3.0）を選択して、新規ActionScript 3.0 FLAファイルを作成します。ファイル名をCharacterAnimation.flaとし、 project フォルダー（ assets フォルダーの隣）に保存します。
2. ライブラリ中に新規ムービークリップシンボルを作成します（Control+F8/Command+F8）。Symbol Properties（シンボルプロパティ）ダイアログボックスで、「Name（名前）」にCharacterと入力し、タイプとして「Movie Clip（ムービークリップ）」を選択します。
3. 「OK」をクリックして、新規シンボルの設定を確定します。

   この時点で、メインタイムラインを離れて、Characterシンボルのタイムラインを表示しています。

   作成したいアニメーションのステートがわかっているので、この機会にCharacterシンボルのタイムラインの構造をセットアップしておきます。1つのムービークリップタイムラインの内部でステートを分割するには、キーフレームとフレームラベルを使用して、タイムラインを視覚的にセクション化します。

4. まず、既存のレイヤーの名前をassetsに設定します。
5. タイムラインのフレーム50をクリックし、F5キーを押してタイムラインを50フレーム延長します。

   このサンプルでは、トウィーンアニメーションの場合と違って、タイムラインはフレームを最初から最後まで再生するわけではありません。その代わりに、グラフィックステートに間隔を開けて、ActionScriptを使用して適切なフレームに移動します。

6. assetsレイヤーの上にレイヤーを追加し、名前をactionsに設定します。タイムラインにアクションを追加する場合、ActionScript専用のアクションレイヤーを作成することをお勧めします。ActionScriptの「コード」をこのレイヤーにまとめることで、ファイルの管理が容易になるからです。
7. アクションレイヤーのフレーム1をクリックし、Window（ウィンドウ）／Actions（アクション）を選択してアクションパネルを開きます。
8. パネルのテキストエディターにstop();と入力します。
9. actionsレイヤーの上にレイヤーを追加し、名前をlabelsに設定します。
10. labelsレイヤーのフレーム1を選択し、プロパティパネルにラベル名としてdefaultを入力します。
11. labelsレイヤーのフレーム10をクリックし、F6キーを押してキーフレームを追加します。
12. 新しいキーフレームを選択し、フレームラベルblinkを追加します。
13. この作業を繰り返して、次のフレームにラベルを追加します。
    • フレーム20：look_left
    • フレーム30：look_right
    • フレーム40：look_up

これで、Characterシンボルにアートワークを追加する準備ができました。このワークフローでは、別のグラフィックプログラムで既にグラフィックスを作成してあり、使用する画像が既に存在することを前提としています。もちろん、アートワークをFlashで作成することもできます。

以下の手順で、アートワークを読み込み、シンボルのレイアウトを完成します。

1. Characterシンボルのタイムラインに戻ります。
2. assetsレイヤーのフレーム1をクリックし、File（ファイル）／Import（読み込み）／Import to Stage（ステージに読み込み）を選択して、最初の画像を読み込みます。
3. 表示されるダイアログボックスで、 project/assets フォルダーにあるCharater_default.jpgファイルを参照し、「OK」をクリックします。フレーム1のキーフレームに画像が表示されることを確認します。
4. フレーム10を選択してF6キーを押し、新しいキーフレームをassetsレイヤーに追加します。
5. 新しいキーフレームにCharacter_blink.jpgファイルを読み込みます。
6. この手順を繰り返して、残りの画像を読み込んで次のフレームに配置します。
   • フレーム20：Character_look_left.jpg
   • フレーム30：Character_look_right.jpg
   • フレーム40：Character_look_up.jpg
7. ライブラリを整理するため、今読み込んだビットマップを保持するフォルダーをライブラリに追加します。ライブラリパネルの左下にあるNew Folder（新規フォルダー）ボタン（フォルダーのアイコン）をクリックし、新規フォルダーの名前をbitmapsに設定します。
8. ビットマップ画像を新規フォルダーにドラッグします。
9. ファイルを保存します。

以下の手順で、ロゴまたはラベルのアートワークを読み込みます。

1. Characterシンボルのタイムラインに戻ります。
2. assetsレイヤーのフレーム1をクリックし、その上に新規レイヤーを追加して、名前をlogoに設定します。
3. 付属のファイルのassetsフォルダーからlogo.jpgファイルを読み込んで、キャラクターの右下など、好きな場所に配置します。このステップで、独自のアートワークを読み込んだり、テキストラベルを追加したりすることもできます。ここで重要なのは、すべての表現ステートを通じて見ることになるキャラクタータイムラインのフレーム1にグラフィックスを追加するということです。
4. ファイルを保存します。

ここまでで、キャラクターアニメーションステートの基本要素がセットアップされました（図3を参照）。ActionScriptを使用して、これらの静的フレームをコードで決定されるタイミングで順次表示することにより、フレーム単位のアニメーションを表示できます。もちろん、トウィーンアニメーションやその他のフレーム単位のアニメーションを組み合わせて、ネストしたアニメーションも作成できます（すなわち、blinkステートに移動したときに、キーフレームがそれ自身アニメーションを含むネストしたムービークリップを保持していてもかまいません）。

アニメーション用のActionScript APIの作成

シンボルのタイムラインのセットアップが終了したら、FLAファイルのビジュアルアセットをプログラムで制御するためのActionScript APIを作成できます。最初のステップでは、シンボルのステートを、知りたい可能性がある他のActionScriptオブジェクトに宣言するActionScriptクラスを作成します。

ActionScriptクラスは、決められた形式で書かれたActionScriptコードを含むテキストファイルです。この形式で用いられるクラスのキーワードと構文は、常に同じ方法で用いられます。ActionScriptクラスを作成したら、メインタイムラインまたはライブラリ内のシンボルのタイムラインに割り当てることができます。

以下の手順で、シンボルのActionScriptクラスを作成します。

1. ライブラリパネル内のCharacterシンボルを右クリックし、「Properties（プロパティ）」を選択します。
2. Symbol Properties（シンボルプロパティ）ダイアログボックスで、拡張オプションが表示されていない場合は、「Advanced（拡張）」の隣の矢印をクリックします。
3. 「Export For ActionScript（ActionScriptに書き出し）」を選択して、シンボルのリンクを有効にします。これにより、シンボルがActionScriptからインスタンス化可能になり、シンボルがSWFといっしょに書き出されるようになります。「Class（クラス）」テキストボックスの値がデフォルトでシンボル名になっていることに注意してください。ここで、新しいFlash/Flash Builder統合機能が登場します。
4. 「Class（クラス）」テキストボックスの隣のEdit Class（クラスを編集）ボタン（鉛筆のアイコン）をクリックします。
5. Flash ProfessionalとFlash Builderのどちらでクラスを編集するか質問されたら（図4を参照）、Flash Builderを選択して「OK」をクリックします。

Flash Builderで編集するオプションを選択すると自動的にFlash Builderの新規プロジェクト作成ダイアログボックスが表示されます（図5を参照）。このステップでは、Flash BuilderプロジェクトをFLAファイルとプロジェクトフォルダーに関連付けます。

6. 「Finish（完了）」ボタンをクリックします。Flash Builderは、プロジェクトをセットアップするために、FLAファイルと同じ名前のActionScriptクラスを自動的に定義し、New ActionScript Class（新規ActionScriptクラス）ダイアログボックスを開きます（図6を参照）。Superclass設定を見ると、Flash BuilderがMovieClipを拡張したActionScriptクラスを生成していることがわかります。スーパークラスとは、別のスクリプトが機能を継承する元になるスクリプトです。この例では、CharacterクラスがMovieClipのサブクラスなので、CharacterはMovieClipであり、MovieClipのすべての関数とプロパティを持ちます。

7. 「Finish（完了）」ボタンをクリックしてクラスを生成します。
8. Flash Builderで、Character.asファイルに適用されたデフォルトのコードを参照してみてください。これらは、ActionScriptクラスの基本的な枠組みとなる要素です。内容の簡単な説明を以下に示します。

• 1行目は、ファイルが存在するパッケージ（フォルダー）を定義しています。この例では、ActionScriptファイルがFLAファイルと同じレベルにあるので、ここに示すサブフォルダーはありません。
• 3行目は、MovieClipクラスを読み込んで、このActionScriptファイルでローカルに参照できるようにしています。
• 5行目は、クラス名を宣言し、クラスがMovieClipオブジェクトを拡張していることを宣言します。これは、このスクリプトがムービークリップオブジェクトであり、MovieClipのすべてのプロパティと関数にアクセスできることを示します。
• 7行目は、コンストラクター関数を宣言します。コンストラクター関数はActionScriptクラスの核心であり、常にクラスと同じ名前を持ちます。コンストラクターが重要なのは、クラスの初期化と同時に呼び出されるからです。クラスの初期化は、クラスの新しいインスタンスが作成されたときに行われます。これは、シンボルがインスタンス化されたときに初期化されるのと似ています。コンストラクター関数の中にコードを置いて、クラスの各インスタンスが作成されたときに実行されるようにすることができます。これは、クラスに関連する変数やデータを初期化するために便利です。

次のステップでは、フレームラベルを定義するプロパティを追加します。このためには、定数静的プロパティと呼ばれるものを追加します。定数とは値が変化しないこと、静的とは、クラス定義に関連付けられ、クラス名から直接参照できることを表します。このステップの目的は、フレームラベルをプログラムから使用可能にして、コードヒントで参照したり、テキストエディターでコーディング中に自動的に正しい名前を入力したりできるようにすることです。

9. Character.asファイルの7行目、コンストラクター関数のすぐ上に、次のコードを追加します。

これでフレームラベルがコード環境から使用可能になったので、コードヒントでラベル名を確認したり、gotoAndStopを使用して任意のフレームに移動したりできます。ただし、移動を扱う新しい関数をAPIに作成しておいたほうが便利です。

10. この例では、次のコードを21行目、コンストラクター関数のすぐ後に追加します。

showState()関数は、呼び出し時に2つのパラメーターを受け取ります。1つめは移動先のフレームラベル、2つめはフレームに対してgotoAndPlay()とgotoAndStop()のどちらを呼び出すかを指定します。最初の条件文によって、ラベルが「pause」であるかどうかが判定され、該当する場合は関数から戻って現在のステートに留まります。この機能は、複雑なマルチフレームアニメーションステートを扱う場合に便利です。

11. 最後に、いくつかの便利なショートカット関数をスクリプトに追加します。次のコードを33行目、showState()関数の後に追加します。

ショートカット関数を呼び出すと、適切な定数静的プロパティをラベルとしてshowState()関数が呼び出されます。showState()関数の定義では、playパラメーターをデフォルトでfalseに設定しています。アニメーションで必要な場合は、2番目のパラメーターを使用して、フレームラベルに移動して再生することができます。ただし、このサンプルではこれは使用しません。グラフィックステートを分離する停止アクションが存在しないからです。

12. ファイルを保存します。

Flash BuilderをFlash Professionalの「Symbol Properties（シンボルプロパティ）」ダイアログから起動したので、作成したActionScriptクラスは既にFLAファイルのライブラリでCharacterシンボルに接続されています。

先に進む前に、プロジェクトフォルダーの中を見て、Flash BuilderがCharacter.asファイルとCharacterAnimation.asファイルをFLAと同じ場所に保存していることを確認します。次の節では、CharacterAnimation.asファイルを使用して、Characterシンボルによるアニメーションを作成します。

ドキュメントクラスを使用したアニメーションの実装

前の節では、Symbol Properties（シンボルプロパティ）ダイアログボックスでCharacter.asクラスをCharacterシンボルに割り当てました。その結果として、そのコードがシンボルのタイムラインのフレーム1に（ActionScriptのクラス構文なしで）書かれている場合と同じ動作が発生します。外部ActionScriptクラスを使用することの利点は、Symbol Properties（シンボルプロパティ）ダイアログボックスのBaseクラス設定を使用して、任意の数のアニメーションシンボルにクラスを割り当てられることです。これは、動作は同じだがグラフィックスが異なるいくつかののキャラクターを作成する場合に非常に便利です。

同様に、ActionScriptクラスをメインタイムラインに割り当てることもできます。このためには、ドキュメントのプロパティでクラス名をドキュメントクラスとして入力します。以下の手順では、Characterシンボルをインスタンス化するドキュメントクラスを作成し、ActionScriptとシンボルのコードAPIを使用して、ループするアニメーションを作成します。

以下の手順でドキュメントクラスを作成します。

1. Flashでメインタイムラインに戻ります。
2. ステージをクリックして、プロパティパネルにドキュメントのプロパティを表示します。
3. ドキュメントクラスとしてCharacterAnimationを入力します（図7を参照）。ここで行うのは、CharacterAnimation.asファイルのクラス名（クラスパス）を指定することです。ActionScriptでファイルを参照する場合、ファイルの拡張子は付けません。

4. 「Class（クラス）」の隣にあるEdit Class Definition（クラス定義を編集）ボタン（鉛筆のアイコン）をクリックして、Flash Builderを起動し、スクリプトを編集します。

   Flash Builderでは、CharacterAnimationクラスが前述と同じスケルトン構造を持っていることが示されます。違いは、このクラスがMovieClipでなくSpriteを拡張していることです（Spriteはフレームが1つだけのMovieClipです）。

   CharacterAnimation.asでは、Timerオブジェクトを使用してアニメーションを動かします。

5. 最初にTimerクラスとTimerEventクラスを読み込み、次のコードをファイルの4行目と5行目に追加します。

タイマーを使用して、イベントハンドラー関数を一定間隔で呼び出します。Characterシンボルのステートのアニメーションキューを作成し、タイマーが関数を呼び出すたびにキュー内のステートを順番に再生します。そこで、次のステップでは、アニメーションシーケンスの生成中に使用する変数をスクリプトに追加します。

6. 次のコードをファイルの9行目に追加します。

targetプロパティは、Characterシンボルのインスタンスを保持します。statesプロパティは、アニメーションキューとしてシーケンス再生するフレームステートのリストを保持します。stateプロパティは、現在再生中のステートへの参照を保持します。timerおよびtimerDelayプロパティは、タイマーとキュー内のステートの再生間隔を定義します。

次に、コンストラクター関数のコードを追加します。この関数は、メインタイムラインがロードされてアニメーションが開始されるとすぐに実行されます。

7. Characterシンボルのインスタンスを作成するため、ファイルの20行目、コンストラクター関数の内部に、次のコードを追加します。

Characterシンボルの「Export For ActionScript（ActionScriptに書き出し）」オプションをオンにしてあるので、シンボルはムービー内のActionScriptから使用できます。target = new Character();という行は、newキーワードを使用してActionScriptでシンボルをインスタンス化します。これは、ライブラリパネルからステージにインスタンスをドラッグするのと同じです。Characterシンボルはムービークリップなので、追加したカスタムAPIに加えて、xおよびyプロパティやその他のムービークリップのプロパティを使用できます。

8. 配列を使用してアニメーションキューを作成するため、次のコードを26行目、先ほど追加したコードのすぐ下に追加します。

配列のインデックスの番号付けパターンに注意してください。同じパターンを使用して、ステートを追加したり削除したりできます。この単純な例では、ループ前にフレームラベルを1回しか使用しませんが、シーケンス内のステートの任意の組み合わせと、任意の長さのアニメーションキューを作成できます。配列のインデックスが0から始まって増加するとともに、キュー内のステートが再生したい順序で並ぶようにします。

9. コンストラクター関数のコードの最後で、タイマーを初期化し、アニメーションを開始します。次のコードを34行目、上述のコードのすぐ下に追加します。

最後に、アニメーションキューに基づいてキャラクターのステートを進める必要があります。これは、コンストラクターで設定したタイマーのイベントハンドラーで行われます。

10. 次のコードを43行目、コンストラクター関数の閉じ括弧の後に追加します。

11. ファイルを保存します。

FlashシンボルとActionScriptクラスを使用して、シンプルでかつスケーラブルなアニメーション構造を作成できました。

作業結果のテスト

次に、作業の結果をテストしてみましょう。新しいFlash Builder統合の大きな特長の1つは、Flash ProfessionalをFlash Builderから起動して、「Test Movie（ムービーをプレビュー）」コマンドを実行したり、デバッガーを起動したり、Flashプロジェクトを展開のためにパブリッシュしたりできることです。

作業結果をプレビューする準備ができたら、Flash BuilderでControl+Enter（Windows）またはCommand+Return（Mac）を押して、Flash Professionalに戻り、「Test Movie（ムービーをプレビュー）」コマンドを起動します。

Flashで「Test Movie（ムービーをプレビュー）」コマンドが通常通りに動作し、SWFプレビューをパブリッシュします。作成した単純なループアニメーションを確認したら、SWFを閉じると、Flash Builderワークスペースに戻ります。

問題が発生した場合、Flash BuilderワークスペースからActionScript 3デバッガーを起動して、原因を調べることができます。この時点でファイルが正常に動作している場合には、デバッグ作業を経験するために、バグを1つ導入してみましょう。このためには、オブジェクトを宣言して値をインスタンス化せずに、オブジェクトインスタンスのプロパティまたはメソッドを呼び出します。

以下の手順で、Flash Builderからデバッグのワークフローを実行します。

1. Flash Builderで、CharacterAnimation.asコンストラクター関数の開き括弧の後（20行目）に、次の2行のコードを追加します。

これらの行は、Flash Builderの作成時のエラーチェックにはかかりませんが、Flash Playerではランタイムエラーを引き起こします。

2. Flashで「Test Movie（ムービーをプレビュー）」コマンドを起動すると、Flashの出力パネルに次のランタイムエラーが表示されます。

3. Flash Builderに戻り、疑わしい場所にブレークポイントを追加します。26行目の行番号の左を右クリックし、「Toggle Breakpoint（ブレークポイントの切り替え）」を選択して、この行にブレークポイントを設定します。

   ブレークポイントがあると、SWFの実行がそこで中断し、すべての変数をデバッガーで調べることができます。これは特に、null値から生じるエラーや、その他の方法では明確にわからないエラーに対して有効です。

4. 画面上部のFlash Builderツールバーで、Debug Movie In Flash Professional（Flash Professionalでムービーをデバッグ）ボタン（虫とFlashのアイコン）をクリックします。

   Flashが起動し、ムービーが再生され、ただちに設定したブレークポイントで停止します。デバッガーでCharacterAnimation.asファイルが開き、ブレークポイントがある行と、スクリプトがエラーを通知した場所（該当する場合）が示されます。この情報に基づいて、Flash ProfessionalまたはFlash Builderでコードを編集して、問題を修正できます。ここで重要なのは、コードの行にブレークポイントを設定し、デバッグモードでSWF実行をその行で停止する機能です。デバッガーが実行を中断したら、SWFの実行中の変数の状態を参照して、null値やその他の問題を発見することができます。

5. Flash Builderに戻って、2行のコードを削除します。
6. ムービーをもう一度テストして、正常に動作することを確認します。
7. ファイルを保存します。

   すべてが正常で、ファイルをWebに送る準備ができたら、Flash BuilderまたはFlash Professionalから、SWFとHTMLページをパブリッシュできます。

8. Flash Builderからプロジェクトをパブリッシュするには、画面上部のツールバーにあるPublish In Flash Professional（Flash Professional でパブリッシュ）ボタンをクリックします。

ビューがFlash Professionalに切り替わり、HTMLファイルとSWFがプロジェクトフォルダーにパブリッシュされます。プロジェクトフォルダーを調べて、プロジェクトから生成されたファイルを確認します。

注意：Flash BuilderでPublish In Flash Professional（Flash Professional でパブリッシュ）ボタンをクリックしても何も起こらない場合は、ファイルにエラーがないことと、Flash Builderでプロジェクトが正しく選択されていることを確認してください。

作業はこれだけです。Flash Builder統合ワークフローのチュートリアルの第1部がこれで終了しました。

RIA開発におけるFlexフレームワークの普及とともに、Flash Professionalの作業結果をFlash Builderプロジェクトで使用できるように準備することが必要な場合も増えてきました。これは特に、FlexよりもFlash Professionalで作成した方が簡単なアニメーションやコンテンツに関して言えることです。

この節では、アニメーションをFlexで使用できるコンポーネントに変換する方法と、Flexでコンポーネントを実装するための最初の段階について説明します。

Flash Professionalでの作業結果の準備

最初に必要なのは、FlashコンテンツをFlexフレームワークで使用できるように準備することです。これは、Flash Professional CS5の「Convert Symbol To Flex Component（シンボルをFlexコンポーネントに変換）」コマンドで簡単に実行できます。

以下の手順では、CharacterシンボルをFlexフレームワークで使用できるコンポーネントに変換します。

以下の手順で、コンテンツを準備します。

1. Flash Professionalで、ドキュメントクラス定義を削除します。このためには、プロパティパネルのドキュメントのプロパティからクラス名を削除します（ドキュメントのプロパティが表示されていない場合は、ステージ上の空白領域をクリックします）。

   これで、CharacterシンボルをFlexコンポーネントに変換する準備ができました。FlexComponentBase SWCをFLAファイルに追加し、「Publish Settings（パブリッシュ設定）」の「Flash」タブの下の「Export SWC（SWC書き出し）」オプションをオンにします。FlexComponentBase SWCは、Flexフレームワーク固有のActionScriptをファイルに追加し、ムービークリップをFlexで使用できるようにします。

2. ライブラリでCharacterシンボルを選択し、Commands（コマンド）／Convert Symbol To Flex Component（シンボルをFlexコンポーネントに変換）を選択すると、FlexComponentBase SWCがライブラリに追加されます。

   注意：シンボルにカスタムクラスが割り当てられていない場合、これで完了です。ここではカスタムクラスがあるので、コンポーネントクラスが標準のflash.display.MovieClipでなくmx.flash.UIMovieClipを拡張するようにFlash Builderで更新する必要があります。コマンドもこれを行おうとしたのですが、Flash Builderで既に基本クラスが定義されている場合は、基本クラスを割り当てることができません。対策として、スクリプトに簡単な変更を加えます。

3. Flash Builderに戻って、Characterクラスのimportステートメントを次のように変更します。

4. extendsキーワードの後のクラス名を、MovieClipからUIMovieClipに変更します。

このクラスへの変更と、FLAファイルのライブラリへのFlex SWCの追加が、Flexフレームワーク用にファイルを準備するために必要なすべてです。Flashに戻って、セットアッププロセスを完了します。

5. Characterシンボルを右クリックし、「Properties（プロパティ）」を選択します。基本クラス設定が空であることを確認し、「OK」をクリックします。

   シンボルのアイコンがFlexアイコンに変わります（図8を参照）。

最後に必要なのは、SWCファイルをFlexで処理するために書き出すことです。SWCファイルは基本的に、.swcという拡張子を持つZIPファイルです。これには、SWFファイルと、SWFのコンテンツを記述するメタデータが含まれます。SWCは、SWFコンテンツをコンポーネント形式で配布するための標準のファイル形式です。FLAファイルは、Convert Symbol To Flex component（シンボルをFlexコンポーネントに変換）コマンドを実行したときに、既にこのために設定されています。

6. File（ファイル）／Publish（パブリッシュ）を選択して、SWCを書き出します。

CharacterAnimation.swcというファイルがプロジェクトフォルダーに作成されます（このSWCファイルは、サンプルの project_completed/flex/libs フォルダーにもあります）。

注意：Flashシンボルのグラフィックスは、タイムラインの左上の座標0、0に合わせておくことが重要です。そうでないと、Flexフレームワークで信頼性のある位置制御ができません。

Flash BuilderでのFlexプロジェクトの作成

Flexプロジェクトの定義と作成は、すべてFlash Builder内で行います。Flash Professionalで作成したコンテンツを組み込むには、前述の手順で作成したSWCを、Flexプロジェクトのライブラリフォルダーに追加します。

以下の手順で、Flexプロジェクトを作成し、SWCファイルを追加します。

1. Flash Builderに戻り、File（ファイル）／New（新規）／Flex Project（Flexプロジェクト）を選択します。
2. プロジェクト名としてFlexCharacterAnimationを入力し、「Finish（終了）」ボタンをクリックしてプロジェクトを作成します。

   プロジェクトがパッケージエクスプローラーに表示され、FlexCharacterAnimation.mxmlというファイルが自動的に生成されてエディターで開かれます。MXMLファイルはXMLのファイルであり、MXMLマークアップと、<fx:Script>タグに囲まれたActionScriptの両方を含むことができます。このファイルを使用して、FlashコンポーネントをFlexでテストするための簡単なユーザーインターフェイスをセットアップします。ファイルを編集用に開いておきます。

   注意：Flexは、MXMLファイルとその他のソースファイルを、Flexプロジェクトフォルダーの下の src フォルダーに保存します。

3. Flash Professionalで作成したコンテンツをプロジェクトに追加するために、CharacterAnimation.swcファイルをFlexプロジェクトの libs フォルダーにドラッグします。SWCファイルは、Flash Builderのパッケージエクスプローラーで移動することも、コンピューターのフォルダーシステムで手動で移動することもできます。ファイルがパッケージエクスプローラーに表示されます（図9を参照）。

Flashアニメーションを操作するための単純なユーザーインターフェイスの作成

Flash Professionalで作成したコンテンツをFlexフレームワークで確認するため、MXMLを使用してコンポーネントを宣言し、アニメーションのステートを起動するボタンをいくつか追加します。結果として、キャラクターの2つのバージョンが画面に表示されます。1つはCharacterAnimationインスタンス自身によるアニメーション、もう1つはCharacterインスタンスのステートがFlexボタンによって制御されるものです。

以下の手順では、単純なユーザーインターフェイスを作成します。MXMLをまだ使ったことがない場合は、この機会に、Flash Professionalプロジェクトの成果をFlex環境に組み込む方法をぜひ覚えていただきたいと思います。

以下の手順で、サンプルユーザーインターフェイスをFlexで作成します。

1. Flash BuilderのFlexCharacterAnimation.mxmlファイルに戻ります。

   <s:Application>タグに注目してください。これはアプリケーションのラッパーです。Applicationタグには、いくつかのxmlns属性があります。これらは、ファイル中で参照されるコンテンツの名前空間（クラスパス）を定義します。最初に、ローカルコンテンツを識別する新しい名前空間を libs フォルダーに追加します。

2. 次のようにApplicationタグをxmlns:local="*"属性で更新します。

これにより、SWCファイル中のシンボルを、MXMLを使用して libs フォルダーで参照できるようになります。

3. Application開始タグと終了タグの間に次のコードを追加します。

上述のコードで、Characterシンボルを<local:Characterで参照できることに注意してください。また、4つのボタンからMXMLマークアップを通じてCharacterシンボルのAPIを呼び出せることにも注意してください。ここに示すXML構文は、Flexフレームワークでの開発で一般的に用いられるものであり、ActionScriptコードと組み合わせることができます。

Flex 4でのMXMLおよびActionScriptの作成の詳細については、FlexオンラインドキュメントのAbout MXMLを参照してください。

作業結果のテスト

Flexでは、Flashと違って、「Test Movie（ムービーをプレビュー）」コマンドを使用することはできません。プロジェクトをテストするには、SWFをブラウザーで起動します。

以下の手順で、Flexプロジェクトをコンパイルしてプレビューします。

1. Flash Builderワークスペースの上部にあるツールバーのRun Project（プロジェクトを実行）（Run FlexCharacterAnimation（FlexCharacterAnimationを実行））ボタンをクリックして、ブラウザーウィンドウでプロジェクトを起動します（あるいは、Run（実行）／Run FlexCharacterAnimation（FlexCharacterAnimationを実行）を選択することもできます）。キャラクターが現れ、アートワークの下に一連のボタンが表示されます（図10を参照）。ボタンをクリックして表現ステートを呼び出します。

注意：エラーのためにプロジェクトを実行できない場合は、問題ビューにエラーが表示されます。

プロジェクトをビルドすると、パブリッシュされたファイルは bin-debug フォルダーの下に置かれます。

2. アプリケーションが予期したとおりに動作しない場合、Run Project（プロジェクトを実行）ボタンの隣にあるDebug Project（プロジェクトをデバッグ）ボタン（虫のアイコン）をクリックして、Flash Builderのデバッグワークスペースを起動します。

   注意：Flash Builderのデバッグワークスペースを使用するには、Flash Playerのデバッグバージョンがインストールされている必要があります。Flash ProfessionalおよびFlash Builderでのデバッガーの使用の詳細については、筆者の記事FlashでのActionScript 3デバッグの理解を参照してください。

3. プロジェクトを完了してサーバーに送る準備ができたら、「Export Release Build（リリースビルドの書き出し）」ボタンをクリックします（または、Project（プロジェクト）／Export Release Build（リリースビルドの書き出し）を選択します）。この例では、パブリッシュしたファイルは bin-release フォルダーの下に置かれます。

Flash BuilderでのFlexアプリケーションのデバッグとプロファイリングの詳細については、Flash Builderオンラインドキュメントのアプリケーションのデバッグを参照してください。

次のステップ

このチュートリアルではFlash Builder/Flash Professional/Flexフレームワークのワークフローの概要を紹介しましたが、アニメーションのコンテンツはあえてシンプルなものにしました。さらに練習を進めるには、フレーム単位のアニメーション、トウィーンアニメーション、その他の現実的なアニメーションキューシーケンスを使用して、アニメーションシンボルを拡張してみるとよいでしょう。ここで示したコード構造を使用する場合は、Characterシンボルの各ビットマップグラフィックを選択して、ビットマップをそれぞれ独自のネストしたシンボルに変換するのが最善でしょう。そこから、この記事で紹介したアニメーションステートの概念をよりよく定義するネストしたアニメーションの作成を試してみてください。

付属のファイルの project_extras フォルダーの下には、各キャラクター表現にフレーム単位のアニメーションを使用する、さらに高度なチュートリアルが収録されています。追加のサンプルには、ネストしたアニメーション、戻りアニメーション、ActionScriptコードのバリエーションなどが示されています。

Flexフレームワークでの作業と、Flash ProfessionalおよびFlash Builderでのワークフローの統合を試してみることで、Flash Platform統合に関する知識を拡大することができます。ぜひチャレンジしてください。

謝辞

サンプルファイル用のすてきなアートワークとアニメーションフレームを提供してくれたSam Hoodに感謝します。SamのFlashキャラクターアニメーションのその他のサンプルは、hoodness.comにあります。