Adobe Animate CC(旧 Flash Professional CC)および Flex® は、Flex® で使用する Animate のカスタムグラフィックおよびコンポーネントの作成を含めて、様々な方法で共用できます。次のチュートリアルは、Animate® および Flex® を共用するための複数の方法を示しています。

注意:Animate と Flash Builder の間のデザインビューワークフローは非推奨になりました。Flash Builder 4.6 からこのワークフローを開始すると、Animate で例外が発生します。

Flash Builder のワークフローの一部は、最新バージョンの Animate CC(2017 以降)と相互運用できない可能性があります。 

Animate と Flash Builder による ActionScript の編集およびデバッグ

始める前に

Animate と Flash Builder のワークフローを有効にするために、次に示す条件が実施されているかどうかを確認してください。

  • Flash CS5 と Flash Builder 4 の両方がインストールされている必要があります。

  • Flash Builder から FLA ファイルを起動するには、Package Explorer パネルで、プロジェクトに Animate プロジェクトの特性が割り当てられている必要があります。

    Flash Builder でプロジェクトの特性を割り当てる方法について詳しくは、Flash Builder のヘルプを参照してください。

  • Flash Builder から FLA ファイルを起動するには、プロジェクトの Animate CC プロパティに基づいてテストやデバッグを行うために、プロジェクトに FLA ファイルが割り当てられている必要があります。

Animate からの Flash Builder によるテスト、デバッグおよびパブリッシュ

Flash Builder 4 で編集しているファイルを使用して Animate でテストとデバッグを実行するには:

  • Flash Builder 開発パースペクティブから、実行/ムービープレビューまたは実行/ムービーをデバッグを選択します。各メニューアイテムの横には Animate のアイコンが示されています。SWF ウィンドウまたはデバッグセッションが閉じると、プロジェクトに関連付けられている FLA ファイル内のフレームスクリプトにコンパイルエラーがなければ、フォーカスが Flash Builder に戻ります。すべてのエラーに関する情報は、Flash Builder のエラーパネルに送られます。

Flash Builder で現在のプロジェクトに関連付けられている FLA ファイルをパブリッシュするには:

  • Flash Builder 開発パースペクティブから、プロジェクト/ムービーをパブリッシュを選択します。メニューコマンドの横には Animate のアイコンが示されています。

Animate からの Flash Builder による ActionScript(AS)ファイルの編集 

新しい ActionScript 3.0 クラスまたはインターフェイスを作成し、Flash Builder をエディターとして割り当てるには:

  1. ファイル/新規を選択します。

    新しいドキュメント
    新しいドキュメント
  2. 「Character Animation」、「Social」、「Game」、「Education」、「Ads」、「Web」、「Advanced」など、起動画面の上部にあるタブからインテントを選択します。新規ドキュメントダイアログボックスで、ActionScript 3.0 クラスまたは ActionScript 3.0 インターフェイスを選択します。

  3. ActionScript 3.0 のクラスまたはインターフェイスを作成するダイアログボックスで、Flash Builder を、ファイルを作成するアプリケーションとして選択し、「OK」をクリックします。Flash Builder が開きます。

  4. Flash Builder で、ActionScript ファイルに関連付ける FLA ファイルまたは XFL ファイルを選択し、「終了」をクリックします。

Animate から Flash Builder で AS ファイルを開き、編集するには:

  1. ライブラリパネルで、クラスまたはインターフェイスに関連付けられているシンボルを右クリックし、「プロパティ」を選択します。

  2. シンボルプロパティダイアログボックスで、「クラス定義を編集」をクリックします。

  3. ActionScript 3.0 のクラスまたはインターフェイスを編集するダイアログボックスで、AS ファイルに割り当てられエディターが Flash Builder であることを確認し、「OK」をクリックします。

    ファイル編集用のアプリケーションとして Flash Builder が割り当てられていない場合は、Flash Builder を、クラスファイル編集用のアプリケーションとして選択し、「OK」をクリックします。

    Flash Builder が開き、ファイルを編集できるようになります。

Flex のコンポーネントの作成

Adobe Animate では、Adobe® Flex® アプリケーションのコンポーネントとして使用するコンテンツを作成できます。このコンテンツには、ビジュアルエレメントと Adobe® ActionScript® 3.0 コードの両方を含めることができます。

Flex で使用するコンポーネントを Animate で作成することにより、Animate の柔軟性の高いグラフィックデザイン機能と Flex の機能の両方を利用できます。

Animate で Flex コンポーネントを作成するには、Flex Component Kit for Animate がインストールされている必要があります。コンポーネントキットのインストールには Adobe Extension Manager を使用します。バージョンによってはサポートされない Adobe Animate の機能があるので、www.adobe.com/go/flex_ck_jp からコンポーネントキットの最新バージョンをダウンロードしてください。

Flex と Animate の使用について詳しくは、Adobe Web サイト(www.adobe.com/go/learn_flexresources)に掲載されている Flex のマニュアルを参照してください。

Animate で Flex コンポーネントを作成するには:

  1. Adobe Extension Manager がインストールされていることを確認します。Extension Manager をダウンロードするには、Extension Manager のダウンロードページ(www.adobe.com/go/extension_manager_dl_jp)にアクセスしてください。

    デフォルトでは、Extension Manager は Adobe Creative Suite アプリケーションと共にインストールされます。

  2. Flex Component Kit を www.adobe.com/go/flex_ck_jp からダウンロードし、インストールします。コンポーネントキットをインストールする前に Animate を終了してください。Adobe Extension Manager でエクステンションをインストールする操作について詳しくは、www.adobe.com/go/learn_extension_manager_jp を参照してください。

  3. Animate を起動します。コマンドメニューに 2 つの新しいコマンド、「シンボルを Flex コンポーネントに変換」と「シンボルを Flex コンテナに変換」が表示されます。

  4. Animate で、Flex コンポーネントで使用するアートワークおよび ActionScript 3.0 コードを含むムービークリップシンボルを作成します。コンテンツを Flex コンポーネントに変換する前に、ムービークリップシンボルに含める必要があります。

  5. ムービークリップを Flex コンポーネントに変換する前に、以下の要件が満たされ、Flex との互換性がとれていることを確認します。

    • FLA ファイルのフレームレートは 24 fps に設定され、対象コンポーネントを使用するすべての Flex プロジェクトのフレームレートと一致している必要があります。

    • ムービークリップの基準点は 0, 0 に位置する必要があります。

      注意:ムービークリップのすべてのコンテンツの基準点を 0, 0 に設定するには、タイムライン下部の「複数フレームを編集」ボタンをクリックし、ムービークリップタイムラインのすべてのフレームを選択し、すべてのフレーム内のすべてのコンテンツを選択して、プロパティインスペクターで 0, 0 に移動します。

  6. ライブラリパネルでムービークリップを選択し、コマンド/シンボルを Flex コンポーネントに変換を選択します。

    Animate はムービークリップを Flex コンポーネントに変換し、ライブラリ内のアイコンを Flex アイコンに変更して、FlexComponentBase クラスでコンパイルされたクリップをライブラリに読み込みます。Animate では、FlexComponentBase は次の手順で作成する Flex コンポーネントの SCW ファイルに埋め込まれます。

    Animate でのムービークリップの変換中に、進行状況メッセージが出力パネルに表示されます。

  7. ファイル/パブリッシュを選択して、コンパイル済み Flex コンポーネントを含む SWC ファイルを作成します。Animate では、メイン FLA ファイルから SWF ファイルも作成されますが、この SWF ファイルは無視してもかまいません。これで、パブリッシュされたコンポーネント SWC ファイルを Flex で使用する準備は完了しました。

  8. SWC ファイルを Flex で使用するには、次のいずれかの操作をおこないます。

    • SWC ファイルを Animate からコピーし、Flex プロジェクトの bin フォルダーに貼り付けます。

    • Flex プロジェクトのライブラリパスに SWC ファイルを追加します。詳しくは、Flex Builder ドキュメント(www.adobe.com/go/learn_flexresources)を参照してください。

Flex メタデータの使用

Flex で使用する ActionScript 3.0 コードを作成する場合、コード内にメタデータを追加して、ActionScript コードを含むパブリッシュ済みの SWF に外部ファイルを埋め込むことができます。通常、これらの [Embed] メタデータ宣言はイメージファイル、フォント、個々のシンボル、または SWF ファイルを SWF に埋め込む場合に使用します。

メタデータとは、「データに関する情報を示すデータ」です。メタデータを、ActionScript のメタデータを適用するコード行の直前の行に追加します。これで、後続のコード行のコンパイル時にメタデータが認識されます。

例えば、ActionScript ファイルの 1 つ上のレベルのディレクトリに保存されている button_up.png という名前のイメージを埋め込むには、次の ActionScript を使用します。

[Embed(“../button_up.png”)]

private var buttonUpImage:Class;

[Embed] メタデータタグは、コンパイラーに対し、SWF ファイルに button_up.png ファイルを埋め込み、変数 buttonUpImage に関連付けるように指示します。

Flex のメタデータを使用したアセットの埋め込みについて詳しくは、『Flex 3 開発ガイド』(www.adobe.com/go/learn_flexresources)の「アセットの埋め込み」を参照してください。

[Embed] メタデータなど、Flex SDK を必要とする機能を使用する場合、コンパイル時に Animate から FLA ファイルのライブラリパスに Flex.SWC ファイルを追加するよう要求されます。Flex.SWC ファイルには、Flex メタデータのサポートに必要なコンパイル済みクラスが含まれています。ダイアログボックスで「ライブラリパスの更新」をクリックして、Flex.SWC をライブラリパスに追加します。後から ActionScript パブリッシュ設定でライブラリパスに Flex.SWC ファイルを追加することもできます。

その他のリソース

次のリソースには、Animate と Flash Builder の統合に関する情報および例が掲載されています。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー