PR
図5●選択した範囲をシンボルに変換してライブラリに登録するためのダイアログボックス
図5●選択した範囲をシンボルに変換してライブラリに登録するためのダイアログボックス
[画像のクリックで拡大表示]
図6●pictureBoxムービークリップの各フレームに,スロット・ゲームの窓に現れる絵柄を描く
図6●pictureBoxムービークリップの各フレームに,スロット・ゲームの窓に現れる絵柄を描く
[画像のクリックで拡大表示]
図7●pictureBoxのムービークリップを,ドラッグアンドドロップでメインのムービーのステージ上に三つ並べる
図7●pictureBoxのムービークリップを,ドラッグアンドドロップでメインのムービーのステージ上に三つ並べる
[画像のクリックで拡大表示]
図8●それぞれのムービークリップに名前(インスタンス名)を付けて,スクリプトで制御できるようにする
図8●それぞれのムービークリップに名前(インスタンス名)を付けて,スクリプトで制御できるようにする
[画像のクリックで拡大表示]
図9●スクリプトを記述する[アクション]パネル(右側)。パネルの大きさや配置はカスタマイズできる
図9●スクリプトを記述する[アクション]パネル(右側)。パネルの大きさや配置はカスタマイズできる
[画像のクリックで拡大表示]
図10●リスト1のコードを書いた後,ムービープレビューしたところ
図10●リスト1のコードを書いた後,ムービープレビューしたところ
[画像のクリックで拡大表示]
リスト1●ムービーを停止させるスクリプト。//から<br>行末まではコメント(注釈)になる
リスト1●ムービーを停止させるスクリプト。//から<br>行末まではコメント(注釈)になる
[画像のクリックで拡大表示]

スロット・ゲームの窓の部分を
ムービークリップとして作成する

 Flashムービーの仕組みを理解できたところで,「ムービークリップ」という仕組みを使ってスロット・ゲームの窓の部分を作成してみましょう。ムービークリップは,いわば“小さなFlashムービー”で,Flashムービーに組み込んで使えます。ムービークリップを使うことにより,複雑な見かけのFlashムービーを比較的容易に作成できます。

 新規のFlashドキュメントを作成し,適当な名前を付けて任意のフォルダ内に保存してください。ファイルの保存が済んだら,矩形(くけい)ツール*1を使ってステージ上に四角形を描画します。大きさは適当で結構です。次に,選択ツール*2を使って描画した四角形全体を選択したら,メニューから[ウィンドウ]-[デザインパネル]-[情報]とたどり(または[Ctrl]+[I]),[情報]パネルを表示します。[情報]パネル内の左下のW欄とH欄にそれぞれ「50」と入力すると,先ほど描いた四角形が,幅50,高さ50の正方形になります*3。作業が済んだところで,この正方形を「ムービークリップ」として登録してみましょう。

 ムービークリップとして登録するには,正方形を選択した状態にしておいて,メニューから[修正]-[シンボルに変換]と選択して(または[F8]),「シンボルに変換」ダイアログボックスを表示します(図5[拡大表示])。「名前」欄にこのムービークリップの名前(「シンボル名」と呼びます)を入力して(今回は「pictureBox」),タイプに「ムービークリップ」と選んで[OK]ボタンを押します。これで登録は完了です。シンボル名は,JavaやC++などのプログラミング言語でいうところの「クラス名」のようなものだと思ってください。

 ムービークリップとして登録されたシンボルは「ライブラリ」に登録されます。ライブラリは,ほかのプログラミング言語におけるライブラリ関数やクラスライブラリと同様,「Flashムービーで使用できるシンボルの集まり」にあたります。メニューから,[ウィンドウ]-[ライブラリ]とたどって(または[Ctrl]+[l]),[ライブラリ]パネルを表示させると,pictureBoxがライブラリに登録されていることが確認できます。

 [ライブラリ]パネルの「pictureBox」をダブルクリックすると,これまでと異なるタイムラインとステージが表示されます(ちょっとわかりにくいですが)。これはpictureBoxムービークリップ用のタイムラインとステージです。先ほどと同じ要領で五つのキーフレームを挿入し,それぞれのフレームにスロット・ゲームの窓に現れる絵柄,「7」「BAR」「ベル」「チェリー」「スイカ」といった絵を描きます(図6[拡大表示])*4

 描き終えたら,タイムラインの左上の「シーン1」という個所,またはその左の「←」ボタンを押して元のFlashムービーの画面に戻します。このFlashムービーのタイムラインは1フレームしかありませんね(pictureBoxムービークリップと区別するために,このFlashムービーをここではメインのムービーと呼びましょう)。この状態で[Ctrl]+[Enter]を押してムービープレビューをしてみましょう。すると,先ほど作成したムービークリップが再生され,メインのムービーで5枚の絵柄がくるくると切り替わることを確認できます。

 ムービープレビュー画面を閉じて,メインのムービーのステージに,[ライブラリ]パネルのpictureBoxをドラッグアンドドロップしましょう。すると,ステージ上にすでに配置してあるのとは別にpictureBoxがもう一つ配置されます。Javaなどのオブジェクト指向言語風に言うと「pictureBoxクラスのインスタンスを二つ作成した」状態です*5。pictureBoxをもう一つステージに配置し,スロット・ゲームらしく三つの窓が並んだ状態にします(図7[拡大表示])。この状態でムービープレビューをすると,三つの窓の表示がくるくると切り替わるのを確認できます。

ムービーの再生・停止を
スクリプトで制御する

 これで,スロット・ゲームの窓から見えるリール(回転部)の絵柄のアニメーションはできました。しかし,このままでは三つのリールの絵柄がすべてそろった状態で回っています。やはり三つのリールはそれぞれ違う絵柄で回転をさせたいものです。また,リールを回転させるだけではなく,止める手段も用意しなくてはいけませんね。

 まずは,再生しているFlashムービーを停止する手段を見てみましょう。ムービークリップに対して何らかの処理を行うためには,それぞれのムービークリップに名前(インスタンス名)を付ける必要があります。ステージ上の一番左のリールを選択し,メニューから[ウィンドウ]-[プロパティ]とたどり(または[Ctrl]+[F3]),「プロパティインスペクタ」を表示します。プロパティインスペクタの「インスタンス名」欄に「reel1」と入力します(図8[拡大表示])。同様に真ん中,右のリールにそれぞれ,「reel2」「reel3」とインスタンス名を付けます。

 次に,Flashムービーを制御するスクリプトを記述するレイヤーを,メインのムービーのタイムラインに追加します。先ほど見たように,アニメーションはキーフレームごとに表示する内容を切り替えられますが,スクリプトも同じようにキーフレーム上に記述することで,実行するタイミングを調整できます*6

 現在,メインのムービーには,1フレームしか無いレイヤーが一つ存在しています。レイヤーをもう一つ挿入し,元々のレイヤーに「reels」,追加したレイヤーに「script」という名前を付けます。両方のレイヤーとも,タイムライン上で10フレーム目を選択して,メニューの[挿入]-[タイムライン]-[フレーム](または[F5])で,10フレームまでフレームを延長しておきます。

 「script」レイヤーの5フレーム目に,[挿入]-[タイムライン]-[キーフレーム](または[F6])でキーフレームを作成し,ここにスクリプトを記述します。Flashでスクリプトを記述する際には,[アクション]パネルを使います。5フレーム目を選択し,メニューから[ウィンドウ]-[開発パネル]-[アクション]とたどって(または[F9]),[アクション]パネルを表示します(図9[拡大表示])。

 5フレーム目を選択して表示させた[アクション]パネルに,リスト1[拡大表示]のコードを入力してみましょう。これは,Flashが備えるスクリプト言語である「ActionScript」のコードです。ActionScriptは,多くのオブジェクト指向言語と同じく,「インスタンス.メソッド」や「インスタンス.プロパティ = 値」のように,任意のインスタンスのプロパティやメソッドを「.」(ドット)でつないだ形式で記述します。ステートメントの最後は「;」で終了します*7

 任意のFlashムービーの再生を停止するにはstopメソッド*8を使用します。2行目の「this.stop( );」というコードは,「this」つまり「自分自身」に対してstopメソッドを実行します*9。リスト1のコードはメインのムービーのタイムライン上に記述してあるので,this.stop( )はメインのムービーの再生を停止する命令になります。

 続く「reel1.stop( );」は,先ほど名前を付けたムービークリップ「reel1」に対してstopメソッドを実行します。「reel2.gotoAndStop(3);」は,「reel2」に引数「3」を渡してgotoAndStopメソッドを実行するコードです。gotoAndStopメソッドの引数にフレーム番号を渡して実行すると,特定のフレームでFlashムービーを停止できます。したがって,このメソッドを実行すると,3フレーム目で再生を停止した状態になります。同じように「reel3.gotoAndStop(1);」では,「reel3」が1フレーム目で停止状態になります。

 コードの内容を理解できたら,ムービープレビューをしてみましょう。しばらく(4フレームの間)各リールが回転した後,メインのムービーのタイムラインが5フレーム目まで達したタイミングで再生を停止し,各ムービークリップが指定したフレームで再生を停止することを確認できます(図10[拡大表示])。

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