「モーションガイド」を使ってオブジェクトを自由に移動させよう

「モーションガイド」とは?

通常のモーショントゥイーンでは、開始フレームと最終フレームの間を、オブジェクトが最短距離を通って直線的に移動します。
しかしこの機能だけだと、なめらかなカーブを描いた動きをさせたい時などには不便です。
そこで、モーションパス(鉛筆ツールやペンツールで描いた線の事)に沿ってオブジェクトを移動させる事が出来る便利な機能もあります。

下の Flash アニメーションを見てみましょう。
2台のF-1カーが壮絶なバトルを繰り広げています。同じフェラーリチームでありながら、セナとプロストがダブルリタイアとなったあの鈴鹿での伝説を思い出す方も多いのではないでしょうか。
この凄まじい迫力のアニメーションは、1台の車に1つのモーショントゥイーンしか設定していません。
つまり合計2つのモーショントゥイーンのみで動いています。

このような動きを設定するためには、あらかじめ独立した特殊なレイヤーに、オブジェクトを動かすための道筋を「線」で描きます。
その線の両端にオブジェクトを設置し、モーショントゥイーンを設定する事で、線に沿って動くアニメーションが出来るという仕組みです。
この、オブジェクトを沿わせるための線の事を「モーションパス」と言い、モーションパスを描いている独立した特殊なレイヤーのことを「モーションガイドレイヤー」と言います。

それでは、「モーションパス」と「モーションガイドレイヤー」の作成方法について、上の Flash アニメーションを例にして詳しく説明していきたいと思います。

「モーションパス」の描画方法

まず、背景用のレイヤーにコース(道路)のイラストが配置してあり、その上に車をインスタンスとして配置してあるレイヤーがあります。
(この fla ファイルでは、車を「ムービークリップ」にして、タイヤが回転しているようなアニメーションを作っていますが、小さすぎて見えないので気にしないでください。「グラフィック」シンボルでももちろん動きます)
これらのレイヤーとは別に新規でレイヤーを作り、ツールボックスから「鉛筆ツール」か「ペンツール」を選択します。
「鉛筆ツール」の場合は直接ドラッグで、「ペンツール」の場合はベジェ曲線で、車が走っていく道筋を「線」で描いていきます。
この時、線のスタート地点とゴール地点がくっついて、ループ状態にならないように注意して下さい。
必ずわずかでも隙間を開けて、オブジェクトが動き始める地点と動き終わる地点が明確にわかるように描きます。
「鉛筆ツール」で線を描く場合は、途中で一旦描くのを止めて、一呼吸置いた後にもう一度同じ場所から描き始めても、繋がった1本の線として認識されるので安心です。
さぁ、これで「モーションパス」の元の完成です。線を微調整したい時は、「ダイレクト選択ツール」で線上にあるパスを直接ドラッグして動かしましょう。
「モーションパス」と言うと名前は難しそうですが、要するにオブジェクトの通り道を描いた線です。
ただし、今の状態では本当にただのオブジェクトとしての線なので、今からこの「線」を描いたレイヤーと「車」が置いてあるレイヤーを関連付けなければならないわけです…

「モーションガイドレイヤー」の作成方法

今のところ、オブジェクトの通り道である「線」を描いたレイヤーはただのレイヤーです。このレイヤーを「モーションガイドレイヤー」に変換します。
変換方法は超カンタン。「線」を描いたレイヤーのタイトル部分を右クリックし、表示されるメニューから「ガイド」をクリックするだけです。
レイヤーの見出しに変なアイコンが表示され、「モーションガイドレイヤー」になった事を表わします。
あとは、「車」が置いてあるレイヤーをドラッグして、「モーションガイドレイヤー」の中にドロップしてみましょう。
「車」のレイヤーが「モーションガイドレイヤー」の中に入り、レイヤーのタイトルも通常のレイヤーよりも右にずれて表示され、ガイドの対象レイヤーとなった事がわかります。
あとは、車が置いてあるレイヤーにモーショントゥイーンを設定し、動き始めのフレームと動き終わりのフレームで、それぞれオブジェクトを「モーションパス」の上に配置するだけです。
オブジェクトを「モーションパス」の上に配置する際は、オブジェクトの基準点が、近くのパスにシュポッと吸着されます。
アニメーションを再生させると、「モーションパス」に沿ってオブジェクトが移動していることを確認出来るはずです。
また、今の状態だと、オブジェクトは常に一方向を向いたまま移動します。これでは車の動きとしては違和感ありありです。
その場合は、モーショントゥイーンが設定されているフレームのうち適当なフレームを選択し、「プロパティインスペクタ」を開いて、「パスに沿って回転」項目にチェックを入れます。
これにより、オブジェクトが「モーションパス」に沿って、向きを変えながら移動するアニメーションが出来ました。

「モーションガイドレイヤー」を作成する方法は、上記の方法以外にもあります。
レイヤーを作成する際に、対象となるレイヤー(車のレイヤー)を選択した状態で、右クリックから「モーションガイドを追加」をクリックするか、「レイヤーの追加」ボタンの隣にある「モーションガイドの追加」ボタンをクリックすると、すでに対象となるレイヤーに関連付けられた「モーションガイドレイヤー」をいきなり作成する事が出来ます。

モーションガイドを使用したモーショントゥイーンに、「回転」「イージング」などの他の機能を組み合わせたアニメーションを作る事ももちろん可能です。
また、「モーションガイドレイヤー」の中にいくつかのレイヤーを入れる事で、複数のオブジェクトを同一のパス上で動かすことも出来ます。この機能により、例えば曲がりくねった線路の上を走る電車のアニメーションを作る場合、電車を1輌作るだけで、その後に何輌も連結された長い電車のアニメーションを簡単に作成する事が出来ます。

「モーションパス」は、レイヤーを非表示にしない限り、flaファイルの編集中は見えています。
しかし、上の Flash アニメーションのように、swf ファイルにパブリッシュした際には一切見えなくなりますので、安心して下さい。