Edge Animate入門 第6回:モーションパスを使ったアニメーション

by Adobe Comms

Posted on 09-02-2013

Adobe Edge Animate CC(以下、「Edge Animate」)では、「モーションパス」機能を使って、曲線上を滑らかに移動するアニメーションを作成できます。本記事では、モーションパス機能の使い方を紹介します。

Edge Animate CC の体験版をダウンロード サンプルファイルをダウンロード

モーションパスの追加

モーションパス使ってアニメーションを作成する手順は以下の通りです。

  1. アニメーションを付けたいエレメントを選択します。
  2. [プロパティ]パネルの[位置とサイズ]欄にある[モーションパス]ラジオボタンを選択します。

 図1 [モーションパス]ラジオボタンを選択します

  1. この状態でキーフレームやピンツールを使って、アニメーションを作成します。アニメーションの作成方法は「エレメントのアニメーション」を参考にしてください。
  2. ステージ上にエレメントの軌跡のパスであるモーションパスが表示されます。

 図2 エレメントの動きの軌跡を示すモーションパスが表示されます

なお、モーションパスはエレメントの中心点の軌跡となります。

※Edge Animateのバージョン2.0.0の時点では、モーションパスは、基準点が「左上」のエレメントに対してしか適用できません。[モーションパス]ラジオボタンが選択できない場合には、基準点をチェックしてみましょう。

モーションパスの編集

モーションパスは編集することができます。

アンカーポイントの作成

モーションパス上の任意の位置にマウスカーソルを近づけると、カーソルが

の状態になります。この状態でクリックすると「アンカーポイント」と呼ばれる基準点が作成され、さらにマウスをドラッグすると、その方向に引っ張られるようにモーションパスが曲線となります。エレメントはこのモーションパスに沿って移動します。

 図3 カーソルが図の状態でクリックすると、アンカーポイントが作成され、さらにマウスをドラッグするとモーションパスが曲線となります

また、[プロパティ]パネルの[位置とサイズ]欄にある[自動回転]チェックボックスをオンにすると、モーションパスの曲がり具合に応じてエレメントが回転するアニメーションとなります。

 図4 [自動回転]チェックボックスをオンにすると、モーションパスの曲がり具合に応じてエレメントが回転します

アンカーポイントは、1つのアニメーションスパン内に複数作成することもできます。アンカーポイントを削除したい場合は、[ctrl](Mac OSはcommand)キーを押しながらアンカーポイント付近へマウスカーソルを近づけ、カーソルが

の状態になった時点でクリックします。

曲線の曲がり具合を調整

アンカーポイントをクリックすると、2つの「ハンドル」が表示されます。このハンドルをドラッグすると、曲線の曲がり具合を調整できます。また、アンカーポイント自体をドラッグすると、アンカーポイントの位置を調整できます。

 図5 ハンドルをドラッグすると、曲線の曲がり具合を調整できます(サンプル:sample.an)

2つのハンドルは、曲線が滑らかになるよう、片方を動かすともう片方もアンカーポイントを経由する直線上の位置へと連動して動きます。ハンドルを個別に動かしたい場合は、[alt](Mac OSはoption)キーを押しながらハンドルをドラッグします。

 図6 ハンドルを個別に動かす場合は、[alt](Mac OSはoption)キーを押しながらハンドルをドラッグします(サンプル:sample2.an)

ハンドル位置の編集をリセットしたい場合は、[alt](Mac OSはoption)キーを押しながらアンカーポイントをクリックします。すると、ハンドルが削除され、鋭角な直線状態となります。このままマウスをド ラッグすると、あらためてハンドルが作成され、位置の再調整ができるようになります。

エレメントをドラッグしてモーションパスを編集

モーションパスを編集する場合、モーションパス自体をカーソルで操作して編集する方法以外にも、対象エレメントをドラッグして編集する方法が用意されています。

  1. 再生ヘッドを、モーションパスのアメーションスパン内でアンカーポイントを作成したい位置に移動します。
  2. ステージ上のエレメントの位置を変更します。
  3. エレメントの移動に応じてモーションパスが変化します。

 図7 エレメントをドラッグしてモーションパスを編集する方法

また、この方法でモーションパスを編集すると、タイムライン上のエレメントを移動した位置に、キーフレームが作成されます。このキーフレームが不要な場合 は、クリックして選択し、[Delete]キーで削除できます。キーフレームを削除しても、モーションパスのアンカーポイントは削除されずにそのままの状 態を保ちます。

 図8 キーフレームが作成されるので、不要であれば削除します

Topics: クリエイティブ

Products: