|
| ドラッグ&ドロップと深度の入れ替えを利用したジグソーパズル Adobe Flash CS3 Professionalを使用してサンプルを作成しています。 |
配列とMath.random()を利用してランダムにカードを並べる
 |
 |
今回のジグソーパズルの仕組みは、「peace」をドラッグ&ドロップし、正解の位置と記録するための「base」と、バラバラに並べた「peace」の位置を比較して、正解な場合正しい位置に吸着させます。
3. それではActionscriptを記述します。レイヤー「action」の1フレーム目に以下のActionscriptを記述してください。
nowDepth = 1;
onMouseMove = function(){
updateAfterEvent();
}
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 ();
}
}
やや長文ですね。少しずつ見ていきましょう。1行目は重ね順、深度を管理するために用意した変数「nowDepth」です。深度はムービークリップが持つ重ね順と理解してください。パズルはピースをドラッグした際に一番上に表示されなければ分かり辛いですよね。今回は常に一番上に表示されるようにドラッグする度にこの変数に1を加算しています。
2行目からの関数はマウスが動作する度に「updateAfterEvent()」を実行しています。これはドラッグの動作を滑らかにするものです。
後半のfor文は「1～9」まで番号がついている各ムービークリップにまとめて関数の処理を記述している部分です。まずは前半の以下の部分に注目しましょう。
_root["peace"+i].onPress = function(){
this.swapDepths(_root.nowDepth);
_root.nowDepth += 1;
this.startDrag();
}
この部分は「onPress」イベントを利用して、ドラッグが開始された際の処理を記述しています。2行目の「this.swapDepths()」は、「this」自身を「()」内の深度に変更するという意味です。ここでは先程宣言した変数「_root.nowDepth」に変更しています。次行でこれに「1」を足しているので常に最善面にドラッグしたインスタンスが深度変更されます。
4行目で「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 ();
}
この部分は「onMouseUp」イベントでドロップされた際の処理を記述しています。2行目に注目してください。「if (eval(this._droptarget) == _root["base"+i]){}」で「もしドロップしたとき下にターゲットのインスタンスがあったら以下を実行する」という意味になります。以下ではターゲットと同じ位置に移動しているので、ターゲットの上でドロップした場合、ドラッグしていたインスタンスはターゲットと同じ位置に吸着される事になります。
最後に「stopDrag()」でドロップを終了しています。
これで完成です！完成したFlashファイルをダウンロード。
深度の概念は単純に重ね順だけではなく、今まで慣れていたレイヤーの概念より更に上に表示されるものです。今回のようにインスタンスを入れ替える必要がある場合には必須のテクニックですから是非習得してください。
余談ですが、 最近では3Dの概念がFlashに登場していますが、実は深度の管理は未だに自力で行う必要があります。せっかくZ軸を手軽に利用出来るのにちょっと面倒くさい部分ですね。今後もまだまだ深度管理は忘れられないことになりそうです。
