三星弹性导航菜单初探之详解篇_

三星弹性导航菜单初探之详解篇

说明：此效果与原网站的效果还有很大的差距，代码也没有进行精简和优化，虽然代码丑陋了点，也还有这样那样的不足，但作为一种形式，我们可以进行进一步的探讨和交流。废话少说，接着写。
首先来看看效果：

[全屏欣赏]

OK!开工，打开flash mx ，新建一文件，调出Movie Properties 面板,Background color: #999999 ，其余均采用默认方式。在主场景中画一个无边框的圆，按F8转换为影片剪辑（命名为：mc1// 注：以下均把影片剪辑简称为MC）后对其双击进行编辑，把mc1的中心与场景中的“+”对准。按Shift+F9调出混色器面板，点选放射渐变，拖动两个颜色指示器到左右两端，左边的颜色指示器调节为白色，Alpha为100%，右边的颜色指示器调节为 R:153 G: 153 B:153 （与舞台背景色一样），Alpha为0%。然后按Ctrl+F3调出属性面板，设置mc1的宽高均为30。按R选取矩形工具画一正方形，填充色为R:239 G:239 B:239，正方形边框颜色为 R:41 G:84 B:79 ，点选属性面板把正方形设置为宽高均为5（以上mc1的宽高以及正方形填充色、边框颜色等的设置大家看着办吧），把这小正方形叠加到mc1上面，注意对准mc1的中心。
呜呜........写了那么多，只不过是为" mc1"美化一番罢了，呵呵......先别匝。OK!下面来设置mc1的Alpha渐变。在时间轴上点选第15、30桢，按F6各插入一关键桢，点选第15桢的mcl，注意不要连mc1上的小正方形都选哦，要不就不PL了，呵呵...，Shift+F9调出混色器面板，把右边的颜色指示器往左移大概1/3（怎么知道哪里是1/3啊，倒，我也不知道啊，凭感觉吧）然后在1-15 ，15-30 桢之间作Shape Tweening（形状渐变)。

Ctrl+Enter看看，是不是有点成就感？哈哈......

现在有了mc1，接着再做另两个MC，并均让它们有Alpha的渐变。Ctrl+F8新建一个MC，命名为mc2。在库中双击mc1，在时间轴上点选第15桢，Copy Frames（拷贝桢），回到mc2，在时间轴第一桢Paste Frames（粘贴桢）,以此方法把mc1中的第1桢粘贴到mc2中的第15桢，接着点选mc2中的第1桢拷贝桢并在第30桢上粘贴桢，在1-15桢，15-30桢之间分别作形状渐变。（呼呼......mc来mc去都晕了，但愿你没看晕哦）第三个MC（命名为mc3)的制作方法一样，不过为了取得更好的效果，Shape Tweening的时候可适当延长一些桢，在此不再赘述,请参看源文件。

好了，接下来制作三个button ，分别命名为 bt1、 bt2 、 bt3 。然后分别把 mc1 、mc2、mc3 影片剪辑从库中拖放到 bt1、 bt2 、 bt3 的UP 桢并按F5延长1桢到Over桢，如果想得到更好的效果，你可以在Over桢上下点工夫，呵呵......相信大家都知道，这里不多讲了。
继续.....又新建三个MC，分别命名为 ball1、ball2、ball3 ，接着分别把bt1、 bt2 、 bt3 从库中拖放到 ball1、ball2、ball3 。
汗，喝一口咖啡先，再点一只烟提提神。以上的操作老鸟们肯定熟得不能再熟了，如果是这样你可以匆匆浏览一下就可以了，（倒，怎么不早说？？？）基本的“零件”都装备完毕，正所谓零件俱备，只欠AS啦，你别怕，AS也很简单哦，再说难的我也不会啊，呵呵..........

}首先，要求按钮能够拖动，那先来设置它的AS吧。
点选ball1给它加上如下代码 :

on(press){ //鼠标按下
startDrag("");//开始拖动
drag=true; //变量drag为真
}
on(release, releaseOutside){//鼠标释放
stopDrag();//停止拖动
drag=flase; //变量drag为假
}

以上这段代码大家都很熟悉吧，呵......Ctrl+C这段代码，分别加给 ball2 、ball3 。如果你想ball1 ball2 ball3有链接功能，请自行设置，不要告诉我你不会哦。Ctrl+E回到主场景，把刚开始作的mc1 Delete接着把 ball1 、ball2、ball3这三个MC从库中拖到主场景，分别命名其Instance Name(实例名称)为：h1、h2 、h3 （SORRY，偷懒了，就给它们起个简单的啦）把h1、h2 、h3 在主场景中排好位置。

下面用MX的画线指令把它们用线一一连接起来。在主场景中新建一层，命名为AS ，在第一桢加如下代码：

