《#16》 前進するアニメーション

Digicon Magazine読者のみなさんこんにちは、ななきちです。

前回のレッスンで制作した、シェイプ内にボーンを埋め込んだ尺取り虫のサンプルをもとに、アニメーションを作成していきます。

モーショントゥイーンの応用になります。

目次

• ボーンツールで作ったモーショントゥイーンの確認
• 背景を動かすモーショントゥイーンアニメーション
• 頭を動かすモーショントゥイーン

今回の完成例です。シェイプボーンを埋め込んだ体がくねくねと曲がり、それに合わせて頭を動かし、尺取り虫が前進していくよう見えるように、アニメーションを作ります。

びゅんびゅんと進んでいくアニメーションを作りましょう。

ボーンツールで作ったモーショントゥイーンの確認

まず、サンプルファイルをダウンロードし、その中の「walk_03.fla」を開いてスタートしましょう。

このファイルは、前回のレッスンで尺取り虫にシェイプボーンを埋め込んだFlashムービーに、少し加工を加えています。加工したポイントは2つ。
まず、背景にある雲のイラストを、新しいレイヤーに配置してあります。これはあとで、アニメーションが作りやすくなるためです。

また、タイムラインを15フレーム目まで延長し、ボーンツールを入れた尺取り虫も、アニメーションを作成してあります（このアニメーションの作り方は、「《#14》 ボーンツール（4）」で紹介している流れと同様です）。

 

「walk_03.fla」との状態。15フレームあるアニメーションファイルになっています。これまでに紹介したスキルで作成できる準備だと思います。

「walk_03.fla」を開き、Enterキーを押して再生、またまCtrl＋Enterキーでパブリッシュプレビューを実行すると、尺取り虫の胴体がくねくねと動いていくのがわかります。

 

walk_03.flaを再生した状態

背景を動かすモーショントゥイーンアニメーション

次に、前に進んでいくようなアニメーションをつくりましょう。背景の雲を左から右に流れるようにしましょう。

とても単純なことですが、こうすることで、尺取り虫が前進しているように見せることができます。

「cloud」レイヤーの１フレームを選択しておきます。メニューバーの「挿入―モーショントゥイーン」を選択します。

 

「cloud」レイヤーの1フレーム目を選択しておきます。

 

［挿入ーモーショントゥイーン］を選択

図の様なアラートのダイアログが表示されますので、［OK］をクリックします。

 

［OK］をクリック

 

「cloud」レイヤーの1フレーム目の雲のオブジェクトをドラッグして、ステージの外側左端に持っていきます。

雲のオブジェクトをステージの外側へ。するとムービーの最初の部分では雲は見えません。

 

ステージの外側が見えず、作業がしづらいときは、画面右上の表示倍率のポップアップで縮小表示にすると、ステージの外側まで表示され、作業しやすくなります。

ステージの外側が見えない場合は、画面を縮小表示します。

「cloud」レイヤーの15フレーム目をクリックして表示します。

15フレーム目をクリック

今度は、雲のオブジェクトをドラッグして、右端にもっていきます。このとき、雲は水平に動かすようにしましょう。

 

Enterキーを押してムービーを再生してみると、背景が動くことで、尺取り虫が前進しているようなアニメーションになります！

 

walk_03.flaの再生した状態

 

 

頭を動かすモーショントゥイーン

最後の仕上げをしましょう。

いまのままでは、まだちょっと不自然な気がします。それは、尺取り虫の胴体は動いているのに、頭が動いていないからです。
そこで、モーショントゥーインを使って5フレームごとに頭の位置を設定し、動かしていきます。

「head」レイヤーの１フレーム目をクリックして選択します。

「head」レイヤーをクリック

 

メニューバーから［挿入ーモーショントゥーイン］を選択します。

 

「cloud」レイヤーと同じく、図の様なアラートのダイアログが表示されますので、［OK］をクリックします。

［OK］をクリック

タイムラインで「head」レイヤーの5フレーム目をクリックしておきます。

 

頭を回転させるために、［変形］ツールを選択します。

［変形］ツールを選択

 

頭のオブジェクトを回転させます。その際に、中心点を注意して下さい。

ドラッグして○を回転の中心にする場所へ移動します。

 

四隅へカーソルを移動し、ドラッグすれば回転できます。5フレーム目はこのような角度です。

 

同じ様に10フレーム目で、下図のように回転します。

10フレーム目では、左に傾けました。

 

15フレーム目にも、頭の動きを設定します。

15フレーム目。まっすぐに戻すことで１フレーム目と繋がったときに自然な動きになります。

 

以上を設定し、Ctrl＋Enterキーでプレビューすると、最初に紹介したような、スームーズに尺取り虫が動いていくアニメーションになります。

いかがでしたか？ 次回は、これまで作ってきたアニメーションを通じて学んだ知識のおさらいをする予定です。

では、次回！