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

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

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

モーションパスの追加

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

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

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

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

図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）キーを押しながらアンカーポイントをクリックします。すると、ハンドルが削除され、鋭角な直線状態となります。このままマウスをドラッグすると、あらためてハンドルが作成され、位置の再調整ができるようになります。

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

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

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

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

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

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