弹性效果之导航篇

文章类别：Flash | 发表日期:2008-9-21 19:21:01

　　在网上有很多的韩国弹性菜单效果。但还是有很多的朋友对弹性效果有所迷茫，所以在这里我也做了一个弹性的东东，希望能起到给那些迷茫中的朋友一点点启示和学习的作用。 时间紧，任务重，看效果先：
点击浏览该文件
讲解开始：
1. 首先按下图所示，在场景中做出几个电影剪辑和背景来。（注重：背景和电影剪辑不要在同一层上）


2. 电影剪辑button的作法如图


Layer1为箭头按钮，层a为代码。 第一帧为空帧，代码为：

gotoAndStop (5);

第二帧，按钮的代码为： （左）

on (press) {
gotoAndStop (8);
}

（右）

on (press) {
nextFrame();
}

帧上的代码为：

//XY坐标值，动态文本，初始弹性值
_root.myX = 44;
_root.myY = 40;
_root.xspeed = 10;
_root.out = "源码区";
stop ();

第三帧，按钮代码为： （左）

on (press) {
prevFrame ();
}

右面的与上一帧右面的相同 帧上的代码为：

_root.myX = 78;
_root.myY = 70;
_root.xspeed = 10;
_root.out = "软件区";
stop ();

（与上一帧的差别在于XY的数值变化，所以在这里不做过多解释） 第四，五，六，七帧上也只是XY数值的变化（为了跟背景的小圆圈相重合），按钮的代码没有变，所以在这里为了节省时间我就不一一列上，如有不清楚的地方，可以查看源文件。 第八帧上也是改变XY数值。但按钮上的代码有此变化，左边是和上面一样的，右边按钮的代码为：

on (press) {
gotoAndStop(2);
}

到这里完成button电影剪辑的制作。因为代码过于简单，所以我并不做过多的解释。 3. 在电影剪辑line上加入代码

onClipEvent (enterFrame) {
_root.attach();
}

4.在主场景新建一层，然后加入代码：

//设置电影剪辑line的X，Y坐标和X，Y的缩放
function attach () {
line._x = P1._x;
line._y = P1._y;
line._xscale = P2._x-P1._x;
line._yscale = P2._y-P1._y;
} //交换深度，使P1，P2位于line的上面
P1.swapDepths(line);
P2.swapDepths(line);

5. 在电影剪辑P2上加入代码：

//设置衰减值
onClipEvent (load) {
decay = 0.91;
}

//设置P2(此电影剪辑）的弹性
onClipEvent (enterFrame) {
oldxpos = _root.myX;
newxpos = oldxpos+_root.xspeed;
_root.xspeed = _root.xspeed*decay;
setProperty(this, _x, newxpos);
setProperty(this, _y, _root.myY);
_root.xspeed = -1*_root.xspeed*decay;
newxpos = oldxpos+_root.xspeed;
setProperty(this, _x, newxpos);
setProperty(this, _y, _root.myY);
}

好了，到这里完成了这个动画的制作，大家可以看看效果了！！！！！
源文件在此
点击浏览该文件
注：本教程只用于学习，勿作商业用途

上一篇：{应用}鼠标跟随之粒子扩散效果 人气:1741
下一篇：{应用}滑动杆控制的图片缓冲效果 人气:2254

Flash视频教程