モーションエディターを使用したモーショントゥイーンの編集

  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 CC のモーションエディターを使用すれば、最小の作業で複雑なモーショントゥイーンを作成できます。モーションエディターでは、選択したトゥイーンスパンに適用されたすべてのプロパティが、2 次元のグラフでコンパクトに表示されます。これらの各グラフを変更し、対応するトゥイーンのプロパティを個別に変更することもできます。モーションエディターを使用すると、正確な制御と細かい粒度によって、アニメーションを大幅に強化してリアルな動作を再現できます。

モーションエディターについて

モーションエディターは、ユーザーが複雑なトゥイーンを簡単に作成できるようにすることを目的としています。モーションエディターを使用すると、トゥイーンのプロパティを制御および操作できます。モーショントゥイーンの作成後、モーションエディターを利用してトゥイーンを正確に調整できます。モーションエディターでは、一度に 1 つのプロパティを選択して編集できるので、トゥイーンを集中的に編集しやすくなります。

モーションエディターを使用する理由

モーションエディターは、ユーザーが複雑なトゥイーンを簡単に作成できるようにすることを目的としています。そのため、モーションエディターでは、トゥイーンとそのプロパティを細かく制御できます。モーションエディターでのみ可能な処理は、次のとおりです。

  • 容易なアクセスおよび変更:1 つのパネル内で、トゥイーンに適用されているすべてのプロパティに簡単にアクセスし、それらを変更できます。
  • 様々なイージングプリセットまたはカスタムイージングの追加:モーションエディターを使用すると、様々なプリセットの追加、複数のプリセットの追加またはカスタムイージングの作成が可能です。トゥイーンプロパティにイージングを追加すると、リアルなオブジェクトの動作を簡単に再現できます。
  • 結果の曲線:個々のプロパティにイージングを適用し、結果の曲線を使用して、個々のプロパティのグラフにおけるイージングの効果を確認できます。結果の曲線は、実際のトゥイーンを表現したものです。
  • アンカーポイントとコントロールポイント:アンカーポイントとコントロールポイントを使用すると、トゥイーンの主なセクションを分離して編集を加えることができます。
  • アニメーションの調整:モーションエディターは、ある種のアニメーションを作成するための唯一の方法です。例えば、プロパティ曲線を調整することによって個々のプロパティに曲線パスのトゥイーンを作成できます。
(A)トゥイーンに適用されたプロパティ (B)アンカーポイントを追加ボタン (C)表示に合わせるの切り替え (D)プロパティを削除ボタン (E)イージングを追加 (F)垂直方向のズームの切り替え

モーションエディターパネルを開く

この記事では、モーショントゥイーンを既に作成済みで、モーショントゥイーンを使用してトゥイーンを調整しようとしていることを前提としています。モーショントゥイーンの作成について詳しくは、モーショントゥイーンアニメーションを参照してください。

モーションエディターを開くには、次の手順を実行します。

  1. タイムラインで、調整するモーショントゥイーンスパンを選択し、トゥイーンスパンをダブルクリックします。トゥイーンスパンを右クリックして「トゥイーンを調整」を選択し、モーションエディターを起動することもできます。

プロパティ曲線

モーションエディターは、プロパティ曲線と呼ばれる 2 次元のグラフを使用してトゥイーンのプロパティを表します。これらのグラフは、モーションエディター上のグリッド内で統合されます。各プロパティ固有のプロパティ曲線が、水平軸(左から右)上では時間、垂直軸上ではプロパティ値の変化として描画されます。

モーショントゥイーンは、モーションエディター内でプロパティ曲線を編集することで操作できます。この目的のために、モーションエディターでは、トゥイーンを正確に制御できるようにしています。そのため、プロパティ曲線をスムーズに編集しやすくなっています。プロパティ曲線は、プロパティのキーフレームまたはアンカーポイントを追加することで操作できます。これにより、プロパティ曲線の主要部分を操作できます。これらの部分に対してトゥイーンを使用して、特定プロパティのトランジションを表示します。

