Flash パズル

Question

Flashでジグゾーパズルを作りたいのですが
パズルのピースは一つ一つ手作業で作るのですか？
それとも自動で作る事ができるのでしょうか？

sassakun · Accepted Answer

自動で作るような機能はないでしょう。
自分で作ります。


ジグソーパズルの作り方ですが，
私なら，まず写真か絵をステージ上に用意します。
写真の方が簡単なので，
写真ということで説明を続けます。


まず，
新規ドキュメントを作成して，
任意の名前で任意のフォルダに保存します。

写真の場合は，
Flash の「ファイル」→「読み込み」→「ステージに読み込み」で，
すでにある JPEG などをステージに読み込むことができます↓。

　（富士山のつもり）
　回回回回回回回回回回回回回回回回回回回回回回回
　回回回□□□□□□回回回回回回回回回□回□回回
　回□□□□回回回回回回回回回回回回□□□□□回
　回回回回回回回回回回回回回回回回回回□□□回回
　回回回回回回回回回回■■■回回回回回回回回回回
　回回回回回回回回回■□□□■回回回回回回回回回
　回回回回回回回回■□□□□□■回回回回回回回回
　回回回回回回回■■□■□■□■■回回回回回回回
　回回回回回回■回回■回■回■回回■回回回回回回
　回回回回回■回回回回回回回回回回回■回回回回回
　回回回回■回回回回回回回回回回回回回■回回回回
　回回■■回回回回回回回回回回回回回回回■■回回
　■■回回回回回回回回回回回回回回回回回回回■■


そのステージ上に読み込まれた写真を選択した状態で，
「修正」→「分解」で写真を分解します。

そして，
その写真の上に新規レイヤーを作成し，
そのレイヤーに写真にぴったりな枠線を線ツールで描きます。
白い部分（□□□）は白い塗りではなくて，
何も無い状態だと思ってください。
枠の線（■■■）だけがある状態です↓。

　■■■■■■■■■■■■■■■■■■■■■■■
　■□□□□□□□□□□□□□□□□□□□□□■
　■□□□□□□□□□□□□□□□□□□□□□■
　■□□□□□□□□□□□□□□□□□□□□□■
　■□□□□□□□□□□□□□□□□□□□□□■
　■□□□□□□□□□□□□□□□□□□□□□■
　■□□□□□□□□□□□□□□□□□□□□□■
　■□□□□□□□□□□□□□□□□□□□□□■
　■□□□□□□□□□□□□□□□□□□□□□■
　■□□□□□□□□□□□□□□□□□□□□□■
　■□□□□□□□□□□□□□□□□□□□□□■
　■□□□□□□□□□□□□□□□□□□□□□■
　■■■■■■■■■■■■■■■■■■■■■■■


レイヤーとしては次のようになります。

　　　　　　　　　　　　　　　１
　□　レイヤー　筆・・■|●| ←線
　□　レイヤー　筆・・■|●| ←写真


それでさらに，
線のレイヤーにジグソーパズルのような線を描いて行きます。
この↓場合６ピースのつもりです（下手ですが）。

　■■■■■■■■■■■■■■■■■■■■■■■
　■□□□□□□■□□□□□□■□□□□□□□■
　■□□□□□□■■■□□□■■□□□□□□□■
　■□□□□□□□□■□□□■□□□□□□□□■
　■□□□□□□■■■□□□■■□□■■■□□■
　■□□□□□□■□□□□□□■□□■□■□□■
　■■■□□■■■■■■□■■■■■■□■■■■
　■□■□□■□■□□■■■□■□□□□□□□■
　■□■■■■□■■□□□□□■■■□□□□□■
　■□□□□□□□■□□□□□□□■□□□□□■
　■□□□□□□■■□□□□□■■■□□□□□■
　■□□□□□□■□□□□□□■□□□□□□□■
　■■■■■■■■■■■■■■■■■■■■■■■

そのとき，
線隙間が開かないように，線どうしはきっちりつなげてください。

　↓良い例　　　　　↓悪い例
　■■■■■　　■■■■■
　□□■□□　　□□□□□
　□□■□□　　□□■□□
　□□■□□　　□□■□□


そして，
書いたジグソーパズルのような線を全部選択し，
「編集」→「コピー」，
そして，写真のある下のレイヤーを選択した状態で，
「編集」→「同じ位置にペースト」。

これで写真の上に線が引かれた状態になります。

試しに，左上のピースの部分の写真を選択してみると，
その部分の写真だけが選択できると思います。

　　　　　　↓選択
　■■■■■■■■■■■■■■■■■■■■■■■
　■回回回回回回■□□□□□□■□□□□□□□■
　■回回回回回回■■■□□□■■□□□□□□□■
　■回回回回回回回回■□□□■□□□□□□□□■
　■回回回回回回■■■□□□■■□□■■■□□■
　■回回回回回回■□□□□□□■□□■□■□□■
　■■■回回■■■■■■□■■■■■■□■■■■
　■□■回回■□■□□■■■□■□□□□□□□■
　■□■■■■□■■□□□□□■■■□□□□□■
　■□□□□□□□■□□□□□□□■□□□□□■
　■□□□□□□■■□□□□□■■■□□□□□■
　■□□□□□□■□□□□□□■□□□□□□□■
　■■■■■■■■■■■■■■■■■■■■■■■


選択した状態で，
「修正」→「シンボルに変換」でムービークリップに変換します。
ムービークリップに変換するときに「基準点」の位置に注意してください。
基準点は「中央」が良いです。


同じ要領で，
切り分けられたピースを全てムービークリップに変換していきます。

全てムービークリップに変換したら，
写真レイヤーの方の線は不要なので，
線の方のレイヤーをロック＆非表示にして，
写真の方のレイヤーの線を消しゴムツールなどで消してください。

　　　　　　　　　　　　　　　　 １
　□　レイヤー　筆×錠■|●| ←線　非表示＆ロック
　□　レイヤー　筆 ・  ・ ■|●| ←写真　線を消す

Flash は線や面の上に面を描くと，
下の線や面が消えますから，
消しゴムツールを使わず，
１色塗りの大きな四角を写真レイヤーに描いても良いです。
その下の線が消せますから楽に線を消すことができます。
線を消したあとで，
１色塗りの大きな四角を消せば塗りも消えます。


そういう感じでできた各ピースのムービークリップに，
次は "インスタンス名" を付けて行きます。
 "インスタンス名" は「アルファベット+0～の連番」という名前が良いです。

この説明では６ピースなので，
「piece0」～「piece5」というインスタンス名をつけることにしておきます。

　　　　↓piece0　　　　　　　↓piece1　　　　　　　↓piece2
　■■■■■■■■■■■■■■■■■■■■■■■
　■□□□□□□■□□□□□□■□□□□□□□■
　■□□□□□□■■■□□□■■□□□□□□□■
　■□□□□□□□□■□□□■□□□□□□□□■
　■□□□□□□■■■□□□■■□□■■■□□■
　■□□□□□□■□□□□□□■□□■□■□□■
　■■■□□■■■■■■□■■■■■■□■■■■
　■□■□□■□■□□■■■□■□□□□□□□■
　■□■■■■□■■□□□□□■■■□□□□□■
　■□□□□□□□■□□□□□□□■□□□□□■
　■□□□□□□■■□□□□□■■■□□□□□■
　■□□□□□□■□□□□□□■□□□□□□□■
　■■■■■■■■■■■■■■■■■■■■■■■
　　　↑piece3　　　　　　　↑piece4　　　　　　　↑piece5


そして，さらに１レイヤー追加して，
そのレイヤーにActionScriptを書きます。

　　　　　　　　　　　　　　　　 １
　□　レイヤー　筆 ・  ・ ■|○| ←スクリプトを書く
　□　レイヤー　筆×錠■|●| ←線　非表示＆ロック
　□　レイヤー　筆 ・  ・ ■|●| ←写真（ピース）


スクリプトは次のように書いてください。

-----------------------------------------
// 全ピースに対して一気に動作定義
for (i=0; i<=5; i++) {
// マウスで押したとき
_root["piece"+i].onPress = function() {
// ドラッグ開始
this.startDrag(true);
};
// マウスを放したとき
_root["piece"+i].onRelease = function() {
// ドラッグ終了
this.stopDrag(true);
};
// ドラッグアウトしたとき ＝ マウスを放したときと同じ
_root["piece"+i].onDragOut = _root["piece"+i].onRelease;
}
-----------------------------------------

これで，
「制御」→「ムービープレビュー」してもらうと，
SWFがパブリッシュされて，
その SWF のピースがドラッグできると思います。

この状態で，いちど上書き保存して，
さらに新しい別の名前で保存し直す方が良いです。
現状にいつでも戻れるようにしておきます。




＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

次に，
ピースが戻る位置までドラッグされたら，
ピタッと戻るべき位置に吸着させる方法を説明します。

写真のあるレイヤーの下に，
新規でレイヤーを作成してください。

　　　　　　　　　　　　　　　　 １
　□　レイヤー　筆 ・  ・ ■|○| ←スクリプト
　□　レイヤー　筆×錠■|●| ←線　非表示＆ロック
　□　レイヤー　筆 ・  ・ ■|●| ←写真（ピース）
　□　レイヤー　筆 ・  ・ ■|○| ←新規レイヤー

