“閃白”換場是電視拍攝用語,是畫面切換過程中場景出現空白,有人將這一手法應用到網頁圖片的切換上來,也是一種不錯的組圖顯示效果,這里我們用動作腳本來制作一個這樣的實例。
源文件下載
>點擊查看動畫效果<實例2-8閃白
基本思路
① 構建一個數組放置庫中的多個類型為 MC 的圖片。
②將數組中的元素依次加載到主場景。
③利用幀循環來依次改變各 MC 的狀態。
新知識點
my_array = new Array(); // 使用構造函數來創建一個數組。
_root.attachMovie () // 加載 MC 到主場景,本實例是按索引從數組中取得 MC 。
補充模糊濾鏡
import flash.filters.BlurFilter;//載入濾鏡類-模糊
var myBlurfilter:BlurFilter = new BlurFilter(blurX:Number, blurY:Number, quality:Number);// 創建一個模糊濾鏡對象
var filterArray:Array = new Array();//創建一個臨時數組
filterArray.push(myBlurfilter);//將新元素添加到數組的結尾
myMovieClip.filters = filterArray;//MC增加濾鏡
實例說明
① 8 個同樣大小的位圖都轉換為 MC ,并在鏈接屬性里作好相關設置。
②第 1 幀加載 MC 和變量初始化 , 第 2 幀到第 7 幀設置循環, MC 被依次改變屬性為可見,并用透明度的變化來實現白和非白之間的畫面轉換。
編寫動作腳本
①在第 1 幀上輸入:
tu = new Array("a", "b", "c", "d", "e", "f", "g", "h");// 創建一個數組,其中的元素是庫中的 MC
for (i=1; i<=8; i++) {
_root.attachMovie(tu[i-1], "h"+i, i);// 將數組中 MC 加載到主場景的對象上
with (_root["h"+i]) {// 設置對象屬性
_x = 250;
_y = 90;
_visible = false;
}
}
i = 1;
n = 0;
② 在第 2 幀上輸入:
_root["h"+i]._visible = true;
_root["h"+i]._alpha = n*5;// 幀循環中透明度由 0 到 100 遞加
n++;
③ 在第 3 幀上輸入:
if (n<21) {
gotoAndPlay(2);
}
④ 在第 5 幀上輸入:
_root["h"+i]._alpha = n*5; // 幀循環中透明度由 100 到 0 遞減
n--;
⑤ 在第 6 幀上輸入:
if (n>0) {
gotoAndPlay(5);
} else {
gotoAndPlay(2);
i++;
if (i>8) {
i = 1;
}
}
要點分析
①數組中的元素就是庫中含有位圖的 MC 元件,共 8 個,數組元素的索引也是就是序列號是從 0 開始,這里就是 0-7 ,將各 MC 再分別加載到一個新對象 MC 上,再由腳本控制這些新對象的狀態。
②實例中是一個大循環里面嵌套兩個小循環,大循環是 8 個 MC 循環顯示,而在顯示一個 MC 的循環里,有前段的透明度由 0 到 100 的以 5 遞增的 20 次小循環,和后段的反向循環,顯示的效果就是圖片由白逐漸變清晰再由清晰變白,然后下一張圖片以同樣過程顯示。
小結
本講學習的內容是了解和應用了一維數組,這是數組使用的初步方法,在今后的學習中會掌握更加復雜的數組應用,數組的應用是廣泛的,而且有簡潔清晰調用方便的特點 。幀循環也是應用普遍的方法,這個實例有助于我們了解和掌握循環過程。
課后練習
修改源文件,使兩個圖片間的切換是前面的淡出,后面的淡入,中間不出現空白。
提示:在幀循環過程中不是一個 MC 而是兩 MC 同時改變狀態,在最后一張圖和第一張圖片之間不出現空白更要專門編寫幀循環語句。范例效果:
>點擊查看動畫效果<練習2-8
補充模糊效果實例
在第 2 幀上輸入:
_root["h"+i]._visible = 1;
import flash.filters.*;//載入濾鏡類
mohu = new BlurFilter(n, n, 1);// 創建一個模糊濾鏡對象
shuzu = new Array();//創建一個臨時數組
shuzu.push(mohu);//將新元素添加到數組的結尾
_root["h"+i].filters = shuzu;//將濾鏡加到MC上
//_root["h"+i].filters = [mohu];//簡略寫法,可去掉4-6行
_root["h"+(i+1)]._visible = 1;
_root["h"+(i+1)]._alpha = n*5;
n++;
>點擊查看動畫效果<
源文件
查看全套"Flash AS 實例進階教程"