一番簡単なアニメーション「トゥイーン」

　前回でついに歩き出した女の子、今回から数回にわたって、女の子を歩かせるのにようした操作を、少しずつ説明していきたいと思います。

　今回は、Flash でのアニメーションの基本になる、「トゥイーン」について説明します。

　アニメーションというのが、少しずつ違う絵を次々とめくっていくことによって、あたかも絵が動いているように見せる技法であることは、もう皆さんご存知のことだと思います。だとしたら、前回（女の子歩く！）公開したアニメーションを作るには、何枚も絵を描かなければならなかったはず、と思ったりしますが、実はそれほど多く、絵のバリエーションを用意したわけではありません。

　実際に使った絵のパターンは六種類でした。しかしそのパターンというのは、女の子の手と足が交互に出ているように見せるためのもので、実際に女の子が左から右に移動するだけならば、一種類の絵があればそれで充分なのでした。

トゥイーンって？

　トゥイーンを一言で説明するのは結構難しいので、具体的な例をあげて説明したいと思います。

　女の子が左から右に移動するアニメーションを作ると考えてください。そのために、女の子の絵を用意しました。それが下の絵です。

　左端に寄っているのは、これからこの子を右に動かすためで、つまり今女の子がいる場所が、スタート地点になります。それを、画面の右端まで動かすわけです。

　下の絵を見てください。この絵の女の子がいる場所を、終点にしましょう。

　この二枚の絵を交互にめくるだけだと、女の子が左から右に瞬間移動したようにしか見えないので、この二枚の絵の間を埋める、何枚もの絵が必要になってきます。

　トゥイーンという機能は、その間を埋める絵を描かなくても、Flash が自動で埋めてくれるという、実に便利な機能なのです。

トゥイーンのために絵をシンボル化します

　トゥイーンの機能を使うには、左端の女の子と右端の女の子が、同じものでなくてはなりません。同じものというのは、まったく同じ絵ということをいうのではなくて、ひとつの素材であるということです。

　コピーして貼り付けても、Flashのソフトは違う絵として認識します。そのため、一枚目の絵の時点で、この女の子の絵をシンボルとして登録しておいてやらなければならないのです。

　絵をシンボルにするのは簡単です。一つ目の絵の、女の子のオブジェクトを選択して、「挿入」メニューから「シンボルを作成」を選べば、オブジェクトはシンボルとして、Flash のライブラリに登録されます。

　オブジェクトをシンボルにすることによって、Flash はそのシンボルをひとつの素材として認識するようになり、二枚目の絵で同じシンボルを使うことによって、ふたりの女の子はひとつの素材で表現されていることになります。

フレームを作ります

　一枚目の絵を、アニメーションの一コマ目として考えましょう。さっきいったように、右端まで女の子が移動したように見えるためには、左から右へと少しずつ位置をずらした女の子の絵が必要となりますが、これは Flash が自動でやってくれるので、最後のコマが二枚目の絵の状態になるようにします。

　僕は二十コマ試用しました。つまり、一コマ目では女の子の絵（シンボル）は左端に位置しており、二十コマ目で女の子の絵（シンボル）を右端にドラッグしたのです。

　コマを作ります。なお Flash ではこのコマのことをフレームというので、これからは我々もフレームと呼ぶことにしましょう。

　Flash の画面では、下の方に絵を描く部分（フレームの内容）があり、上にフレームの流れを示すタイムラインと呼ばれる枠があります。タイムラインには、左から右に向かって増える数字が書いてあります。この数字が、フレームの数を示しているわけです。

　タイムラインの、20と書いてあるところ、今自分が使っているフレームの枠内をマウスでクリックします（フレームについては今度説明します）。すると灰色の小さな四角がでるので、そこをマウスでクリックすると、メニューがポップアップします。

　このメニューの中に、「フレームを挿入」という項目があるので、それを選ぶと、その灰色の四角があったところに線が引かれて、そこまでがアニメーションに用いられる範囲となるのです。

　フレームができあがったら、その20フレーム目でもう一度マウスをクリックして、先程のポップアップメニューを呼び出します。そして、「キーフレームを挿入」を選ぶと、その20フレーム目の内容を、自分で編集してやることが出来るようになります。

　今できあがったこの20フレーム目には、1フレーム目と同じように、女の子が左端にいると思います。この女の子を右端にドラッグしてやるのですが、このときに注意しないといけないのは、タイムラインの数字が書いてあるところの上、下向きの三角が20フレームのところに来ていないと、20フレーム目を編集したことにならないのです。

　実はこれは非常に不便で分かりにくいと思っているので、近々リリースされる Flash 5 では改良されていればいいなあ、と思っています。

女の子を動かします

　さて、女の子の絵（シンボル）が、1フレーム目では左端に、20フレーム目では右端に、無事位置しているでしょうか？

　そのままで「制御」メニューから再生を選ぶと、19フレーム目まで左端でじっとしていた女の子が、20フレーム目になって突如右端に瞬間移動します。これは、何度もいってきたように、1フレーム目と20フレーム目を埋める絵がまだ描かれていないからです。

　1フレーム目と20フレーム目の間をマウスでクリックすると、さっきフレームを挿入したときと同じメニューが出てきます。そのメニューから「トゥイーン設定」を選び、ダイアログでトゥイーン設定をモーションにしたら、後はデフォルトの状態でOKしてしまいましょう。

　これで準備は万端。制御メニューから再生を選ぶと、女の子は無事左から右に動いてくれたでしょうか？

今回の成果

　とりあえず今回はここまでです。文章ばかりでちょっとつまらなかったかもしれませんので、今回説明したとおりにアニメーションを作成してみました。