マニュアル キャンセル

Animate によるグラフィックとビデオの書き出し

  1. Adobe Animate ユーザーガイド
  2. Animate の概要
    1. Animate の新機能
    2. ビジュアル用語集
    3. Animate の必要システム構成
    4. Animate キーボードショートカット
    5. Animate での複数のファイルタイプの取り扱い
  3. アニメーション
    1. Animate のアニメーションの基本
    2. Animate でフレームとキーフレームを使用する方法
    3. Animate でのフレームアニメーション
    4. Animate でのクラシックトゥイーンアニメーションの操作
    5. ブラシツール
    6. モーションガイド
    7. モーショントゥイーンと ActionScript 3.0
    8. モーショントゥイーンアニメーションについて
    9. モーショントゥイーンアニメーション
    10. モーショントゥイーンアニメーションの作成
    11. プロパティキーフレームの使用
    12. トゥイーンを使用した位置のアニメーション化
    13. モーションエディターを使用したモーショントゥイーンの編集
    14. トゥイーンアニメーションのモーションパスの編集
    15. モーショントゥイーンの操作
    16. カスタムイージングの追加
    17. モーションプリセットの作成と適用
    18. アニメーションのトゥイーンスパンの設定
    19. XML ファイルとして保存したモーショントゥイーンの操作
    20. モーショントゥイーンとクラシックトゥイーン
    21. シェイプトゥイーン
    22. Animate のボーンツールアニメーションの使用
    23. Animate でのキャラクターリグの操作
    24. Adobe Animate でのマスクレイヤーの使用
    25. Animate でのシーンの操作
  4. インタラクティブ機能
    1. Animate でのボタンの作成
    2. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. Animate のコードスニペットを使用したインタラクティブ機能の追加
    5. カスタム HTML5 コンポーネントの作成
    6. HTML5 Canvas でのコンポーネントの使用
    7. カスタムコンポーネントの作成例
    8. カスタムコンポーネントのコードスニペット
    9. ベストプラクティス - Animate を使用した広告
    10. バーチャルリアリティの作成と公開
  5. ワークスペースとワークフロー
    1. ペイントブラシの作成と管理
    2. HTML5 Canvas ドキュメントでの Google フォントの使用
    3. Creative Cloud ライブラリと Adobe Animate の使用
    4. Animate のステージとツールパネルの使用
    5. Animate ワークフローとワークスペース
    6. HTML5 Canvas ドキュメントでの Web フォントの使用
    7. タイムラインと ActionScript
    8. 複数のタイムラインの操作
    9. 環境設定
    10. Animate オーサリングパネルの使用
    11. Animate でのタイムラインレイヤーの作成
    12. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    13. オブジェクトの移動とコピー
    14. テンプレート
    15. Animate での検索と置換
    16. 取り消し、やり直し、ヒストリーパネル
    17. キーボードショートカット
    18. Animate でのタイムラインの使用
    19. HTML 拡張機能の作成
    20. 画像とアニメーション GIF の最適化オプション
    21. 画像および GIF の書き出し設定
    22. Animate のアセットパネル
  6. マルチメディアとビデオ
    1. Animate のグラフィックオブイジェクトの変形と組み合わせ
    2. Animate でのシンボルインスタンスの作成と操作
    3. 画像トレース
    4. Adobe Animate でのサウンドの使用方法
    5. SVG ファイルの書き出し
    6. Animate で使用するビデオファイルの作成
    7. Animate にビデオを追加する方法
    8. ビデオのキューポイントの操作
    9. Animate でのオブジェクトの描画および作成
    10. 線とシェイプの変更
    11. Animate CC での線、塗り、グラデーション
    12. Adobe Premiere Pro と After Effects の使用
    13. Animate CC のカラーパネル
    14. Animate で Flash CS6 ファイルを開く
    15. Animate でのクラシックテキストの操作
    16. Animate へのアートワークの挿入
    17. Animate に読み込まれたビットマップ
    18. 3D グラフィック
    19. Animate でのシンボルの操作
    20. Adobe Animate での線とシェイプの描画
    21. Animate でのライブラリの使用
    22. サウンドの書き出し
    23. Animate CC でのオブジェクトの選択
    24. Animate での Illustrator AI ファイルの操作
    25. スプレーブラシツールでのパターンの適用
    26. ブレンドモードの適用
    27. オブジェクトの配置
    28. コマンドメニューを使用したタスクの自動化
    29. 多言語テキスト
    30. Animate でのカメラの使用
    31. Adobe Scout での Animate の使用
    32. Fireworks ファイルの作業
    33. グラフィックフィルター
    34. サウンドと ActionScript
    35. 描画の環境設定
    36. ペンツールを使用した描画
  7. プラットフォーム
    1. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    2. カスタムプラットフォームサポート
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. WebGL ドキュメントの作成とパブリッシュ
    5. AIR for iOS 用アプリケーションのパッケージ化
    6. AIR for Android アプリケーションのパブリッシュ
    7. デスクトップ用 Adobe AIR のパブリッシュ
    8. ActionScript パブリッシュ設定
    9. ベストプラクティス - アプリケーションでの ActionScript の整理
    10. Animate での ActionScript の使用
    11. ベストプラクティス - アクセシビリティガイドライン
    12. Animate ワークスペースのアクセシビリティ
    13. スクリプトの記述と管理
    14. カスタムプラットフォームサポートの有効化
    15. カスタムプラットフォームサポートの概要
    16. アクセシビリティコンテンツの作成
    17. カスタムプラットフォームサポートプラグインの操作
    18. ActionScript 3.0 のデバッグ
    19. カスタムプラットフォームサポートの有効化
  8. 書き出しとパブリッシュ
    1. Animate CC からファイルを書き出す方法
    2. OAM パブリッシング
    3. SVG ファイルの書き出し
    4. Animate によるグラフィックとビデオの書き出し
    5. AS3 ドキュメントのパブリッシュ
    6. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    7. サウンドの書き出し
    8. QuickTime ビデオファイルの書き出し
    9. ActionScript を使用した外部ビデオ再生の制御
    10. ベストプラクティス - モバイルデバイス向けのコンテンツ作成のヒント
    11. ベストプラクティス - ビデオ規則
    12. ベストプラクティス - SWF アプリケーションのオーサリングガイドライン
    13. ベストプラクティス - FLA ファイルの構造化
    14. FLA ファイルを Animate 向けに最適化するベストプラクティス
    15. ActionScript パブリッシュ設定
    16. Animate のパブリッシュ設定の指定
    17. プロジェクターファイルの書き出し
    18. 画像とアニメーション GIF の書き出し
    19. HTML パブリッシュ用テンプレート
    20. Adobe Premiere Pro と After Effects の使用
    21. アニメーションのクイック共有とパブリッシュ

アプリの環境設定の書き出し

エキスパート環境設定と初級環境設定を切り替えることができます。  また、ツールバー設定、キーボードショートカットおよびその他のアプリケーション設定を含む独自のアプリ設定を単一のファイルとして書き出すこともできます。  ファイルの書き出しおよび読み込みと同じくらい簡単に、デバイスをまたいでアプリの環境設定を適用できます。

アプリの環境設定の書き出し

環境設定を書き出し
環境設定を書き出し – すべての設定や選択した保存済み設定を書き出して別のマシンや他のユーザーと共有

イメージおよびグラフィックの書き出し

PNG シーケンス

ライブラリ内またはステージ上の個々のムービークリップ、ボタンまたはグラフィックシンボルから、一連のイメージファイルを書き出すことができます。書き出し中に、Animate(旧 Flash Professional)によって、シンボル内の各フレームに個別のイメージファイルが作成されます。ステージから書き出す場合、シンボルインスタンスに適用したすべての変換(拡大/縮小など)は、書き出されるイメージで保持されます。

PNG シーケンスを書き出すには:

  1. ライブラリ内またはステージ上で、ムービークリップ、ボタンまたはグラフィックシンボルを 1 つ選択します。

  2. 選択したアイテムを右クリックし、「PNG シーケンスを書き出し」を選択します。

  3. 名前を付けて保存ダイアログボックスで、書き出したファイルの保存先を選択し、「OK」をクリックします。

     

  4. PNG シーケンスを書き出しダイアログボックスで、必要なオプションを設定します。

    - 書き出されるイメージの幅を指定します。この値を変更すると、書き出し後のイメージサイズを拡大縮小できます。デフォルトの値はシンボルコンテンツの幅です。

    高さ - 書き出されるイメージの高さを指定します。この値を変更すると、書き出し後のイメージサイズを拡大縮小できます。デフォルトの値はシンボルコンテンツの高さです。

    解像度 - 書き出されるイメージの解像度を指定します。デフォルトの値は 72 dpi です。

    カラー - 書き出されるイメージのビット数を指定します。8 bit、24 bit、32 bit のいずれかを指定できます。デフォルトの値は 32 bit で、透明度がサポートされます。24 bit または 8 bit を選択した場合、透明度がサポートされないので、背景の設定は「ステージ」に変更されます。オプションについては後述します。

    背景 - 書き出されるイメージの背景色として使用される色を指定します。「カラー」オプションが 8 bit または 24 bit に設定されている場合にのみ、指定できます。「カラー」オプションが 32 bit に設定されている場合には、イメージの背景は常に透明になります。「カラー」オプションが 8 bit または 24 bit に設定されている場合は、「背景」オプションはデフォルトで「ステージ」のカラーになります。8 bit または 24 bit イメージでは、この設定を「不透明」に変更してから、背景色をカラーピッカーで選択できます。また、背景にアルファ値を指定して透明にすることもできます。

    スムージング - 書き出されるイメージのエッジにスムージングを適用するかどうかを切り替えます。現在使用している背景が透明ではなく、書き出したイメージの配置先となる背景のカラーがステージ上の現在のカラーと異なる場合は、このオプションをオフにします。

  5. 書き出し」をクリックして、PNG シーケンスを書き出します。

アニメーション GIF を書き出し

Animate のアニメーション GIF ファイルを次の手順で書き出すことができます。 

  1. ファイル/書き出し/アニメーション GIF を書き出しを選択します。

    ダイアログボックスが表示されます。 

  2. ダイアログボックスで適切なオプションを選択してから「完了」をクリックし、アニメーションをアニメーション GIF ファイルとして書き出します。

    ファイル/書き出し/イメージの書き出しを選択して、静止 GIF 画像ファイルを書き出すこともできます。

画像とグラフィックを CC ライブラリに書き出し

画像またはグラフィックを CC ライブラリに書き出すには、ウィンドウ/CC ライブラリ を選択します。

CC ライブラリウィンドウが表示されます。 

CC ライブラリウィンドウの左下にある「+」アイコンをクリックし、画像またはグラフィックファイルを選択し、「追加」をクリックします。

FXG グラフィック交換形式(Animate では非推奨)

FXG ファイルについて

FXG 形式は、Animate / Flash プラットフォーム向けのグラフィック交換ファイルフォーマットです。FXG は、Flex フレームワークで使用される XML ベースのプログラミング言語である MXML のサブセットに基づいています。FXG 形式は、高精度なグラフィックコンテンツの交換を可能にすることにより、デザイナーと開発者がより効率的に共同作業を行うことを支援します。デザイナーは、アドビのデザインツールを使用してグラフィックを作成し、FXG 形式で書き出します。Adobe Flash Builder や Adobe Flash Catalyst などのツールでこの FXG ファイルを使用して、リッチインターネットエクスペリエンスやリッチインターネットアプリケーションを実現することができます。

FXG ファイルの作成時、ベクトル画像は直接ファイル内に保存されます。FXG 内に対応するタグがない要素は、ビットマップグラフィックとして書き出されたうえで、FXG ファイル内で参照されます。これには、ビットマップ、一部のフィルター、一部の描画モード、グラデーション、マスク、3D が含まれます。これらの効果のいくつかは FXG として書き出せますが、FXG ファイルを開くアプリケーションに読み込むことはできません。

FXG 書き出しを使用したベクトルおよびビットマップ画像を含むファイルを書きだす場合、FXG ファイルと共に独立したフォルダーが作成されます。このフォルダーは <ファイル名.assets> という名前で、この FXG ファイルに関連するビットマップ画像が含まれます。

FXG ファイル形式について詳しくは、FXG の仕様を参照してください。

FXG の書き出しに関する制限

Animate では、ステージ上のオブジェクトを 1 つまたは複数選択して、FXG へ書き出すことができます。FXG 形式へ書き出すときには、オブジェクト名とレイヤー名が保持されます。

FXG ファイルとして保存する場合の制限事項を以下に示します。

  • スケール 9 グリッド:書き出されますが、Adobe Illustrator 以外では読み取ることができません。

  • サウンドおよびビデオ:書き出されません。

  • コンポーネント:書き出されません。

  • 複数のフレームを持つトゥイーンおよびアニメーション:書き出されませんが、選択したフレームは静的オブジェクトとして書き出されます。

  • 埋め込みフォント:書き出されません。

  • ボタンシンボル:Animate ではボタンのアップ状態のみが書き出されます。

  • 3D プロパティ:書き出されません。

  • インバースキネマティック(IK)プロパティ:書き出されません。

  • テキスト属性:一部の属性は書き出されない場合があります。

Animate コンテンツの FXG 形式での書き出し

Animate では、次の 2 つの方法でコンテンツを FXG 形式で書き出すことができます。

  • ステージ上のオブジェクトを FXG として書き出すには、オブジェクトを選択し、書き出し選択対象の書き出しを選択して、ファイル形式メニューから FXG 形式を選択します。

  • ステージ全体を FXG として保存するには、書き出しイメージの書き出しを選択し、ファイル形式メニューから「Adobe FXG」を選択します。

JPEG シーケンスおよび JPEG イメージ

これらのオプションは、JPEG の「パブリッシュ設定」オプションと一致します。ただし、「画面に合わせる」によって、書き出されたイメージが画面表示されるときに、そのイメージが Animate コンテンツのサイズに一致するように変更されます。「ムービーに合わせる」を使用すると、Animate コンテンツと同じサイズの JPEG イメージが作成され、元のイメージの縦横比が維持されます。

PNG シーケンスおよび PNG イメージ

PNG の書き出し設定のオプションは、PNG のパブリッシュ設定のオプション(同様に適用可能)とほぼ同じですが、次の例外があります。

サイズ

書き出されるビットマップイメージのサイズを、「」フィールドと「高さ」フィールドに入力するピクセル数に設定します。

解像度

解像度を dpi で入力します。画面解像度を使用し、元のイメージの縦横比を維持するには、「画面に合わせる」を選択します。

カラー

パブリッシュ設定ダイアログボックスの「PNG」タブにある「ビット深度」オプションと同じで、作成するイメージのピクセルあたりのビット数を設定します。256 色イメージの場合は、8 ビットを選択します。数千万色の場合は、24 bpc を選択します。透明度を伴う数千万色(32 bpc)の場合は、24 bpc(アルファチャンネル)を選択します。ビット深度が大きくなるほど、ファイルのサイズが大きくなります。

範囲

ドキュメントをイメージサイズとムービーサイズのどちらで書き出すかを選択します。

注意:

書き出す GIF のサイズは、4000 ピクセル未満に制限されます。このサイズの制限は、CS6 以降のバージョンに適用されます。

注意:

256 色オプションを選択した場合、ディザ処理オプションは機能しません。つまり、選択した GIF の配色が 256 色の場合は、GIF イメージはディザ処理されません。

(Animate では非推奨)ビットマップ(BMP)イメージ

他のアプリケーションで使用できるビットマップイメージを作成します。ビットマップ書き出しダイアログボックスには、次のオプションがあります。

サイズ

書き出すビットマップイメージのサイズをピクセル単位で指定します。常に元のイメージと同じ縦横比が維持されます。

解像度

書き出すビットマップイメージの解像度を 1 インチあたりのドット数(dpi)で設定します。描画のサイズに基づいて幅と高さが自動的に計算されます。使用しているモニターに合わせて解像度を設定するには、「画面に合わせる」ボタンをクリックします。

色深度

イメージのビット深度を指定します。Windows アプリケーションによっては、新しい 32 ビット/チャンネル(bpc)深度のビットマップイメージに対応していない場合があります。32 ビット形式を使用して問題が起きた場合は 24 ビット形式を使用してください。

