Flash(as2.0)を使用してパズルを作成
カテゴリ : Flash, すべてのカテゴリ
(Puzzle pieces – 2 By yann.co.nz)
Flash(as2.0)を使用してパズルを作成しよう！
というのが今回の解説になります。
Web上に多くのサンプルが配布されているので、今回サンプルを利用します。
利用するサンプルはこちら → Flashでジグソーパズルを作成 [Flash] All About
基本的には上記のリンクのサンプルをダウンロードし、解説を読めばパズルの基本的な動作は作成できます。
しかし全てのピースが正しい場所に配置された時に、エンディング画面へ進むという処理ができていないのでaction scriptを追記します。
今回の記事は一見長いです。
時間のある方は続きをご覧ください↓
パズルのピースが全て正しい場所に配置されたときに、gotoandStopの記述で指定したラベルへ移動する
というaction scriptの記述について。
サンプルデータの1フレーム目のaction scriptを下記の記述に変更してください。
パズルの位置を指定する記述は赤字部分(x座標の条件)と青字部分(y座標の条件)を編集してください。
stop();
nowDepth = 1;
for(i = 1;i <= 9;i++){
_root[“peace”+i].onPress = function(){
this.swapDepths(_root.nowDepth);
_root.nowDepth += 1;
this.startDrag();
}
_root[“peace”+i].onMouseUp = function(){
if (eval(this._droptarget) == __root[“base”+i]) {
this._x = _root[“base”+i]._x;
this._y = _root[“base”+i]._y;
}
stopDrag ();
}
}
onMouseMove = function(){
updateAfterEvent();
if(/*下記の条件全てに当てはまったらendへ移動する*/
/*peace1のx座標が68以上、72以下*/
68<=peace1._x && peace1._x<=72
/*peace1のy座標が62以上、66以下*/
&& 62<=peace1._y && peace1._y<=66
/*peace2のx座標が198以上、202以下*/
&& 198<=peace2._x && peace2._x<=202
/*peace2のy座標が51以上、55以下*/
&& 51<=peace2._y && peace2._y<=55
/*peace3のx座標が328以上、332以下*/
&& 328<=peace3._x && peace3._x<=332
/*peace3のy座標が62以上、66以下*/
&& 62<=peace3._y && peace3._y<=66
/*peace4のx座標が78以上、82以下*/
&& 78<=peace4._x && peace4._x<=82
/*peace4のy座標が148以上、152以下*/
&& 148<=peace4._y && peace4._y<=152
/*peace5のx座標が198以上、202以下*/
&& 198<=peace5._x && peace5._x<=202
/*peace5のy座標が148以上、152以下*/
&& 148<=peace5._y && peace5._y<=152
/*peace6のx座標が317以上、321以下*/
&& 317<=peace6._x && peace6._x<=321
/*peace6のy座標が148以上、152以下*/
&& 148<=peace6._y && peace6._y<=152)
{/*まずはfrontへ移動する指示*/
gotoAndPlay(“front”);
/*ここから下は気にせずいじらずでオッケー*/
_root.nowDepth == -1;
stopDrag ();
delete this.MouseMove;
peace1._alpha == 0;
peace2._alpha == 0;
peace3._alpha == 0;
peace4._alpha == 0;
peace5._alpha == 0;
peace6._alpha == 0;}
}
下記はpeace1に対する記述の抜粋です。
/*peace1のx座標が68以上、72以下*/
68<=peace1._x && peace1._x<=72
/*peace1のy座標が62以上、66以下*/
&& 62<=peace1._y && peace1._y<=66
コメント部分にあるように上記の記述で
peace1のx座標が68以上、72以下で
peace1のy座標が62以上、66以下の場合
という条件ができます。
パズルのピース「peace1」をflash上で正しい位置に配置した際のx座標とy座標の値をプロパティパネルで確認し、
その値から前後2ピクセルずつ誤差があっても良しとするという設定を作ったことに。(小数点は省きます)
peace1〜peace6までの全ての位置の条件を記述してください。
続いてオレンジ色のテキスト部分の記述について
{/*まずはfrontへ移動する指示*/
gotoAndPlay(“front”);
処理上の問題で一度「front」というラベルに移動する記述を書いてください。（一気に「end」へ飛ぶとうまくいかないので・・・）
そのためタイムラインは下記のようにしています。
「front」は「end」に飛ぶ前のクッションのような役割で、実際は表示されないに等しい場所なのでレイヤーには何も置いていない状態(空白キーフレーム)になります。
「front」フレームには下記のAction scriptを記述します。
stop();
_root.nowDepth == -1;
stopDrag ();
peace1.removeMovieClip();
peace2.removeMovieClip();
peace3.removeMovieClip();
peace4.removeMovieClip();
peace5.removeMovieClip();
peace6.removeMovieClip();
base1.removeMovieClip();
base2.removeMovieClip();
base3.removeMovieClip();
base4.removeMovieClip();
base5.removeMovieClip();
base6.removeMovieClip();
gotoAndStop(“end”);
「end」には下記の記述をします。
stop();
_root.nowDepth == -1;
stopDrag ();
peace1.removeMovieClip();
peace2.removeMovieClip();
peace3.removeMovieClip();
peace4.removeMovieClip();
peace5.removeMovieClip();
peace6.removeMovieClip();
base1.removeMovieClip();
base2.removeMovieClip();
base3.removeMovieClip();
base4.removeMovieClip();
base5.removeMovieClip();
base6.removeMovieClip();
以上で完成です。
最近はあまりFlashを利用しなくなってしまいましたが、ゲーム作成の時はやはり便利ですね。