モーションエディターでは、トゥイーンスパン内で変更可能なプロパティのみを編集できることに注意してください。例えば、トゥイーンスパン内では、グラデーションベベルフィルターの「品質」プロパティには 1 つの値のみ割り当てることができます。そのため、モーションエディターを使用してこのプロパティを編集することはできません。

(A)互いにオーバーレイされたプロパティ曲線(B)現在選択しているプロパティのプロパティ曲線(フォーカスあり)

アンカーポイント

アンカーポイントは、プロパティ曲線をより細かく制御するものであり、曲線の主要部分を明示的に変更するために使用できます。モーションエディターで、プロパティキーフレームまたはアンカーポイントを追加することで、ほとんどの曲線の形を正確に制御できます。

アンカーポイントはグリッド上で四角形として表示されます。モーションエディターを使用してプロパティ曲線にアンカーポイントを追加するか、アンカーポイントの位置を変更することで、トゥイーンの動作を制御できます。アンカーポイントの追加時に、「コーナー」が作成されます。これは曲線内の角の部分です。コントロールポイントに対してベジェコントロールを使用することで、プロパティ曲線の任意のセグメントを滑らかにすることができます。

コントロールポイント

コントロールポイントにより、アンカーポイントの両側のプロパティ曲線を滑らかにしたり変更したりできます。コントロールポイントは、標準のベジェコントロールを使用して変更できます。

プロパティ曲線の編集

トゥイーンのプロパティを編集するには、次の手順を実行します。

  1. Animate CC で、トゥイーンスパンを選択した状態で、右クリックして「トゥイーンを調整」を選択し、モーションエディターを起動します(または選択したトゥイーンスパンをダブルクリックします)。
  2. 下にスクロールし、編集するプロパティを選択します。選択範囲を反転するには、右クリックして「選択範囲を反転」を選択します。
  3. 選択したプロパティのプロパティ曲線が表示されたら、次の任意の操作を実行できます。
    1.  ボタンをクリックし、次にアンカーポイントを追加するプロパティ曲線上の目的のフレームをクリックして、アンカーポイントを追加します。または、アンカーポイントを追加する曲線をダブルクリックします。
    2. グリッド上の目的のフレームにある既存のアンカーポイントを選択して(任意の方向に)移動します。垂直方向の移動は、プロパティの値の範囲に制限されます。
    3. アンカーポイントを選択して Ctrl キーを押しながらクリック(MAC では Command キーを押しながらクリック)して、アンカーポイントを削除します。

コントロールポイントを使用したプロパティ曲線の編集

コントロールポイントを使用してプロパティ曲線を編集するには、次の手順を実行します。

  1. Animate CC で、トゥイーンスパンを選択した状態で、右クリックして「トゥイーンを調整」を選択し、モーションエディターを起動します(または選択したトゥイーンスパンをダブルクリックします)。
  2. 下にスクロールし、編集するプロパティを選択します。選択範囲を反転するには、右クリックして「選択範囲を反転」を選択します。
  3. 選択したプロパティのプロパティ曲線が表示されたら、次の任意の操作を実行できます。
    1.  ボタンをクリックし、次にアンカーポイントを追加するグリッド内の目的のフレームをクリックして、アンカーポイントを追加します。または、アンカーポイントを追加する曲線をダブルクリックします。

      または

    2. グリッド上の既存のアンカーポイントを選択します。
  4. アンカーポイントを選択したら、Alt キーを押しながら垂直にドラッグして、コントロールポイントを有効にします。ベジェコントロールを使用して、コーナーセグメントを滑らかにする曲線の形を変更できます。 

プロパティ曲線のコピー

モーションエディターでは、複数のプロパティ間でプロパティ曲線をコピーすることもできます。

プロパティ曲線をコピーするには、次の手順を実行します。

  1. Animate CC で、トゥイーンスパンを選択した状態で、右クリックして「トゥイーンを調整」を選択し、モーションエディターを起動します(または選択したトゥイーンスパンをダブルクリックします)。
  2. コピーする曲線を持つプロパティを選択し、右クリックして「コピー」を選択するか、Ctrl + C キー(MAC では Command + C キー)を押します。
  3. 絶対値を使用して曲線をペーストするには、コピーしたプロパティ曲線をペーストするプロパティを選択し、右クリックして「ペースト」を選択するか、Ctrl + V キー(MAC では Command + V キー)を押します。
  4. ターゲット曲線の範囲内で曲線をペーストするには、コピーしたプロパティ曲線をペーストするプロパティを選択し、右クリックして「ペーストして現在の範囲に合わせる」を選択します。

プロパティ曲線の反転

プロパティ曲線を反転するには、次の手順を実行します。

  1. モーションエディターで、プロパティを選択します。
  2. 右クリックして「反転」を選択し、プロパティ曲線を反転します。

プリセットとカスタムイージングの適用

イージングによってトゥイーンの速度を制御して、魅力的な効果を持つ、本物のようなモーションを生成できます。モーショントゥイーンに対してイージングを適用することで、アニメーションの開始部と終了部を操作して、より自然なオブジェクトの動きを表現できます。例えば、よくあるイージングの使用例は、オブジェクトのモーションパスの両端に、現実的な加速と減速を追加することです。一言で言えば、Animate CC では、適用されたイージングに応じて、プロパティの値の変化率を変えることができます。

イージングは単純なものも複雑なものあります。Animate には、単純な効果向けにも複雑な効果向けにも適用できる、様々なプリセットイージングが含まれています。また、イージングに強さを割り当てて、トゥイーンの視覚的効果を高めることもできます。モーションエディターでは、独自のカスタムイージング曲線を作成することもできます。

モーションエディターでは複雑なイージング曲線を作成できるので、ステージ上で複雑なモーションパスを作成しなくても、イージング曲線を使用してステージ上で複雑なモーションを作成できます。イージング曲線を使用すると、位置 X と Y などの空間的なプロパティ以外にも、プロパティの複雑なトゥイーンを作成することもできます。

バウンスプリセットイージングで描画された曲線

カスタムイージング

カスタムイージングでは、モーションエディターでカスタムイージング曲線を使用して独自のイージングを作成できます。次に、選択したトゥイーンの任意のプロパティにカスタムイージングを適用できます。

カスタムのイージンググラフは、一定時間内のモーションの度合いを表します。フレームを水平軸によって表し、トゥイーンの変化率を垂直軸によって表します。アニメーション内の開始の値は 0 %です。終了キーフレームには 0 ~ 100 %の値を設定できます。トゥイーンインスタンスの変化率は、グラフの曲線の傾きによって示します。グラフ上に水平線(傾きなし)を作成した場合は速度 0 であり、グラフ上に垂直線を作成した場合は、変化率は一瞬です。

プロパティ曲線へのイージング曲線の適用

トゥイーンプロパティにイージングを適用するには、次の手順を実行します。

  1. モーションエディターで、イージングを適用するプロパティを選択し、「イージングを追加」ボタンをクリックしてイージングパネルを表示します。
  2. イージングパネルで、次の操作を実行できます。
    1. 左側のウィンドウからプリセットを選択して、プリセットイージングを適用します。「イージング」フィールドに値を入力して、イージングの強さを指定します。
    2. 左側のウィンドウで「カスタムイージング」を選択し、イージング曲線を変更することで、カスタムイージングを作成します。詳しくは、カスタムイージング曲線の作成と適用を参照してください。
  3. イージングパネルの外側の任意の場所をクリックして、パネルを閉じます。「イージングを追加」ボタンが、プロパティに適用したイージング名に置き換わります。

カスタムイージング曲線の作成と適用

カスタムイージングを作成してトゥイーンプロパティに適用するには、次の手順を実行します。

  1. モーションエディターで、カスタムイージングを適用するプロパティを選択し、「イージングを追加」ボタンをクリックしてイージングパネルを表示します。
  2. イージングパネルで、次の手順によりデフォルトのカスタムイージング曲線を変更できます。
    1. Alt キーを押しながらクリックして、曲線上にアンカーポイントを追加します。さらに、追加したアンカーポイントをグリッド上の任意のポイントに移動できます。
    2. アンカーポイント上でコントロールポイントを有効にして(Alt キーを押しながらアンカーポイントをクリック)、アンカーポイントの両側の曲線セグメントを滑らかにします。
  3. イージングパネルの外側をクリックして、パネルを閉じます。「イージングを追加」ボタンが「カスタム」に置き換わり、プロパティにカスタムイージングを適用したことが示されます。

イージング曲線のコピー

イージング曲線をコピーするには、次の手順を実行します。

  1. イージングパネルで、コピーするイージング曲線を選択して、Ctrl + C キー(MAC では Command + C キー)を押します。
  2. コピーしたイージング曲線を貼り付けるプロパティを選択して、Ctrl + V キー(MAC では Command + V キー)を押します。

複数のプロパティへのイージングの適用

プリセットまたはカスタムのイージングをプロパティグループに適用できるようになりました。モーションエディターは、プロパティをプロパティグループおよびサブプロパティに階層的に整理します。任意のレベルにイージングを適用できます。つまり、階層内の個別のプロパティやプロパティグループに適用できます。

プロパティグループにイージングを適用した後も、引き続き個々のサブプロパティを編集できます。また、これは、(グループから)サブプロパティに異なるイージングを適用できることを意味します。

複数のプロパティにイージングを適用するには、次の手順を実行します。

  1. モーションエディターで、プロパティグループを選択し、「イージングを追加」ボタンをクリックしてイージングパネルを表示します。
  2. イージングパネルで、プリセットイージングを選択するか、カスタムイージングを作成します。イージングパネルの外側の任意の場所をクリックして、選択したイージングをプロパティパネルに適用します。

結果の曲線

イージング曲線をプロパティ曲線に適用すると、結果の曲線と呼ばれるビジュアルオーバーレイがグリッド上に表示されます。結果の曲線は、プロパティ曲線に適用したイージングの効果を正確に表現したものです。これは、トゥイーンオブジェクトの最終的なアニメーションを示します。結果の曲線により、アニメーションのテスト時にステージに表示される効果がわかりやすくなります。

(A)位置 X プロパティに適用されたバウンスインプリセットイージングの結果の曲線

モーションエディターの表示の制御

モーションエディターでは、編集用に表示するプロパティ曲線、および各プロパティ曲線の表示サイズを制御できます。プロパティ曲線は、大きなサイズで表示するほど編集しやすくなります。

  • 新しいモーションエディターには、トゥイーンに適用されたプロパティのみが表示されます。
  • 表示に合わせるの切り替え()を使用して、モーションエディターをタイムラインの幅に合わせることができます。
  • タイムラインズームコントロールを使用して、モーションエディターのサイズを調整したり、表示するフレーム数を減らす()、または増やす()ことができます。スライダーを使用して、モーションエディターの適切な表示を設定することもできます。
  • モーションエディターには、垂直方向のズームの切り替えも用意されています。垂直方向のズームを使用すると、プロパティ値の適切な範囲をモーションエディター内に表示できます。また、ズームインを使用して、プロパティ曲線にフォーカスを当てたり、より精密な編集を行ったりできます。
  • プロパティは、デフォルトではモーションエディターの左側のウィンドウに開かれますが、プロパティ名をクリックしてドリルダウンリストを折りたたむことができます。

キーボードショートカット

ダブルクリック - アンカーポイントを追加するプロパティ曲線に対して行う操作です。

Alt キーを押しながらドラッグ - コントロールポイントを有効にするアンカーポイントに対して行う操作です。

Alt キーを押しながらドラッグ - 選択したコントロールポイントを操作します(片面編集)。

Alt キーを押しながらクリック - コントロールポイント(コーナーポイント)を無効にするアンカーポイントに対して行う操作です。

Shift キーを押しながらドラッグ - 直線方向にアンカーポイントを移動します。

Command/Ctrl キーを押しながらクリック - アンカーポイントを削除します。

上向き/下向き矢印キー - 選択したアンカーポイントを垂直方向に移動します。

Command/Ctrl + C/V キー - 選択した曲線をコピーするか、または貼り付けます。

Command/Control + R キー - 選択した曲線を反転します。

Command/Control キーを押しながらスクロール - ズームイン/ズームアウトします。

アドビのロゴ

アカウントにログイン