前回に引き続き,Flashムービーを作成することのできるフリーソフト「Suzuka」についてご紹介します(「前編:Flashムービー作成フリーソフト「Suzuka」で簡単アニメーションを作ってみよう」はこちら)。なお,ここで使用する素材はこちらからダウンロードできます。

「スプライト」を使ってループするアニメーションを作成

 前回は,3枚の画像を表示する位置やタイミングを[タイムライン]を使って調整し,簡単なアニメーションを作成しました。次は,この犬が画面を横切るアニメーションを作成してみましょう(図1)。

図1:画面を横切るアニメーション(クリックするとムービーを表示します)

 まず,2枚の犬のイラストを独立したアニメーションである「スプライト」として作成します。「スプライト」は独自のタイムラインを持ち,その中で独自のアニメーションを作成できます*1

 スプライトを作成するには,[シンボルリスト]を右クリックして表示されるショートカットメニューから,[アイテムを追加]-[スプライト追加]を選択します(図2)。[スプライトのプロパティ]ダイアログボックスが開きますので,[スプライト名]に任意の名前を入力し,[サイズ]の[幅]と[高さ]に,作成したいスプライトの大きさを指定します。

図2:スプライトを追加する

 今回は,幅200×高さ200の2枚の犬のイラストを交互に表示するスプライトを作成しますので,[スプライト名]に「犬ランニング」,[幅]と[高さ]はともに「200」と入力しました。

 [シンボルリスト]に追加されたスプライトを選択すると,上部のプレビュー欄に[編集]ボタンが表示されていますね。この[編集]ボタンを押すと,スプライト独自のレイヤー・タイムラインの編集モードへと移行します(図3)。

図3:スプライトの編集

 画面右上の[レイヤーリスト]の上部が赤くなり,「犬ランニング」と選択したスプライト名が表示されていることが確認できますね。このタイムラインに犬のアニメーションを作成していきます。

 手順は「1コマ目.bmp」「2コマ目.bmp」をレイヤーに配置し,[タイムライン]上で「ダブルクリックして編集モード」→「ドラッグして位置を移動」→「右端をドラッグして長さを調整」を繰り返し,それぞれのイラストを3コマ(3フレーム)ずつ表示させます。メインのタイムラインでの操作と同じですね。スプライト内のタイムラインは図4のようになります。

図4:スプライトのプレビュー

 また,スプライトの編集中に[F5]キーを押すと,スプライトのみのアニメーションのプレビューを確認することができます。これはとても便利な機能です。動きを確認し,修正をしながら編集作業を行ってみましょう。

 さて,スプライト内でのアニメーションが作成できたところで,メインのタイムラインへと戻ります。メインのタイムラインへと戻るには,[レイヤーリスト]上部に表示されている「犬ランニング」というキャプション部分をダブルクリックします。

 メインのタイムラインに戻ったところで,作成したスプライト「犬ランニング」をレイヤーに配置し,表示フレーム数を伸ばします。レイヤー「1コマ目.bmp」「2コマ目.bmp」はもう不要ですので,それぞれを選択して[Delete]キーを押して削除してしまいましょう(図5)。

図5:スプライトを配置し,不要なレイヤーを削除する

 [編集キャンバス]を使ってスプライトの位置を調整し,[F5]キーを押してプレビューを確認してみましょう。すると,配置したスプライトがアニメーションを行っていることが確認できますね。

 このスプライト機能を使用すれば,アニメーションを独立したパーツとして扱えるようになるので,位置の調整やタイミングの調整がぐっと楽になります。