アニメーションの基本



アニメーションの種類

Adobe® Flash® CS4 Professional では、いくつかの方法でアニメーションと特殊効果を作成できます。メソッドごとに異なる方法で、効果的なアニメーション化されたコンテンツを作成することができます。

Flash では、次のタイプのアニメーションを使用できます。

モーショントゥイーン
モーショントゥイーンを使用して、1 つのフレームとさらにもう 1 つのフレームで、位置やアルファ透明度などのオブジェクトのプロパティを設定します。Flash は次に、間にあるフレームのプロパティ値を補間します。モーショントゥイーンは、オブジェクトの連続したモーションや変形から構成されるアニメーションでの使用に適しています。モーショントゥイーンは、デフォルトでは 1 つのオブジェクトとして選択できる連続したフレームのスパンとしてタイムラインに表示されます。モーショントゥイーンは強力であり、簡単に作成できます。

クラシックトゥイーン
クラシックトゥイーンはモーショントゥイーンに似ていますが、作成方法が複雑になります。クラシックトゥイーンの場合は、スパンベースのトゥイーンでは不可能な特定のアニメーション化された効果を使用できます。

インバースキネマティックポーズ
インバースキネマティックポーズを使用すると、シェイプオブジェクトを伸縮および変形し、シンボルインスタンスのグループをリンクして、自然な方法でそれらを一緒に動かすことができます。シェイプオブジェクトまたはリンクされたインスタンスを異なる方法で別々のフレームに配置できます。Flash が間にあるフレームの位置を補間します。

シェイプトゥイーン
シェイプトゥイーンでは、タイムラインの特定のフレームでシェイプを描画し、別の特定のフレームでそのシェイプを変更するか、または別のシェイプを描画します。Flash は、その間のフレームの中間シェイプを補間し、あるシェイプが別のシェイプに変形するアニメーションを作成します。

フレームアニメーション
このアニメーション手法により、タイムライン内の各フレームに異なるアートを指定できます。この手法を使用して、高速で連続して再生されるフィルムのフレームのような効果を生み出します。このタイプのアニメーションは、各フレームのグラフィックエレメントを 1 つずつ変える必要がある複雑なアニメーションでの使用に適しています。

フレームレートについて

フレームレートはアニメーションが再生されるスピードであり、1 秒当たりのフレーム数 (fps) で測定します。フレームレートが小さすぎると、アニメーションの動きがぎこちなくなり、逆に大きすぎると、速すぎて細部の描写がぼやけてしまいます。フレームレートは 24 fps が新規の Flash ドキュメントのデフォルトであり、一般に Web 上ではこのレートで最良の結果が得られます。映画の標準レートも 24 fps です。

アニメーションの複雑さと、再生するコンピュータの処理速度は、アニメーションの滑らかさに影響を与えます。最適なフレームレートを決めるには、各種のコンピュータでアニメーションをテスト再生します。

Flash ドキュメント全体のフレームレートは 1 つだけ指定するので、このレートは、アニメーションの作成を開始する前に設定します。

タイムラインでのアニメーションの表示

Flash では、コンテンツを含む各フレームに対して個別のインジケータが表示されるので、トゥイーンアニメーションまたはフレームアニメーションのいずれであるかを確認できます。