_root.onEnterFrame = function() {
clear();//清除以前的填充设置
_root.lineStyle(1.5, 0xcecece);//定义画线的样式
_root.moveTo(_root.h1._x, _root.h1._y);//把线的始端定在h1坐标处
_root.lineTo(_root.h2._x, _root.h2._y);//从h1画一条线到h2
_root.lineTo(_root.h3._x, _root.h3._y);//从h2画一条线到h3
_root.lineTo(_root.h1._x, _root.h1._y);//从h3画一条线到h1
_root.endFill(); // 结束 Fill
}
接着来设置h1、h2 、h3 的鼠标吸引及缓冲效果。
点选主场景中的h1，给其加上如下代码：
//初始化变量
onClipEvent (load) {
x = this._x;
y = this._y;
}
//实现鼠标的吸引效果以及MC（h1）的缓冲效果
onClipEvent (enterFrame) {
dis_x = _root._xmouse - x;
dis_y = _root._ymouse - y;
if(!drag){
if ((dis_x * dis_x) + (dis_y * dis_y) < 1500) { //判断鼠标和MC的距离
newvar_x = _root._xmouse; //把_root._xmouse 、_root._ymouse赋给
newvar_y = _root._ymouse; //两个新变量newvar_x 、newvar_y ，此时还没有
} else {//与MC相联系。
target_x = x;
target_y = y;
}if (this.hitTest(_root._xmouse, _root._ymouse, false)) {
this._x = _root._xmouse;
this._y = _root._ymouse;
}else{
//设置缓冲效果，可以更改一下具体的参数，体会体会缓冲的效果
xspeed = ((target_x - this._x)*.8)+(xspeed*.65);
this._x += xspeed;
yspeed = ((target_y - this._y)*.8)+(yspeed*.65);
this._y += yspeed;
}
}
}

Ctrl+C这段代码，分别加给 h2 、h3。
以上鼠标吸引及缓冲效果的代码还隐藏这样的一个效果，即MC只要偏离原来的坐标就会自动回位。这样，只要隔一段时间就改变MC的位置，则可以实现MC 的" 痉挛抽动 "的效果。

接下来将用简单的脚本来实现h1、h2 、 h3的" 痉挛抽动"效果。点选主场景第一桢在

_root.onEnterFrame = function() {
clear();
_root.lineStyle(1.5, 0xcecece);
_root.moveTo(_root.h1._x, _root.h1._y);
_root.lineTo(_root.h2._x, _root.h2._y);
_root.lineTo(_root.h3._x, _root.h3._y);
_root.lineTo(_root.h1._x, _root.h1._y);
_root.endFill();
}
后面加上如下脚本：
setInterval(myball1, 6000);
function myball1() {
if (_root.h1.hitTest(_root._xmouse, _root._ymouse, false)) {
_root.h1._x = _root._xmouse;
_root.h1._y = _root._ymouse;
} else {
_root.h1._x += 70-random(150); //设置MC的随机坐标
_root.h1._y += 50-random(150);
}
}
setInterval(myball2, 5000);
function myball2() {
if (_root.h2.hitTest(_root._xmouse, _root._ymouse, false)) {
_root.h2._x = _root._xmouse;
_root.h2._y = _root._ymouse;
} else {
_root.h2._x += 70-random(140);
_root.h2._y += 60-random(150);
}
}
setInterval(myball3, 4000);
function myball3() {
if (_root.h3.hitTest(_root._xmouse, _root._ymouse, false)) {
_root.h3._x = _root._xmouse;
_root.h3._y= _root._ymouse;
} else {
_root.h3._x += 70-random(80);
_root.h3._y += 50-random(90);
}
}

代码是不是很简单？OK!.....就是如此简单。其中if (.......................)这个判断是为了消除鼠标drag的时候由于自定义函数的反复调用，MC坐标发生变化后出现的一个问题，什么问题？留给你去发现吧。至此，利用setInterval隔一段时间就反复调用自定义函数使MC的坐标随机发生变化，偏离原来的坐标，从而实现MC的" 痉挛抽动 "效果。
" MY GOD!这样就可以了？？" 呵呵........Ctrl+Enter! 还是自己感受一下吧!
另外，如果你想了解setInterval的用法，推荐你看看这篇教程。
http://www.actionscripts.org/chinese/tutorials/intermediate/setInterval/index.shtml ;
嗯，不知不觉咖啡喝完了，此习作的详解也已结束，想来你也看累咯，如果你对此习作的详解还感兴趣，把原码拿回家慢慢研究，如果你作得更酷，不要忘记告诉我哦，如果你想转载，请注明出处及作者。

非常感谢你能看到这里，thank++

点击浏览附件

共分2页 [1] [2]