![[女の子の分解]](../images/bunkai.gif)
僕のお絵かき計画 > Flash 大作戦 > アニメーションの基本「フレームアニメーション」
前回説明した「トゥイーン」によるアニメーション。シンボル化したオブジェクトを、指定したコマからコマへと自動で動かしてくれる、簡単で便利な機能でした。でも、歩いているというよりも滑っている、という感じにしかなりませんでした。
今回は、女の子を歩いているように見せるための手法、アニメーションの基本でもある「フレームアニメーション」を説明しようと思います。
さて、フレームアニメーションというとなにやら難しく感じてしまいがちですが、簡単にいうと「ぱらぱら漫画」のことです。少しずつ違う絵を次々とめくっていくと動いているように見える、それを今回はやろうというわけです。
けれど、動きを持ったアニメーションなら、「トゥイーン」を使ったほうがやりやすい。ということで、もちろん最終的に女の子の移動は「トゥイーン」で行うことを前提に、説明していくつもりです。
Flash の画面には、下に絵を描く画面（そのフレームの内容）、上の方にはそれらフレームの流れを示すタイムラインがあることは前回にいいました。そのタイムラインにフレームを挿入することが、アニメーションの第一歩目で、これで複数コマにわたるアニメーションが出来るわけです。でも、そうやって作ったばかりのフレームは中身がまだ入っていないので、最初のフレームの内容が引き続いて表示されます。これではアニメーションになりません
Flash では、この内容の入っているフレームのことを「キーフレーム」、内容の入っていないフレームを「空白フレーム」といいます。だからキーフレームが二つ以上あってはじめて、アニメーションが成立するのです。
キーフレームを挿入して、その二つのキーフレームに配置された同じシンボルをトゥイーンでつないだのが前回。今回はそのシンボルに動きをつけようというのです。
シンボルに動きをつけるのは、その方が楽だからです。トゥイーンを使わずに、何枚もの絵を直接、各キーフレームに配置していくことも出来ますが、それだと後で修正したりするのも大変だし、トゥイーンの持つ、様々な便利な機能を使えないことになります。
では、シンボルを編集しましょう。前回の続きということで、すでに女の子のシンボルが出来ています。編集メニューから「シンボルを編集」を選ぶと、その女の子のシンボルを編集することが出来るようになります。
実はシンボルだけでもアニメーションすることは可能なのです。シンボル編集の画面も、さっきまでの画面と変わりありません。右の方にシンボル名のかかれたタグがあって、押すとムービー編集画面に戻れる上向き矢印があるくらいです。
アニメーションをさせるわけですから、タイムラインからフレームを挿入し、キーフレームも挿入します。
以前、女の子の絵を描いたとき、「動かすことが前提なので、帽子、髪、顔、体、リボン、手、脚のそれぞれをグループ化し、それらオブジェクトを組み合わせています。」といっていました。女の子を、グループ化したオブジェクトごとにばらばらにして見せたこともありました。
それが、今回になって生きてきます。
キーフレームを挿入して、以前の立ち姿だった女の子を歩いているように見せます。具体的には、手と足を前後に降り出したように動かすのです。
Flash ではオブジェクトを回転させることが出来ますので、ちょうどいい感じになるように腕と脚を回転させて、それぞれ配置しましょう。
一コマ目が立ち姿だったので、二コマ目は右足を前にした歩き姿。でも、これは僕の絵の問題なのですが、右足と左足を前後に広げると、どちら側の足が右か左か分からなくなってしまったので、止むに止まれずコマ数を増やすことにしました。具体的には、立ち姿と歩き姿の中間の絵を作成したのです。これを立ち姿と歩き姿の間にはさみました。
この後、左足を前にした歩き姿と、その中間の絵を作ります。もちろん、それぞれを関係なしに作るのではなくて、ひとつのシンボルのタイムラインに沿って、一コマずつキーフレームを作成しながら作っていくんですよ。
結局、女の子の歩いている感じを出すために、僕は9フレーム使いました。絵のバリエーションは六つです。下に整理してみましょう。
この絵を、一覧できるように並べてみました。くれぐれもいいますが、この六枚の絵が、タイムラインにしたがって、九枚のフレームに書かれているわけです。
このようにして作ったシンボルを実際に動かしてみましょう。ウインドウメニューから「ライブラリ」を選ぶと、ライブラリのパレットが出てきます。パレットには女の子の絵が表示されていて、パレットの上部にいくつかのボタンがあります。そのうちの、右向き三角のボタンを押すと女の子が歩いているように見えると思います。女の子はその場にとどまっているので、実際には足踏みしているだけですけど。
その女の子の足踏みのムービーを書き出してみました。例によってひとつはショックウェーブフラッシュ、もうひとつはアニメーションGIFで書き出しています。
![[女の子、足踏み]](../images/elementgs.gif)
この足踏みする女の子がシンボルであるところに着目してください。つまり、この足踏みする女の子のシンボルをトゥイーンと組みあわせると…… もう分かっていただけましたね。
以前、女の子歩く！ で紹介した、女の子が左から右に向かって歩いていくアニメーションが出来る、というわけです。
アニメーションするシンボルとトゥイーン組みあわせてムービーを作っていくのが、Flash のアニメーションの基本になります。
次回からは、この女の子のアニメーションにいろいろな要素を付け加えていきたいと考えています。オリンピックを観るのが忙しいので少々遅れ気味になるかと思いますが、出来るだけはやいうちに公開できるようにしたいと思っています。
続く！
![[女の子歩く、フレーム一覧]](../images/elements.gif)
各フレームの内容を一望できるようにしました