タイムラインには、次のいずれかのフレームコンテンツインジケータが表示されます。

  • 青の背景色を持つフレームスパンは、モーショントゥイーンです。 スパンの最初のフレームの黒い点は、トゥイーンスパン内にターゲットオブジェクトが割り当てられていることを示します。黒い菱形は最後のフレームと他のプロパティキーフレームを示します。プロパティキーフレームは、明示的に定義されたプロパティ変更を含むフレームです。表示するプロパティキーフレームのタイプを選択するには、モーショントゥイーンスパンを右クリック(Windows)または Command キーを押しながらクリック(Macintosh)して、コンテキストメニューでキーフレームを表示/タイプを選択します。デフォルトでは、全タイプのプロパティキーフレームが表示されます。スパン内のその他すべてのフレームには、ターゲットオブジェクトのトゥイーンプロパティに対する補間値が含まれます。


  • 最初のフレームの白抜きの点は、モーショントゥイーンのターゲットオブジェクトが削除されたことを示します。トゥイーンスパンには、まだそのプロパティキーフレームが含まれているので、新しくターゲットオブジェクトを割り当てることができます。


  • 緑の背景色を持つフレームスパンは、インバースキネマティック(IK)ポーズレイヤーを示します。 ポーズレイヤーには IK アーマチュアとポーズが含まれます。各ポーズはタイムラインに黒い菱形として表示されます。Flash はポーズ間にあるフレームのアーマチュアの位置を補間します。


  • 黒い矢印および青い背景とともに開始キーフレームに表示される黒い円は、クラシックトゥイーンを示しています。

    例:開始キーフレームに黒の矢印、トゥイーンされた中間フレームを示す明るい青の背景

  • 断続線は、最後のキーフレームが見つからない場合など、クラシックトゥイーンが壊れているか不完全であることを示します。

    例:トゥイーンが壊れているか、または不完全であることを示す断続線

  • 黒い矢印および明るい緑の背景とともに開始キーフレームに表示される黒い円は、シェイプトゥイーンを示しています。

    例 : 開始キーフレームに黒い矢印と、中間フレームを示す明るい緑の背景

  • 黒い円は、単一のキーフレームを示します。単一のキーフレームに続く明るいグレーのフレームには、変更のない同じコンテンツが含まれます。それらのフレームには黒い垂直な線があり、スパンの最終フレームに白抜きの長方形があります。

    例 : 単一のキーフレームに続く明るいグレーのフレームと、最終フレームに白抜きの長方形

  • 小文字の a は、[アクション] パネルでフレームにフレームアクションが設定されていることを示します。

    例 : [アクション] パネルでフレームアクションが割り当てられていることを示す、小文字の "a"

  • 赤いフラグは、フレームにラベルが含まれていることを示します。

    例 : フレームにラベルが含まれていることを示す赤いフラグ

  • 緑色の 2 つのスラッシュは、フレームにコメントが含まれていることを示します。

    例 : フレームにコメントが含まれていることを示す緑色の 2 つのスラッシュ

  • 金の錨は、フレームが名前付きアンカーであることを示します。

    例 : フレームが名前付きアンカーであることを示す金色の錨

アニメーションのレイヤーについて

Flash ドキュメントの各シーンには、タイムラインレイヤーを必要な数だけ使用できます。レイヤーとレイヤーフォルダを使用して、アニメーションシーケンスのコンテンツおよび個々のアニメーション化したオブジェクトを整理します。レイヤーおよびフォルダ内のコンテンツを整理することにより、重複したときの消去、連結、セグメント化を防ぐことができます。複数のシンボルまたはテキストフィールドのトゥイーン動作を含むアニメーションを同時に作成する場合は、各オブジェクトを個別のレイヤー上に配置します。1 つのレイヤーをバックグラウンドレイヤーとして使用して静止のアートワークを含めたり、追加レイヤーを使用してアニメーション化したオブジェクトを個別に含めることもできます。

Flash では、モーショントゥイーンを作成する際に、トゥイーンするために選択したオブジェクトを含むレイヤーがトゥイーンレイヤーに変換されます。トゥイーンレイヤーには、タイムラインのレイヤー名の横にトゥイーンアイコンが表示されます。

トゥイーンオブジェクトと同じレイヤーにその他のオブジェクトが含まれる場合、Flash は必要に応じて元のレイヤーの上または下に新しいレイヤーを追加します。元のレイヤーでトゥイーンオブジェクトの下にあったオブジェクトは、元のレイヤーの下に追加された新しいレイヤーに移動します。元のレイヤーでトゥイーンオブジェクトの上にあったオブジェクトは、元のレイヤーの上に追加された新しいレイヤーに移動します。Flash は、タイムライン内の既存のレイヤー間にそれらの新しいレイヤーを挿入します。これにより、Flash ではステージ上のすべてのグラフィックオブジェクトの元の重ね順が保持されます。

