ヒトに頭を乗せてあげよう。
ドラッグ＆ドロップと、ドロップ先へスナップをしてみる。
グラフィックの準備
今回は、ヒトの体と、頭を二つ用意。それと今回は、頭を乗せたい位置に、透明なオブジェクトを用意。頭をそこにドロップすると、スナップ（吸い付くように固定）させるようにする。
それぞれインスタンス名をbody,head1,head2,head_hitとする。
また、head_hitは、選択して「プロパティ」の「カラー」を「アルファ」モードにして、値を0％にする。（透明にして見えなくする。）図ではわかりやすく色をつけてるだけ。
スクリプト書き書き
//------------------------------
//各種宣言
//------------------------------
//ムービークリップ宣言
var head1:MovieClip; //(1)
var head2:MovieClip; //(1)
var body:MovieClip; //(1)
var head_hit:MovieClip; //(1)
//イベントへ割り振り
//head1
head1.onPress = StartMove1; //(2)
head1.onRelease = StopMove1; //(2)
//head2
head2.onPress = StartMove2; //(2)
head2.onRelease = StopMove2; //(2)
//------------------------------
//メソッド
//------------------------------
// head1 ------------------------------
//head1の移動開始
function StartMove1()
{
//head1の中心をマウス位置へ。
//こうすることでオブジェクトの真ん中を持つことになる。
this._x = _xmouse; //(3)
this._y = _ymouse; //(3)
//ドラッグ開始
this.startDrag(); //(4)
}
//head1の移動終了
function StopMove1()
{
//ドロップ先のオブジェクト取得
var target = eval(this._droptarget); //(5)
//ドラッグ終了
this.stopDrag(); //(4)
//ターゲットにドロップされたなら..
if(target==head_hit){ //(5)
//ターゲットと同じ座標へスナップ
this._x = target._x; //(5)
this._y = target._y; //(5)
}
}
// head2 ------------------------------
//head2の移動開始
function StartMove2()
{
this.onEnterFrame = Move2; //(6)
}
//head2の移動終了
function StopMove2()
{
delete this.onEnterFrame; //(6)
}
//head2の動き
function Move2()
{
this._x = _xmouse; //(6)
this._y = _ymouse; //(6)
}二つの方法でドラッグ＆ドロップを実現
- (1)各種変数宣言
- ムービークリップを宣言してスクリプトで操作できるようにする。頭をスナップする位置をオブジェクトで判定するため、head_hitも定義。
- (2)イベント割り振り
- 各オブジェクトに、動作開始と終了するイベントを割り振り。
今回は、動作開始はマウスボタン押したとき、終了は離したときになる。head1とhead2は違う方法でドラッグ＆ドロップを実現するため、別の関数を割り振りしている。 - (3)オブジェクトをマウス位置へ (head1)
- _xmouse,_ymouseはマウス位置の座標（グローバル座標：ステージ上での位置）。オブジェクトの端の方でドラッグ開始でも、マウスとオブジェクト中心の位置が合うようにしている。
- (4)startDrag(),stopDrag()
- ActionScriptで用意されているドラッグ＆ドロップ実現するための関数。こんなもの用意されてるなんて便利！ｗここらへんでのthisはhead1のこと。（詳しくは、関数を呼び出すオブジェクトのこと)
startDragをすると、次にstopDragが呼ばれるか、別のstartDragが呼ばれるかするまでマウスにオブジェクトを追従させる。 - (5)ドロップ先のオブジェクト取得
- マウスを放したときに、重なってるオブジェクトを取得。_droptargetプロパティはそのオブジェクトのパスが格納されている。さらにevalでそのパスからオブジェクトの参照を取得。
オブジェクトが無い場合は、undefinedになる。
その後、if(target == head_hit)でhead1とhead_hitが重なっているかを判定。trueなら座標を与えてスナップさせるようにする。 - (6)head2は別の方法でドラッグ＆ドロップを実現
- ドラッグ開始でhead2のonEnterFrameイベントに関数を割り振ることでフレームごとにマウスに追従するようにすれば良い。ドロップの時にはonEnterFrameに割り振られた関数をdelete
頭を動かしてください。
というわけで、完成ー
ちょっと問題が。。
head2を早く動かすと。。
うまく追従しないことがわかる。フレームごとの動作なので、フレームレートより早い動きにはどうしても付いていけないということ。
head1はhead2よりも滑らかに動く^^
でもまだちょっとぎこちない。。方法はありそうなので調べてみましょう。
次回以降
- キーボードの入力受け取り。
- 音を鳴らしてみる。
- 外部ファイル管理をしよう。
- プログレスバーを作ろう。
などなど。
参考
- Design Bible FLASH制作工房 - 石原修一・岡村健一（著）
画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会