论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Flash教程
Tag:flash cs,flash 8,鼠绘,as,手绘,工具,文字,loading,入门,初学,mc,影片剪辑,声音,mtv,游戏,引导,遮罩,菜单,补间,广告条,时钟,视频教程

鼠标排斥的小球

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

   http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash' width=480 height=360>http://www.flash8.net/bbs/UploadFile/2004-5/2004529104311388.swf
曾经在一个很有名的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号,问了很多很基础的问题。开始还很兴奋的,后来就有点受不了了。天天

都有几十条类似的信息,都是些让人听了苦笑不得的问题。其实那些问题都是自己可以解决的了的。我写

教程是要把我认为好的主义拿出来分享,让和我一样的人一起分享。
点击浏览该文件


视频教程列表
文章教程搜索
 
Flash推荐教程
Flash热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058