トゥイーンレイヤーには、トゥイーンスパン(隣接する、トゥイーンを含むフレームグループ)、静止フレーム、空白キーフレームまたは空のフレームのみを含めることができます。各トゥイーンスパンには、ターゲットオブジェクトとターゲットオブジェクトのオプションのモーションパスを 1 つずつ含めることができます。トゥイーンレイヤー上では描画できないため、追加のトゥイーンや静止フレームは、他のレイヤー上に作成してからトゥイーンレイヤーにドラッグする必要があります。フレームスクリプトをトゥイーンレイヤーに配置するには、別のレイヤー上で作成して、トゥイーンレイヤーにドラッグします。フレームスクリプトを配置できるのは、モーショントゥイーンスパン自体の外側のフレームのみです。一般に、ActionScript のみを含む別のレイヤーにすべてのフレームスクリプトを配置するのが最善の方法です。

ドキュメントに複数のレイヤーがある場合、そのうちの 1 つまたは複数のレイヤー上のオブジェクトをトラッキングしたり、編集したりするのが難しいことがあります。そのような場合は、レイヤーごとにコンテンツを編集します。作業していないレイヤーを非表示にしたりロックしたりするには、タイムラインのレイヤー名の横にある目のアイコンまたはカギのアイコンをクリックします。レイヤーフォルダを使用すると、レイヤーを管理しやすいグループに分類することができます。

トゥイーンアニメーション用レイヤーへのオブジェクトの配分

モーショントゥイーンをオブジェクトに適用すると、Flash により自動的にオブジェクトがそのトゥイーンレイヤーに移動されます。ただし、別のレイヤーにオブジェクトを自分で配分することもできます。例えば、コンテンツを整理するときに、オブジェクトを自分で配分することができます。手作業の配分は、アニメーションをオブジェクトに適用しながら、それらのレイヤー間の動きを正確に制御するためにも役立ちます。

「レイヤーに配分」コマンド(修正/タイムライン/レイヤーに配分)を使用すると、Flash は選択されたそれぞれのオブジェクトを個別の新しいレイヤーに配分します。選択していないオブジェクトは、他のフレーム内のオブジェクトも含め、すべて元のレイヤーに保持されます。

グラフィックオブジェクト、インスタンス、ビットマップ、ビデオクリップ、および分解したテキストブロックなど、ステージ上のあらゆるエレメントに「レイヤーに配分」コマンドを適用できます。

「レイヤーに配分」コマンドを使用して作成した新しいレイヤーについて

[レイヤーに配分] で作成された新規レイヤーは、各レイヤーに置かれているエレメントの名前に従って命名されます。

  • ライブラリアセット (シンボル、ビットマップ、ビデオクリップなど) が含まれている新規レイヤーの名前は、そのアセット名と同じになります。

  • 命名されたインスタンスが含まれている新規レイヤーには、そのインスタンスと同じ名前が付けられます。

  • 分解したテキストブロックの文字が含まれている新規レイヤーには、その文字と同じ名前が付けられます。

  • 新規レイヤー内のグラフィックオブジェクトに名前がない場合、そのレイヤーの名前は、1 や 2 などになります。

    Flash では、新規レイヤーは選択したレイヤーの下に挿入されます。新規レイヤーは、選択したエレメントが当初に作成された順番どおりに、上から下に向かって並べられます。分解したテキストでは、レイヤーは分解前の文字の順番に従って、左から右、右から左、または上から下に向かって並べられます。例えば、FLASH というテキストを分解し、レイヤーに配分するとします。F、L、A、S および H という名前の新しいレイヤーが、F を先頭に上から下に向かって並べられます。これらのレイヤーは、最初にテキストが入っていたレイヤーのすぐ下に表示されます。

レイヤーへのオブジェクトの配分

  1. 個別のレイヤーに配分するオブジェクトを選択します。オブジェクトは、単一のレイヤーに置くことも、複数のレイヤーに置くこともできます。複数のレイヤーに置く場合、レイヤーが連続していなくてもかまいません。
  2. 次のいずれかの操作を行います。
    • [修正]-[タイムライン]-[レイヤーに配分] を選択します。

    • 選択したオブジェクトを右クリック (Windows)、または Control キーを押しながらクリック (Macintosh) して、[レイヤーに配分] を選択します。