flash實訓:簡單Loading動畫制作

有兩種方式可以訪問LoaderInfo對象。
1．訪問flash.display.Loader對象的contentLoaderInfo屬性；
2．任何一個可顯示對象都有loaderInfo屬性。
【實訓目的】
下面通過圖4-1所示的效果圖，了解一個簡單的Loading動畫的制作。
【實訓要點】
* 新建Flash文檔并設置文檔屬性
* 導入相應的素材圖像
* 添加相應的ActionScript腳本代碼實現Loading效果
* 測試Loading效果
[插圖] 【制作步驟】
01 執行【文件】→【新建】命令，新建一個Flash文檔（ActionScript 3.0），如圖4-2所示，單擊“屬性”面板上的“大小”按鈕[插圖]，彈出“文檔屬性”對話框，設置“尺寸”為345像素×216像素，“背景顏色”為#FFFFFF，“幀頻”為12fps，如圖4-3所示。

圖4-2 新建Flash文檔

02 執行【文件】→【導入】→【導入到舞臺】命令，將圖像“第4章\素材\image1.jpg”導入到場景中，如圖4-4所示，按【F8】鍵將圖像轉換成一個名稱為“背景”、“類型”為“影片剪輯”的元件，如圖4-5所示。
圖4-5 “轉換為元件”對話框
03 單擊“時間軸”面板上的“插入圖層”按鈕[插圖]，新建“圖層2”，執行【窗口】→【動作】命令，打開“動作-幀”面板并輸入以下腳本語言。

stop();
stage.scaleMode=StageScaleMode.NO_SCALE;//設置
舞臺屬性不跟隨播放器大小而改變
stage.showDefaultContextMenu=false;//屏蔽右鍵菜
單
stage.frameRate=40;//設置幀頻為40
var stageW=stage.stageWidth;
var stageH=stage.stageHeight;//取得舞臺寬和高
var loadclip:MovieClip=new MovieClip();//創建
LOADING MC loadclip
this.addChild(loadclip)//添加loadclip到舞臺
var txt=new TextField();//創建文本文件txt
txt.autoSize=TextFieldAutoSize.CENTER;//文本文件
自適應大小并且居中顯示
txt.text="AS3.0 Loading...";
txt.textColor=0x000000;//設置文本顏色
txt.selectable=false;//文本設置為不可選
txt.x=stageW/2-txt.width/2;
txt.y=stageH/2-txt.height/2;//設置文本文件放置于舞
臺中央
loadclip.addChild(txt).name="txt";//將文本實例
txt添加到loadclip
var stgb=new Sprite();
stgb.graphics.lineStyle(1,0x000000,1);
stgb.graphics.beginFill(0xff0000,.5);//采用單色
填充，紅色透明50%（.5）
stgb.graphics.drawRect(0,0,200,10);
stgb.graphics.endFill();
stgb.x=stageW/2-stgb.width/2;
stgb.y=txt.y+txt.height+5;
loadclip.addChild(stgb)//繪制進度條底色并且添加到舞
臺
var stg=new Sprite();
stg.graphics.lineStyle(1,0x000000,.5);
stg.graphics.beginGradientFill(GradientType.LINEA
R,[0xff0000,0xffff00],[100,100],[0,255]);//采用漸變填
充“紅→黃”
stg.graphics.drawRect(0,0,200,10);
stg.graphics.endFill();
stg.x=stageW/2-stg.width/2;
stg.y=txt.y+txt.height+5;
loadclip.addChild(stg)//繪制進度條并且添加到舞臺
this.loaderInfo.addEventListener(ProgressEvent
.PROGRESS,loading);//添加進度監聽器
this.loaderInfo.addEventListener(Event.COMPLET
E,loaded);//添加進度完成監聽器
function loading(eve) {
var        loadpre:int=eve.bytesLoaded/eve.
bytesTotal*100;
txt.text="影片載入"+loadpre+"%";
stg.scaleX=loadpre/100;
}//顯示進度載入百分比-----
function loaded(eve) {
txt.text="影片載入完畢！";
if (framesLoaded == totalFrames) {
      removeChild(this.getChildAt(0));
      nextFrame();
}
}//載入完畢清除LOADING并跳到下一幀播放
04 執行【文件】→【保存】命令，將文件保存為“第4章\4-2-1.fla”，完成動畫制作，按【Ctrl+Enter】組合鍵測試動畫，測試效果如圖4-6所示，執行【視圖】→【模擬下載】命令，如圖4-7所示?？梢钥吹侥M下載的動畫效果，如圖4-8所示。
圖4-6 預覽效果