PR
図3●scriptレイヤーの5フレーム目を指定したところ
図3●scriptレイヤーの5フレーム目を指定したところ
[画像のクリックで拡大表示]
図6●スタート画面の例<
図6●スタート画面の例<
[画像のクリックで拡大表示]
図7●終了画面の例
図7●終了画面の例
[画像のクリックで拡大表示]

スタート画面と終了画面を
用意してゲームを仕上げる

最後に,スタート画面や終了画面を作成して,ゲームとして仕上げましょう。ActionScriptを使って画面を切り替える方法はいろいろありますが,一番簡単な方法は,キーフレームごとに画面を作成し,必要なムービークリップやボタンを用意する方法です。

 現在,スロット・ゲームとして作成中のFlashムービーは,図3[拡大表示]のように5フレーム目にスクリプトやボタン,リールなどがまとまって配置された状態です。この状態でFlashムービーを再生すると,5フレーム目まで再生された時点でスクリプトが実行され,スロット・ゲームが始まります。このFlashムービーの2フレーム目にスタート画面を作成し,10フレーム目に終了画面を作成しましょう。

 まず,buttonsレイヤーの2フレーム目を選択し,メニューから[挿入]-[タイムライン]-[キーフレーム]とたどります(あるいは[F6])。同じように,scriptレイヤーの2フレーム目,scriptレイヤーの10フレーム目,buttonsレイヤーの10フレーム目にキーフレームを作成します。

 次に,scriptレイヤーの2フレーム目を選択し,[アクション]パネルを開きます。ここに,次のようにタイムラインの再生を止めるコードと,ゲーム画面である5フレーム目に移動するための関数startGameを記述します。

function startGame() {
//5フレーム目に移動する関数
this.gotoAndStop(5);
}
//メインのタイムラインの再生を止める
this.stop();

 次に,buttonsレイヤーの2フレーム目を選択して,スタート画面用に適当な文字やイラストを描き,ゲーム開始用のボタンを一つ配置します。筆者が作成したスタート画面(図6[拡大表示])では,Game Startという文字をボタンにしました。テキストツールで文字を書いて,それを選んだ状態でメニューで[修正]-[シンボルに変換]を選択し(または[F8]),「シンボルに変換」ダイアログボックスでタイプとして「ボタン」を選んで[OK]ボタンを押せば作れます。

 このボタンには,ボタンを押したら先ほどのstartGame関数を呼び出すコードを記述します。

on (press) {
startGame();
}

これでスタート画面は出来上がりです。

 次は終了画面です。buttonsレイヤーの10フレーム目を選択し,適当な終了画面を作って,リプレイのためのボタンを一つ配置します。筆者が作成した画面(図7[拡大表示])では,Replay?という文字をボタンとしました。ボタンには次のコードを記述します。

on (press) {
startGame();
}

2フレーム目のボタンに記述したコードとまったく同じですね。startGame関数は,2フレーム目で作成されているため,2フレーム目を再生した後であれば,メインのタイムラインの関数として保持され続けます。そのため,10フレーム目のボタンからでも呼び出せるのです。

 さらに,scriptレイヤーの10フレーム目に,メインのタイムラインの動きを止めるためのコードである

this.stop();

を記述します。これで終了画面は出来上がりです。

 最後に,ゲーム画面から終了画面へと画面を遷移させる処理を記述しましょう。ゲームが終わる条件は,「得点を表すscore変数の値が0以下になったとき」とします。

 変数scoreを増減させる処理は,リスト1の(6)に記述しました。この個所に,スコアを減算した結果,変数scoreの値が0以下になったら10フレーム目にジャンプするコードを追加します。

if (tmpFlg) {
score += 30; //スコアを加算する
} else {
score -= 10; //スコアを減算する
if (score<=0)
this.gotoAndPlay(10);
}

 これで得点が0以下になったら終了画面にジャンプする処理も完成です。[ムービープレビュー]で確認してみましょう。Game Startボタンを押すとゲーム画面へと移り,ゲームが終了すると終了画面へと画面が切り替わることが確認できます。終了画面でReplay?ボタンを押すと,もういちどゲーム画面に切り替わりますね。

 スロット・ゲームを作成するための,基本的な処理を一通りご紹介しました。興味のある方は,最高得点を保持する変数を追加して終了画面に表示させたり,単に終了画面に切り替えるのではなく,終了時には6フレーム目あたりからGame Overという文字が落ちてくるアニメーションを表示させるなど,自分なりの改造をしてみましょう。特に,アニメーションはFlashの得意分野ですので,積極的に活用したいところです。

完成したムービーを
Webページに表示させる

 今回作成したFlashムービーをWebページ上に表示するには,パブリッシュという作業が必要となります。パブリッシュを行うには,メニューから[ファイル]-[パブリッシュ]を選択します。

 パブリッシュを行うと,デフォルトではFlashドキュメントを保存したのと同じフォルダに,同名のswf形式のファイルと,HTML形式のファイルが作成されます。swf形式のファイルが,ムービーの内容が書き出されたファイルで,Flashムービーの再生ソフトであるFlash Playerで再生できます。HTMLファイルには,swfファイルのFlashムービーをWebブラウザ上に表示するためのHTML文が記述されています。

 このHTMLファイルをWebブラウザで開いてみると,作成したFlashムービーがブラウザ上に表示されます。HTMLファイルとswfファイルをセットにしてWebサイトにアップすれば,作成したゲームをインターネットを通じて遊んでもらうことができますね。

 パブリッシュによって作られたHTMLファイルを,「メモ帳」などのテキスト・エディタで開くと,swfファイルをブラウザに表示させるのに必要なHTMLを参照できます。<object …>タグから</object>タグの記述がそうです。この個所をコピーしてHTML文書に貼り付ければ,あなたが作成したWebページの任意の場所にゲームを表示できます。次回は,Flashを使ってWebページ上で遊べる簡単なアクション・ゲーム作りに挑戦してみましょう。

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