スムージング

オンにすると、書き出すビットマップにアンチエイリアスが適用されます。アンチエイリアス処理をすると、高画質のビットマップイメージを作成することができます。ただし、色の付いた背景上にイメージを配置すると、イメージの周りにグレーのにじみが発生する場合があります。にじみが発生した場合は、オフにしてください。

Animate ドキュメント(SWF)

Animate コンテンツを Dreamweaver などの別のアプリケーションで使用するには、ドキュメント全体を SWF ファイルとして書き出します。Animate により、FLA ファイルの「パブリッシュ設定」の既存の設定を使用して、SWF ファイルが書き出されます。

Adobe Media Encoder を使用した HD ビデオの書き出し

Animate では、トゥイーン、シンボルおよびグラフィックを様々な形式の高解像度(HD)ビデオに書き出すことができます。ビデオ書き出し機能が強化され、Adobe Media Encoder とシームレスに統合されています。

Animate では、AEM でサポートされるビデオ形式とプリセットを選択できます。適切なオプションを選択すると、Animate では、そのビデオをキューに追加し、AME 内で自動的に処理します。処理が正常に完了すると、そのことが通知されます。

さらに、すべてのシーンまたは目的のシーンをループに書き出すことができます。また、特定のシーンに対して、すべてのフレームまたは特定の範囲のフレームを書き出すこともできます。

Animate を使用して書き出した HD ビデオは、ビデオ会議、ストリーミングおよび共有用の、通信可能なアプリケーションで使用できます。

デフォルトでは、QuickTime ムービー(.MOV)ファイルのみを書き出せます。Animate は MOV ファイルの書き出しに QuickTime ライブラリを活用するので、書き出し機能を利用するには、QuickTime Player の最新バージョンをインストールする必要があります。

Animate が Adobe Media Encoder と統合されたので、HD ビデオ書き出しワークフローは再構築されました。MOV ファイルを他の様々な形式に変換することが可能です。このため、Adobe Media Encoder は、Animate コンテンツに関連する書き出し形式のみを表示するように最適化されました。Adobe Media Encoder を使用したビデオのエンコードと書き出しの詳細については、「ビデオとオーディオのエンコードと書き出し」を参照してください。

注意:

Adobe Media Encoder は、Creative Cloud デスクトップアプリケーションから Animate をインストールする際に自動的にインストールされます。

以前のバージョンと最新バージョンのビデオ書き出しワークフローの違い

新しいワークフローは、CS6 および以前のバージョンのビデオ書き出しワークフローとは異なります。

主な違いを次に示します。

  • Adobe Media Encoder との統合:Animate は、Adobe Media Encoder 7.0 と統合されました(以前のバージョンは AME に依存していませんでした)。
  • 書き出し形式:Animate は、QuickTime ムービーのみ、書き出すことができます。
  • HD ビデオ:Animate を使用すると、HD ビデオを書き出すことができます。

また、CS6 ワークフローには、次の問題がありました。

  • Quicktime を使用した MOV 書き出しワークフローでは、エラーが発生しやすく、メモリを多く消費しました。
  • AVI の書き出しでは、ムービークリップはサポートされていませんでした。

Animate では、フレームの欠損の問題を含む、これらの問題は修正されました。Adobe Media Encoder のワークフローを利用すれば、MOV ファイルを Animate でシームレスに書き出すことができます。新しい AME ベースのワークフローでは、Animate コンテンツを MOV ファイルに書き出すことができ、後で AME を使用して MOV ファイルを任意の出力に変換できます。

フレーム #2 を起点とした書き出しの開始

タイムラインの構成に応じて、書き出されるビデオは次のいずれかのシナリオになります。

  1. ルートタイムラインに複数のフレームがある場合、書き出しはフレーム #2 から開始されます。
  2. ルートタイムラインにフレームが 1 つしかない場合は、書き出しにフレーム #1 が含まれます。
  3. ルートタイムラインに複数のフレームがあり、フレーム #1 に ActionScript やサウンドが追加されている場合は、ActionScript やサウンドは呼び出されません。

HD ビデオの書き出し

書き出しの前に、次の手順を実行します。

  • QuickTime をインストールします。
  • フレームレートを 60 fps 以下に設定します。詳しくは、アニメーションの基本を参照してください。
  1. 新しいファイルを作成するか、既存の FLA ファイルを開きます。

  2. ファイル書き出しビデオを書き出しを選択します。

    ビデオ
    ビデオを書き出しダイアログボックス

  3. ビデオを書き出しダイアログでは、レンダリングサイズの高さステージの幅と高さに合わせて設定します。

  4. ビデオを書き出しダイアログで、必要なオプションを設定します。

    • レンダリングサイズ HW:HD ビデオまたはノーマルのどちらを書き出すかに応じて、解像度に従い書き出すレンダーサイズを設定します。ステージ高さそれぞれに等しい値を設定します。「レンダリングの幅」および「レンダリングの高さ」の値を変更すると、ステージサイズもそれに応じて変更されます。Animate はステージのサイズに応じてアスペクト比を維持します。
    • ステージのカラーを無視(アルファチャンネルを生成)」:ステージカラーを使用してアルファチャンネルを作成します。アルファチャンネルは、透明なトラックとしてエンコードされます。アルファチャンネルは、書き出された QuickTime ムービーを他のコンテンツの上に重ねて、背景色やシーンを変更するために使用できます。
    • Adobe Media Encoder でビデオを変換」:書き出した MOV ファイルを、AME を使用して異なる形式に変換する場合に、このオプションを選択します。選択した場合、Animate でビデオの書き出しを完了後、AME が起動します。
    • 書き出したビデオのパス」:ビデオを書き出す場所のパスを入力または参照します。
    • 書き出しを停止」:Animate で書き出しを終了する場合に指定します。
      • 最後のフレームに達した場合」:最後のフレームで終了する場合、このオプションを選択します。
    最後のフレームに達した場合に書き出しを停止
    最後のフレームに達した場合に書き出しを停止

    • 書き出しを停止」:Animate で書き出しを終了する場合に指定します。
      • 停止までの経過時間」:このオプションを選択して、書き出しを終了するまでの期間を指定します。このオプションにより、ビデオのセクションを個別に書き出すことができます。
    1 分 15 秒後に書き出しを停止
    1 分 15 秒後に書き出しを停止

    3 秒後に書き出しを停止
    3 秒後に書き出しを停止

  5. 書き出し」をクリックします。「Adobe Media Encoder でビデオを変換」オプションを選択した場合、AME が起動して、書き出した MOV ファイルが新しいキューで利用可能になります。AME を使用したビデオのエンコードと変換について詳しくは、「ビデオとオーディオのエンコードと書き出し」を参照してください。

SVG シーケンスの書き出し

書き出し設定のアップグレードにより、ユーザーは現在のタイムラインを SVG シーケンスとして書き出せるようになりました。ファイル/書き出し/ムービーの書き出しをクリックして、「名前を付けて保存」で「SVG シーケンス」を選択します。

SVG シーケンスの書き出し
SVG シーケンスの書き出し

アニメーションアセットのビデオやアニメーション GIF などへの書き出し

Animate には、アニメーションアセットのアニメーション GIF やビデオなどへの書き出しの際の効率的なパブリッシュプロセスがあります。アニメーションの書き出し方法を学習したい場合は、この例の最後にあるチュートリアルをご覧になり、次の手順に従ってください。

  1. ファイル書き出しビデオを書き出しをクリックします。

  2. ビデオを書き出しダイアログボックスで、次のオプションを選択します。

    • レンダリングサイズステージ高さそれぞれに等しい値を設定します。
    • ステージのカラーを無視(アルファチャンネルを生成):ステージカラーを使用してアルファチャンネルを作成します。
    • Adobe Media Encoder でビデオを変換:書き出した MOV ファイルを異なる形式に変換します。
    • 書き出しを停止:必要なオプションを選択して、書き出しを終了します。
    • 参照:ビデオを書き出すパスを入力します。
  3. 書き出し」をクリックします。

アニメーションアセットのビデオやアニメーション GIF などへの書き出し方法

ビデオのアニメーション GIF およびその他の形式への書き出し方法については、このビデオをご覧ください。
アドビのロゴ

アカウントにログイン