そして，
写真レイヤーにあるピースを全て選択して「編集」→「コピー」，
そして，
新規で追加したレイヤーを選択し，「編集」→「同じ位置にペースト」。

そして，
上の方の写真（ピース）レイヤーを非表示＆ロックします。

　　　　　　　　　　　　　　　　 １
　□　レイヤー　筆 ・  ・ ■|○| ←スクリプト
　□　レイヤー　筆×錠■|●| ←線　非表示＆ロック
　□　レイヤー　筆×錠■|●| ←写真（ピース）非表示＆ロック
　□　レイヤー　筆 ・  ・ ■|●| ←新規レイヤー

それで，
新規レイヤーの方にコピーしたピースのインスタンス名をすべて変えて行きます。
吸着スポットという意味で，
「spot0」～「spot5」というインスタンス名を付けます。

　　　　↓spot0　　　　　　　 ↓spot1　　　　　　　 ↓spot2
　■■■■■■■■■■■■■■■■■■■■■■■
　■□□□□□□■□□□□□□■□□□□□□□■
　■□□□□□□■■■□□□■■□□□□□□□■
　■□□□□□□□□■□□□■□□□□□□□□■
　■□□□□□□■■■□□□■■□□■■■□□■
　■□□□□□□■□□□□□□■□□■□■□□■
　■■■□□■■■■■■□■■■■■■□■■■■
　■□■□□■□■□□■■■□■□□□□□□□■
　■□■■■■□■■□□□□□■■■□□□□□■
　■□□□□□□□■□□□□□□□■□□□□□■
　■□□□□□□■■□□□□□■■■□□□□□■
　■□□□□□□■□□□□□□■□□□□□□□■
　■■■■■■■■■■■■■■■■■■■■■■■
　　　↑spot3　　　　　　　 ↑spot4　　　　　　　 ↑spot5


インスタンス名をつけましたら，
その「spot0」～「spot5」をすべて選択して，
下のプロパティインスペクタで，全ての色を「アルファ0％」にします。

　カラー：[アルファ　　ｖ]　[0％　　] ｖ

すべてが透明になりましたら，
そのレイヤーにロックをかけておきます。

　　　　　　　　　　　　　　　　 １
　□　レイヤー　筆 ・  ・ ■|○| ←スクリプト
　□　レイヤー　筆 ・ 錠■|●| ←線　ロック
　□　レイヤー　筆 ・  ・ ■|●| ←写真（ピース）
　□　レイヤー　筆 ・ 錠■|●| ←「spot0」～「spot5」　ロック

そして，
一番上のレイヤーのスクリプトをいったん消して，
次のように変えます。

----------------------------------------
// 全ピースに対して一気に動作定義
for (i=0; i<=5; i++) {
// 各ピースに変数 n とその固有番号をセット
_root["piece"+i].n = i;
// マウスで押したとき
_root["piece"+i].onPress = function() {
// ドラッグ開始
this.startDrag(true);
};
// マウスを放したとき
_root["piece"+i].onRelease = function() {
// ドラッグ終了
this.stopDrag(true);
// スポットとピースの中心点がヒットしていたら
if (_root["spot"+this.n].hitTest(this._x, this._y, true)) {
// スポットに吸着
this._x = _root["spot"+this.n]._x;
this._y = _root["spot"+this.n]._y;
}
};
// ドラッグアウトしたとき ＝ マウスを放したときと同じ
_root["piece"+i].onDragOut = _root["piece"+i].onRelease;
}
----------------------------------------


これで，来るべきところにピースがドラッグされたら，
来るべき位置にぴったり吸着します。


あとは，
「piece0」～「piece5」 を無茶苦茶な場所に配置して，
パブリッシュすれば，
ジグソーパズルの完成となります。


「piece0」～「piece5」 
という ６ピース で説明しましたが，
もっともっとピースは増やしてかまいませんし，
１つのピースの形も，ジグシーパズル風でも良いですし，
自分流のピースの形でも良いです。

とにかく自由なのですから，
もし，ジグソーパズルを自動で作るような機能があっても邪魔（無駄）なだけでしょう。
もしそういう機能があっても絶対私はそういう機能を使いませんよ。
Flash とはそういうソフトです。
ありきたりな何処かで見たことのあるような既製品のような物ではなく，
オリジナルな何かを自作するソフトです。



作り方ばかり説明しましたが，
ActionScriptなどはこちらが参考になると思います↓。

「当たり判定について」
http://hakuhin.hp.infoseek.co.jp/main/as/hittest.html

Flash パズル

自動で作るような機能はないでしょう。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング