モーショントゥイーンとムービークリップを活用する(後半)

「FLash CS4」体験版ダウンロードはこちらから
「Adobe CS4」購入はこちらから

アニメーションを作る2つの方法

今回は、下のサンプル動画のようなアニメーションを作成していく。

このアニメーションを作成するには、「トゥイーンスパンをキーフレームで分割する」、(2)「フレームを追加する」、というふた通りの方法がある。どちらの方法が正解というわけではないので、自分に合う方法を選択するといいだろう。それでは、ふたつのアニメーション作成方法を紹介していこう。

(1)「トゥイーンスパンをキーフレームで分割する」で作成

トゥイーンスパンとは、タイムラインで次の図の様に表示されている一覧のモーショントゥイーンの繋がったフレームのことだ。

タイムラインを見ると、現在のキーフレームは2カ所。始点である左上と終点である右下だ。四辺に沿って移動するには、キーフレームが始点→右上→右下→左下→左上(終点)とならなくてはいけない。そこで、現在のトゥイーンスパンにキーフレームを挿入して、それぞれの位置を左上から、右上、右下、左下、左上(終点)となるように設定していく。キーフレームを挿入するもっとも早い方法は、挿入したいフレームを表示(タイムラインの数値をクリック)して、ステージ上のトゥイーンオブジェクトをドラッグすることだ。

現在のアニメーションは、左上から右下に斜め移動しているが、タイムラインにあるモーショントゥイーンスパンを1連の動作と考えると、4分の1のところで右上、4分の2のところで右下、4分の3のところで左下、4分の4、つまり5つ目のキーフレーム(終点)で左上に戻るようにすれば良い。この手順は以下の手順で確認して欲しい。

この手順で操作すると、下図のようになるはずだ。何フレーム目にキーフレームがあるかは、まだ、気にしなくてよい。

これをムービープレビューしてみよう。下の動画のように、せわしなくパクパクキャラが画面内を1周するはずだ。とりあえずできたが、アニメーションとしては、動きも速すぎて不自然に感じられる。

この動画のように、パクパクキャラがせわしなく動きまわる原因は、トゥイーンスパンの長さにある。ここで、タイムラインに注目してみよう。タイムラインは24フレームで終了している。これは、そのトゥイーンスパンが24fps＝このムービーの場合1秒で終了を意味している。そこで全体の長さが4秒くらいになるように、キーフレームの間を延ばして行こう。

フレームを延ばすには、フレームの挿入だ。タイムラインで挿入したい位置のフレームをCtrlキーを押しながらクリックし、F5キーを押そう。逆にフレームを削除するときは、Shiftキー+F5キーを押す。

この操作をして、すべてのキーフレームの間隔をだいたい均等に延ばす。そうしないと、ある区間だけが非常にゆっくりだったり、その逆にとても速くなる現象が出てしまうので注意しよう。フレームの挿入と削除で調整すると下図のようになるはずだ。

しかし、まだ、ムービープレビューしてみても、最初に見たサンプル動画と同じ動きではない。

「パスに沿って回転」オプション

実際にパクパクキャラが下に移動するときは、90度回転しているし、右下から左下へ移動するときは左向きになっている。しかし、この時点では、まだパクパクキャラは下の動画のように、右を向いてパクパクと動くだけの状態だ。

Flashでは、この部分の修正は非常に簡単だ。まずは、タイムラインのトゥイーンスパンをクリック選択して、プロパティパネルを見よう。すると、モーショントゥイーンの設定がある。この中に「パスに沿って回転」というチェックボックスがあるので、それをチェックしよう。チェックすると、トゥイーンスパンの全フレームに黒丸が入り、キーフレームになる。

最後にムービープレビューをして、下の動画のような動きになっていればOKだ。

(2)「フレームを追加する」で作成

1つのトゥイーンスパンを分割していき、最後にフレームを追加するという方法に対して、この方法では、トゥイーンスパンを追加していく。つまり1つのトゥイーンスパンで、1辺の移動を表現していると考え、それを辺の数だけ作れば、辺に沿って移動するアニメーションになるという発想だ。

まず、現在の左上から右下へ移動しているモーショントゥイーンの終点を右下から右上に変更する。これには、24フレーム目のパクパクキャラクタをドラッグ&ドロップで右上に移動させれば良い。

次に新たなトゥイーンスパンを追加するのだが、それには、タイムラインで30フレームあたり(※24フレームの右であればどこでも良い)を右クリックして「フレームの挿入」を実行する。すると、終点をキーフレームとして、トゥイーンスパンが延長される。延長されたら、オブジェクトをドラッグして正しい位置に移動させる。この手順を繰り返せば始点→右上→右下→左下→左上(終点)用にキーフレームが作れる。写真の手順を参考に作ってみてほしい。

この時点では、まだ各フレームの長さが均等ではないと思うので、Ctrlキー＋トゥイーンスパンのクリックで1フレームだけ選択した後、F5キー、またはShiftキー+F5キーでフレームの長さを調整しよう。

フレームの長さを調整したら、モーショントゥイーンのプロパティで「パスに沿って回転」にチェックを入れて、ムービープレビューで動きを確認すれば完成だ。

まとめ

今回は、トゥイーンスパンの操作方法を紹介した。基本は、Ctrlキーを押しながら1フレームを選択することからはじまる。Ctrlキーを押さないと、トゥイーンスパン全体を選択してしまうので、注意しよう。その後、トゥイーンスパンを右クリックして出るメニューはすべて実行できるので、このCtrlキーから始まる一連の動作を覚えておくと良いだろう。 今回は、2つの異なるアプローチを紹介した。操作方法はこのサンプルファイルも参考にして欲しい。

このようにFlashのタイムラインの作り方にはいろんな方法があるので、どれが正解かというのは難しい。逆に言えば、結果は同じなのだから、自分のやり易いように作るのがベストだろう。次回からは、もうひとつのアニメーションパーツである「グラフィックシンボル」と「テキスト」を使って別のムービーを作っていこう。

伊藤のりゆき(NORI)
有限会社トゴル・カンパニー代表。オーサリングエンジニアとしてFlashとMovable Typeでの制作を中心に活動。ロクナナワーク ショップ講師、アックゼロヨン審査員、ライターとしてFlash関連書籍や雑誌記事の執筆を行うなど、幅広く活動している。また、写真家としての顔も持つ。フォトブログ「Snap || Nothing」はこちら。