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. アニメーションのクイック共有とパブリッシュ

フレームアニメーションの作成

フレームアニメーションは、すべてのフレームでステージのコンテンツが変化するので、単にステージ上を移動するようなアニメーションではなく、イメージが各フレームで変化するような複雑なアニメーションに適しています。フレームアニメーションでは、トゥイーンアニメーションよりもファイルサイズが極端に大きくなります。フレームアニメーションでは、Animate によって各フレーム全体の値が保存されます。

フレームアニメーションを作成するには、各フレームをキーフレームとして定義し、フレームごとに異なるイメージを作成します。新しい各キーフレームには、直前のキーフレームと同じコンテンツが最初に入っているため、アニメーションのフレームを徐々に修正できます。

  1. レイヤー名をクリックしてレイヤーをアクティブにし、そのレイヤー上でアニメーションを開始するフレームを選択します。
  2. そのフレームがキーフレームになっていない場合、挿入/タイムライン/キーフレームを選択してキーフレームにします。
  3. シーケンスの最初のフレームにアートワークを作成します。アートワークを作成するには、描画ツールを使用するか、クリップボードからグラフィックをペーストするか、またはファイルを読み込みます。
  4. 最初のキーフレームとコンテンツが同じキーフレームを追加するには、同じ行の右側にある次のフレームをクリックして、挿入/タイムライン/キーフレームを選択します。または、フレームを右クリック(Windows)するか Control キーを押しながらクリック(Mac OS)して、コンテキストメニューの「キーフレームの挿入」を選択します。

  5. アニメーションの次の動きを作成するには、ステージ上でフレームのコンテンツを変更します。
  6. 手順 4 と 5 を繰り返して、目的の動きを作成してフレームアニメーションのシーケンスを完成させます。
  7. アニメーションシーケンスをテストするには、制御/再生を選択するか、または制御パネル(ウィンドウ/ツールバー/制御パネル)の「再生」ボタンをクリックします。

クラシックトゥイーンまたはモーショントゥイーンの変換によるフレームアニメーションの作成

クラシックトゥイーンまたはモーショントゥイーンのスパンをフレームアニメーションに変換できます。フレームアニメーションでは、各フレームに個別のキーフレーム(プロパティキーフレームではない)が含まれま。また、それらの各キーフレームにはアニメーションシンボルの個別のインスタンスが含まれています。フレームアニメーションには、補間のプロパティ値は含まれません。

  1. 変換するトゥイーンスパンを右クリック(Windows)または Control キーを押しながらクリック(Mac OS)し、コンテキストメニューから「フレームアニメーションに変換」を選択します。

オニオンスキン機能の使用

通常、アニメーションシーケンスのフレームは、一度に 1 つだけステージ上に表示されます。オニオンスキンは、ステージ上に前後のフレームのコンテンツを表示して参照できるようにすることで、フレームアニメーションの描画、配置および編集を支援します。再生ヘッドの下のフレームはフルカラーで表示されるので、カラーとアルファを適用して、前のフレームと後のフレームを区別しています。 

オニオンスキンの前後のフレームは、デフォルトカラーの濃淡で表示されます。これらのカラーをカスタマイズするには、「詳細設定」オプションを使用します。

オニオンスキンの有効化と無効化

  • オニオンスキンボタン をクリックして、オニオンスキン機能を有効または無効にします。
  • フレームを除外したり含めたりするには、タイムラインヘッダーで、オニオンスキン範囲内の任意のオニオンスキンフレームを右クリックします。
  • オニオンスキンボタン()をクリックしてマウスボタンを押したままにすると、オプションが表示され、選択可能になります。

オニオンスキンの詳細設定

オニオンスキンボタン()をクリックしてマウスボタンを押したままにし、詳細設定を選択します。

範囲のカスタマイズ

オニオンスキンの表示色のカスタマイズ

  1. オニオンスキンフレームの色をカスタマイズするには、タイムラインバーのオニオンスキンフレームを選択します。
  2. オニオンスキンボタン()をクリックしてマウスボタンを押したままにし、詳細設定を選択します。
  3. 前後のフレームのカラーの濃淡を変更します。

アウトラインと塗りモード

不透明度のカスタマイズ

  1. アクティブフレームのどちらかの側にあるオニオンスキンフレームの不透明度を調整するには、開始時の不透明度スライダーをクリックしてドラッグします。

  2. パーセント単位で各オニオンフレームの差を減らすには、減少単位スライダーをドラッグします。

キーフレームのみを表示

  1. オニオンスキンフレームの色をカスタマイズするには、タイムラインバーのオニオンスキンフレームを選択します。
  2. 編集/環境設定を選択します。
  3. オニオンスキンの色」オプションで、色見本ボタンを選択して、「前」、「現在」、「後」フレームの色をカスタマイズおよび設定します。

アンカーマーカー

アニメーションの複数のフレームのステージ上での同時表示

オニオンスキンボタン をクリックします。オニオンスキンの開始マーカーと終了マーカー(タイムラインヘッダーに表示)の間にあるすべてのフレームは、ドキュメントウィンドウでは 1 つのフレームとして重ねて表示されます。

オニオンスキンマーカー

色分けされたオニオンスキン

オニオンスキンの色分けにより、前のフレーム、現在のフレーム、後のフレームを区別しやすくなっています。アクティブフレームから離れるほど、オニオンスキンフレームの透明度が低くなります。

タイムライン上のオニオンスキン

前、現在、後の各フレームを示す色分けされたオニオンスキン

オニオンスキンアウトラインモード

オニオンスキンの表示色のカスタマイズ

  1. オニオンスキンフレームの色をカスタマイズするには、タイムラインバーのオニオンスキンフレームを選択します。
  2. 編集/環境設定を選択します。
  3. オニオンスキンの色」オプションで、色見本ボタンを選択して、「前」、「現在」、「後」フレームの色をカスタマイズおよび設定します。
注意:

色分けは、出力モードにも適用されます。

オニオンスキンタイムラインモード

カスタマイズされたオニオンスキン

  • オニオンスキン範囲の開始マーカーまたは終了マーカーの位置を変更するには、そのポインターを新しい場所にドラッグします。通常、オニオンスキンマーカーは、現在のフレームポインターと連動して移動します。Ctrl/Command キーを押しながらドラッグして、両側の位置を増減します。
  • オニオンスキンマーカー間のすべてのフレームの編集を有効にするには、「複数フレーム編集」ボタン をクリックします。通常オニオンスキンで編集できるのは現在のフレームだけですが、オニオンスキンマーカー間の各フレームのコンテンツを表示させ編集することができます。
  • ループ範囲を再生ヘッドを含めた任意の位置に移動させるには、タイムラインのマーカーを使用し、Shift キーを押しながらドラッグします。 
  • 範囲マーカーを設定するには、Shift キーを使用して範囲マーカーをドラッグするか、タイムライン上のマーカーを使用してループ範囲をドラッグします。
注意:

ロックされたレイヤー(カギのアイコンが表示されているレイヤー)は、オニオンスキンが有効なときは表示されません。イメージを操作するときにわかりやすいように、オニオンスキン操作の対象ではないレイヤーはロックするか、非表示にします。

作業結果のプレビュー

オニオンスキンがどのようになるかを確認するには、タイムラインのスパン全体の上にマウスポインターを移動します。アニメーションが色付きのアウトラインで再生され、変更を正確にプレビューできます。 

アドビのロゴ

アカウントにログイン