yoppa.org


Web動画表現技法 2009

第2回:アニメーション表現1

そもそもアニメーションとはどうやって作るのか?

DVD視聴

DVD, “Norman McLaren Film Works Collection”より「マクラーレンのアニメーション講座1」を視聴。

  • アニメーションの原理:どうして動いて見えるのか
  • 古典的なアニメーション制作装置
  • アニメーションの撮影方法
  • カウンター
  • テンポ

Flashでも、アニメーションを作る基本はこうした古典的なアニメーション制作の方法を踏襲している。しかし、実際にはDVDで紹介されていたアナログな方法よりもはるかに効率良くアニメーションを作っていくことが可能である。今日の講義では、物体の位置が一定の「テンポ」で移動するアニメーションを制作してみる。

Flashワークエリア各部機能

ワークエリアは名前の通り、アニメーションを作っていくための「作業台」。このなかに様々な道具が詰っています。各部の機能をひとつづつ見ていきたい。

ワークエリア

fig2_1.jpg

ムービーの作成に必要な機能が各部にまとめられている。

ステージ

fig2_2.jpg

アニメーションさせるグラフィックやボタンなどが配置される「撮影台」。ステージでの動きが最終的にムービーとして出力される。

ツールボックス

fig2_3.jpg

シンボルの選択や、グラフィイクの作成、変形などの各種のツールが入った「道具箱」。

パネル

fig2_4.jpg

ステージ上のオブジェクトやムービー全体に関するさまざまな操作を行うための画面。

タイムライン

fig2_5.jpg

ムービの時間の流れに沿って、オブジェクト等の動き、変化などを制御する画面。

ライブラリ

fig2_6.jpg

シンボル化されたエレメントが登録されている。シンボルは再利用が可能。

プロパティインスペクタ

fig2_7.jpg

ツールやオブジェクトの頻繁に使用される設定を表示。

2.2.物体が移動するアニメーションを作ってみる

2.2.1.完成サンプル





Download file

2.2.2.作成手順

  1. ツールボックスの楕円ツールを選択して、ステージ上に円を描く。
  2. 矢印ツールで描いた円の全体を選択する。網点で選択範囲が表示される。
  3. メニューから「挿入」→「シンボルに変換」を選択。ダイアログボックスが表示されるので、このエレメントの名前をつけ、タイプを「グラフィック」にしてOKする。
    • ※シンボルは、ドキュメントで使用する再利用可能なエレメントです。作成された新しいシンボルは、ファイルのライブラリに保存されます。シンボルを効率的に使うことにより、ファイルサイズを小さくできます。これは、インスタンスをいくつ作成しても、ファイルにはシンボルが 1 つしか保存されないためです。ドキュメント内で 2 回以上表示されるエレメントは、アニメーションであるかどうかにかかわらず、シンボルに変換すると便利です。
  4. 物体を移動させる際のフレーム数分先のフレームを矢印ツールで選択する。
    fig2_8.jpg
  5. 選択された状態のまま、メニューから「挿入」→「フレーム」を選択。間のフレームが自動的に灰色に埋められる。
    fig2_9.jpg
  6. メニューから「挿入」→「モーショントゥイーンを作成」を選択。フレームの色が紫色に変化し、中にモーショントゥイーンが完成していないことを示す点線が表示される。
    fig2_10.jpg
  7. フレームの最後が選択されている状態で、矢印ツールを使って、作成した円のシンボルを選択しそのまま移動したい先までドラッグする。自動敵に新しいキーフレームが生成され、点線が実線に変化します。
    fig2_11.jpg
  8. キーフレームを選択するとプロパティインスペクタにイージングというプロパティが表示されます。この値を負の値(0〜-100)にすると、「加速」の効果が得られます。反対にこの値を正の値(0〜100)にすると「減速」の効果になります。
    fig2_12.jpg