Flash基本〜フレームアニメーション

Flash

フレームアニメーション

フレームアニメーションではいわゆるパラパラアニメを作成することができます。Flashでアニメーションを作成する上で最も基本的な手法です。

フレームアニメーションを作成する上でポイントになるのは、3つのフレームの種類をしっかり覚えておくことです。

3つのフレームとはフレーム、キーフレーム、空白のキーフレームです。

frame8

フレームとは

まずはAdobeのヘルプから一部引用 です。

映画と同じように、Adobe® Flash® Professional ドキュメントでは時間の長さをフレームに分割しています。タイムラインでは、これらのフレームを操作してドキュメントのコンテンツを整理および制御します。タイムラインにフレームを挿入する際には、フレーム内のオブジェクトが完成したコンテンツで表示される順序どおりに挿入してください。 」

フレームは映画のフィルムと同じようなものです。(映画のフィルムも使われなくなりましたが・・・)フィルムの一コマがタイムラインの1フレームになるわけです。

キーフレームとは

キーフレームは、タイムラインで新しいシンボルインスタンスが表示されるフレームです。

映画のフィルムを見ると、フィルムの一コマずつに少しずつ変化した映像が入っています。それを連続再生することで動きのある映像にしているものです。

タイムラインのフレームも同様です。1フレームごとにオブジェクトを置いてフレームごとに少しずつ変化を加えてパラパラ漫画状態にするものです。

そしてその決まり事として少しでも変化を加えたオブジェクトをフレームに置くときにはフレームではなく、キーフレームと呼ばれる特殊なフレームを用意する必要があります。

キーフレームをタイムラインに挿入するとひつ前のオブジェクトがコピーされて挿入したキーフレームに入ります。そのオブジェクトに対して変化を加えるていきます。

空白のキーフレームとは

空白のキーフレームは今後何らか変化をさせたオブジェクトを置きたい場合、あるいは新たなオブジェクトを置きたい場合に使用します。オブジェクトを置くとキーフレームになります。

もう一度フレーム

基本的にオブジェクトの変化をフレームで表現するわけですから、一つ一つのキーフレームでオブジェクトを変化させていきます。ということは、キーフレームがあれば良いということになります。ではフレームは一体どんな時に使用するのでしょうか。

フレームは間を作る場合に必要になります。映画でも間は重要なポイントになりますね。アニメーションでも同様です。

では間を作るにはどうするといいでしょうか。キーフレームの中のオブジェクトを変化させなければよいのです。同じ状態のオブジェクトが入ったキーフレームをずらりと沢山並べると間ができます。けれども同じものを単純に沢山並べる方法としてキーフレムにオブジェクトの情報を細かく書き込むのは処理が遅くなりますしデータも大きくなります。そこで右に同じ(実際は左に同じ)という簡単な処理だけで済ませるフレームが「フレーム」の役割になるのです。フレームの役割は「右に同じ(実際は左に同じ)」という情報が入るものだと考えてください。

*右に同じは前と同じという意味で使用しています。右側のフレームと同じという意味ではありません。日本語難しいですね。。

文字が一文字ずつ現れる簡単な作例で試してみましょう。まずは失敗例!

  1. テキストツールでABCDの文字の入力を行います。「クラシックテキスト」の「静止テキスト」を選択しておきます。フォント等は任意です。
  2. メニューから「修正」→「分解」でテキストをアルファベット単位に分解します。
    frame2
  3. キーフレームを4つ挿入します。それぞれのキーフレームには1フレーム目と同じABCDのテキストが入っています。
    frame3
  4. 1フレーム目のキーフレームを選択してBCDを選択してdeleteキーで削除します。
    frame4
  5. 2フレーム目のキーフレームを選択してCDを選択してdeleteキーで削除します。
    frame5
  6. 3フレーム目のキーフレームを選択してDを選択してdeleteキーで削除します。
    frame6
  7. 最後のキーフレームはそのままです。
  8. return(Enter)キーを押して動かして確認してみましょう。

速すぎる〜〜〜〜

今度は少し手を加えてみます。手順は先程とほとんど同じで、ただフレームを使うだけです。

  1. テキストツールでABCDの文字の入力を行います。「クラシックテキスト」の「静止テキスト」を選択しておきます。フォント等は任意です。
  2. メニューから「修正」→「分解」でテキストをアルファベット単位に分解します。
  3. キーフレームを4つ挿入します。今度は少し間隔を空けて挿入しますので5フレーム目ごとにキーフレームを挿入します。それぞれのキーフレームには1フレーム目と同じABCDのテキストが入っています。またキーフレーム同士の間隔は自動で「フレーム」が挿入されます。ココが間になるわけです。
    frame7
  4. 1フレーム目のキーフレームを選択してBCDを選択してdeleteキーで削除します。そうすると2フレーム〜4フレームまでのフレームも自動でBCDが消えています。
  5. 5フレーム目のキーフレームを選択してCDを選択してdeleteキーで削除します。
  6. 10フレーム目のキーフレームを選択してDを選択してdeleteキーで削除します。
  7. 最後のキーフレームはそのままです。
  8. return(Enter)キーを押して動かして確認してみましょう。

サンプル

タイムラインのフレームが小さくて操作し辛い場合はフレームを大きく表示することができます。またフレームが多くなって全体を見渡し辛い場合はフレーム表示を小さくすることもできます。方法はタイムラインの右上の四角をクリックしてタイムラインメニューを表示して「大」「小」などを選択して行います。
frame1

スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

Flash
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました