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

by 吉岡 梅

Posted on 01-06-2013

連載

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形式のコンテンツとして書き出して、そのまま利用できます。

Topics: クリエイティブ, UI/UX & Web

Products: