トップ / チュートリアル10. アニメーション
チュートリアル 10. アニメーション

何枚も用意した画像を次々に切り替えて表示することによって、アニメーションを実現することができます。

アニメーション用の画像を用意する
アニメーションさせたい部分が動いている画像を、動かしたいだけ用意してください。 たくさんの絵を描かねばならないので、この作業はとても大変です。

たとえば「ひだるま」が、まるでメラメラと燃えているかのように揺らいでいる画像を 3 枚用意してみました。


この 3 枚の画像を登録しておいてください。ここでは、名前を「火2」「火3」としています。

アニメの新規追加
メニューから[画像|アニメーション...]を選択すると、[アニメーション]ダイヤログが表示されます。
[追加...]ボタンをクリックして、新規アニメを作成しましょう。名前は「火ゆらぎ」とでもしましょう。

タイムラインへのセルの追加
[タイムライン]という部分に、実際のアニメのセル(コマ)を登録します。「火」、「火2」、「火3」の 3 枚の画像を すべて[セル追加]ボタンで追加してください。下図のようにします。

タイムラインの編集
[プレビュー]ボタンを押すと、現在の設定でアニメがどう動いて見えるのかを確認することができます。[プレビュー]ボタンを押して [アニメーションプレビュー]ダイヤログを表示し、[再生]ボタン(右向き三角形のボタン)をクリックしてください。

3 枚の画像が、ゆっくりと切り替わって、それで終わりという、なんとも味気ないアニメが再生されました。 修正したいポイントは 2 つ。まず、絵の切り替わりが遅すぎます。もっと速く切り替わらないと、メラメラとして見えません。 第 2 に、一度再生しただけで終わらずに、ずっとループで再生し続けて欲しいです。

[アニメーションプレビュー]ダイヤログを閉じてください。
タイムラインに登録されているセルの各コマの[表示時間[ms]]の欄を見ると、「500ms」になっています。これでは遅すぎますから、 ここを変更します。1/10の「50ms」にしましょう。変更したい数値の部分をダブルクリックすると変更ダイヤログが表示されますので、 「50」と入力して[OK]します。これを 3 つのセルすべてで行なってください。
ループ再生の設定


次にループ再生の設定を行ないます。[ループ設定...]ボタンをクリックしてください。 そして、表示された[アニメーションのループ再生設定]ダイヤログの、[ループ再生する]チェックボックスをクリックして、 チェックマークを入れます。

もう一度[プレビュー]を見てみましょう。今度は狙い通りに、ゆらゆらとアニメーションしているのがわかります。


アニメを適用する
[アニメーション]ダイヤログを閉じて、[ウィンドウ|管理...]を選択して、[ウィンドウ]ダイヤログを表示してください。そして、 今は「火」が選択されている、「ひだるま」の[画像/アニメ]欄をダブルクリックします。すると画像選択ダイヤログが表示されますので、 一番下のほうまでスクロールしてみてください。作成したアニメーション「火ゆらぎ」がありますね。これを選択します。

これで、画面上に表示された「ひだるま」が、アニメーションするようになりました。

スクリプトの修正
イベントのスクリプトを修正しましょう。OnFirstBoot と OnBoot イベントのスクリプトは
<c,とねり><s,素><d,1><c,ひだるま><s,火><d,1>
となっていますが、<s,火> を <s,火ゆらぎ> に変更します。
<c,とねり><s,素><d,1><c,ひだるま><s,火ゆらぎ><d,1>
これで、起動した時から「ひだるま」がアニメーションするようになりました。


前の章へ ← → 次の章へ

[↑ページ先頭に戻る]
Silhouette