フラッシュ、ロールオーバーでスライドするメニューを作りたいのですが

質問

?http://www.au.kddi.com/?
こちらのauのサイトのトップページのスライドするメニューを
作成したく、
http://www.condo.fromc.jp/flash/memo/index.html
ここの5つ目の「スライド式メニュー」を使わせてもらったのですが、
こちらのファイルでは、ロールアウトした際に、全てのタブが
右に戻ってしまいます。ロールアウトした時は、タブを等間隔に
戻す様にしたくて、スクリプトをいろいろといじってみて
どうしてもできません。以下のスクリプトのままでは、
右に戻ってしまうのは理屈ではわかるのですが、
計算式がいまいちわかりません。
こちらはどのように修正すればよいのでしょうか？

onClipEvent (load) {
nMyNum = 0;
nTotal = 4;
nMinX = 5;
nMaxX = 468;
nDest = nMaxX;
nDelay = 10;
this.hitArea = button_mc;
function xSetDest(nNum) {
var i = 1;
while (i<=nNum) {
_parent["cont"+i+"_mc"].xSetMove("left");
i++;
}
while (i<=nTotal) {
_parent["cont"+i+"_mc"].xSetMove("right");
i++;
}
}
function xSetMove(sDest) {
switch (sDest) {
case "left" :
nDest = nMinX;
break;
case "right" :
nDest = nMaxX;
break;
}
this.onEnterFrame = xMove;
}
function xMove() {
nNextX = this._x+(nDest-this._x)/nDelay;
if (Math.abs(nDest-nNextX)>0.1) {
this._x = nNextX;
} else {
this._x = nDest;
delete this.onEnterFrame;
}
}
}
on (rollOver) {
this.xSetDest(nMyNum);
}

回答No.1

is_may · ベストアンサー

参照サイトのプログラムをいじるのは少し難しかったので自作してみました。一応分かりやすく作ったつもりですけど、参考程度に。。

手順
1.表示するパネルの数だけムービークリップを作ります。
それぞれのムービークリップに画像や文字を配置します。クリックではなくオンマウスで反応するため他のパネルが脇によけたとき、マウスが反応するように全面にシェイプなどを置いておいてください。
2.作成したムービークリップをステージに配置し、Y軸をそろえます。X軸は最初に初期化するので適当でOK。
3.配置したムービークリップにインスタンス名をつけます。
左から順に「pan1」、「pan2」、「pan3」・・・となります。番号が大きくなるほど前面になるようにしてください。
4.フレームアクションに以下を記述します。

var nTotal = 5;//パネルの総数（固定パネルも含む）
var nWidth = 600;//表示領域の横幅
var nSpan = 40;//マウスを乗せた時、縮小するパネルとパネルの間隔
var nSpd = 0.2;//遅延率（0＜nSpd≦1）
var nAutoRun = 4000;//自動再生の間隔（ミリ秒、4000=4秒）
//ここまで

var run = 0;
var auto = setInterval (xAutoRun, nAutoRun);
for (var i = 0; i < nTotal; i++) {
this["pan" + (i + 1)]._x = this["pan" + (i + 1)]._loc3 = nWidth / nTotal * i;
this["pan" + (i + 1)]._loc1 = i;
this["pan" + (i + 1)].onRollOver = function () {
clearInterval (this._parent.auto);
this._parent.xMovePannel (this._loc1);
};
this["pan" + (i + 1)].onRollOut = function () {
this._parent.auto = setInterval (this._parent.xAutoRun, this._parent.nAutoRun);
this._parent.run = 0;
this._parent.xRestorePannel ();
};
}
function xMovePannel (id) {
for (var i = 0; i < nTotal; i++) {
if (i <= id) {
this["pan" + (i + 1)]._loc2 = nSpan * i;
} else {
this["pan" + (i + 1)]._loc2 = nWidth - nSpan * (nTotal - i);
}
this["pan" + (i + 1)].onEnterFrame = function () {
this._x += (this._loc2 - this._x) * this._parent.nSpd;
if (Math.abs (this._x - this._loc3) < 0.1) {
this._x = this._loc2;
delete this.onEnterFrame;
}
this._loc3 = this._x;
};
}
}
function xRestorePannel () {
for (var i = 0; i < nTotal; i++) {
this["pan" + (i + 1)]._loc2 = nWidth / nTotal * i;
this["pan" + (i + 1)].onEnterFrame = function () {
this._x += (this._loc2 - this._x) * this._parent.nSpd;
if (Math.abs (this._x - this._loc3) < 0.1) {
this._x = this._loc2;
delete this.onEnterFrame;
}
this._loc3 = this._x;
};
}
}
function xAutoRun () {
xMovePannel (run);
run++;
if (run >= nTotal) {
run = 0;
}
}

プレビューすれば、インタンス名が間違っていなければ動くはずです。
プログラム冒頭の5つの変数は適宜編集してください。

お礼

ご丁寧に、教えていただいて本当に助かりました
バッチリ再現することができました。ありがとうございます！