Flash/ActionScript

Flashでジグソーパズルを作成

Flashを使ってジグソーパズルを作成します。あなたのお気に入りの写真やイラストでオリジナルパズルを作成しましょう!

執筆者:渡辺 大介

Flashを使ってジグソーパズルを作成します。あなたのお気に入りの写真やイラストでオリジナルパズルを作成しましょう!
ドラッグ&ドロップと深度の入れ替えを利用したジグソーパズル
Adobe Flash CS3 Professionalを使用してサンプルを作成しています。

配列とMath.random()を利用してランダムにカードを並べる

サンプルの概要
1. サンプルのFlashをここからダウンロードしてください。上から「action」レイヤー、図のようにパズルのピースが配置されている「peace」レイヤー、パズルのピースを縁取った「line」レイヤー、正解のピースの形が配置された「base」レイヤーが用意されています。

サンプルの概要
2. 「peace」レイヤーには左上から「peace1」~「peace9」と名前がついているパズルのピースのインスタンスが配置されています。同様に「base」レイヤーにはそれぞれのピースに対応する「base1」~「base9」が用意されています。

今回のジグソーパズルの仕組みは、「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軸を手軽に利用出来るのにちょっと面倒くさい部分ですね。今後もまだまだ深度管理は忘れられないことになりそうです。
【編集部おすすめの購入サイト】
楽天市場で Flash 関連の書籍を見るAmazon で Flash 関連の書籍を見る
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます