フレームアニメーションを作ろう
フレームアニメーションとは？
フレームアニメーションとは、少しずつずれている絵を連続で表示させることで、絵が生きているかのように動き出して見えるというもので、子供の頃に（私は大人になっても）教科書やノートの角の部分に描いた、あのパラパラアニメーションと同じ原理です。
この技法はすべてのアニメーションの基本であり、また、最も難しく、最も表現の幅の広い技法だと思います。
下のFlash アニメーションは、フレームアニメーションで動いています。
一枚一枚のイラストは、もちろんただの静止画ですが、一秒間に15枚のイラストを連続で表示する設定にしてますので、一応走っているように見えると思います。イラストの枚数が少ないので、ちょっと動きがカクカクですが…あまり気にしないで下さい。
それでは、このような「フレームアニメーション」の基本的な部分の作り方を説明していきたいと思います。
このflaファイルをダウンロードする(zip) まずは、Flash を起動させましょう。
スタートページの「新規作成」から「Flash ドキュメント」をクリックします。真っ白なステージが表示され、新規ファイルが作成されました。
1フレーム目のイラストを描いてみよう
タイムラインの1フレーム目に○印が付いているのがわかります。ここが現在のフレームで、まだ何も描かれていないので「空白キーフレーム」という意味で○印が付いています。
それではステージ上に何か得意なイラストを描いてみましょう。犬、猫、人物などいろいろ題材はあると思いますが、草ナギ画伯に負けないような名画を描きましょう。
もしくは、他の fla ファイルですでにイラストを描いている場合は、そのファイルから絵を選択した後コピーして、現在のステージ上にペーストして下さい。
1フレーム目が○印から●印に変わりました。これは、このフレームにイラストがあるという意味の印で、「キーフレーム」と言います。
さて、とりあえず1フレーム目のイラストが完成したという事にします。
シンボル内で作業するメリットについて
次に2フレーム目のイラストにとりかかりたいところですが、その前に、1フレーム目のイラストを「ムービークリップ」に変換して、ムービークリップの中の、独自のタイムラインでアニメーションを作っていきたいと思います。
どうしてわざわざそのような事をするのかと言うと、例えば後でドキュメントのサイズを変更した際、イラストの位置が最初の位置からずれてしまいます。
すべてのキーフレームでイラストの位置を微調整し直すのは、とても大変な作業になるのです。
上のダウンロード用 fla ファイルもムービークリップで作っています。ダウンロード後、ドキュメントのサイズを変更してみて、簡単にアニメーションの位置を調整できることを確認してみて下さい。
では、実際にやってみましょう。
1フレーム目のイラストをすべて選択し、右クリックから「シンボルに変換」をクリックし、「ムービークリップ」に変換してください。
ライブラリに登録され、ムービークリップに変換されました。インスタンスをダブルクリックして中に入ってみましょう。タイムラインを確認すると、ムービークリップ内の独自のタイムラインが表示されているはずです。
ムービークリップの中に入ったことは、タイムラインの上の編集バーの表示で確認できます。
1フレーム目には最初に描いたイラストが表示され、キーフレームになっているはずです。
2フレーム目のイラストを描いてみよう
いよいよ2フレーム目へ進みます。
タイムラインの2フレーム目を右クリックし「空白キーフレームの挿入」または「キーフレームの挿入」をクリックして下さい。
「空白キーフレームの挿入」の場合は新規作成の時と同様、何もない白紙のフレームが2フレーム目に追加されます。
「キーフレームの挿入」の場合は、1フレーム目と全く同じ内容のフレームが2フレーム目に追加されます。イラストのちょっとだけ、一部分だけ変更したい時にはこちらがベストです。
ちなみに、空白キーフレームは「F7」キー、キーフレームは「F6」キーを押しても追加できます。
では、2フレーム目に少しだけ動いたイラストを描きたいので、「F6」キーを押して1フレーム目のコピーを2フレーム目に配置しておきます。
2フレーム目のイラストを少しだけ描きかえたいのですが、1フレーム目のイラストを確認しながら作業したい気持ちになってきますよね・・・
こういう時に使える非常に便利な機能が「オニオンスキン」という機能で、1フレーム目に描いてあるイラストが、タマネギの皮を通して見たように、ちょっとだけ透けて見えるという機能なのです。
カレーにタマネギは欠かせません。タマネギが嫌いだという人も、このオニオンスキンをきっかけにオニオン好きになってください。
設定は、タイムラインの下の「オニオンスキン」ボタンをクリックするだけです。
再生ヘッド部分にオニオンスキンの適用範囲（オニオンスキンマーカー）が表示されていますが、デフォルトでは前後2フレームになっています。このままでは、フレームの位置によっては合計4フレームが透けて見えるため、何がなんだかわからなくなります。
私の場合は、一番最初にアニメーションを作りながらイラストを描く際は、前の2フレームのみ、後から修正で途中のフレームにイラストを付け加える際には、前後1フレームずつの表示にします。
オニオンスキンマーカーの丸いツマミをドラッグして、透けて見える範囲を使いやすいに調整しましょう。
さぁ、これでやっと2フレーム目を描くことが出来ます。1フレーム目を見ながら、ちょっとだけ動いたイラストを描きましょう。
描き終わったら、「再生ヘッド」を左右にドラッグして動かしてみて、アニメーションの動きに違和感がないか確認しましょう。
フレームを新たに描いたり修正したりする度に、このやり方で動きを随時確認する癖をつけておきましょう。
同じやり方で、3フレーム、4フレーム…と描いていきましょう！
制御メニューの「再生」（EnterキーでもOK）をクリックすると現在のステージ上のアニメーションが再生されます。
自分で描いたイラストに、どのように命が吹き込まれたのか確認出来る瞬間です。
一番ドキドキワクワクする瞬間ですね。
イラストがなめらかにアニメーションしていれば大成功です。