曾经在一个很有名的FLASH站上看到了这个效果,但是……忘了哪里看的了……
最近学校让交个网站当这学期的网页设计的作业,还要个8000字的技术论文……真是,哎命苦啊。
反正老师也很菜,做出来就看个视觉效果,呵呵,我就想冒险做个FLASH站吧,结果忽然就想到了这个效
果。研究了一会,仿了一个,感觉还不错,贴出来大家看看。
先看看下面的效果吧。
怎么样,放在目录的背景上,效果应该还可以吧。下面就开始唠叨一下。
首先,每个小球是一个MC,所以就教一下这个小球的MC怎么做,做好了复制就可以了,而且做成MC可以很
好的移植,用到其他的文件里。
原理是这样,用贞循环计算鼠标到小球初始位置的距离。当距离小于一定数字以后(就是鼠标接近小球的
时候),开始计算让小球向鼠标和小球原点连线的反方向产生位移,位移大小是按鼠标到原点的距离比例
计算——距离越近,位移越大。
看起来有点罗嗦是吧?呵呵,我就喜欢套用MC做东西,做起来也很罗嗦,要有心理预备,当然,我也有被
人骂的心理预备了。
新建一个文件,背景为黑色(#FFFFFF),大小随便,频率24贞每秒。
画一个放射填充的正圆,选中它,转换成元件,命名为“球”。这个就是出现在屏幕上到处乱动的那家伙
,而且还在后面充当了原点的位置,后面再说。
再选中这个“球”,再次将这个元件转换成元件(即套用元件,我比较喜欢这种做法),命名为“移动球
”。这个元件是用来表现小球要移动的偏离原点的距离的。
你一定又猜到了,再次套用,哈哈,就是把刚才刚做成元件的“移动球”再次选中,转换成元件,命名“
排斥小球”。这个就是最终的效果了,这一元件的目的是在刚才产生位移的基础上再计算鼠标和原点的角
度,并向反方向旋转“移动球”形成最终效果。即最终效果是由角度变化和位置变化合成的。
好了,所有的预备工作都做好了。开始写AS
先进入“移动球”进行编辑。进去后只有一个曾,里面住着个白胖子……不是,说错了。里面有个“球”
的实例,复制它,然后再命名它的实例名称是ball(一定是先复制再命名,不然就连名称一起复制过去了
)。然后新建一个图层,原位置粘贴刚才复制的“球”(ctrl+shift+v),命名该实例为yd。(就是原点
的意思,这个实例就相当于一个灯塔了,放这不动,只提供位置,因为他和刚才的“ball”的位置一样,
所以就是原点。)然后把yd的_alpha属性值设置为0,就是透明的,不然ball移动的时候就能看到它了。
好了,这个“移动球”就做好了。为什么没有AS呢?聪明啊,AS全写在最外面的“排斥小球”里呢;
不用说也知道了吧?进入“排斥小球”的编辑;
里面现在也是只有一个图层。里面住着个白胖子……有开始了:),好不是胖子,是个“移动球”,把他
命名为mb.然后在这层的第二贞插入普通贞。
然后新建一个图层,拖入一个“球”实例,位置调整到和mb重合,命名为yd.哎~怎么看着这么眼熟呢?放
心吧,我没写差了和行,就是yd,这个是用来给出“移动球”的原点位置的。因为不在同一级别里,所以
命名重复了没有问题。在这个层的第二贞增加普通贞。然后把它设置透明。
最后是写AS,再新建一曾,就是说“移动小球”里有总共3层。
在这层的第一贞写AS如下:
dx=_xmouse-yd._x;
dy=_ymouse-yd._y;
dr=Math.atan2(dy,dx)*180/Math.PI;
dd=Math.sqrt(dx*dx+dy*dy);
第二贞加入空白要害贞,写AS如下(上次我写了个弹性跟随的效果教程,也这么写的AS部分,有人告诉我
做不出来,后来发现他把这几个“第二贞写AS如下”也给复制到动作面版去了,大家小心,呵呵):
if(dd<100){
dm=(100-dd)/100*50;
mb.ball._x=mb.yd._x+dm;
setProperty(mb,_rotation,180+dr);
}else{
mb.ball._x=mb.yd._x;
};
gotoAndPlay(1);
好了,大功告成了!测试一下吧。怎么样?效果还可以吧?
假如嫌一个球不好,就在主场景多复制几个“排斥小球”,但是别太多,因为我使用了贞循环计算的方案
,所以计算是再每个MC里不停的进行的,即使你不动,那球的内部也在每秒20多次的计算这些数值,所以
假如机器配置很低的话,会给机器的CPU带来很大的负担。
只是喜欢看效果的人请离开,下面我讲一下具体原理。
做类似效果的时候,首先要做的是认真的考虑一下如何实现,就是要有一个明确的构思,一个可行的方案
,这点是最重要的。
这个效果的实现,是使用的最基本的判定,属性设置等几个句子就实现了。
首先要想到一个很简单的问题,就是范围,在一定范围内,可以触发事件,这样就需要计算距离。然后是
要知道事件是什么,是什么呢?是小球向鼠标和小球原来位置(即原点)连线的反方向移动,那就需要计
算角度和位移大小。位移大小的判定又要符合物理条件,里原点越近,排斥力就大,反之一样。
当鼠标进入有效范围时,按比例,小球先水平向右移动,再转个和鼠标方向相差180度的角度,就出现了
排斥的效果。
第一贞
前2行是分别计算出 鼠标到“移动球”原点的X距离和Y距离,这个没什么好说的,假如这里你
也看不的懂,就和前面第一批走的人一起去玩吧,呵呵。
第3行,计算出鼠标和“移动球”原点的角度差。Math.atan2()计算出的是弧度值,再乘上个每
个弧度可以买多少角度的钱,(就是这个意思)转换一下就是角度了。其实这个转换的中间量是个
常量可以先计算出来,代替180/Math.PI,但是我比较懒,呵呵,让机器自己去不停的算一个相同
的数吧,假如你机器真的有问题,就自己算一下,写上个精确一点的数。
第4行,计算距离这个也不难,可以看懂上面的,这个也没有问题,就是个初中数学的定理。
第二贞
第1行先判定距离,里面的100是有效范围,可以自己改一下。假如进入有效范围就计算要使最里面
的“ 球”移动的位移,通过(100-dd)/100*50使位移和距离产生一个关系,就是前面说的距
离越近,位 移越远。这个式子可以简化,我还是懒,按思路写出来了就没去改。机器不好的
改改。
然后让“球”在X坐标上偏离原点到刚计算出来的位移处。
再让他旋转到和鼠标相对的角度差。到这里就实现了排斥的效果;
后面,假如判定不成立,就让“球”回到原点位置。有人大概要问,“不在这个不是可以省略掉吗
?假如不在有效范围内,就不会有动作。”错,假如你之前先进入了有效范围,然后很快的移动出
来,那有可能出现没触发判定条件,但是还让“球”停在了刚才的位移上,就形成一个小BUG。加
了这句,就不会有这种情况。
最后,返回第一贞。这个也不是可加可不加的,虽然假如不加仍然可以循环,但是这样就会出现比
较慢的现象,因为时间要经过2/24秒才进入到下一循环,假如加了这句,这个循环就用了1/24秒多
一点,着一点可以忽略,因为计算机计算第二贞那几个低等数学的问题还是很快的。
好了,到现在为止已经唠叨完了。
上次我写的那滑动跟随的教程上留了自己的QQ号,很荣幸的被治理员放到了教材区去了,然后使荣幸成为
了不行,之后N多的人加我QQ号,问了很多很基础的问题。开始还很兴奋的,后来就有点受不了了。天天
都有几十条类似的信息,都是些让人听了苦笑不得的问题。其实那些问题都是自己可以解决的了的。我写
教程是要把我认为好的主义拿出来分享,让和我一样的人一起分享。
点击浏览该文件