多语言展示
当前在线:1662今日阅读:113今日分享:31

[AS编程教学]天气效果动画之风中的雨

用程序来模拟下雨效果似乎并不多见,这次我们来尝试做一个下雨效果,具体说是一个逐渐变大并且受风速影响的雨效果。其实下雨效果跟下雪效果的做法原理类似,只是雨水降落是匀加速线性运动的,而雪花是匀速飘飘荡荡曲线运动。
工具/原料

FlashCS3(及其以上版本) FlashDevelop 背景图一张

步骤/方法
1

首先我们新建一个空白文档,给舞台上导入一张背景图片,到时候雨水就是要降落到这张图上面。如图所示,我导入了一张汽车马路的图片。

2

按下Ctrl+shift+F12,在“发布设置/Flash/ActionScript版本(A)/设置”将“自动申明舞台实例”打钩取消掉,这么做是为了后期写代码方便。

3

接下来我们需要做一个雨点效果,雨点的下落我们可以用代码实现,但是雨点掉在地上溅起水花什么的代码不好模拟,这个需要我们做动画效果。如图所示,motion1和motion2便是两种不同的水花效果,当雨点落地时我们随机选择一种效果播放,使得下雨显得更真实。

4

因为我们加入了风的概念,因此接着我们需要加入一个风向标,用来指示风的方向。我从其它项目找到了一个不错的风向标,如下图所示,给中间的箭头命名:windMc,后面我们需要设置箭头的角度来指示风向。

5

接下去我们需要写雨点类,RainDot.as,雨点类主要完成雨点的下降落地效果动画。

6

雨点类写完我们写风向标类WindPointer.as,风向标类比较简单,只有一个方法就是设置箭头的方向,我们用set函数来实现:

7

我们在舞台上新建一层名为items,然后把风向标拖到舞台左下角,取名字为:mcPointer,同时加一个动态文本框txtRainNum,用来显示雨点的实时个数:

8

接下来我们写文档类Main.as,文档类主要是以50毫秒的间隔创建500个雨点,这样便能看到雨从小到大的过程,然后我们以600毫秒的速度更新风向角度,并实时设置给风向标显示。雨点每次落到地面后会自动重新降落,降落的过程中也会引用这个风向变量来设置雨点自身的角度和偏移。

9

最后我们把RainDot链接给库里的“雨点”元件,把WindPointer类链接给库里的“风向标”元件,把文档类Main链接到属性面板的文档类输入框。

10

发布测试,随风摆动的雨的效果完成。

注意事项
1

制作过程可能要反复测试修改bug,这个是难免的。

2

各个参数可以根据自己的使用情况来调整,以看到不同的下雨效果。

3

本次使用FlashDevelop写类代码,不会使用的同学上网搜相关教材学习。

推荐信息