新的閃爍世界按照每天一個(gè)類別的新特性來感受Flash MX的路已經(jīng)走到了第八天,程序和設(shè)計(jì)的岔路口似隱似現(xiàn)的就在眼前,而我寫這個(gè)系列的文章的目的是希望可以拉住要前往設(shè)計(jì)之路的同行說:“要不要試一試FlashMX?”,事實(shí)上我不過是想說——FlashMX,通往理性世界的后門。
一個(gè)簡(jiǎn)單的程序基本流程需要包括:初始化,運(yùn)行期,結(jié)束處理 三部分。當(dāng)決定了一個(gè)程序的目的后,其3部分的內(nèi)容也是多樣的,不過少哪一部分都是無意義的。
在運(yùn)行期的處理是通過一個(gè)主程序時(shí)鐘來讓程序一直處于循環(huán)狀態(tài),直到用戶、異常錯(cuò)誤或系統(tǒng)中斷而退出循環(huán)到結(jié)束處理,而這個(gè)時(shí)鐘即是我們今天要學(xué)習(xí)的一個(gè)單獨(dú)課題。
早期的時(shí)鐘(下面稱Timer)很簡(jiǎn)單,直接取用CPU的運(yùn)算速度并加以簡(jiǎn)單處理,直到高頻率的CPU出現(xiàn),人們才考慮如何處理/減少CPU間程序運(yùn)行的差距。Flash 的時(shí)鐘從版本 5的時(shí)代就已經(jīng)看見改良后的效果,雖然在相差太大的機(jī)器上還是看到丟幀的問題,到Flash MX的今天,我們終于可以控制Timer了。
首先看一個(gè)放松點(diǎn)的例子:
createEmptyMovieClip("mc",1);
function drawDream() {
mc.lineStyle(random(++i/100),++i*random(30),(++i/30));
tempx=random(500);
tempy=10;
mc.moveTo(tempx,tempy);
mc.lineTo(tempx, tempy+300);
}
idDream=setInterval(drawDream,50);
運(yùn)用setInterval,每50毫秒執(zhí)行一次drawDream,通過draw method隨機(jī)繪制出來一個(gè)夢(mèng)的窗簾……(看圖1)
圖1
升華升華……
//dream2
function drawDream() {
if(i==undefined){i=0;keynum=1;offy=300;clr=new Color(pic);}else if(i>=700) clearInterval (idDream);
mc.lineStyle(random(++i/i/10),++i*random(80),(i/50));
tempx+= i*2*keynum/10; //reverse set
keynum=tempx<250 ? 1 : -1; //reverse key
tempy=0;
offy-=.07;
mc.moveTo(tempx,tempy);
mc.lineTo(tempx, tempy+offy);
var tempcolor=clr.getTransform();
tempcolor.rb+=i/200; //color to sun
tempcolor.gb+=i/150; //color to leaf
clr.setTransform(tempcolor);
}
//init
stage.scalemode="showall";
createEmptyMovieClip("pic",1);
createEmptyMovieClip("mc",2);
createEmptyMovieClip("loader",3);
pic.loadMovie("ice.jpg");
loader.onEnterFrame=function(){
if (_root.pic._width>0){
_root.pic._width=Stage.width;
_root.pic._height=Stage.height;
this.removeMovieClip();
}
}
//init end
//start main timer
idDream=setInterval(drawDream,10);
新手先不要吐血,讓我們一步步深入察看
*步:產(chǎn)生我們Flash MX的初始化//init 到//init end部分,這段開始決定了屏幕的顯示模式是拉伸式顯示全部;接著產(chǎn)生我們需要的一切mc;產(chǎn)生以后讀入一個(gè)jpg雪的圖片,并附帶一個(gè)讀入的loader,當(dāng)圖片完全讀入的時(shí)候設(shè)置圖片的相應(yīng)屬性并“自殺”(自動(dòng)踢出內(nèi)存);
第二步,進(jìn)入程序主循環(huán)。使用idDream來代表主循環(huán)timer 的id,并且每10毫秒刷新一次,這樣就進(jìn)入了內(nèi)部子程序,里面也有自己的初始化、運(yùn)行期、結(jié)束處理。
做光柱的算法我已經(jīng)優(yōu)化到這樣子:
tempx+= i*2*keynum/10; //reverse set
keynum=tempx<250 ? 1 : -1; //reverse key
狀態(tài)每2次換一次,分別獲得光柱當(dāng)前劃線的左右位置,而且通過keynum變量方便的設(shè)置中點(diǎn),即250(隨意一個(gè)什么位置)。
結(jié)合
mc.moveTo(tempx,tempy);
mc.lineTo(tempx, tempy+offy);
即可畫出一個(gè)光柱的模型,稍加處理即可得到下面的樣子。(圖2)
而所謂的光射的環(huán)境效果,我們可以簡(jiǎn)單嘗試下面的算法:
var tempcolor=clr.getTransform();
tempcolor.rb+=i/200; //color to sun
tempcolor.gb+=i/150; //color to leaf
clr.setTransform(tempcolor);
算法以速度為先,不考慮太多的客觀因素,只按照程序當(dāng)前的狀態(tài)往太陽和綠色的生命感覺走(紅色和綠色的增量補(bǔ)償,rb要大于gb,否則沒有光感)
*就是結(jié)束條件:if(i>=700) clearInterval (idDream)。當(dāng)程序運(yùn)行了700/3次后,結(jié)束子程序,清除timer并返回主程序。
返回主程序后,無其他語句即保持靜止?fàn)顟B(tài),除非用戶關(guān)閉窗口來結(jié)束程序。 可以測(cè)試一下效果,若覺得光感太強(qiáng),可以調(diào)節(jié)rb和gb的值。(測(cè)試效果如圖2)
圖2
雖然setInterval不是系統(tǒng)級(jí)的,但這意味著在不使用movieclip的情況下來得到速度的提高的方法是良性進(jìn)步,以后會(huì)有更多的程序使用timer而不用MovieClip,因?yàn)楫a(chǎn)生一個(gè)MovieClip的代價(jià)是繼承了所有MovieClip的方法和屬性,而Timer不過是一個(gè)Function或一個(gè)簡(jiǎn)單的Object,何樂而不為。
惡習(xí)不改破壞性測(cè)試:
//pic.loadMovie("ice.jpg");
loadMovie("ice.jpg",-1);
將*條語句修改為第二條語句的樣子,看看會(huì)發(fā)生什么?不管是測(cè)試環(huán)境還是直接運(yùn)行swf,都會(huì)打開IE來讀入剛剛我們需要讀入的jpg,只要條件是負(fù)數(shù)……傻了眼,這回怎么去控制我要的jpg?