シルエットパズルゲーム

概要

右に山積みにされた中からドラックして、パネルの中の同じシルエットにドロップする、「シルエット合わせパズルゲーム」フラッシュムービー。
ドラッグ＆ドロップするだけ。正解○、不正解×の判定はあります。
ステージは２つあり、制限時間を設定。時間内にクリアできないとゲームオーバーとなり、次のステージに進めません。
クリアできた場合は、時間制限がなくなるので、テキストエリアの文字をゆっくり読む事ができます。
プレイヤー名やクリアタイムを、記憶する機能はありません。

FLASH（アクションスクリプト）

まず、フォトショップで素材の書類を作ります。下図は概要です。
（実際のフォトショップとは動作が違いますが、ここに表示するために似せて作ったフラッシュです。1/2の大きさにしてあります）
　　
このフォトショップ書類をFLASHに読み込みます。
AS2プロジェクトで、1100×900、30fps、#333333、プレーヤー8で新規プロジェクトを作成します。正解の時に鳴る「seikai.mp3」をライブラリに読み込んでおきます。上記のフォトショップ書類は、スクリプトを与えるレイヤーにはそのまま名前を使えるように半角英数字にしてあります。ステージに読み込む時に注意する事は、ドラッグするピースとドロップするターゲットに使う画像の基準点は必ず一緒にする、という事です。（参考図）ついでにインスタンスも設定してもいいと思います。その他のレイヤーは通常どおり左上が基準点にします。ステージに読み込まれると、フォトショップ書類のフォルダはFLASHレイヤーになってしまうので、そのレイヤーを選択し、分解して、レイヤーに配分します。逆に複数レイヤーをムービークリップにして、下層に内包してしまえば、シーン1のタイムラインはすっきりします。特に「FF」フォルダのレイヤーは何度も使うので、この作業は数回行います。（FFフォルダのレイヤーから作ったムービークリップは、FF_mc、FF_mc1、FF_mc2、FF_conp1、FF_conp2、FF_over1、FF_over2）
▶まずはピースに使う画像を移動します。（ゲーム１の素材）
　
次に「WAKUbackgroundBG」を透明度”０”にします。
　
そして、「con22」から「WAKUbackgroundBG」までを選択し、上に書いたようにムービークリップ「mc1」として１つのシンボルにします。
透明な「WAKUbackgroundBG」を入れることで、座標（0,0）になり、使い回すのに便利になります。
同じようにして、「con36」から「WAKUbackgroundBG」をムービークリップ「mc2」にします。（ゲーム２の素材）
　
作った「mc1」と「mc2」は、ライブラリに登録され、FF内のファイルを使用してムービークリップを作るのに、数回利用します。

▶次に、シーン１で「mc1」と「mc2」を再び分解、レイヤーに配分し、ターゲットになるレイヤーのインスタンスを入力します。
　
すべての「○○○_taget」レイヤーに同じ操作をします。

▶次にピースとなるレイヤーにもインスタンスを入力し、ダブルクリックして、タイムラインを編集します。

フレーム1	フレーム"ok"と「○」レイヤー	スクリプト	フレーム"ng"と「×」レイヤー	スクリプト	クリップアクション
//このムービークリップがマウスでクリックされたら //「スクリプト」で定義されたドラッグ開始処理関数を実行する。 on (press) { _parent.myStartDrag(this); } //ドロップされたら //「スクリプト」で定義されたドロップ時処理関数を実行する。 on (release) { _parent.myStopDrag(this); } //マウスオーバーしたら //txtB.a_txtに下記の文字を表示する。 on (rollOver) { _root.txtB.a_txt.text="ミステリーマガジン表紙＆ロッテ・コラボ菓子" } //マウスアウトしたら //txtB.a_txtの文字をなしにする。 on (rollOut) { _root.txtB.a_txt.text="" }			動きの説明 通常はフレーム1で停止。 このピースをターゲットにドラッグ＆ドロップした時、 正解だったら、フレーム"ok"に移動して再生し、フレーム7にきたら フレーム1に戻って停止する。 不正解だったら、フレーム"ng"に移動して再生し、フレーム13にきたら フレーム1に戻って停止する。 ←ピースのクリップアクション ロールオーバーの _root.txtB.a_txt.text="ミステリーマガジン表紙＆ロッテ・コラボ菓子" 部分の、" "内はピースによって内容が変ります。

すべてのピースレイヤーに同じ操作をします。大変な操作ですが「フレームのコピー」をすることで多少軽減できます↓

フレームをコピー	次のピースに移動。レイヤーを追加	フレームをペースト	フレームを挿入

「フレームのコピー」は特殊なので、普通に他のコピーをしても、プロジェクトを閉じるまで記憶します。なので、アクションウインドウを開いておいて、シングルクリックでクリップアクションのスクリプトをコピー＆ペーストし、ダブルクリックで「フレームのペースト」、という感じです。

以下、図説のみ。リンクをクリックして、スライドショーやマウスホイールをまわして見て下さい。

▶FFフォルダのレイヤーから作ったムービークリップ、FF_mc、FF_mc1、FF_mc2、FF_conp1、FF_conp2、FF_over1、FF_over2

フレ ーム	レイヤー"FF" に内包して いるmc	ムービークリップの内容	そのアクションスクリプト
1	FF_mc	ゲームスタート初期画面	スタートボタンを押すとカウントダウンして _root.gotoAndStop("4");
2	FF_mc1	ゲーム1のスタートカウントダウン	カウントダウンして_root.gotoAndStop("4");
5	FF_conp1	ゲーム1　コンプリート画面	リプレイボタンでon (release) {this.gotoAndPlay("151");}ゲーム選択で ゲーム1を選ぶと_root.gotoAndPlay("2");、ゲーム2を選ぶと_root.gotoAndPlay("3");
6	FF_over1	ゲーム1　ゲームオーバー画面	リプレイボタンで_root.gotoAndPlay("2");
7	FF_mc2	ゲーム2のスタートカウントダウン	カウントダウンして_root.gotoAndStop("8");
9	FF_conp2	ゲーム2　コンプリート画面	リプレイボタンでon (release) {this.gotoAndPlay("151");}ゲーム選択で ゲーム1を選ぶと_root.gotoAndPlay("2");、ゲーム2を選ぶと_root.gotoAndPlay("3");
10	FF_over2	ゲーム2　ゲームオーバー画面	リプレイボタンで_root.gotoAndPlay("7");

レイヤー"タイマー"に内包しているムービークリップ（timerとtimer2）

1	2ダイナミックテキスト （変数countTime）	3静止テキスト	4アクション	5〃	6〃	7	8ダイナミックテキスト （変数countTimes）	9静止テキスト	10アクション	11〃	12〃
timerのアクションスクリプト //フレーム1に //グローバル変数の初期化 countTime = 0; bActive = 1; startTime = getTimer(); //タイマーストップ用メソッドの定義 function stopTimer() { bActive = 0; } //タイマーの動作を行うメソッドの定義 function action () { if (bActive) { var nowTime = Math.floor((getTimer() - startTime)/1000); countTime = nowTime; } } //このタイマーの値を調べるときに使うメソッド function value () { return countTime; } //フレーム2に this.action(); //フレーム3に this.gotoAndPlay(_currentFrame - 1);						timer2のアクションスクリプト //フレーム1に //グローバル変数の初期化 countTimes = 0; bActive = 1; startTime = getTimer(); //タイマーストップ用メソッドの定義 function stopTimer() { bActive = 0; } //タイマーの動作を行うメソッドの定義 function action () { if (bActive) { var nowTime = Math.floor((getTimer() - startTime)/1000); countTimes = nowTime; } } //このタイマーの値を調べるときに使うメソッド function value () { return countTimes; } //フレーム2に this.action(); //フレーム3に this.gotoAndPlay(_currentFrame - 1);

レイヤー"タイムアップ"に内包しているムービークリップ（timeupとtimeup2）

1クリップアクション	2ダイナミックテキスト（変数txtTime）	3クリップアクション	4ダイナミックテキスト（変数txtTimes）
timeupのアクションスクリプト onClipEvent (load) { endTime = getTimer()+3*60*1000; game = true; } onClipEvent (enterFrame) { if (game) { Time = Math.ceil((endTime-getTimer())/1000); if (Time <= 0) { game = false; txtTime = "あと00分00秒"; _root.gotoAndPlay("over"); } else { mt = ("0"+Math.floor(Time/60)).substr(-2,2); ss = ("0"+Time%60).substr(-2,2); txtTime = "あと"+mt+"分"+ss+"秒"; } } }		timeup2のアクションスクリプト onClipEvent (load) { endTime = getTimer()+2*60*1000; game2 = true; } onClipEvent (enterFrame) { if (game2) { Time = Math.ceil((endTime-getTimer())/1000); if (Time <= 0) { game2 = false; txtTimes = "あと00分00秒"; _root.gotoAndPlay("over2"); } else { mt = ("0"+Math.floor(Time/60)).substr(-2,2); ss = ("0"+Time%60).substr(-2,2); txtTimes = "あと"+mt+"分"+ss+"秒"; } } }

