(C)TOSSインターネットランド /教師修行・仕事術/パソコン上達法/HP作成/Flash
山本一美（TOSS福井）
ドラッグ＆ドロップした図形を目的の場所にぴったり合わせる方法
サンプルイメージ → fit.swf fit1.swf（元に戻さない） fit1a.swf（ドラッグ時の表示変更）
サンプルのソース → fit.fla fit1.fla（元に戻さない） fit1a.fla（ドラッグ字の表示変更）
（表示変更にボタン使用バージョン）
サンプルイメージ → fit1b.swf
サンプルソース → fit1b.fla
「ファイル」−「新規」 で練習用ファイルを作成し，「名前を付けて保存」で「test3.fla」という名前で
保存する。
１．重ね先（ターゲット）を作る。
・タイムラインパネルで「レイヤー１」をダブルクリックしレイヤー名を「ターゲット」とする。
・ツールボックスの○，□を使って○，□の形を作る。
（輪郭は黒，塗りの色は薄めの色で）
・それぞれを選択し，右クリック→シンボルの作成でムービークリップに変換。名前はそれぞれ「maru_target」，「sikaku_target」とする。
・インスタンス名も同じく「maru_target」，「sikaku_target」とする。
★「ターゲット名」 ＝ 「ピース名＋_target」
・「ウィンドウ」−「ライブラリ」でライブラリウィンドウを表示し，今作成したシンボル２つができていることを確認。
２．ピースを作る。
・ライブラリのそれぞれのシンボルを右クリックし，「複製」でコピーを作る。名前はそれぞれ「maru」「sikaku」とする。
・複製して作ったシンボルを右クリックし，「編集」で塗りの色を変更する。（濃い色に）
・ステージの左上「シーン１」をクリックし，シンボルの編集画面から抜ける。
・「ターゲット」レイヤーの上にレイヤーの挿入し，名前を「ピース」レイヤーとする。
・ライブラリからシンボル「maru」「sikaku」をそれぞれドラッグし，ステージ上に配置する。
このときプロパティパネルでインスタンス名を「maru」，「sikaku」とする。
★「ターゲット名」 ＝ 「ピース名＋_target」
３．アクションスクリプトを記入する。（function定義）
・ピースレイヤの上にさらにレイヤーを挿入し，「スクリプト」レイヤーとする。
・アクションパネルを開き，スクリプトレイヤーの１フレーム目に以下のスクリプトを記入する。
（それぞれのピースに対するドラッグ開始時の処理，ドロップ時の処理を，ここにまとめて書いておき，それぞれのピースのアクションから呼び出して実行するようにする。こうすることで，処理内容の変更はここだけ変更すればよいので楽である。）
スクリプト （行頭に // のある行はコメント行）
stop();
//
//★----ドラッグ開始処理関数定義
function myStartDrag(obj){
obj.startDrag();
//元の位置を記憶
oldX = obj._x;
oldY = obj._y;
}
//
//★----ドロップ時処理関数定義
function myStopDrag(obj){
var targetName;
obj.stopDrag();
//ターゲット名（ターゲット名はピース名＋_targetであること）
targetName = obj._name+"_target";
//重なり判定，吸着
if (obj.hitTest(this[targetName]._x,this[targetName]._y,true)){
obj._x = this[targetName]._x;
obj._y = this[targetName]._y;
}
//ヒットしなかったら元の場所へ戻す ････ ※１
else if(! obj.hitTest(dai)){
obj._x = oldX;
obj._y = oldY;
}
}
※１ ヒットしなかったときの処理 else if(・・・・・ 以下４行 （対応する } まで）を
削除すると，元の場所へ戻らず，ドラッグした場所で止まるようになります。
サンプルイメージ → fit1.swf
サンプルソース → fit1.fla
４．それぞれのピースのアクションを設定する。
・それぞれのピースをクリックして選択し，次のアクションスクリプトを記入する。
（それぞれのピースをマウスクリックしたとき，はなしたときに対して ３で定義した機能を呼び出しに行く。）
//このムービークリップがマウスでクリックされたら
//「スクリプト」で定義されたドラッグ開始処理関数を実行する。
on (press) {
_parent.myStartDrag(this);
}
//ドロップされたら
//「スクリプト」で定義されたドロップ時処理関数を実行する。
on (release) {
_parent.myStopDrag(this);
}
５．プレビューしてみる。
サンプルイメージ → fit.swf
サンプルのソース → fit.fla
☆ピース数を増やしたい場合は， １，２，４，をピースの数だけ繰り返します。
OKなら保存して終了。
次は，正しい場所にドラッグ＆ドロップされたら正解の音を鳴らしてみます。 次へ