打印

[特效] ★用纯AS做了个下雨效果

★为了给我的文集文章配FLASH背景,这几天研究了几个FLASH动画,发现好多动画都有下雨效果,这些FLASH动画设计师们的方法十分巧妙,就是在PS中制作一个透明的下雨画面,然后把这个图片导入FLASH的MC里做成逐贞动画,每贞都把图片稍微错一下位,这样连续播放就有下雨的效果了。火山受到启发,按这个思路用纯AS做了个下雨的效果,感觉还不错,就帖出来给需要的人吧:)
★先看一下效果,代码在下个帖子贴出来。
http://www.huoshan.org/shiyan/xiayu/xiayu.htm
//=================MC类自定义方法====================
//——————宽高矩形法,根据初始点坐标和宽与高确定矩形。x,y为初始点坐标,kuan和gao为矩形的宽和高。
MovieClip.prototype.kuangaojuxing = function(x, y, kuan, gao, bangzhi, yanse, toumingdu) {
       this.lineStyle(bangzhi, yanse, toumingdu);
       this.moveTo(x, y);
       this.lineTo(x+kuan, y);
       this.lineTo(x+kuan, y+gao);
       this.lineTo(x, y+gao);
       this.lineTo(x, y);
};
//——————MC定位方法
MovieClip.prototype.dingwei = function(x, y) {
       this._x = x;
       this._y = y;
};
//==================创建下雨动画=====================
//定义下雨动画函数,相关参数请参考下面的注释
/*
x_fc:下雨动画的X坐标
y_fc:下雨动画的Y坐标
yanse_fc:雨滴颜色
toumingdu_fc:雨滴透明度
yudikuan_fc:雨滴的宽
yudigao_fc:雨滴的高
qingxie_fc:雨滴的倾斜度
mijidu_fc:雨滴的密集度
pinlu_fc:下雨画面更换的频率
kuan_fc:下雨画面宽
gao_fc:下雨画面高(它和上面的参数一起控制下雨范围)
*/
function xiayudonghua(x_fc, y_fc, yanse_fc, toumingdu_fc, yudikuan_fc, yudigao_fc, qingxie_fc, mijidu_fc, pinlu_fc, kuan_fc, gao_fc) {
       //创建下雨动画MC
       createEmptyMovieClip("xiayu_mc", 10000);
       //定位下雨动画MC
       xiayu_mc.dingwei(x_fc, y_fc);
       //在下雨动画里创建单个雨滴MC
       xiayu_mc.createEmptyMovieClip("yudi_mc", 10000);
       with (xiayu_mc) {
              //宽高矩形法绘制单个雨滴MC
              yudi_mc.beginFill(yanse_fc, toumingdu_fc);
              yudi_mc.kuangaojuxing(0, 0, yudikuan_fc, yudigao_fc, 0, 0x000000, 0);
              yudi_mc.endFill();
              //定义雨滴的倾斜度
              yudi_mc._rotation = qingxie_fc;
              //连续调用“jingtaihuamian”函数,形成下雨动画
              var xiayu_si = setInterval(jingtaihuamian, pinlu_fc, mijidu_fc, kuan_fc, gao_fc);
       }
}
//定义下雨动画的静态画面函数
function jingtaihuamian(mijidu_fc, kuan_fc, gao_fc) {
       //随机复制单个雨滴MC,形成单贞下雨画面
       for (var i = 0; i<mijidu_fc; i++) {
              xiayu_mc.yudi_mc.duplicateMovieClip("yudi_mc"+i, i);
              xiayu_mc.yudi_mc.dingwei(random(kuan_fc), random(gao_fc));
       }
}
//==============按钮控制下雨动画===============
kaishi_btn.onRelease = function() {
       //在需要下雨的贞调用这个函数就可以下雨了!
       xiayudonghua(0, 0, 0xffffff, 50, 2, 30, 30, 100, 10, 550, 400);
};
tingzhi_btn.onRelease = function() {
       //天晴的时候就调用这个函数
       xiayu_mc.removeMovieClip();
};
★只要把上面的代码复制到第一贞,然后再建立一个“kaishi_btn”和"tingzhi_btn”按钮就可以欣赏效果了。我把代码写到函数里,是为了方便在动画中使用,在需要下雨的地方,只要调用"xiayudonghua"这个函数就可以了,而在天晴的时候,写一句xiayu_mc.removeMovieClip()就OK了,怎么样?挺好用的吧
★下面大致讲一下原理。
等着你写下去.
★别一看是纯AS写出来的,就貌似很牛B了,吓得你只敢用不敢看了,其实它的原理很简单
1,先创建一个空的xiayu_mc,所有的雨滴都将放到这个MC里,这是为了便于删除下雨效果。
2,然后在这个MC里调用自己定义绘图方法绘制一个细条型的矩形,这个矩形就是原始的雨滴模型yudi_mc。
3,根据这个雨滴模型复制大量相同的雨滴,并使他们随机分布在指定的范围内,这样就形成了一个下雨的画面,这个画面就类似那些动画设计师在PS中绘制的下雨图片。这个过程在jingtaihuamian函数中完成。
4,最后就是通过setInterval不断调用jingtaihuamian函数,由于jingtaihuamian中使用了随机函数,每次调用jingtaihuamian生成的下雨画面都不一样,这样连续起来就形成比较逼真的下雨效果了。
★怎么样,很简单吧
★但如果你看懂了,先别得意哦,我们要学会发散思维,如果我们把xiayu_mc设置成某个MC的遮罩的话,会弄出什么效果呢?我首先想到的就是另一个非常常见的效果:“波光粼粼”。
下面就是我用这个原理做的效果,有兴趣的朋友可以去看看,相信聪明的你们自己也可以做出来了吧:)
http://www.huoshan.org/#zizhan=wenjiv1=wenzhang_2

