Flash Professional入門 第2回：タイムラインを使ったアニメーション

連載

Flash Professional入門

Flash Professionalでは「タイムライン」を使って手軽にアニメーションを作成できます。また、「トゥイーン」機能を使うと、ステージ上に配置したシェイプや画像に動きを簡単に付けられます。

Flash Professional CC の体験版をダウンロード サンプルファイルをダウンロード

Flash Professionalには［タイムライン］パネルがあり、タイムラインを使って手軽にアニメーションを作成できます。

図1 Flash Professional CS6の［タイムライン］パネル

フレームとフレームレート

Flashムービーは、デフォルトの設定だと、1秒間に24回の画面描き換えを行うようになっていま す。この1回1回の画面描画のことを「フレーム」と呼び、1秒間に行う画面描き換えの回数を「フレームレート」と呼びます。フレームレートは、 「FPS（Frames Per Second）」という単位で表します。デフォルトの設定だと「24FPS」というわけですね。

この仕組 みを踏まえ、映画のフィルムやノートの隅に描くパラパラマンガのように、フレームごとに表示する絵を変更すれば、それがアニメーションとなるわけですね。 Flash Professionalでは、この「指定したタイミングのフレームで表示する絵を切り替える」スケジュールを、タイムラインを使って管理します。

タイムラインを使ったアニメーション作成の流れを紹介しておきましょう。

STEP1 フレームレートの設定

新 規ドキュメント（［ActionScript 3.0］を選択）を作成したら、［タイムライン］パネル下部の［フレームレート］欄でFPSを決定します。数値を変更するには、数値上でそのまま左右にマ ウスドラッグして増減させる方法と、数値をクリックして編集状態にし、数値をキーボードで直接入力する方法があります。

図2 フレームレートは［タイムライン］パネルから変更できます

※一般的なテレビ放送では約30FPS、映画の場合は24FPSが目安になっています。ゲームの場合は、60FPSがいわゆる「ヌルヌル動く」ための目安になっています。

STEP2 オブジェクトの配置

次に、表示したいオブジェクトをステージ上に配置します。ステージ上に直接絵を描いてもよいですし、PhotoshopやIllustratorなどのアプリケーションで作成した画像や絵を読み込んでもよいでしょう。

［タイムライン］パネルには、絵や画像を個別に管理できる「レイヤー」という機能が用意されています。複数の絵や画像を扱う場合には、それぞれをレイヤーで管理しておくと、アニメーションの作成に便利です。

レイヤーは［タイムライン］パネル左下の［レイヤーの追加］ボタンを押して追加し、そこに絵や写真を配置します。なお、［タイムライン］パネル上で任意のレイヤーを選択できます。

図3 サンプルでは、羊の絵を描いてみました。目／あたま／からだ／しっぽ／前足／後ろ足のように各パーツごとに描いて、それぞれをレイヤーで管理しています

STEP3 キーフレームを追加してオブジェクトを変更

続いて、フレームを追加し、絵を変更していきます。レイヤーごとに、絵を 変更したいフレーム番号を選択し、「キーフレーム」を追加します。キーフレームを追加するには、任意のフレームを選択して、右クリックメニュー→［キーフ レームの挿入］を選ぶ、あるいは［F6］キーを押します。

キーフレームを選択し、ステージ上の絵を描き変えたり、位置を調整したりします。 すると、そのフレームが再生されるタイミングで、表示内容が変更したものに切り替わります。このとき、全てのフレームにキーフレームを追加したり、絵を描 いたりする必要はありません。キーフレームがないフレームでは、直前のキーフレームの内容が表示されます。

つまり、表示内容を変更したいタイミングでキーフレームを作成し、アニメーションを付けていくわけです。この「キーフレーム作成」→「動きを付ける」という作業を繰り返していけば、アニメーションの完成です。

図4 完成したフレームアニメーション

また、［タイムライン］パネルには、再生ヘッドをドラッグしながらアニメーションの内容を確認したり、前後のフレームの内容を半透明の状態で見ながら作業できる「オニオンスキン機能」など、アニメーション作成の補助機能が多数用意されています。

トゥイーン機能で手軽に動きを付ける

キーフレームを作成し、絵を描き、表示位置を調整することでアニメーションは作成できます。しかし、アニメーションが長くなってくると、ひたすら1コマ1コマ動きを付けていくのは大変です。

そんな時には、手軽に動きを付けることのできる「トゥイーン」機能を利用してみましょう。トゥイーンとは、ひとかたまりにした絵の開始状態と終了状態を指定すると、その間の状態を自動で補完してくれる機能です。

図5 トゥイーンによるアニメーションの補完

トゥイーンを使ったアニメーション作成の流れを紹介しておきましょう。

STEP1 オブジェクトをムービークリップシンボルに変換

トゥイーンを作成するには、まず、トゥイーンさせたいシェイプや画像を「ムービークリップシンボル」に変換します。シンボルに変換するには、オブジェクトを選択して、右クリックメニュー→［シンボルに変換…］を選ぶ、あるいは［F8］キーを押します。

図6 トゥイーンさせたいオブジェクトをムービークリップシンボルに変換します

STEP2 トゥイーンの作成

次に、ステージ上のトゥイーンさせたいオブジェクトを選択し、［挿入］メニュー→［モーショントゥ イーン］を選択すると、［タイムライン］パネル上に青色の区間（トゥイーンスパン）が作成されます。さらに、トゥイーンスパン内の任意のフレームを選択し てキーフレームを挿入し、ステージ上で位置やサイズなどを変更します。これでキーフレーム間を結ぶアニメーションの完成です。

図7 トゥイーンスパン内にキーフレームを挿入して、オブジェクトの位置やサイズなどを変更します

あとは意図した動きになるように、トゥイーンスパンの長さや、キーフレームの位置、オブジェクトの位置やサイズを調整します。

また、トゥイーンは通常、キーフレームで指定した位置を直線状に移動するアニメーションとして補完されますが、表示されている「ガイド線」をドラッグしてカーブを作成すると、そのカーブに沿って曲線状に移動するアニメーションとなります。

図8 ガイド線をドラッグして曲線状のアニメーションにすることもできます

1コマ1コマ位置を調整するフレームアニメーションに比べると、トゥイーンを使えばとても簡単に動きを付けることができますね。

おわりに

今回は、タイムラインを使ったアニメーション作成方法の基本を紹介しました。フレームアニメーションとトゥイーンアニメーションを併用することで、色々なアニメーションを作成できますね。

また、フレームアニメーションとトゥイーンアニメーションは、Toolkit for CreateJS機能を使ってHTML5形式のコンテンツとして書き出して、そのまま利用できます。