「Adobe Flash CS4」でオブジェクトベースアニメーションを実際に作る!(その1)

図形をモーショントゥイーン

アニメーション制作の練習をとして、矩形ツールを用いて四角形を描いてみよう。

まず四角形をステージの左上から出たすこし外側に描画する。このとき、ステージの外側が見えない場合は、「表示」の「ペーストボード」にチェックを入れる(以前はワークエリアなどと呼ばれていた)。ステージの外側がグレーで表示されていればOKだ。

次に図形を右クリック(Macでは、Controlキー+マウスクリック)してコンテキストメニューから一番上の「モーショントゥイーンを作成」を選択する。もし、タイムラインが見えていれば、24フレームまで延びるのがわかるだろう。これは、デフォルトのfps設定値、24fpsの1秒分だけフレームが追加されたことになる。この操作では、fpsを変えても、1秒分に換算されるフレーム分が追加されることになる。fpsは、ドキュメントのプロパティパネルで「フレームレート」の値を変更する。

「トゥイーン用に選択項目をシンボルに変換」アラートが出るが、ここでは同時に四角形をシンボルにするので「OK」をクリックする。

すると、24フレームが挿入された状態になるはずだ。

ステージの左上・外側にある図形をステージ右・外側までドラッグする。すると、ドットのたくさんついた「モーションパス」がレイヤーのアウトラインの色で表示される。ドットのひとつひとつはキーフレームに相当しているので、24フレームあると、24個のドットができるはずだ。つまり、24分の1秒後に、2個目のドットの位置に移動することを示す。1個目は、アニメーションの開始点であり、24個目はアニメーションの終了点になる。

次は、右にいった図形を左の少し下に戻したいが、図形をドラッグしても、右クリックしても、アニメーションを追加できない。アニメーションを延ばすために、タイムラインを使用する。

タイムラインとは、時間が左から右へ経過するにつれて、どういうフレームを表示するのかを示したもの。1マスが1フレームとなっており、現在はモーショントゥイーンを設定したので、トゥイーンスパンとなっており、青色で塗りつぶされている状態だ。フレームの示す時間の長さは、Flashドキュメントのfpsの値によって異なる。今回は24fpsなので、24分の1秒が1フレームの時間を表している。縦の赤い線の上にある赤い四角を再生ヘッドと呼び、現在のステージの状況と連動している(現在、再生ヘッドは最終フレームにあるはずだが、もしなければ、再生ヘッドをドラッグしておく)。トゥイーンスパンは、24フレーム目以降は何もない。そこで時間を足すためにフレームを追加しよう。

タイムラインの48(=24+24)フレーム目を右クリック(Macでは、Controlキー+マウスクリック)して「フレームの挿入」を選択する。すると48フレーム目までトゥイーンスパンが延び、同時に再生ヘッドも最終フレームまで来る。

次に、トゥイーンスパンが延長されたので、再生ヘッドを最終フレームに移動させてから、ステージ上の図形をドラッグする。これで、左に戻ってきた。

さらに、右に行きたいので、また72(=48+24)フレーム目まで、フレームを挿入し、図形を右にドラッグする。同様に、繰り返して、図形が左右を行き来して下に来るようなモーションパスを作成する。

この一覧のジグザクな動きを繰り返して、右下に到着するように作る。

ここまで制作したら一度保存し、プレビューしてみよう。プレビューは「制御」の中の「ムービープレビュー」で観ることが可能だ。このチュートリアルの一番最初に見た「左から右、右から左へ図形が移動する」アニメーションが出来ただろうか。

後編では、今回制作したアニメーションの図形を、実際のキャラクターに置き替えてみよう。