AS3數組的應用,flash制作流星雨~


源碼:http://files.cnblogs.com/flash3d/starrain.rar

這里主要精講這個效果的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的幫助文檔,幫助文檔是個好東西^_^

有什么問題盡管給我留言,或者加我QQ

最后祝大家元宵節快樂!!^_^


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM