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(以前の Flash Professional CC)のほとんどの作業と同じように、アニメーションで ActionScript は必要ありません。ただし、アニメーションの作成に ActionScript を使用することもできます。

アニメーションの種類

Animate では、いくつかの方法でアニメーションと特殊効果を作成できます。どの方法でも、それぞれ違った魅力のアニメーションコンテンツを作成できます。

Animate では、次のタイプのアニメーションを使用できます。

モーショントゥイーン

モーショントゥイーンでは、位置やアルファ透明度といったオブジェクトのプロパティを 2 つのフレームでそれぞれ異なる値に設定します。すると、その間にあるフレームのオブジェクトのプロパティ値が Animate によって自動的に補間されます。モーショントゥイーンは、オブジェクトの連続したモーションや変形から構成されるアニメーションでの使用に適しています。モーショントゥイーンは、デフォルトでは 1 つのオブジェクトとして選択できる連続したフレームのスパンとしてタイムラインに表示されます。モーショントゥイーンは強力であり、簡単に作成できます。

クラシックトゥイーン

クラシックトゥイーンはモーショントゥイーンに似ていますが、作成方法が複雑になります。クラシックトゥイーンの場合は、スパンベースのトゥイーンでは不可能な特定のアニメーション化された効果を使用できます。

インバースキネマティックポーズ(Animate では非推奨)

インバースキネマティックポーズを使用すると、シェイプオブジェクトを伸縮および変形し、シンボルインスタンスのグループをリンクして、自然な方法でそれらを一緒に動かすことができます。シンボルのシェイプまたはグループにボーンを追加したら、別のキーフレーム内のボーンまたはシンボルの位置を変更できます。Animate によってフレーム間の位置が補間されます。

シェイプトゥイーン

シェイプトゥイーンでは、タイムラインの特定のフレームでシェイプを描画し、別の特定のフレームでそのシェイプを変更するか、または別のシェイプを描画します。Animate は、その間のフレームの中間シェイプを補間し、あるシェイプが別のシェイプに変形するアニメーションを作成します。

フレームアニメーション

このアニメーション手法により、タイムライン内の各フレームに異なるアートを指定できます。この手法を使用して、高速で連続して再生されるフィルムのフレームのような効果を生み出します。このタイプのアニメーションは、各フレームのグラフィックエレメントを 1 つずつ変える必要がある複雑なアニメーションでの使用に適しています。

フレームレートについて

フレームレートはアニメーションが再生されるスピードであり、1 秒当たりのフレーム数(fps)で測定します。フレームレートが小さすぎると、アニメーションの動きがぎこちなくなり、逆に大きすぎると、速すぎて細部の描写がぼやけてしまいます。フレームレートは 24 fps が新規の Animate ドキュメントのデフォルトであり、一般に Web 上ではこのレートで最良の結果が得られます。映画の標準レートも 24 fps です。

アニメーションの複雑さと、再生するコンピューターの処理速度は、アニメーションの滑らかさに影響を与えます。最適なフレームレートを決めるには、各種のコンピューターでアニメーションをテスト再生します。

Animate ドキュメント全体のフレームレートは 1 つだけ指定するので、このレートは、アニメーションの作成を開始する前に設定します。

タイムラインでのアニメーションの確認

Animate では、コンテンツを含む各フレームに対して個別のインジケーターが表示されるので、トゥイーンアニメーションまたはフレームアニメーションのいずれであるかを確認できます。

タイムラインには、次のいずれかのフレームコンテンツインジケーターが表示されます。

  • 青の背景色を持つフレームスパンは、モーショントゥイーンです。スパンの最初のフレームの黒い点は、トゥイーンスパン内にターゲットオブジェクトが割り当てられていることを示します。黒い菱形は最後のフレームと他のプロパティキーフレームを示します。プロパティキーフレームは、明示的に定義されたプロパティ変更を含むフレームです。表示するプロパティキーフレームのタイプを選択するには、モーショントゥイーンスパンを右クリック(Windows)または Command キーを押しながらクリック(Mac OS)して、コンテキストメニューでキーフレームを表示/タイプを選択します。デフォルトでは、全タイプのプロパティキーフレームが表示されます。スパン内のその他すべてのフレームには、ターゲットオブジェクトのトゥイーンプロパティに対する補間値が含まれます。

     

     

  • 最初のフレームの白抜きの点は、モーショントゥイーンのターゲットオブジェクトが削除されたことを示します。トゥイーンスパンには、まだそのプロパティキーフレームが含まれているので、新しくターゲットオブジェクトを割り当てることができます。

     

     

  • 緑の背景色を持つフレームスパンは、インバースキネマティック(IK)ポーズレイヤーを示します。ポーズレイヤーには IK アーマチュアとポーズが含まれます。各ポーズはタイムラインに黒い菱形として表示されます。Animate はポーズ間にあるフレームのアーマチュアの位置を補間します。

     

     

  • 黒い矢印および青い背景とともに開始キーフレームに表示される黒い円は、クラシックトゥイーンを示しています。

     

     

  • 断続線は、最後のキーフレームが見つからない場合など、クラシックトゥイーンが壊れているか不完全であることを示します。

     

     

  • 黒い矢印および明るい緑の背景とともに開始キーフレームに表示される黒い円は、「シェイプトゥイーン」を示しています。

     

     

  • 黒い円は、単一のキーフレームを示します。単一のキーフレームに続く明るいグレーのフレームには、変更のない同じコンテンツが含まれます。それらのフレームには黒い垂直な線があり、スパンの最終フレームに白抜きの長方形があります。

     

     

  • 小文字の a は、アクションパネルでフレームにフレームアクションが設定されていることを示します。

     

     

  • 赤いフラグは、フレームにラベルが含まれていることを示します。

     

     

  • 緑色の 2 つのスラッシュは、フレームにコメントが含まれていることを示します。

     

     

  • 金の錨は、フレームが名前付きアンカーであることを示します。

     

トゥイーンアニメーションのレイヤーについて

Animate ドキュメントの各シーンには、タイムラインレイヤーを必要な数だけ使用できます。レイヤーとレイヤーフォルダーを使用して、アニメーションシーケンスのコンテンツおよび個々のアニメーション化したオブジェクトを整理します。レイヤーおよびフォルダー内のコンテンツを整理することにより、重複したときの消去、連結、セグメント化を防ぐことができます。複数のシンボルまたはテキストフィールドのトゥイーン動作を含むアニメーションを同時に作成する場合は、各オブジェクトを個別のレイヤー上に配置します。1 つのレイヤーをバックグラウンドレイヤーとして使用して静止のアートワークを含めたり、追加レイヤーを使用してアニメーション化したオブジェクトを個別に含めることもできます。

Animate では、モーショントゥイーンを作成する際に、トゥイーンするために選択したオブジェクトを含むレイヤーがトゥイーンレイヤーに変換されます。トゥイーンレイヤーには、タイムラインのレイヤー名の横にトゥイーンアイコンが表示されます。

トゥイーンオブジェクトと同じレイヤーにその他のオブジェクトが含まれる場合、Animate は必要に応じて元のレイヤーの上または下に新しいレイヤーを追加します。元のレイヤーでトゥイーンオブジェクトの下にあったオブジェクトは、元のレイヤーの下に追加された新しいレイヤーに移動します。元のレイヤーでトゥイーンオブジェクトの上にあったオブジェクトは、元のレイヤーの上に追加された新しいレイヤーに移動します。Animate は、タイムライン内の既存のレイヤー間にそれらの新しいレイヤーを挿入します。これにより、Animate ではステージ上のすべてのグラフィックオブジェクトの元の重ね順が保持されます。

トゥイーンレイヤーには、トゥイーンスパン(隣接する、トゥイーンを含むフレームグループ)、静止フレーム、空白キーフレームまたは空のフレームのみを含めることができます。各トゥイーンスパンには、ターゲットオブジェクトとターゲットオブジェクトのオプションのモーションパスを 1 つずつ含めることができます。トゥイーンレイヤー上では描画できないため、追加のトゥイーンや静止フレームは、他のレイヤー上に作成してからトゥイーンレイヤーにドラッグする必要があります。フレームスクリプトをトゥイーンレイヤーに配置するには、別のレイヤー上で作成して、トゥイーンレイヤーにドラッグします。フレームスクリプトを配置できるのは、モーショントゥイーンスパン自体の外側のフレームのみです。一般に、ActionScript のみを含む別のレイヤーにすべてのフレームスクリプトを配置するのが最善の方法です。

ドキュメントに複数のレイヤーがある場合、そのうちの 1 つまたは複数のレイヤー上のオブジェクトをトラッキングしたり、編集したりするのが難しいことがあります。そのような場合は、レイヤーごとにコンテンツを編集します。作業していないレイヤーを非表示にしたりロックしたりするには、タイムラインのレイヤー名の横にある目のアイコンまたはカギのアイコンをクリックします。レイヤーフォルダーを使用すると、レイヤーを管理しやすいグループに分類することができます。

トゥイーンアニメーション用レイヤーへのオブジェクトの配分

モーショントゥイーンをオブジェクトに適用すると、Animate により自動的にオブジェクトがそのトゥイーンレイヤーに移動されます。ただし、別のレイヤーにオブジェクトを自分で配分することもできます。例えば、コンテンツを整理するときに、オブジェクトを自分で配分することができます。手作業の配分は、アニメーションをオブジェクトに適用しながら、それらのレイヤー間の動きを正確に制御するためにも役立ちます。

