浏览了许多老外的网站，发现最精彩之一的莫过于菜单的制作，由于其交互性强，所以
as在这大有用武之地，嗯，前几天忙死了，总算到了周末，把我本来要作为主页菜单的
一组菜单改了改，把它呈给大家，希望对你有帮助:)也希望各高手能多分享些宝贝给
小弟们啦，多多学习，这儿才会更加精彩嘛:)
其他的不多说了，先把东西拿上来吧，因为是我刚才改的，并且和我原来的设计有些
不同，所以难免有错误，高手指正啦！
点击浏览附件试验后发现与tupling的菜单有些差异吧，加入了链式的运动，然后鼠标吸附的效果只在一定的范围内起作用。
嗯，我还是喜欢跟大家说说的我思路,首先要实现链式的运动，其实很简单
当一个按钮被按下拖动的时候，其他的按钮与他保持一定的距离，并呈一定的角度，
要实现这个也很简单，用循环，怎么用呢，稍微要动点脑筋了，呵呵，人的思维与电脑
到底式不一样的，我给按钮们命名了"a0","a1","a2"....通过名字可以联系一相应的数字
0，1，2，3……分成两种可能进行讨论！！一名字在中间的可以通过＋或－来实现控制其周围的按钮间的联系，由于具体有许多技巧见下面的代码：
stop();
fscommand("allowscale", false);
//下面定义了鼠标按下和释放时启动的事件，this.dragging 是用来说明现在该按钮是被按下的，主要是为了防止你的鼠标控制按钮运动与计算机控制的运动相冲突。_root.dr
是用来说明现在在主场景中有按钮被按下了
function doDrag() {
this.startDrag();
this.dragging = true;
_root.dr = true;
this.pres = true;
this.gotoAndStop(2);
}
function noDrag() {
stopDrag();
this.dragging = false;
_root.dr = false;
this.pres = false;
this.gotoAndStop(1);
}
//鼠标经过时改换图标
function showme() {
this.gotoAndStop(2);
}
//下面是主要控制运动的地方
function makemove() {
//分了几种情况，一种是主场景中没有按钮被按下了，这个时候通过记录一个原始的位置，由随机函数产生随机运动，然后回复到原始的位置
if (!_root.dr) {
if (random(80) == 1) {//时不时让他动一动，就算你不动他:)
var s = random(6);
rando((_root["a"+s].oldx), _root["a"+s].oldy);
_root["a"+s]._x = six;
_root["a"+s]._y = siy;
}
//下面的是弹性运动的公式，我现在只简单说说k是用来分割现在位置与目标点之间距离
随着dx的减小vx继续增加，当超过目标点的时候dx变成负数，这样vx又逐渐减小这样又返回运动，为了不使来回无休止的摆动，加入damp减速
var dx = this.oldx-this._x;
var dy = this.oldy-this._y;
this.vx += dx*k;
this.vy += dy*k;
this._x = this._x+this.vx;
this._y = this._y+this.vy;
this.vx = this.vx*damp;
this.vy = this.vy*damp;
//这里分出一种情况，如果主场景知道有按钮被按下，但被按的不是现在的按钮
} else if (!this.dragging && _root.dr) {
//make sure there will not be opposit to formal design
mytxt = new String(this._name);
namenumber = Number(mytxt.charAt(1));
//下面是区分上面我说的数字的两种情况 0,5以外的情况
if (namenumber != 0 && namenumber != 5) {
var xdis = this._x-_root["a"+(namenumber+1)]._x;
var ydis = this._y-_root["a"+(namenumber+1)]._y;
var ang = Math.atan2(ydis, xdis);
//设计一个目标，距离自己为90向临近的按钮靠近！！包括自己前面的和后面的！！！！
var tarx = _root["a"+(namenumber+1)]._x+Math.cos(ang)*90;
var tary = _root["a"+(namenumber+1)]._y+Math.sin(ang)*90;
this.vx += (tarx-this._x)*k;
this.vy += (tary-this._y)*k;
this.vx = this.vx*damp;
this.vy = this.vy*damp;
var xdis = this._x-_root["a"+(namenumber-1)]._x;
var ydis = this._y-_root["a"+(namenumber-1)]._y;
var ang = Math.atan2(ydis, xdis);
var tarx = _root["a"+(namenumber-1)]._x+Math.cos(ang)*90;
var tary = _root["a"+(namenumber-1)]._y+Math.sin(ang)*90;
this.vx += (tarx-this._x)*k;
this.vy += (tary-this._y)*k;
this.vx = this.vx*damp;
this.vy = this.vy*damp;
this._x += this.vx;
this._y += this.vy;
//making the mc which besides to me follow me!
} else if (namenumber == 5) {//5的情况类似了
var xdis = this._x-_root.a4._x;
var ydis = this._y-_root.a4._y;
var ang = Math.atan2(ydis, xdis);
var tarx = _root.a4._x+Math.cos(ang)*90;
var tary = _root.a4._y+Math.sin(ang)*90;
this.vx += (tarx-this._x)*k;
this.vy += (tary-this._y)*k;
this.vx = this.vx*damp;
this.vy = this.vy*damp;
var xdis = this._x-_root.a0._x;
var ydis = this._y-_root.a0._y;
var ang = Math.atan2(ydis, xdis);
var tarx = _root.a0._x+Math.cos(ang)*90;
var tary = _root.a0._y+Math.sin(ang)*90;
this.vx += (tarx-this._x)*k;
this.vy += (tary-this._y)*k;
this.vx = this.vx*damp;
this.vy = this.vy*damp;
this._x += this.vx;
this._y += this.vy;
}
}
}
//下面的代码简单了，我想你看的明白了，我以前的教程中有这类的用法
function rando(x, y) {
six = Math.random()*30+1+(x-15);
siy = Math.random()*30+1+(y-15);
}
k = .4;
damp = .7;
numFeet = 5;
forbid = 0;
for (i=0; i<=5; i++) {
_root.li.attachMovie("b", "a"+i, -i);
_root.li["a"+i]._x = _root["a"+i]._x;
_root.li["a"+i]._y = _root["a"+i]._y;
_root["a"+i].oldx = _root["a"+i]._x;
_root["a"+i].oldy = _root["a"+i]._y;
_root["a"+i].pres = false;
}
//------------------------------------
for (i=0; i<=5; i++) {
_root["a"+i].onRollOver = showme;
_root["a"+i].onPress = doDrag;
_root["a"+i].onRelease = noDrag;
_root["a"+i].onReleaseOutside = noDrag;
_root["a"+i].onEnterFrame = makemove;
_root["a"+i].follow = 0;
}
_root.li.onEnterFrame = function() {
_root.li.clear();
_root.li.lineStyle(1, 0, 50);
i = 0;
while (i<=numFeet) {
if (i != 5) {
_root.li.moveTo(_root["a"+i]._x, _root["a"+i]._y);
_root.li.lineTo(_root["a"+(i+1)]._x, _root["a"+(i+1)]._y);
} else if (i == 5) {
_root.li.moveTo(_root.a5._x, _root.a5._y);
_root.li.lineTo(_root.a0._x, _root.a0._y);
}
i++;
}
};
呵呵，还没完，因为我吸附效果不是通过直接距离实现的，偷懒用了一个透明的 mc通过hitTest来判断上面的代码你如果仔细看了一定发现 每个按钮下我都 attachMovieClip()就是这样
在这上面我加了下面的代码：
看了这么大一堆代码别晕哦，其实我就是想让当鼠标靠近按钮的时候，被吸引了以后就像按下按钮被拖动的时候效果一样跟着鼠标走了，由于与前面联系的变量很多，要解决的逻辑问题也很多，你完全可以按照你的思路去，同样一个效果实现的 手段绝对不止一种
onClipEvent (load) {
this.oldx = _parent._x;
this.oldy = _parent._y;
}
onClipEvent (enterFrame) {
this.dx = (_parent._x-this.old
征集网┊锐志网络┊淘途┊找素材上91┊
交互设计
大赛征集
看酷站
当前位置：首页
> CG动漫 > 资源
> 正文
在线编辑：52design
本文链接：
