应用思考-教育技术论坛

标题: FLASH动画制作实例:制作流量雨 [打印本页]

作者: etthink    时间: 2012-12-11 15:33
标题: FLASH动画制作实例:制作流量雨
动画特点,利用AS3代码实现流星雨效果,也可以用来制作下雨等雷同自然现象。通过此例子可以了解FLASH AS3中数组使用方法,具体效果如下所示:

单击查看动画效果

制作过程:
1,导入背景图片,如果觉得背景图效果不好,自己绘制也可以。
2,制作流星雨影片剪辑,并导出类链接,以方便在AS3中调用,导出类名为:ball(这个名字好象不太适合这里...)
(, 下载次数: 80)
3,功能实现
  1. stop();//在下习惯在有代码的帧上加个停止函数,以防止某些代码进行不必要的重复执行
  2. stage.scaleMode=StageScaleMode.EXACT_FIT;//对舞台的显示属性进行设置,这里StageScaleMode.EXACT_FIT是填充满窗口并扭曲的意思,其他比如StageScaleMode.SHOW_ALL是保持原舞台比例顶格显示的意思,想了解其他可以在flash帮助文档里面搜索“设置舞台属性”
  3. var ROT:int=20;//流星的倾斜角度
  4. var NUM:int=20;//流星的数量
  5. var SPEEDBASE:int=5;//流星的大致速度,为啥是大致速度呢,因为其实每个流星的速度都是这个大致速度加上一个随机数,所以每个流星的速度是不一样的
  6. var SCALEBASE:Number=0.5;//流星放大比例的大致值,说是大致的原因和上面类似
  7. var STAGEX:Number=stage.width;//舞台的宽
  8. var STAGEY:Number=stage.height;//舞台的高。这里这些参数都实现设置好,都调试程序帮助很大,比如修改流星速度,就可以直接在这里改,而不必在程序里找。这个是一个良好的编程风格,需要大家慢慢体会
  9. var ojArray:Array=new Array();//新建一个数组,用于储存每个流星的信息
  10. for (var n=0; n<NUM; n++) {//一个循环NUM次的循环,以n为索引在这个循环里面我们将创建NUM个流星
  11.     var ballMc:ball=new ball();//在每次循环中,创建一个流星。这个ball类就是刚才咱们从库里面链接出来的流星图案
  12.     ojArray.push({xSet:int(Math.random()*STAGEX),ySet:int(Math.random()*STAGEY),scaleSet:Math.random()+SCALEBASE,speed:int(Math.random()*2+SPEEDBASE),mc:ballMc});
  13.     //这里用push函数为数组添加元素,这里的元素是个Object数据,Object数据的格式是{属性1:值1,属性2:值2……}访问这些属性可以用比如Object.属性1来访问。Math.random()是一个0-1平均分布的随机数,那么Math.random()*STAGEY就是在0-STAGEY的数值内随机分布,其他就靠大家自己理解了
  14. }
  15. for (var m=0; m<NUM; m++) {//这里的循环为每个流星调整位置和角度
  16.     ojArray[m].mc.x=ojArray[m].xSet;//这里用数组就体现出操作的优势了,把若干个Object对象放进一个数组,就可以通过数组的索引访问每个Object对象,无论几个对象,只要用循环控制索引,就可以对对象进行批量操作
  17.     ojArray[m].mc.y=ojArray[m].ySet;//这里把上个循环里随机得到的位置坐标赋予对应的流星
  18.     ojArray[m].mc.scaleX=ojArray[m].scaleSet;//对流星X方向上进行缩放,值大于1就是放大,小于1是缩小,其实单位是100%
  19.     ojArray[m].mc.rotation=ROT;//这里对流星进行旋转,rotation大于0是顺时针,单位是度。这里注意下,还没旋转之前,流星的图案是水平的,也就是我们在库里面画的那样,那么上面对流星水平方向的缩放其实就是对长度的缩放,现在可以体会到画流星的时候为什么要水平的原因了吧,如果不水平的话,流星的长度就不好放大
  20.     stage.addChild(ojArray[m].mc);//把流星添加到显示列表,这个是AS3区别于AS2的一点,多了一个显示列表的概念,要是对象不添加到显示列表,对象就不能显示
  21. }
  22. stage.addEventListener(Event.ENTER_FRAME,mov);//在ENTER_FRAME事件发生的情况下执行mov函数,实际上只要进入影片,ENTER_FRAME事件就被不断触发,那么mov也就不断被反复执行了哦~
  23. function mov(event:Event):void {//这个就是那个被不断反复执行的函数,在这个函数里我们不断改变流星的位置,让流星动起来
  24.     var p=0;//定义一个索引变量
  25.     for (p=0; p<NUM; p++) {//又是一个循环对每个流星的批量操作,数组配合循环的方法是不是很方便啊O(∩_∩)O哈哈~这里对每个流星进行位置的改变
  26.         var rad = ROT*Math.PI/180;//一个临时变量,把单位是度的ROT转换成弧度单位并储存
  27.         var dx = Math.cos(rad)*ojArray[p].speed;//这个是速度在x方向上的分量,Math.cos()函数参数的单位是弧度
  28.         var dy = Math.sin(rad)*ojArray[p].speed;//速度在y方向上的分量
  29.         ojArray[p].mc.x += dx;//每次执行的时候在原来流星x位置的基础上加上一个x的速度分量
  30.         ojArray[p].mc.y += dy;//在y位置上加个y的速度分量,这样合成就等于在流星头指向的方向累加个速度,那么每次执行这个代码,流星都会在这个方向上前进一个速度值,反复执行,流星就动起来了
  31.         if (ojArray[p].mc.x>=STAGEX+Math.cos(rad)*ojArray[p].mc.width) {//当流星头(我们在画流星的时候,就把流星头放在原点的位置,所以现在对流星的位置操作就是对流星头位置的操作)的位置超过舞台边界,流星还不会消失,因为流星的尾巴还在舞台上,我们要等到尾巴超出舞台才对流星重新赋予位置,在流星刚刚移出舞台的时候,流星头的x方向的位置是STAGEX+Math.cos(rad)*ojArray[p].mc.width
  32.             ojArray[p].mc.x = int(Math.random()*STAGEX);//当流星移出舞台时,对;流星位置进行随机初始化,这个随机位置是以流星的头位置为准的,这样做的好处呵呵~让大家去思考吧,想出来就给我留言^_^
  33.             ojArray[p].mc.y = int(Math.random()*STAGEY);//y位置初始化
  34.         }
  35.     }
  36. }
复制代码
动画实例及源文件下载 (, 下载次数: 139)

实例来自于小夜的博客空间。


作者: 安丰塘往事    时间: 2012-12-11 18:11
转播微博[tthread=fn1064407219, 凡鸟]http://app.qlogo.cn/mbloghead/30ed489963e3684d0540[/tthread]
作者: 胡丽丽    时间: 2013-3-19 14:33
好难啊。。。疯啦。。。




欢迎光临 应用思考-教育技术论坛 (http://etthink.com/) Powered by Discuz! X3.4