トゥイーン機能を使ってスプライトを移動させる

 スプライトで犬の走るアニメーションをひとまとめのパーツ化できたところで,今度はこのスプライトに画面を横切らせてみましょう。

 画像やスプライトを移動するアニメーションを作成する際に便利な機能が,「トゥイーン機能」です。トゥイーン機能は,「キーフレーム」と呼ばれる開始点と終了点を設定すると,その間の動きを保管した「トゥイーン・アニメーション」を作成してくれる機能です*2

 早速トゥイーン・アニメーションを作成してみましょう。まず,「犬ランニング」レイヤーの最終フレーム(6フレーム目)を[Ctrl]キーを押しながらクリックし,「キーフレーム」を作成します(図6)。

図6:キーフレームの作成

 これで1フレーム目と6フレーム目に,タイムライン上で赤いマーカーで表される「キーフレーム」が作成できましたね。1フレーム目のキーフレームを選択し,[編集キャンバス]でスプライトの位置を画面の右端に移動させます。同じように,6フレーム目のキーフレームを選択し,今度は画面の左端に移動させます(図7)。この二つのキーフレームで指定した位置が,トゥイーン・アニメーションの開始点と終了点となります。

図7:開始点と終了点のスプライトの位置を指定する

 位置の指定ができたところで,1フレーム目のキーフレームを選択し,画面右下の[キーフレーム編集枠]に注目してください。[トゥイーン]チェックボックスがありますね。このチェックボックスにチェックを入れると,タイムライン上の開始点から終了点の区間が赤く表示され,トゥイーン・アニメーションが設定されたことを確認できます(図8)。

図8:トゥイーンの設定を行う

 この状態で[F5]キーを押してプレビュー表示してみましょう。すると,スプライトがアニメーションをしながら画面を横切っていることが確認できます。

 しかし,このままではちょっと動きが速すぎますね。そこで,トゥイーン・アニメーションの区間を伸ばしましょう。終了点のキーフレームをダブルクリックし,編集モードにしてから40フレーム目あたりまで移動させます。「背景用.bmp」のレイヤーも同じようにダブルクリックして表示区間の右端をドラッグして延長します。

 好みの長さにトゥイーン・アニメーションの区間を設定すれば,犬が画面を横切るアニメーションの完成です(図9)。

図9:トゥイーン機能で作成したFlashムービー(クリックするとムービーを表示します)

 「スプライト」機能と「トゥイーン」機能を利用すれば,簡単に動きのあるFlashムービーが作成できますね。また,Suzukaのトゥイーン機能では,位置のトゥイーンだけではなく,角度,大きさ,透明度などのトゥイーンも行うことができます。

この先は会員の登録が必要です。今なら有料会員(月額プラン)登録で5月末まで無料!