[ 本帖最后由 jimohuoshan 于 2006-11-16 20:53 编辑 ]

TOP

把按钮也写进去更完美了,前几天我还问高手有没有用as创建的按钮语句,回答是用my_mc的事件可以代替
做人要厚道!入到很晚,但很勤奋!

TOP

楼上是说用纯AS写个按钮吗?
还是问用按钮事件触发AS语句?
不过这些应该都不难的。

TOP

我是说用as写一个按钮,并且实现按钮功能
做人要厚道!入到很晚,但很勤奋!

TOP

目前好象只能用纯AS写一个MC,然后实现按钮功能吧。
这是我写的一个纯AS滚动条,里面的按钮就是用纯AS写的。
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!

TOP

效果很不错。收藏。
纯as的雨和逐帧动画哪个cpu的占用率高呢?

TOP

好,我顶!

TOP

TO:kvgnt,我刚才测试了一下,相同贞频下,纯AS好象比逐贞动画高10%左右。
纯AS下雨效果影响CUP占用率的主要因素是频率和密集度
而逐贞动画影响CUP占用率的主要是贞频

TOP

CPU 一下子从20%升到 80%  不会是电脑配置差的原因吧.
楼主的想法很特别啊 赞一个
下雨效果 感觉用这种方法好点:
用一个循环来复制雨点出现,然后控制它们的移动,可以在这一步发挥,加些力学知识方面的程序,当不在屏幕上时删除.  个人感觉

TOP

FLASH动画片其实都挺占资源的:)
另外,如果加上力学移动效果,会更占资源的,我现在只是简单的复制而已,就占用80%了!

TOP

prototype官方建议方法,资源占用方面做的比较不错的。

TOP

赞一个,嘿嘿

TOP

引用:
原帖由 xxcn2006 于 2006-11-16 22:35 发表
prototype官方建议方法,资源占用方面做的比较不错的。
AS2和AS3还推荐使用prototype吗?

TOP

不是纯AS的
做了个雨点的MC
然后AS让他下。。俺觉得视觉方面比你的耐看些。嘿嘿嘿……

要不。各位看看我的。。
http://www.hx83.com/blog/article.asp?id=32
http://www.pighong.com

TOP

楼上的效果更逼真了,其实也可以用纯AS实现,就是有点麻烦,不想弄了

TOP

可以试试用BitmapData类,效果可能会比较好.

TOP