アニメーション作成はFlashの醍醐味の一つです。Flash CS3が備えるAnimatorクラスを利用すると,タイムライン上で作成した細かいキーフレームごとの変形や,トゥイーン機能を使ったアニメーションを,ActionScriptで簡単に再利用できるようになります。

 トゥイーン・アニメーションは,通常はタイムラインを使って作成するのですが,Flash CS3の機能と,「Animatorクラス」を使用すると,トゥイーン・アニメーションを「ActionScriptのコードとして」取り込み,再利用することが簡単になります。

 図1のムービーは,Flash CS3のタイムライン上で作成した3種類のトゥイーン・アニメーションを,ActionScriptのコードとして再利用しています。トゥイーン・アニメーションをActionScriptから制御することにより,タイムライン上で細かく設定した「動き」を,手軽に再利用して,ダイナミックなコンテンツの作成効率を高めることができます。

図1●Animatorクラスを使って作成したアニメーション
図1●Animatorクラスを使って作成したアニメーション
[クリックすると別ウィンドウでムービーを表示します]

トゥイーン・アニメーションを作成する

 Flashムービーを作成する際,多くの場合には,なにかしらの「動き」を付けるということは,ほぼ確実に要求されるでしょう。FlashCS3で,この動きを付ける際に利用される代表的な機能が「トゥイーン機能」です(トゥイーン機能の詳しい解説に関しては,自動的にアニメーションを補間してくれる「トゥイーン」機能(前編)同(後編),を参照)。

 トゥイーン・アニメーションは,タイムライン上で,一枚一枚異なる絵を描いてアニメーションを作成するのではなく,ひとつの絵(インスタンス)の,位置や,大きさや角度などを細かく設定して動きを作成したり,動きの始点と終点を指定し,その間の動きをトゥイーン機能で補完して動きを作成したり,といった形で作成します。キーフレームごとに少しずつ異なるイラストを描く手描きのアニメーションには劣ることが多いものの,手軽に,印象深いアニメーションを作成することができます。

 このようなアニメーションは,通常,手作業でタイムラインで作成し,同じ動きを再利用するのは,少々困難でした。しかし,Flash CS3では,タイムライン上で作成したアニメーションを,ActionScriptで,手軽に再利用する手段が用意されています。まずは,簡単なトゥイーン・アニメーションを作成し,ActionScriptから再利用してみましょう。

 新規Flashドキュメントを作成し,任意のフォルダに保存します。ステージ上に適当な絵をひとつ描き,[F8]キーを押してシンボル化します。これで,ステージ上には,ひとつのインスタンスが配置されている状態になりますね。このインスタンスに「dummy」と名前を付けておきましょう(図2)。

図2●インスタンスの準備
図2●インスタンスの準備

 インスタンスを配置したレイヤーを右クリックし,ポップアップメニューから「モーションガイドの追加」を選び,ガイドレイヤーを追加したら,ガイドレイヤーに適当な直線を引きます(図3)。この直線に沿ってモーショントゥイーンを作成していきます。

図3●ガイドレイヤーの準備
図3●ガイドレイヤーの準備

 インスタンスの配置してあるレイヤーと,ガイドレイヤーを[F5]キーを押す等の操作で,30フレームほど延長します。インスタンスの配置してあるレイヤーの30フレーム目を選択し,[F6]キーを押し,キーフレームを作成します。

 再び1フレーム目を選択し,[選択ツール]の[オブジェクトの吸着]をオンにし,インスタンスdummyを,モーションガイドレイヤーに書いた直線の先頭部分に吸着させます。同様に,30フレーム目を選択し,インスタンスdummyを,直線の終端部分に吸着させます。

 この状態で,再び1フレーム目を選択し,右クリックして表示されるメニューから「モーショントゥイーンを作成」を選択し,トゥイーン・アニメーションを作成します(図4)。

図4●トゥイーンの作成
図4●トゥイーンの作成

 これでガイドを使ったモーショントゥイーンが作成できました。念のため,[ムービープレビュー]できちんと動きがついているかどうかを確認しておきましょう。図5のように,ガイドレイヤーに書いた直線上を動くアニメーションが作成されていればOKです。

図5●作成したトゥイーン・アニメーション
図5●作成したトゥイーン・アニメーション
[クリックすると別ウィンドウでムービーを表示します]