レイヤー"カウント"に内包しているムービークリップ（変数remainとremains）

1静止テキスト	2ダイナミックテキスト（変数remain）	3静止テキスト	4ダイナミックテキスト（変数remains）

レイヤー"txtBトゥイーン"に内包しているムービークリップ（txtBを２回）

1	2.a_txt	3.txtBトゥイーン	4.txtBトゥイーン	5.txtBトゥイーン	6.txtBトゥイーン	7.アクションスクリプト
txtBのアクションスクリプト this.gotoAndPlay("1"); 分かりにくいですが、ダイナミックテキスト（a_txt）をムービークリップ（txtB）に変換後、タイムラインを100フレームにして、左にスライドするトゥイーンを与え、100フレーム目にアクションスクリプトでループさせると、（txtB）↳（txtBトゥイーン）↳（a_txt）という構造になります。

フォルダ"BG関係"。特記する事なし。並べただけです。

フレーム4	フレーム5	フレーム6	フレーム7	フレーム8	フレーム9	フレーム10

説明が遅くなりましたが、コンプリート画面で、「回転」レイヤーに変形のタイムラインエフェクトを３種類作っています。

40フレームのタイムラインエフェクト	30フレームのタイムラインエフェクト	20フレームのタイムラインエフェクト

それと、カウントダウンの円の動きは、円が1/8ずつ徐々に見えはじめ、円が全部見えたら、パッと消えるんですが、（上のFF_mc1を参照）円もマスクもシェイプで作成。マスクはシンボルに変換。１枚のマスクとトゥイーンで表現しています。マスクとして適用するにはレイヤープロパティを設定する必要があります。
レイヤー名のところを右クリックして、プロパティをクリックすると、レイヤープロパティのパネルが開きます。

マスクのプロパティ。タイプを「マスク」にする	円のプロパティ。タイプを「マスクの対象」にする

▶ シーン１のプロパティ一覧—リンクをクリックすると、各クリップのプロパティやアクションを表示します。（動きは再現していません。）
　　　　　また、フレーム移動やフォルダ開閉、シーン移動すると、プロパティはフレーム用にリセットされます。
　　　　　内包のムービークリップは”ライブラリ”から開いて下さい。ステージやタイムラインからは開けません。（ダブルクリック不能の為）
　　

最後に、パブリッシュ設定のFLASH用です。こちらはHTML用
　　　
以上、使用画像をはじめ、”人のふんどしで相撲を取る”的な内容ですので、flaファイルなどの配布はできませんし、アフターサービス？などありませんので、よろしくお願いします。

使用画像

画像の説明については、ゲーム中のテキストエリアに表示されます。すべて「©青山剛昌／小学館・読売テレビ・TMS 1996」です。
内容は、そのデザインポーズが初出のグッズで、もちろん「私の中では」なので、かならずしも正確とはいえません。
「この初出は間違っている」と思われるかもしれませんが、その点はよしなに・・・。
なお、「TVアニメコレクションDVD○○」と表記されるものについては、同会社の「ポストカードブック・決死の脱出アトラクション」にて既出
（『新規書き下ろし』という表記がある）ですが、グレイスケールでしたので、カラーの「TVアニメコレクションDVD○○」としました。
イラストキャラクターデザイン；(株)トムス・エンタテイメント
また、配信画像そのままでは、FLASHの素材になりません。通常、BMPかJPG画像で配信されているので、フォトショップなどのソフトで、背景を切取り、背景が透明なまま維持するフォーマットで保存する必要があります。今回は、.PSDで作ってFLASHに取り込みました。他のフォーマットとして、GIFやPNGとして保存するのもよいかと思います。FLASHをパブリッシュ、HTMLをコーディング、JSライブラリを編集したりするよりも何よりも、画像前処理（透過性を保持）するのが一番時間がかかります。

FLASH関連リンク

サイトの他のコンテンツ