Flash®

画像を動かしてみよう!

画像を動かす
いよいよ、Flash®の醍醐味である、「画像を動かす」という作業に挑戦します。

240x240のFlash Lite2.0®を作成できる状態を準備します。(方法については、前回までのコラムを参照して下さい)ライブラリには、前回までのコラムでも使用していた猫の画像を読み込んであります。

まず、もっとも基礎となるタイムラインを利用して、画像を左から右へ移動する手順を紹介します。
動きのあるFlash®は、このタイムラインというものにあわせて動作しています。


画面の上側に上記のような部分があると思います、1、5、10、15の様に数字がふられている部分がタイムラインです。

タイムラインのことを理解する上で、重要なのが画面の下側に「12.0fps」書かれている、「fps」という考え方になります。「fps」はframe per secondの省略系で、1秒間に何コマの画面をアニメーションするかということを表わす単位です。12fpsの場合、1秒間に12コマ、すなわちタイムラインの12のところまでに設定した内容を1秒で表示するということを表わしています。

この状態で、プレビューの四角の中の左側の方に、猫の画像を下図のように配置します。


タイムラインの2のところを選択したあと、マウスの右ボタンをクリックして、「キーフレームの挿入」を選択して下さい。


その状態で、上記のようにプレビューの上の猫をマウスで、画面中央ぐらいまで移動して下さい。

ファイル→パブリッシュプレビュー→Flashとメニューを選択することによって、どのように猫が動くかを見ることが出来ます。


ちょっとせわしないですが、猫の画像が左側と中央をいったりきたりしているように見えると思います。(実際には点滅しているような感じに見えるでしょうか)

このように、タイムライン上の1つ1つで、どこに画像を配置するかを決めることで細やかにアニメーションを作成することが出来ます。

ところで、ここまで作業していて、「こんな大変な方法で、Flash®を利用した複雑なアニメーションは作成されているの?」と思うと思います。この方法は、タイムラインという考えを理解してもらうために行なってもらっただけです。もっと、スムーズかつ簡単に画像を動かすことが出来る「トゥイーン」と言う方法がありますので、次でその方法を紹介します。

トゥイーンアニメーションで動かす
先ほどまでの方法では、非常に複雑で面倒な作業をするにもかかわらず、あまりきれいな動きをさせることが出来ませんでした。

Flash®には、なめらかに画像を動かすために「モーショントゥイーン」という機能が搭載されています。トゥイーンとは、前述のように1つ1つのタイムラインを設定していくのではなく、タイムライン上の始点と終点、画面上で画像を動かしたい始点と終点を設定することで、指定した区間を自動で移動させることが出来る機能です。

タイムラインの1のところで、プレビューの左の方に猫の画像を配置するところまでの手順は同じです。

タイムラインの20のところをクリックして、キーフレームの挿入を実施して下さい。タイムラインの1~19の上にマウスを持っていき、右クリックして「モーショントゥイーンを作成」を選択して下さい。


上の図のようにタイムラインの下部に右向きの矢印が表示されます。タイムラインの20のところをクリックして下さい。


上の図のように、プレビューの中に表示されている猫が水色の枠で囲まれた状態になったと思います。この状態で、あなたが画像を動かした場所まで、マウスで画像を移動して下さい。ちょっと変化をつけるために、右下などに移動してみると、違いがわかりやすいかもしれません。

移動が終ったら、先ほどと同様にパブリッシュプレビューを実施して下さい。


上記のようにスムーズに猫の画像が右下に移動したと思います。このように、トゥイーンを使用するとタイムラインの1つ1つに細かい設定をしなくても、なめらかな動きを実現することが出来ます。

もう1つ、トゥイーンやタイムラインが視覚的にわかりやすいサンプルをお見せします。


このサンプルでは、猫が右へ移動して画面の端まで行くと左に移動して戻ってきます。このサンプルは、最初のタイムラインの24コマ(12.0fpsで2秒)で右に移動して、次の12コマ(12.0fpsで1秒)で左に戻るようになっています。トゥイーンを使えば、コマ数を増やしたり減らしたりすることで同じ距離をゆっくり移動させたり、早く移動させたりということが感覚的に非常に簡単に実現できます。

今回は、タイムラインという考え方と、トゥイーンを利用してなめらかに画面を動かすことに挑戦しました。これだけでは、まだまだGIFアニメとの違いがわからない人もいるかもしれません。そこで、次回は、キー入力で画面の絵が動いたり止ったりします。これぞFlash®の醍醐味の部分です。



記事執筆:庄司 高士(元気モバイル株式会社 常務取締役)

略歴:1970年 神奈川県出身
1998年より某ゲームメーカ-勤務。モバイルコンテンツ事業の立ち上げと、オンラインゲーム事業の立ち上げをしたあと、2006年に現職に就任。現在、コンテンツプロバイダとして、ソフトバンク向けサービスを提供している。