Animate を使用したモーショントゥイーンの編集

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

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

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

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

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

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

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

この記事では、モーショントゥイーンを既に作成済みで、モーショントゥイーンを使用してトゥイーンを調整しようとしていることを前提としています。

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

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

プロパティ曲線

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

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

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

アンカーポイント

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

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

コントロールポイント

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

プロパティ曲線の編集

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

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

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

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

Animate で、トゥイーンスパンを選択した状態で、右クリックして「トゥイーンを調整」を選択し、モーションエディターを起動します（または、選択したトゥイーンスパンをダブルクリックします）。
下にスクロールし、編集するプロパティを選択します。選択範囲を反転するには、右クリックして「選択範囲を反転」を選択します。
選択したプロパティのプロパティ曲線が表示されたら、次の任意の操作を実行できます。
1. ボタンをクリックし、次にアンカーポイントを追加するグリッド内の目的のフレームをクリックして、アンカーポイントを追加します。または、アンカーポイントを追加する曲線をダブルクリックします。
  
  または
2. グリッド上の既存のアンカーポイントを選択します。
アンカーポイントを選択したら、Alt キーを押しながら垂直にドラッグして、コントロールポイントを有効にします。ベジェコントロールを使用して、コーナーセグメントを滑らかにする曲線の形を変更できます。

プロパティ曲線のコピー

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

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

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

プロパティ曲線の反転

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

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

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

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

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

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

カスタムイージング

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

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

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

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

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

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

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

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

イージング曲線のコピー

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

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

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

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

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

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

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

結果の曲線

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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