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

前回、モーショントゥイーンを使用してアニメーションを作成したが、これは静止画が移動しているだけのシンプルなものだったので、今回は、オブジェクトをさらに細かく動かし、緻密なアニメーションを制作してみたい。

ムービークリップ内のアニメーション

まずは、前回のアニメーションを作成したときのFlaファイルを開いてほしい。1フレーム目で、オブジェクト(仮にパクパクキャラと呼ぶ)はステージの左上にある。このオブジェクトをクリックすると「ムービークリップ」であることがプロパティパネルで確認できる(図1)。このムービークリップは、Flashでアニメーションを作成する上で基本となる単位だが、ここではとりあえず、Flashでアニメーションを構成する単位と覚えておこう。ステージの上で、このオブジェクトをダブルクリックする(または、右クリック＞その位置で編集)と、ムービークリップの編集画面に入る(図2)。

図1:プロパティパネルで確認したムービークリップ

図2:ムービークリップの編集を実行

ここでは、まだ1フレームしかないが、ここに2フレーム以降を作成すれば、ムービークリップは自動的にアニメーションするオブジェクトとなり、ステージの上では、パクパクキャラがパクパクと変化しながら、移動する。

次に、2フレーム目以降を作成しよう。まずは、1フレーム目を選択してF6キーを押す。ここで作成したいアニメーションは、前々回の最後に作成したパクパクするアニメーションと似ている。前々回はクチバシを作ったが、今回はクチバシを無くして丸くする方法を紹介している。作り方は、下の画像を参考にして欲しい。

図1:クチバシの上の線を選択し、Deleteキーで削除

図2:クチバシの凹みを無くすようにドラッグ(図3の形になるようにする)

図3:クチバシがあった部分が、直線で埋まる

図4:線を選択状態にする

図5:ツールパネルのストレートツールをクリックする

図6:直線が曲線になる

図7:2フレームをCtrl＋右クリック＞フレームを挿入して、アニメーションの長さを調整する

図8:アニメーションの調整が終わったムービークリップ

このような手順で制作すると、全6フレームで、3フレーム目にキーフレームがあり、その前後の違いは円の一部が欠けているかどうかだけとなる。これでパクパクするアニメーションになるはずだ。

ムービークリップのアニメーションを作成したら、ステージの編集画面に戻り、タイムラインヘッダ(タイムラインでもフレーム番号が書いてあるヘッダ部分)を左右にドラッグしてみよう。通常は、タイムラインヘッダをドラッグすれば、アニメーションが確認できるのだが、先ほど作成したパクパクするアニメーションは、再生できない。ムービークリップは、ムービープレビューでないと正しく再生されない。ムービープレビューすると、下のような動画が見えるはずだ。

サンプル動画

このサンプルでは、ステージのある一番上の階層も、ひとつのムービークリップとなっている。ムービークリップの中には、別のムービークリップを入れることが可能なのだ。これにより、シンプルでも、複雑に見える動きのアニメーションを作成することもできる。また、その様子がムービープレビューでしか確認できないことも覚えておくとよいだろう。次回は、ふたつの異なる方法で、さらにモーショントゥイーンを学んでいく。

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