setInterval動作的作用是在播放動畫的時,每隔一定時間就調用函數,方法或對象。
源文件下載
本節知識要點:
1、setInterval(function,interval,arg);
第一個參數function:也就是要調用的函數或方法;可以是匿名的函數、命名函數、對象方法或電影剪輯
第二個參數interval:調用的時間間隔,毫秒為單位。
第三個參數arg:傳遞給將被調用的函數或方法的參數
2、clearInterval()
清除對 setInterval() 的調用。
應用舉例
例01 用setInterval做下雨效果
我們過去做下雨效果時,一般是通過幀的循環來復制雨滴的,幀的循環其實也就是間隔一定的時間。那么,我們當然也完全可以用setInterval來每隔一定時間就調用函數,而這個函數的功能就是復制一滴雨滴,并且設置其坐標。
打開3.6.1.fla文件,在第一幀上的代碼:
i = 0;
rain._visible = 0;
function xiayu() {
duplicateMovieClip(rain, "r"+i, i);
_root["r"+i]._x = Math.round(Math.random()*550);
_root["r"+i]._y = Math.round(Math.random()*400);
i++;
if (i == 100) {
i = 0;
}
}
var sj;//設置變量
sj = setInterval(xiayu,10); //每隔10毫秒調函數xiayu一次。
運行程序,檢測效果。
現在,我們試試參數的傳遞。我們把rain做為參數傳遞,那么上面的程序可以改為:
.....
function xiayu(md) {
duplicateMovieClip(md, "r"+i, i);
........
}
sj = setInterval(xiayu,10,rain);
運行程序,檢查一下,效果和上面的程序是不是一樣?
例02 使幾個影片剪輯mc間隔相同時間播放;
本例題來源于網友的提問,看下圖:
點擊查看動畫效果<
問題思路:
對于順序播放:設置一個播放一個mc的函數,再用setInterval根據輸入文本得到的間隔時間來調用這個函數;同時,利用數組變量改變這個函數里的mc。
對于隨機播放: 可以用上一節的亂數排列知識來處理。
打開3.6.2.fla文件分別查看各處腳本:
1、主時間軸第1幀上的腳本:
mc = [aa, bb, cc, dd];//把4個影片簡輯的實例名作為數組mc的元素
time = ""; //設置輸入文本的初始值為""
i = 0; //設置變量i的初始值為0
function du() {//設置自定義函數,函數名為du
i++;
mc[i].play();//數組中第i個元素開始播放
if (i == 3) {
clearInterval(sj);//最后一個mc播放后,清除sj表示的setInterval函數
}
}
function duing() {//設置自定義函數,函數名為duing;
k = Math.floor(Math.random()*mc.length);//隨機選擇數組mc中的一個元素的序號
mc[k].play();//數組mc中第k個元素開始播放
mc.splice(k, 1);//刪除數組mc中的第k個元素(影片剪輯)
if (mc.length == 0) {
clearInterval(sjing);//最后一個mc播放后,清除sjing表示的setInterval函數
}
}
2、順序播放按扭上的腳本:
on (release) {
mc = [aa, bb, cc, dd];//把4個影片簡輯的實例名作為數組mc的元素(為了能夠重復使用)
i = 0; //設置變量i的初始值為0(為了能夠重復使用)
if (time != "") { //如果輸入文本不為空(輸入了數字)
aa.play(); //第一個mc播放(為了第一個mc的運行不間隔時間)
var sj = setInterval(du, time*1000);
//設置setInterval函數,每隔time秒調用一次函數du
}
}
3、隨機播放按扭上的腳本:
on (release) {
mc = [aa, bb, cc, dd];
i=0;
if (time != "") {
duing(); //調duing函數(為了第一個mc的運行不間隔時間)
var sjing = setInterval(duing, time*1000);
//設置setInterval函數,每隔time秒調用一次函數duing
}
}
作業
把例2的要求改為:不管順序播放還是隨機播放,使一個mc播放結束,后一個mc開始播放,這時的時間間隔等于輸入文本的時間,如下圖。
源文件下載
點擊查看動畫效果<
查看全套"Flash AS 高級教程"