onEnterFrameで予定の位置で止まってくれない。

質問

http://www.icnet.ne.jp/~ang74g5c/
↑このようなものを作ってみました。

フラッシュのサイズは800×600px。
一つの色のパネルの大きさも800×600pxで、様々な色を合わせて3行3列で合計9個のパネルを並べたものをイラストレータで作成してフラッシュに入れ、インスタンス名はcolorpannel（基準点は左上）としました。

右上の番号を押すと想定の位置で止まるようにしたいと思い、フレームに以下の設定をしてみました。
（右上の番号にはそれぞれnum1～num9までのインスタンスネームをつけています。）

-------------------------------------
num1.onRelease = function() {
_root.onEnterFrame = function() {
if (_root.colorpannel._x>=0) {
_root.colorpannel._x -= 30;
}
if (_root.colorpannel._x<=0) {
_root.colorpannel._x += 30;
}
if (_root.colorpannel._y>=0) {
_root.colorpannel._y -= 30;
}
if (_root.colorpannel._y<=0) {
_root.colorpannel._y += 30;
}
};
};

num2.onRelease = function() {
_root.onEnterFrame = function() {
if (_root.colorpannel._x>=-800) {
_root.colorpannel._x -= 30;
}
if (_root.colorpannel._x<=-800) {
_root.colorpannel._x += 30;
}
if (_root.colorpannel._y>=0) {
_root.colorpannel._y -= 30;
}
if (_root.colorpannel._y<=0) {
_root.colorpannel._y += 30;
}
};
};

num3.onRelease = function() {
_root.onEnterFrame = function() {
if (_root.colorpannel._x>=-1600) {
_root.colorpannel._x -= 30;
}
if (_root.colorpannel._x<=-1600) {
_root.colorpannel._x += 30;
}
if (_root.colorpannel._y>=0) {
_root.colorpannel._y -= 30;
}
if (_root.colorpannel._y<=0) {
_root.colorpannel._y += 30;
}
};
};

（以下、num9まで座標位置が変わったものだけを記述していますので省略します。）
-------------------------------------

URLを見ていただくとわかるように、各色の止まる位置が微妙にズレて隣の色が見えてしまっているのです。

OnEnterFrameなので、座標位置を指定してdeleteで止めれば良いのかな？とは思っているのですが、その書き方もよくわかりません。

どなたか、おわかりにある方がいらっしゃいましたら教えていただけませんでしょうか。

よろしくお願いします。

回答No.1

BlurFiltan · ベストアンサー

まず原因です。

原因はわかると思いますが...，
例えば最初
colorpannel の座標は （_x , _y）=（0 , 0） であるとします。
ややこしくなるので
_x にのみついて考えると _x = 0 であるとします。

この状態で例えば num2 が押されると
_x のみに関しては次のスクリプトが動作します。

num2.onRelease = function() {
　　_root.onEnterFrame = function() {
　　　　if (_root.colorpannel._x>=-800) {
　　　　　　_root.colorpannel._x -= 30;
　　　　}
　　　　if (_root.colorpannel._x<=-800) {
　　　　　　_root.colorpannel._x += 30;
　　　　}
　　};
};

最初の座標は _x = 0 なのですから，
この中の

if (_root.colorpannel._x>=-800) {
　　_root.colorpannel._x -= 30;
}

によって colorpannel の _x は -30 ずつ減算されるわけですから
次のようになります。

_x = 0
_x = -30
_x = -60
_x = -90
_x = -120
　～省略～
_x = -660
_x = -690
_x = -720
_x = -750
_x = -780 ←まだ 800 以下
_x = -810 ←なので -30 されて行き過ぎる

ここで 20px 左に行きすぎます。
行き過ぎるので，最初に書いたスクリプトの

if (_root.colorpannel._x<=-800) {
　　_root.colorpannel._x += 30;
}

が動作してしまって，

_x = -810
_x = -780

になります。
この状態でこの _root.onEnterFrame は１ 実行が終了します。

つまり結局 -800 には行き着かない状態 -780 で終わります。

また，
次のフレーム時間では最初 _x = -780 ですから，

if (_root.colorpannel._x>=-800) {
　　_root.colorpannel._x -= 30;
}

によって colorpannel の _x は -30 ずつ減算されるわけですから次のようになります。

_x = -780 ←現在 800 以下
_x = -810 ←なので -30 されて行き過ぎる

行き過ぎるので，

if (_root.colorpannel._x<=-800) {
　　_root.colorpannel._x += 30;
}

が動作してしまって，

_x = -810
_x = -780

になってしまします。

→これの繰り返しで 「_x = -780 から動かない」 ということになります。
（実際は -810 と -780 を振動している感じになり，見えるのは -780 の状態だけになります。）

///////////////////////////////////////////////////////////

対処法ですが，
「行き過ぎたら目標座標で固定する」 という方法を使うのが
一番近道で良いと思います。

------------------------------------
num1.onRelease = function() {
_root.onEnterFrame = function() {
if (_root.colorpannel._x>0) {
_root.colorpannel._x -= 30;
}
if (_root.colorpannel._x<0) {
_root.colorpannel._x += 30;
}
if (_root.colorpannel._x>0-30 && _root.colorpannel._x<0+30) {
_root.colorpannel._x = 0;
}
if (_root.colorpannel._y>0) {
_root.colorpannel._y -= 30;
}
if (_root.colorpannel._y<0) {
_root.colorpannel._y += 30;
}
if (_root.colorpannel._y>0-30 && _root.colorpannel._y<0+30) {
_root.colorpannel._y = 0;
}
};
};

num2.onRelease = function() {
_root.onEnterFrame = function() {
if (_root.colorpannel._x>-800) {
_root.colorpannel._x -= 30;
}
if (_root.colorpannel._x<-800) {
_root.colorpannel._x += 30;
}
if (_root.colorpannel._x>-800-30 && _root.colorpannel._x<-800+30) {
_root.colorpannel._x = -800;
}
if (_root.colorpannel._y>0) {
_root.colorpannel._y -= 30;
}
if (_root.colorpannel._y<0) {
_root.colorpannel._y += 30;
}
if (_root.colorpannel._y>0-30 && _root.colorpannel._y<0+30) {
_root.colorpannel._y = 0;
}
};
};

num3.onRelease = function() {
_root.onEnterFrame = function() {
if (_root.colorpannel._x>-1600) {
_root.colorpannel._x -= 30;
}
if (_root.colorpannel._x<-1600) {
_root.colorpannel._x += 30;
}
if (_root.colorpannel._x>-1600-30 && _root.colorpannel._x<-1600+30) {
_root.colorpannel._x = -1600;
}
if (_root.colorpannel._y>0) {
_root.colorpannel._y -= 30;
}
if (_root.colorpannel._y<0) {
_root.colorpannel._y += 30;
}
if (_root.colorpannel._y>0-30 && _root.colorpannel._y<0+30) {
_root.colorpannel._y = 0;
}
};
};
------------------------------------

↑ 30が連発しています。
こういう場合，本当は

------------------------------------
// スピードとなる変数 spd の設定
spd = 30;
------------------------------------

と最初に書いておいて，その続きに，

------------------------------------
num1.onRelease = function() {
_root.onEnterFrame = function() {
if (_root.colorpannel._x>0) {
_root.colorpannel._x -= spd;
}
if (_root.colorpannel._x<0) {
_root.colorpannel._x += spd;
}
if (_root.colorpannel._x>0-spd && _root.colorpannel._x<0+spd) {
～以下省略～
------------------------------------

と書く方が，
速度の調節時の 書き替えミス や 書き替え労力 が激減できて良いです。

> deleteで止めれば良いのかな？

目標の _x 座標 と _y座標 に到達する時刻が違いますから，
いつ delete するべきかを判定させるスクリプトが入って，
さらにもっと複雑になってしまいますよ。

本当は delete した方が良いかもしれませんが，
上の計算くらいでしたらさほど CPU の負担にもならないので，
delete する必要も特にないかなと思います。
(上の計算より，画像を動かす為に使う CPU への負担の方が数百～数千倍以上多いと思います。)

お礼

有難うございます！！！
教えていただいた方法で完璧にできました。
「行き過ぎたら目標座標で固定する」方法は今後も何かと重宝すると思います。　まだまだ始めたばかりでわからないことだらけで、頭を抱えておりましたが、おかげさまでスッキリしました。
有難うございました。