纳金网
标题:
[as3基础应用]AS3数组的应用，flash制作流星雨~
[打印本页]
作者:
.
时间:
2013-3-20 11:10
标题:
[as3基础应用]AS3数组的应用，flash制作流星雨~
动画地址：http://hong-ming.cn/flash/starrain.swf
这里主要精讲这个效果的AS3代码
呵呵，有的朋友可能在闪吧上看过一摸一样的效果，恩，是的，闪吧的那个是用AS2写的，在下用AS3把代码重新写了一遍~(*^__^*) 嘻嘻……
在写代码之前首先我们要准备素材，也就是地球啊~太阳啊~还有流星什么的（这段是写给基础薄弱的童鞋们看的，高手直接无视就好了）
首先是用FLASH CS3（在下用的是CS3，以前的版本不行，不支持AS3的）新建一个空白的AS3的文档
1.首先点 修改-文档 修改长宽和背景色和帧率 这里长设置300宽设置700，背景黑色，帧率设置120
2.从外部导入地球和太阳的图片
这里导入了两张图片，位置如图所示，如果大家有更好的宇宙图片，也可以导入进来，这些图片都是做背景用的
3.在图层面板的左下角点击那个加号按钮，可以创建一个元件
类型为影片剪辑
4.在图层面板里双击刚才建立的元件，进入元件，对其进行编辑。这里我们要画一个流星划过天空的样子，可以用画笔画出一条直线，也可以用直线工具画，或者有其他更逼真的方法更好~这里就不做详解，随大家发挥了。不过必须要注意的是，这个流星的图案必须保持水平，位置的信息如图所示
这里的位置和大小信息意味着，元件的原点坐标和流星的头重合，这样操作是为了后面写代码的时候对流星的位置操作比较方便，具体方便在哪里呢~在后面代码的讲解中会具体讲到。
5.当然，这里创建的流星图案在代码中还是不能使用，我们需要把这个元件链接出来，当做一个类来用
右键点击图层面板里的元件，链接，就出来这个面板了。
链接出来后，这个流星的元件就变成了一个继承MovieClip类的类，所有MovieClip类的属性和方法都能使用。类的名字是ball。
6.下面我们进入主场景，点击第一帧，开始在帧上写代码了：
stop();//在下习惯在有代码的帧上加个停止函数，以防止某些代码进行不必要的重复执行
stage.scaleMode=StageScaleMode.EXACT_FIT;//对舞台的显示属性进行设置，这里StageScaleMode.EXACT_FIT是填充满窗口并扭曲的意思，其他比如StageScaleMode.SHOW_ALL是保持原舞台比例顶格显示的意思，想了解其他可以在flash帮助文档里面搜索“设置舞台属性”
var ROT:int=20;//流星的倾斜角度
var NUM:int=20;//流星的数量
var SPEEDBASE:int=5;//流星的大致速度，为啥是大致速度呢，因为其实每个流星的速度都是这个大致速度加上一个随机数，所以每个流星的速度是不一样的
var SCALEBASE:Number=0.5;//流星放大比例的大致值，说是大致的原因和上面类似
var STAGEX:Number=stage.width;//舞台的宽
var STAGEY:Number=stage.height;//舞台的高。这里这些参数都实现设置好，都调试程序帮助很大，比如修改流星速度，就可以直接在这里改，而不必在程序里找。这个是一个良好的编程风格，需要大家慢慢体会
var ojArray:Array=new Array();//新建一个数组，用于储存每个流星的信息
for (var n=0; n<NUM; n++) {//一个循环NUM次的循环，以n为索引在这个循环里面我们将创建NUM个流星
var ballMc:ball=new ball();//在每次循环中，创建一个流星。这个ball类就是刚才咱们从库里面链接出来的流星图案
ojArray.push({xSet:int(Math.random()*STAGEX),ySet:int(Math.random()*STAGEY),scaleSet:Math.random()+SCALEBASE,speed:int(Math.random()*2+SPEEDBASE),mc:ballMc});
//这里用push函数为数组添加元素，这里的元素是个Object数据，Object数据的格式是{属性1:值1,属性2:值2……}访问这些属性可以用比如Object.属性1来访问。Math.random()是一个0-1平均分布的随机数，那么Math.random()*STAGEY就是在0-STAGEY的数值内随机分布，其他就靠大家自己理解了
}
for (var m=0; m<NUM; m++) {//这里的循环为每个流星调整位置和角度
ojArray[m].mc.x=ojArray[m].xSet;//这里用数组就体现出操作的优势了，把若干个Object对象放进一个数组，就可以通过数组的索引访问每个Object对象，无论几个对象，只要用循环控制索引，就可以对对象进行批量操作
ojArray[m].mc.y=ojArray[m].ySet;//这里把上个循环里随机得到的位置坐标赋予对应的流星
ojArray[m].mc.scaleX=ojArray[m].scaleSet;//对流星X方向上进行缩放，值大于1就是放大，小于1是缩小，其实单位是100%
ojArray[m].mc.rotation=ROT;//这里对流星进行旋转，rotation大于0是顺时针，单位是度。这里注意下，还没旋转之前，流星的图案是水平的，也就是我们在库里面画的那样，那么上面对流星水平方向的缩放其实就是对长度的缩放，现在可以体会到画流星的时候为什么要水平的原因了吧，如果不水平的话，流星的长度就不好放大
stage.addChild(ojArray[m].mc);//把流星添加到显示列表，这个是AS3区别于AS2的一点，多了一个显示列表的概念，要是对象不添加到显示列表，对象就不能显示
}
stage.addEventListener(Event.ENTER_FRAME,mov);//在ENTER_FRAME事件发生的情况下执行mov函数，实际上只要进入影片，ENTER_FRAME事件就被不断触发，那么mov也就不断被反复执行了哦~
function mov(event:Event):void {//这个就是那个被不断反复执行的函数，在这个函数里我们不断改变流星的位置，让流星动起来
var p=0;//定义一个索引变量
for (p=0; p<NUM; p++) {//又是一个循环对每个流星的批量操作，数组配合循环的方法是不是很方便啊O(∩_∩)O哈哈~这里对每个流星进行位置的改变
var rad = ROT*Math.PI/180;//一个临时变量，把单位是度的ROT转换成弧度单位并储存
var dx = Math.cos(rad)*ojArray[p].speed;//这个是速度在x方向上的分量，Math.cos()函数参数的单位是弧度
var dy = Math.sin(rad)*ojArray[p].speed;//速度在y方向上的分量
ojArray[p].mc.x += dx;//每次执行的时候在原来流星x位置的基础上加上一个x的速度分量
ojArray[p].mc.y += dy;//在y位置上加个y的速度分量，这样合成就等于在流星头指向的方向累加个速度，那么每次执行这个代码，流星都会在这个方向上前进一个速度值，反复执行，流星就动起来了
if (ojArray[p].mc.x>=STAGEX+Math.cos(rad)*ojArray[p].mc.width) {//当流星头（我们在画流星的时候，就把流星头放在原点的位置，所以现在对流星的位置操作就是对流星头位置的操作）的位置超过舞台边界，流星还不会消失，因为流星的尾巴还在舞台上，我们要等到尾巴超出舞台才对流星重新赋予位置，在流星刚刚移出舞台的时候，流星头的x方向的位置是STAGEX+Math.cos(rad)*ojArray[p].mc.width
ojArray[p].mc.x = int(Math.random()*STAGEX);//当流星移出舞台时，对；流星位置进行随机初始化，这个随机位置是以流星的头位置为准的，这样做的好处呵呵~让大家去思考吧，想出来就给我留言^_^
ojArray[p].mc.y = int(Math.random()*STAGEY);//y位置初始化
}
}
}
如果有什么函数看不懂，可以查询flashCS3的帮助文档，帮助文档是个好东西^_^ 【来源：互联网】
更多精彩教程，尽在web3D纳金网http://www.narkii.com/college/
欢迎光临 纳金网 (http://wwww.narkii.com/club/)
Powered by Discuz! X2.5
这里导入了两张图片，位置如图所示，如果大家有更好的宇宙图片，也可以导入进来，这些图片都是做背景用的
类型为影片剪辑
这里的位置和大小信息意味着，元件的原点坐标和流星的头重合，这样操作是为了后面写代码的时候对流星的位置操作比较方便，具体方便在哪里呢~在后面代码的讲解中会具体讲到。
右键点击图层面板里的元件，链接，就出来这个面板了。