「レイヤーに配分」コマンド(修正/タイムライン/レイヤーに配分)を使用すると、Animate は選択されたそれぞれのオブジェクトを個別の新しいレイヤーに配分します。選択していないオブジェクトは、他のフレーム内のオブジェクトも含め、すべて元のレイヤーに保持されます。

グラフィックオブジェクト、インスタンス、ビットマップ、ビデオクリップ、および分解したテキストブロックなど、ステージ上のあらゆるエレメントに「レイヤーに配分」コマンドを適用できます。

「レイヤーに配分」コマンドを使用して作成した新しいレイヤーについて

「レイヤーに配分」で作成された新規レイヤーは、各レイヤーに置かれているエレメントの名前に従って命名されます。

  • ライブラリアセット(シンボル、ビットマップ、ビデオクリップなど)が含まれている新規レイヤーの名前は、そのアセット名と同じになります。

  • 命名されたインスタンスが含まれている新規レイヤーには、そのインスタンスと同じ名前が付けられます。

  • 分解したテキストブロックの文字が含まれている新規レイヤーには、その文字と同じ名前が付けられます。

  • 新規レイヤー内のグラフィックオブジェクトに名前がない場合、そのレイヤーの名前は、1 や 2 などになります。

    Animate では、新規レイヤーは選択したレイヤーの下に挿入されます。新規レイヤーは、選択したエレメントが当初に作成された順番どおりに、上から下に向かって並べられます。分解したテキストでは、レイヤーは分解前の文字の順番に従って、左から右、右から左、または上から下に向かって並べられます。例えば、FLASH というテキストを分解し、レイヤーに配分するとします。F、L、A、S および H という名前の新しいレイヤーが、F を先頭に上から下に向かって並べられます。これらのレイヤーは、最初にテキストが入っていたレイヤーのすぐ下に表示されます。

レイヤーへのオブジェクトの配分

  1. 個別のレイヤーに配分するオブジェクトを選択します。オブジェクトは、単一のレイヤーに置くことも、複数のレイヤーに置くこともできます。複数のレイヤーに置く場合、レイヤーが連続していなくてもかまいません。
  2. 次のいずれかの操作を行います。
    • 修正/タイムライン/レイヤーに配分を選択します。
    • 選択したオブジェクトを右クリック(Windows)、または Control キーを押しながらクリック(Mac OS)して、「レイヤーに配分」を選択します。

オブジェクトをキーフレームに配分してトゥイーンアニメーションを作成する

Animate の新機能

Animate では、それぞれのオブジェクトを個別のキーフレームに自動的に配分できます。オブジェクトの配分は、ステージ上のコンテンツを整理するときに選択できます。この操作を手動で行うと、手間と時間がかかります。この配分機能は、オブジェクトを個別のキーフレームに配置してトゥイーンアニメーションを作成する場合に特に役立ちます。各キーフレームには、様々なオブジェクトやオブジェクトの状態を割り当てることができます。その結果、これらのキーフレーム間で再生ヘッドをスクラブすると、トゥイーンアニメーションのエフェクトが示されます。

「キーフレームに配分」コマンドを使用すると、Animate では、選択した各オブジェクトが新しい個別のキーフレームに配分されます。選択していないオブジェクトは、他のフレーム内のオブジェクトも含め、すべて元のレイヤーに保持されます。

グラフィックオブジェクト、インスタンス、ビットマップ、ビデオクリップ、およびテキストブロックなど、ステージ上のあらゆるエレメントに「キーフレームに配分」コマンドを適用できます。

「キーフレームに配分」コマンドを使用して作成した新しいキーフレームについて

  • 「キーフレームに配分」の操作によって作成された新しいキーフレームは、オブジェクトを選択した順番に従って並べられます。
  • レイヤー上のいずれかのオブジェクトが選択されていない状態で「キーフレームに配分」の操作を実行すると、そのオブジェクトが原因となり、元のフレームは影響を受けません。配分用に選択されたオブジェクトはキーフレームに割り当てられ、そのフレームは、元のコンテンツが配置されていた最後のフレームの直後から始まります。例えば、オブジェクト 1オブジェクト 2 が 50 個のフレームを含んでいるレイヤー上にあるとします。オブジェクト 1 を配分用に選択した場合、そのオブジェクトは 51 番目のキーフレームに配置されます。

キーフレームへのオブジェクトの配分

  1. 個別のレイヤーに配分するオブジェクトを選択します。オブジェクトは、単一のレイヤーに置くことも、複数のレイヤーに置くこともできます。複数のレイヤーに置く場合、レイヤーが連続していなくてもかまいません。

  2. 選択したオブジェクトを右クリック(Windows)、または Control キーを押しながらクリック(Mac OS)して、「キーフレームに配分」を選択します。

その他のリソース

Animate でのアニメーションの作成については、次の記事が参考になります。

アドビのロゴ

アカウントにログイン