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

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

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

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

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

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

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

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

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

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

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