図1●今回作成する「スロット・ゲーム」の外観
図1●今回作成する「スロット・ゲーム」の外観
[画像のクリックで拡大表示]
図2●Flashの開発環境(Flash MX Professional 2004の画面だが,Flash MX 2004も同じ)。青枠内が[タイムライン]パネル。パネルの大きさや配置はカスタマイズできる
図2●Flashの開発環境(Flash MX Professional 2004の画面だが,Flash MX 2004も同じ)。青枠内が[タイムライン]パネル。パネルの大きさや配置はカスタマイズできる
[画像のクリックで拡大表示]
図3●1,3,5フレーム目に絵を描いたときのタイムライン。黒丸はキーフレームに何らかのデータ(今の場合は絵)があることを示す
図3●1,3,5フレーム目に絵を描いたときのタイムライン。黒丸はキーフレームに何らかのデータ(今の場合は絵)があることを示す
[画像のクリックで拡大表示]
図4●背景用のレイヤーを追加したところ。レイヤーにはそれぞれ名前を付けられる(名前の部分をダブルクリックすると,変更できる)
図4●背景用のレイヤーを追加したところ。レイヤーにはそれぞれ名前を付けられる(名前の部分をダブルクリックすると,変更できる)
[画像のクリックで拡大表示]

 ちょっとした息抜きにでもゲームを作ってみませんか? 今回からマクロメディアのWebアプリケーション開発ツール「Macromedia Flash MX 2004」を使って,自分のホームページに置けるような,ちょっとしたゲームの作成方法をご紹介していきます。ゲーム作りを通じて,Flashでのプログラミング作法を身に付けてしまいましょう。Flashを持っていないという人は,試用期間が限られますが,無償トライアル版の利用を検討してみてください。

 さて,最初のお題はスロット・ゲームです(図1[拡大表示])。三つの窓に絵柄が流れていて,ストップボタンを押したときに,そろった絵柄に応じて得点(本物のゲームの場合はコインなど)がもらえるというものです。このゲームの作成を通じて,Flashで一番重要な概念である,タイムライン,ムービークリップ,スクリプトを使ったムービー再生・停止の方法,について学習します。それでは早速,始めましょう。

パラパラ漫画が
Flashアニメーションの基本

 Flashは,一定のタイミングで表示する絵を切り替えて表示することによってアニメーションを実現しています。映画のフィルムや,教科書やノートの隅に書いたパラパラ漫画と同じですね。表示する絵を切り替えるタイミングを制御するためにFlashが用意している仕組みが,「タイムライン」と呼ばれるものです。

 三つの図形を順番に切り替えて表示する簡単なアニメーションを作成してみましょう。Flashを起動したら(図2[拡大表示]),開発環境のメニューから[ファイル]-[新規]-[Flashドキュメント]とたどって新規のFlashドキュメントを作成します。画面上部の[タイムライン]パネルを見ると,横方向に目盛(フレーム番号)が表示され,1フレーム目(目盛の1の個所)に白丸が表示されている状態です。このフレームが,パラパラ漫画で言うところの1コマになります。各フレームに異なった絵を配置し,フレーム番号の順に表示させることにより,絵が動いて見えるわけです。

 タイムラインの6フレーム目を選択し,メニューから[挿入]-[タイムライン]-[フレーム]とたどって(または,ショートカット・キーの[F5]を押して),フレームの長さを延長します。次に,3フレーム目を選択し,メニューで[挿入]-[タイムライン]-[キーフレーム]とたどって(または[F6]キー),「キーフレーム」を挿入します。同様に,5フレーム目を選択してキーフレームを挿入します。

 キーフレームは,表示する絵を切り替える「キー」となるフレームのことです。つまり今の作業は,3フレーム目と5フレーム目に表示する絵を切り替えるための準備をしたわけですね。これで,全体としては6フレームの長さで,1,3,5フレーム目で表示する絵を切り替えるアニメーションの作成準備ができました。1フレーム目を選択し,適当な絵(例えば円)を,画面中央の「ステージ」に描きます。同じく3フレーム目,5フレーム目を選択して,それぞれ異なる絵(例えば,四角形,三角形)を描いてみましょう。タイムラインの状態は,図3[拡大表示]のようになるはずです。

 描き終えたら,メニューから[制御]-[ムービープレビュー]を選択します(または[Ctrl]+[Enter])。プレビュー画面が開いて,絵柄が切り替わるアニメーションが表示されますね。Flashで作成したアニメーションを表示させることを「Flashムービーを再生する」と呼びます。まさに映画感覚ですね。

 Flashムービーの再生速度は,1秒間に何フレームぶん表示するかという「フレームレート」で設定します。デフォルトでは12fps(1秒間に12フレームを表示)です。フレームレートの設定値は,メニューから,[修正]-[ドキュメント]とたどって現れる(または[Ctrl]+[j]),ドキュメントプロパティ・ダイアログボックスの「フレームレート」欄で,変更できます。このダイアログボックスではほかにも,ムービーの幅や高さ,背景色といった設定を行えます。

 先ほど作ったFlashムービーをよく見ると,1フレーム目から6フレーム目までを表示した後で,もう一度1フレーム目に戻って繰り返し表示がされていることに気が付きます。プレビュー画面を閉じるには,画面右上の×ボタンをクリックします。

 ついでに,「レイヤー」の仕組みも説明しておきましょう。レイヤーは,OHPシートのように2枚以上の絵を重ね合わせて表示する仕組みです。メニューから[挿入]-[タイムライン]-[レイヤー]と選択し,新規のレイヤーをタイムラインに挿入します(図4[拡大表示])。例えば,草原を車が走るアニメーションを作成したい場合には,草原を描いた背景用のレイヤーと,車を描いたレイヤーを別々に用意しておきます。背景用レイヤーで草原を表示させながら,もう一方のレイヤーで車の位置や形を変化させることでアニメーションを作成できるわけです。

下記のURLから、サンプル・プログラムを無償ダウンロードできます。
http://software.nikkeibp.co.jp/software/download/down04c.html#200410