分享
 
 
 

运动缓冲效果解晰

王朝other·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

原文地址:http://flash8.net/dispbbs.asp?boardID=10&ID=70443

前言:

前不久又逛了一些flash做的网站,看到有的网站导航菜单的效果确实不错,即萌发了尝试写一些关于这方面的一系列教程。菜单的表现方式可以说是千姿百态,充满个性,但透过现象看本质,其技术的核心却有着相通或相似之处,比如今天所要讲的运动的缓冲效果,其在这方面的运用是非常的多,当然,一个好的导航菜单决不仅仅只是运动缓冲的效果,它还包括很多方面,比如创意。今天所写的东西其实并没有多大的技术含量,都是很基本的东西,但是如果你真正掌握了一些基本的知识,那么你才有可能发挥自己的聪明才智去设计一些更酷炫的东西,而不仅仅是简单的把别人的代码copy到自己的作品之中,或者改改别人的原文件就用,这对你的学习并没有什么好处,如果你同意我的观点,那么请接着看下去.....

正题:

主场景中只有一帧、一个MC(MovieClip),如果我要的效果是点一下鼠标,MC就出现在鼠标所点击的位置,该如何实现呢。通常我们可以给MC加这样的代码:

onClipEvent(load){

_x=300;

_y=200;

}

//设置MC的初始坐标,如果不需要设置以上代码可省。此代码(↑)只运行一次。

onClipEvent(mouseDown){

targetx=_root._xmouse;

targety=_root._ymouse;

}

//鼠标按下,把其坐标分别赋值给两个变量:targetx、targety

onClipEvent(enterFrame){

_x=targetx;

_y=targety;

}

//把targetx、targety的值分别赋值给MC的_x _y

//〖当然你也可以这样写:

onClipEvent(load){

_x=300;

_y=200;

}

onClipEvent(enterFrame){

if(Key.isDown(1)){//如果鼠标左键按下

_x=_root._xmouse;

_y=_root._ymouse;

}

}

但为了表述方便,以下将采用第一种写法

ctrl+Enter测试一下效果,当点击鼠标左键,MC就会出现在鼠标点击的位置,但并没有出现MC的运动过程,那么,如果要出现MC的运动缓冲过程又该如何设置代码?

OK,我们先试着给MC加这样的代码:

onClipEvent(load){

vx=1;

vy=1;

//你可以试着改变vx、vy的值,然后看看效果.

}

onClipEvent(enterFrame){

_x+=vx;//或者_x-=vx;

_y+=vy;//或者_y-=vy;

}

Ctrl+Enter观看效果,我们将看到MC运动了,

这是因为enterFrame 以影片帧频不断地触发此动作:

_x+=vx;(等效于_x=_x+vx)

_y+=vy;

使MC的x、y坐标不断的在原来的基础上加上vx、vy,这个你得用心体会。MC虽然运动了,但速度是恒定的,因为MC的x、y坐标每次增加的量(步长)是个定值vx、vy,如果vx、vy不是定值,那很显然MC的运动就是变速的。

基于以上的思想,为了实现MC的运动缓冲过程,我们可以这样设置代码:

onClipEvent(load){

_x=300;

_y=200;

}

onClipEvent(mouseDown){

targetx=_root._xmouse;

targety=_root._ymouse;

}

onClipEvent(enterFrame){

distx=targetx-_x;

disty=targety-_y;

//算出鼠标点击的位置到MC的距离

movex=distx/10;

movey=disty/10

_x+=movex;

_y+=movey;

}

在这里我们使用了

_x+=movex;

_y+=movey;

首先我们得注意,movex和movey并不是一个固定不变的数值,在MC的运动过程中,其x、y坐标是不断变化的,所以movex和movey也是不断变化的(movex=distx/10;movey=disty/10;而distx=targetx-_x;disty=targety-_y;)。

你可以看看下面这张图(x方向)以帮助理解。

以上代码我们可以精简为:

onClipEvent(load){

_x=300;

_y=200;

}

onClipEvent(mouseDown){

targetx=_root._xmouse;

targety=_root._ymouse;

}

onClipEvent(enterFrame){

_x+=(targetx-_x)/10;

_y+=(targety-_y)/10;

}

我想你可能注意到了,为什么(targetx-_x)、(targety-_y)还要除以10?

你可以把它去掉,变成 :

_x+=targetx-_x;

_y+=targetx-_x;

Ctrl+Enter看看效果,这时你只要一点击鼠标,MC马上就出现在点击的位置,根本就看不到MC的运动过程,这是因为MC的x、y坐标的增量过大,为鼠标点击的位置到MC的距离,正因为如此,鼠标一点击,MC就会马上出现在点击的位置。所以我们要使MC的x、y坐标的增量要比鼠标点击的位置到MC的距离小。当然“10”这个数字你也可以改成其它的数字,比如8、9、12、2等等。

我们再来简单讲讲为什么MC运动会出现缓冲效果。看上图,MC向B点运动不断靠近B点时,B点与MC的距离(targetx-_x)变得越来越小,所以MC x坐标每次增加的量(步长)会变得越来越小,因而出现缓冲效果。

以上代码我们还可以写得更规范一些,以便于修改:

onClipEvent(load){

_x=300;

_y=200;

speed=10;

}

onClipEvent(mouseDown){

targetx=_root._xmouse;

targety=_root._ymouse;

}

onClipEvent(enterFrame){

_x+=(targetx-_x)/speed;

_y+=(targety-_y)/speed;

}

总结:

今天讲的这种效果你可以应用于MC的属性:_rotation, _alpha, scale 赶快试试吧。

请记住这样的式子:property = (target - property)/speed;

常用的弹性缓冲效果还有:x = disx-(disx-x)/a;

y = disy-(disy-y)/a;

===============

dx=dx*.a+(_root._xmouse-_x)*.b;

dy=dy*.a+(_root._ymouse-_y)*.b;

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有