《Flash CS 4網(wǎng)頁動畫實例教程》課件第8章

第8章動畫腳本與動畫輸出8.1ActionScript的發(fā)展過程8.2【動作】面板8.3常用的ActionScript命令8.4動畫的發(fā)布本章小結(jié)課后練習(xí)

FlashCS4具有強大的腳本編程功能，它提供了兩套腳本語言：ActionScript2.0與ActionScript3.0。這使得Flash如虎添翼，不僅在制作動畫方面功能卓越，而且在交互設(shè)計、編程能力方面異常突出。通過ActionScript的應(yīng)用，擴展了Flash動畫應(yīng)用的范圍，如Flash網(wǎng)站、多媒體課件、Flash游戲、移動通信領(lǐng)域等。由于本書主要是面向設(shè)計者，所以只簡單介紹ActionScript語言，如果讀者想深入學(xué)習(xí)Flash的ActionScript編程，可以參考專門介紹ActionScript的書籍。本章主要學(xué)習(xí)ActionScript3.0的幾個常用命令。另外，我們制作Flash動畫以后，都要將其輸出為Flash電影格式，即SWF格式，所以本章還將介紹動畫的輸出內(nèi)容。8.1ActionScript的發(fā)展過程

Flash軟件從僅僅能夠制作一般的動畫，發(fā)展到制作游戲、意見反饋表、搜索引擎等交互性的作品，這一切都要歸功于腳本編輯語言ActionScript。

ActionScript最早出現(xiàn)在Flash3.0中，版本號為ActionScript1.0，主要功能是幀的導(dǎo)航與鼠標(biāo)的交互。

隨著Flash版本的升級，ActionScript也在不斷地發(fā)展。在Flash5.0中，ActionScript已經(jīng)很像JavaScript語言。在FlashMX(Flash6.0)中，則全面改進了ActionScript的編程環(huán)境，重新根據(jù)歐洲的ECMA-262編碼標(biāo)準(zhǔn)設(shè)計，剔除了Flash5.0中所有不符合這個標(biāo)準(zhǔn)的語法和代碼。

FlashMX2004(Flash7.0)版本，則升級到ActionScript2.0版本，主要有兩大改進——變量的類型檢測與新的class類語法，其語法結(jié)構(gòu)與以前版本相比也發(fā)生了很大變化，形成了真正意義上的專業(yè)級編程語言。在FlashCS4(Flash10.0)版本中，在保留ActionScript2.0腳本語言的同時，新增了ActionScript3.0，之所以這樣，是因為ActionScript3.0并不是ActionScript2.0的簡單升級，兩者所基于的底層環(huán)境完全不一樣，或者說它們的工作原理是不一樣的，兩者之間不能直接通信。所以，F(xiàn)lashCS4為用戶提供了兩種不同的選擇，用戶可以根據(jù)工作需要選擇不同的腳本語言，如圖8-1所示。圖8-1兩種腳本語言8.2【動作】面板

在ActionScript1.0與ActionScript2.0中，ActionScript程序腳本可以添加到關(guān)鍵幀、按鈕、影片剪輯元件上；但是ActionScript3.0的程序腳本只能添加到時間軸中的關(guān)鍵幀上，也可以將腳本輸出到外部文件中。無論是哪一個版本的ActionScript，都需要在【動作】面板中編寫。

單擊菜單欄中的【窗口】\【動作】命令或按下F9鍵，可以打開【動作】面板，它主要由六部分構(gòu)成，如圖8-2

所示。圖8-2??【動作】面板腳本類別：用于選擇不同版本的ActionScript語言。

動作列表：包含了Flash中使用的所有ActionScript語言命令，分別存放在不同的類別中，直接雙擊所需要的命令，該命令就會出現(xiàn)在腳本窗口中。

腳本導(dǎo)航器：顯示了Flash文檔中所有添加腳本語言的對象，也可以通過這里切換腳本對象，快速定位編輯對象。

工具行：用于對ActionScript腳本進行編輯，如添加、查找、替換、語法檢查、插入目標(biāo)路徑等操作。

腳本窗口：顯示被選中對象的ActionScript腳本，這里也是ActionScript腳本的編輯區(qū)，用于編輯ActionScript腳本。狀態(tài)欄：用于顯示當(dāng)前添加腳本的對象以及光標(biāo)所在的位置。

【動作】面板提供了兩種編寫ActionScript腳本的模式，一種是“高級模式”，另外一種是“腳本助手”模式。單擊工具行中的??按鈕，就可以進入“腳本助手”模式，如圖8-3所示。在這種模式下，提供了對腳本參數(shù)的有效提示，可以幫助初級用戶避免可能出現(xiàn)的語法錯誤。圖8-3??“腳本助手”模式8.3常用的ActionScript命令

FlashCS4的ActionScript語言已經(jīng)發(fā)展成為一個功能強大的編程語言，具有非常完善的語法規(guī)則，不僅可以完成簡單的動畫交互，甚至可以完全基于腳本進行設(shè)計。對于側(cè)重于美工的動畫設(shè)計人員來說，沒有必要完全掌握復(fù)雜的ActionScript語言，但掌握一些簡單實用的ActionScript動作命令是非常必要的。8.3.1控制影片回放

最簡單的Flash動畫交互就是控制影片的播放，即播放、停止、前進、后退及跳轉(zhuǎn)等。這些操作可以通過ActionScript動作腳本中的“play”、“stop”、“goto”等基本命令完成，但是在ActionScript3.0中，它們的用法有所改變。

1.播放及停止播放影片

在Flash中可以使用play(?)和stop(?)動作命令控制影片的播放與停止，它們通常與按鈕結(jié)合使用，控制影片剪輯與主時間軸的播放與停止。

例如，舞臺上有一個影片剪輯元件的實例，是一段小動畫。如果要控制其播放與停止，可以在【屬性】面板中將該實例命名，假設(shè)實例名稱為mov，那么在【時間軸】面板中的關(guān)鍵幀上添加mov.stop(?)，則該影片剪輯的實例停止播放；而添加mov.play(?)，則播放影片剪輯的實例。在實際工作中，往往都是通過按鈕控制影片的播放，而不是直接在時間軸上控制。例如，單擊一個名稱為btn_play的按鈕播放動畫，單擊一個名稱為btn_stop的按鈕停止動畫。在ActionScript3.0中，代碼也需要添加到時間軸的關(guān)鍵幀中，而不是添加在按鈕上。

單擊按鈕播放動畫的代碼如下：

functionplaymovie(event:MouseEvent):void //創(chuàng)建playmovie函數(shù)

{

mov.play(); //播放mov影片剪輯實例

}

btn_play.addEventListener(MouseEvent.CLICK,playmovie);//為按鈕添加單擊的事件

單擊按鈕停止播放動畫的代碼如下：

functionstopmovie(event:MouseEvent):void //創(chuàng)建stopmovie函數(shù)

{

mov.stop(); //停止播放mov影片剪輯實例

}

btn_stop.addEventListener(MouseEvent.CLICK,stopmovie);//為按鈕添加單擊的事件

2.快進和后退

在制作電子相冊時，往往需要設(shè)置“上一頁”與“下一頁”導(dǎo)航按鈕，其功能的實現(xiàn)需要借助nextFrame()和prevFrame()動作命令。這兩個命令可以控制Flash動畫向后或向前播放一幀并停止，但是播放到影片的最后一幀或最前一幀后，則不能再循環(huán)回來繼續(xù)向后或向前播放。假設(shè)使用一個名稱為btn_nav的按鈕控制一個名稱為photo的影片剪輯實例，每單擊一次按鈕，就向后播放一幀并停止，代碼如下：

functionmovie(event:MouseEvent):void //創(chuàng)建movie函數(shù)

{

photo.nextFrame();//向后播放1幀并停止

}

btn_nav.addEventListener(MouseEvent.CLICK,movie);

//為按鈕添加單擊的事件

3.跳到不同幀播放或停止播放

使用goto命令可以跳轉(zhuǎn)到影片指定的幀或場景，跳轉(zhuǎn)后執(zhí)行的命令有兩種：gotoAndPlay和gotoAndStop。這兩個命令用于控制動畫的跳轉(zhuǎn)播放與停止，它可以讓動畫跳轉(zhuǎn)到指定場景中的某一幀。它們的語法形式為

gotoAndPlay(場景，幀)；

gotoAndStop(場景，幀)；例如下面的代碼：

functionplaymovie(event:MouseEvent):void

{

Mov.gotoAndPlay(″end″);

}

but_mov.addEventListener(MouseEvent.CLICK,playmovie)；

上面的語句表示單擊實例名稱為but_mov按鈕后，動畫跳轉(zhuǎn)到名稱為end幀標(biāo)簽處并停止播放。8.3.2課堂實踐——可控制電子相冊

影片回放控制命令比較簡單，是ActionScript中最基本的命令，它們非常實用且使用頻率極高，例如制作電子相冊、圖片瀏覽、動畫的播放控制等都需要用到這些基本命令。在ActionScript3.0中，影片回放控制命令的使用方法有所改變。下面我們通過制作一個“電子相冊”實例來學(xué)習(xí)并體會ActionScript3.0中各命令與以前版本的不同之處，動畫的瞬間效果如圖8-4所示。圖8-4動畫的瞬間效果

(1)啟動FlashCS4軟件，在歡迎畫面中單擊【Flash文件(ActionScript3.0)】選項，創(chuàng)建一個新文檔。

(2)按下Ctrl+J鍵，在【文檔屬性】對話框中設(shè)置尺寸為550×400像素、背景顏色為白色、幀頻為5?fps。

(3)單擊菜單欄中的【插入】\【新建元件】命令，創(chuàng)建一個名稱為“元件1”的影片剪輯元件，并進入其編輯窗口。

(4)按下Ctrl+R鍵，導(dǎo)入本書光盤“第8章”文件夾中的“PIC01.jpg”文件，此時將彈出一個提示框，提示是否導(dǎo)入序列中的所有圖像，如圖8-5所示。圖8-5提示框圖8-6導(dǎo)入的圖片序列

(5)單擊??按鈕，則導(dǎo)入圖像序列，形成逐幀動畫，如圖8-6所示。圖8-7調(diào)整后的關(guān)鍵幀

(6)在【時間軸】面板中調(diào)整關(guān)鍵幀，使每一個關(guān)鍵幀間隔5幀，如圖8-7所示。

(7)單擊舞臺上方的??按鈕，返回到舞臺中。

(8)將“元件1”從【庫】面板中拖動到舞臺中，調(diào)整其大小及位置如圖8-8所示。

(9)在舞臺中選擇“元件1”實例，在【屬性】面板中設(shè)置實例名稱為“mov”。

(10)在【時間軸】面板的“圖層1”的上方創(chuàng)建一個新圖層“圖層2”，然后按下Ctrl+R鍵，導(dǎo)入本書光盤“第8章”文件夾中的“遮罩.png”文件，結(jié)果如圖8-9所示。圖8-8調(diào)整“元件1”實例的大小和位置圖8-9導(dǎo)入的圖片“遮罩.png”

(11)單擊菜單欄中的【插入】\【新建元件】命令，創(chuàng)建一個名稱為“隱形按鈕”的按鈕元件，并進入其編輯窗口。

(12)在【時間軸】面板中選擇“點擊”幀，按下F6鍵插入關(guān)鍵幀。

(13)選擇工具箱中的“矩形工具”?，在窗口中繪制一個矩形，顏色任意(實際上該矩形是隱形按鈕的觸發(fā)區(qū)，運行動畫時是不可見的)，如圖8-10所示。圖8-10繪制的矩形圖8-11復(fù)制的實例

(14)單擊舞臺上方的??按鈕，返回到舞臺中。

(15)將“隱形按鈕”元件從【庫】面板中拖動到舞臺中，調(diào)整其大小，使其覆蓋在“播放”按鈕上，然后將其復(fù)制4個，放置在其它按鈕上，如圖8-11所示。

(16)在【屬性】面板中依次為每一個按鈕實例命名，從左到右分別為“P”、“S”、“B”、“F”和“E”。

(17)在“圖層2”的上方創(chuàng)建一個新圖層“圖層3”，然后按下F9鍵打開【動作】面板，輸入如下代碼：

mov.stop(); //讓影片開始是靜止的

functionplaymov(event:MouseEvent):void

//創(chuàng)建playmov函數(shù)

{

mov.play();//播放mov影片剪輯實例

}

P.addEventListener(MouseEvent.CLICK,playmov);

//為按鈕添加單擊的事件

functionstopmov(event:MouseEvent):void

{

mov.stop();

}

S.addEventListener(MouseEvent.CLICK,stopmov);

functionbackmov(event:MouseEvent):void

{

mov.prevFrame();

//向前播放1幀并停止

}

B.addEventListener(MouseEvent.CLICK,backmov);

functionfrontmov(event:MouseEvent):void

{

mov.nextFrame();//向后播放1幀并停止

}

F.addEventListener(MouseEvent.CLICK,frontmov);

functionendmov(event:MouseEvent):void

{

mov.gotoAndStop(5);//跳轉(zhuǎn)到第5幀并停止

}

E.addEventListener(MouseEvent.CLICK,endmov);

(18)按下Ctrl+Enter鍵，觀看動畫效果，可以測試每一個按鈕的效果。最后關(guān)閉測試窗口，將文件保存為“可控制電子相冊.fla”。8.3.3載入外部圖像與動畫

在Flash中可以通過ActionScript腳本將外部對象載入到Flash中，載入的文件可以是JPG、GIF、PNG圖像文件，也可以是SWF動畫文件。在ActionScript2.0版本中，要實現(xiàn)這樣的任務(wù)，需要使用loadmovie(?)命令；而在ActionScript3.0中則不同，它是借助Loader語句完成的。在ActionScript3.0中創(chuàng)建Loader實例的方法與創(chuàng)建其它可視對象(displayobject)一樣，使用new來構(gòu)建對象，然后使用addChild(?)方法把實例添加到可視對象列表(displaylist)中。加載是通過load()方法處理一個包含外部文件地址的URLRequest對象實現(xiàn)的。例如：

varrequest:URLRequest=newURLRequest(″pic.jpg″);

varloader:Loader=newLoader();

loader.load(request);

addChild(loader);

上面的語句表示構(gòu)建一個名稱為loader的對象，然后將與動畫文件同在一個文件夾中的pic.jpg圖像加載到當(dāng)前舞

臺中。8.3.4網(wǎng)站鏈接

Flash主要是用于制作網(wǎng)絡(luò)動畫的軟件，所以必然少不了網(wǎng)頁超鏈接的功能?？梢哉f超鏈接是構(gòu)成互聯(lián)網(wǎng)的基礎(chǔ)元素。如果是html網(wǎng)頁文件，創(chuàng)建超鏈接很簡單，通過<a></a>標(biāo)簽的嵌套即可創(chuàng)建超鏈接。

在Flash中使用ActionScript3.0創(chuàng)建超鏈接，則需要通過動作包中的函數(shù)navigateToURL完成。

navigateToURL函數(shù)的書寫格式為

publicfunctionnavigateToURL(request:URLRequest,window:String=null):void;

其中，request:URLRequest是指鏈接到哪個站點的URL，URL是用來獲得文檔的統(tǒng)一定位資源。在設(shè)置URL鏈接時，可以是相對路徑，也可以是絕對路徑。

window:String(default=null)用于設(shè)置所鏈接的網(wǎng)頁打開方式。打開網(wǎng)頁選項主要有四種：

_self：在當(dāng)前瀏覽器中打開鏈接。

_blank：在新的瀏覽器窗口中打開網(wǎng)頁。

_parent：在當(dāng)前位置的上一級瀏覽器窗口中打開鏈接。

_top：在當(dāng)前瀏覽器上方打開鏈接。例如：

functionweb(event:MouseEvent):void

{

navigateToURL(newURLRequest(″″),″_blank″);

}

btn_web.addEventListener(MouseEvent.CLICK,web)；

上面的語句表示單擊實例名稱為“btn_web”的按鈕后，跳轉(zhuǎn)到新的瀏覽器窗口中打開這個網(wǎng)頁。8.3.5課堂實踐——網(wǎng)站首頁

下面制作一個“網(wǎng)站首頁”實例，通過這個實例學(xué)習(xí)如何載入外部SWF動畫文件，以及建立超鏈接與郵箱鏈接的方法。本例效果如圖8-12所示。圖8-12網(wǎng)站首頁效果

(1)啟動FlashCS4軟件，在歡迎畫面中單擊【Flash文件(ActionScript3.0)】選項，創(chuàng)建一個新文檔。

(2)按下Ctrl+J鍵，在【文檔屬性】對話框中設(shè)置尺寸為550×400像素、背景顏色為白色、幀頻為30?fps。

(3)按下Ctrl+R鍵，導(dǎo)入本書光盤“第8章”文件夾中的“主頁.png”文件，結(jié)果如圖8-13所示。圖8-13導(dǎo)入的圖片“主頁.png”

(4)在【時間軸】面板的“圖層1”上方創(chuàng)建一個新圖層“圖層2”。

(5)選擇工具箱中的“矩形工具”?，在舞臺中繪制一個矩形，顏色任意，大小以覆蓋住白色透明區(qū)域為準(zhǔn)，如圖8-14所示。圖8-14繪制的矩形圖8-15??【轉(zhuǎn)換為元件】對話框

(6)在舞臺中選擇剛繪制的矩形，按下F8鍵則彈出【轉(zhuǎn)換為元件】對話框，在該對話框中將注冊點調(diào)整到左上角，命名元件為“元件1”，如圖8-15所示。

(7)單擊??按鈕，將矩形轉(zhuǎn)換為影片剪輯元件，然后在【屬性】面板中設(shè)置該實例名稱為“mov”。

(8)在【時間軸】面板中將“圖層1”調(diào)整到“圖層2”的上方，結(jié)果如圖8-16所示。

(9)在“圖層1”的上方創(chuàng)建一個新圖層“圖層3”。按下Ctrl+R鍵，分別導(dǎo)入本書光盤“第8章”文件夾中的“按鈕_01.gif”與“按鈕_02.gif”圖片，調(diào)整其位置如圖8-17所示。圖8-16調(diào)整后的效果圖8-17導(dǎo)入的圖片“按鈕_01.gif”與“按鈕_02.gif”

(10)分別選擇導(dǎo)入的兩個圖片，按下F8鍵將其轉(zhuǎn)換為按鈕元件。然后選擇上方的按鈕，在【屬性】面板中將其命名為“btn01”；同樣方法，將下方的按鈕命名為“btn02”。

(11)在“圖層3”的上方創(chuàng)建一個新圖層“圖層4”。按下F9鍵打開【動作】面板，輸入如下代碼：

varrequest:URLRequest=newURLRequest(“003.swf”);//載入同目錄下的003.swf文件

varloader:Loader=newLoader();

loader.load(request);

mov.addChild(loader);

functionweb(event:MouseEvent):void

{

navigateToURL(new

URLRequest(“”),“_blank”);//鏈接163網(wǎng)站

}

btn01.addEventListener(MouseEvent.CLICK,web);

functionmail(event:MouseEvent):void

{

navigateToURL(newURLRequest(“mailto:qdzrc@”),“_blank”);//發(fā)郵件

}

btn02.addEventListener(MouseEvent.CLICK,mail);

(12)按下Ctrl+Enter鍵測試動畫效果，它可以自動載入同目錄下的一個SWF動畫文件。如果計算機已經(jīng)聯(lián)網(wǎng)，分別單擊頁面中的兩個按鈕，還可以鏈接至163網(wǎng)站、發(fā)郵件。

(13)最后關(guān)閉測試窗口，按下Ctrl+S鍵將文件保存為“網(wǎng)站主頁.fla”。8.3.6fscommand命令應(yīng)用

fscommand語句是用于控制FlashPlayer播放器的命令，如全屏播放、退出動畫等。該動作腳本的效果在影片測試窗口中看不到，只能在FlashPlayer動畫播放器中顯示出來。

fscommand動作命令的語法形式為

fscommand(命令，參數(shù))

其中，“命令”為控制FlashPlayer播放器的各個命令；“參數(shù)”為各條命令的參數(shù)，如fullscreen命令的參數(shù)為true或false。

下面對fscommand語句中的各個命令進行講解。

1.?fullscreen命令

fullscreen是一個全屏控制命令，可以使影片占滿整個屏幕，通常此命令放在Flash影片的第1幀。該命令有兩個參數(shù)：true、false。如果將fullscreen命令的參數(shù)設(shè)置為true，表示動畫以全屏播放；如果參數(shù)設(shè)置為false，則動畫以舞臺大小播放。使用fullscreen命令時，整個語句應(yīng)寫為

fscommand(″fullscreen″,″true″);

2.?allowscale命令

allowscale命令用于控制播放影片的窗口是否可以調(diào)整。該命令有兩個參數(shù)：true、false。如果將allowscale命令的參數(shù)設(shè)置為true，表示播放動畫時可以使用鼠標(biāo)調(diào)整播放器窗口的大??；如果參數(shù)設(shè)置為false，則播放動畫的窗口大小不能調(diào)整。使用allowscale命令時，整個語句應(yīng)寫為

fscommand(″allowscale″,″true″);

3.?showmenu命令

showmenu命令用于控制FlashPlayer播放器的右鍵菜單是否顯示。該命令有兩個參數(shù)：true、false。如果將showmenu命令的參數(shù)設(shè)置為true，則播放動畫時可以顯示右鍵菜單；否則不顯示菜單，只顯示播放器的版本信息。使用showmenu命令時，整個語句應(yīng)寫為

fscommand(″showmenu″,″true″);

4.?trapallkeys命令

trapallkeys語句用于鎖定鍵盤輸入，使所有設(shè)定的快捷鍵都無效，這樣FlashPlayer播放器不會接受鍵盤的輸入，但是Ctrl+Alt+Del組合鍵除外。該命令也有兩個參數(shù)：true、false。如果將trapallkeys命令的參數(shù)設(shè)置為true，則鍵盤的輸入無效；如果參數(shù)設(shè)置為false，則鍵盤的輸入有效。使用trapallkeys命令時，整個語句應(yīng)寫為

fscommand(″trapallkeys″,″true″);

5.?exec命令

exec命令用于打開一個可執(zhí)行文件，文件類型可以是?.exe、.com、.bat格式。exec命令的參數(shù)是打開文件的路徑，使用該命令可以將多個Flash動畫文件鏈接到一起。使用exec命令時，整個語句應(yīng)寫為

fscommand(″exec″,″program.exe″);

其中，program.exe為外部可執(zhí)行文件。

FlashCS4版本的軟件出于對文件的保護，在使用exec命令調(diào)用?.exe文件時，需要將調(diào)用的?.exe文件放置在fscommand文件夾中，否則無法調(diào)用此文件。

6.?quit命令

quit命令用于退出Flash影片，執(zhí)行該命令后將結(jié)束播放，退出FlashPlayer播放器，此命令不需要任何參數(shù)，整個語句應(yīng)寫為

fscommand(″quit″);8.3.7鼠標(biāo)事件

在ActionScript3.0中，我們不能將腳本代碼寫在按鈕或影片剪輯元件上，必須寫在關(guān)鍵幀上，但是同樣需要觸發(fā)事件來控制某種行為。鼠標(biāo)事件是指通過鼠標(biāo)操作控制某種行為的事件，然后將它添加到觸發(fā)對象上。在【動作】面板中可以看到，F(xiàn)lashCS4中的鼠標(biāo)事件比以前的版本多，如圖

8-18所示。圖8-18鼠標(biāo)事件列表下面介紹一些常用的鼠標(biāo)事件。

“CLICK”：單擊，即單擊鼠標(biāo)左鍵觸發(fā)某種行為。

“DOUBLE_CLICK”：雙擊，即連續(xù)兩次快速地按下并釋放鼠標(biāo)左鍵，觸發(fā)某種行為。

“MOUSE_DOWN”：按下鼠標(biāo)，即按住鼠標(biāo)左鍵時觸發(fā)某種行為。

“MOUSE_MOVE”：移動鼠標(biāo)，即移動鼠標(biāo)時觸發(fā)某種行為。

“MOUSE_OUT”：移出鼠標(biāo)，即鼠標(biāo)移開對象時觸發(fā)某種行為?！癕OUSE_OVER”：懸停鼠標(biāo)，即鼠標(biāo)懸停在某個位置時觸發(fā)某種行為。

“MOUSE_UP”：釋放鼠標(biāo)，即按下鼠標(biāo)左鍵以后，再釋放鼠標(biāo)左鍵的時候觸發(fā)某種行為。

“MOUSE_WHEEL”：滾動鼠標(biāo)，即滾動鼠標(biāo)中鍵時觸發(fā)某種行為。

“ROLL_OVER”：滑入，即按住鼠標(biāo)左鍵滑到按鈕上時觸發(fā)某種行為。

“ROLL_OUT”：滑離，即按住鼠標(biāo)左鍵從按鈕上滑離時觸發(fā)某種行為。8.3.8課堂實踐——圖片展示

在前面的實例中，都是通過鼠標(biāo)的CLICK事件來控制動畫交互的，學(xué)習(xí)了鼠標(biāo)的各種事件以后，下面我們制作一個“圖片展示”實例，學(xué)習(xí)使用MOUSE_OVER事件控制對象的交互，動畫的瞬間效果如圖8-19所示。圖8-19動畫的瞬間效果

(1)啟動FlashCS4軟件，在歡迎畫面中單擊【Flash文件(ActionScript3.0)】選項，創(chuàng)建一個新文檔。

(2)按下Ctrl+J鍵，在【文檔屬性】對話框中設(shè)置尺寸為408×168像素、背景顏色為白色、幀頻為24?fps。

(3)將“圖層1”的名稱更改為“圖片”，按下Ctrl+R鍵，導(dǎo)入本書光盤“第8章”文件夾中的“1.jpg”文件，位置如圖8-20所示。圖8-20導(dǎo)入的圖片“1.jpg”

(4)選擇導(dǎo)入的圖片，按下F8鍵將其轉(zhuǎn)換為影片剪輯元件“圖片”。雙擊該實例，進入其編輯窗口中。

(5)在“圖層1”的第2幀處插入空白關(guān)鍵幀，導(dǎo)入本書光盤“第8章”文件夾中的“2.jpg”文件。

(6)在“圖層1”的第3幀處插入空白關(guān)鍵幀，導(dǎo)入本書光盤“第8章”文件夾中的“3.jpg”文件。

(7)單擊舞臺上方的??按鈕，返回到舞臺中。

(8)在舞臺中選擇“圖片”實例，在【屬性】面板中將其命名為“nr_mc”，如圖8-21所示。圖8-21??【屬性】面板

(9)按下Ctrl+F8鍵，創(chuàng)建一個新的按鈕元件“按鈕1”，并進入其編輯窗口中。

(10)選擇工具箱中的“矩形工具”?，在【屬性】面板中設(shè)置筆觸顏色為橘黃色(#FF6600)、填充顏色為白色，在編輯窗口中繪制一個矩形，如圖8-22所示。

(11)在“指針經(jīng)過”幀處插入關(guān)鍵幀，選擇工具箱中的“顏料桶工具”?，在【屬性】面板中設(shè)置填充顏色為

橘黃色(#FF6600)，在矩形內(nèi)單擊鼠標(biāo)，填充橘黃色，如圖8-23所示。圖8-22繪制的矩形圖8-23填充顏色

(12)在“按下”幀處插入關(guān)鍵幀，在“點擊”幀處插入普

通幀。

(13)在“圖層1”的上方創(chuàng)建一個新圖層“圖層2”，選擇工具箱中的“文本工具”?，在【屬性】面板中設(shè)置文本顏色為橘黃色(#FF6600)，在矩形中輸入文字“1”，如圖8-24

所示。

(14)在“指針經(jīng)過”幀處插入關(guān)鍵幀，將文字顏色更改為白色，如圖8-25所示。圖8-24輸入的文字圖8-25更改文字的顏色

(15)在“按下”幀處插入關(guān)鍵幀，在“點擊”幀處插入普

通幀。

(16)單擊舞臺上方的??按鈕，返回到舞臺中。

(17)在【庫】面板中選擇“按鈕1”元件，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇【直接復(fù)制】命令，在彈出的【直接復(fù)制元件】對話框中設(shè)置選項，如圖8-26所示。圖8-26??【直接復(fù)制元件】對話框

(18)單擊?按鈕，復(fù)制一個按鈕元件“按鈕2”。

(19)雙擊【庫】面板中的“按鈕2”元件，進入其編輯窗口中，將“圖層2”中的文字“1”更改為文字“2”。

(20)用同樣的方法，再復(fù)制一個按鈕元件“按鈕3”，并將文字更改為“3”。

(21)單擊舞臺上方的??按鈕，返回到舞臺中。

(22)在【時間軸】面板中“圖片”層的上方創(chuàng)建一個新圖層，重新命名為“按鈕”。

(23)從【庫】面板中將“按鈕1”、“按鈕2”和“按鈕3”元件分別拖動到舞臺的右下角，調(diào)整其位置如圖8-27所示。圖8-27調(diào)整實例的位置

(24)選擇“按鈕1”實例，在【屬性】面板中將其命名為“a1_btn”，如圖8-28所示。圖8-28??【屬性】面板

(25)用同樣的方法，分別將“按鈕2”和“按鈕3”實例命名為“a2_btn”和“a3_btn”。

(26)在【時間軸】面板中“按鈕”層的上方創(chuàng)建一個新圖層，命名為“代碼”。按下F9鍵打開【動作】面板，輸入如下代碼：

nr_mc.stop();

a1_btn.addEventListener(MouseEvent.MOUSE_OVER,jj);

functionjj(event)

{

nr_mc.gotoAndStop(1);

}

a2_btn.addEventListener(MouseEvent.MOUSE_OVER,tc);

functiontc(event)

{

nr_mc.gotoAndStop(2);

}

a3_btn.addEventListener(MouseEvent.MOUSE_OVER,sm);

functionsm(event)

{

nr_mc.gotoAndStop(3);

}

(27)按下Ctrl+Enter鍵可以測試動畫效果，可以看到，光標(biāo)指向畫面中的不同按鈕就出現(xiàn)不同的圖片。

(28)最后關(guān)閉測試窗口，單擊菜單欄中的【文件】\【保存】命令，將文件保存為“圖片展示.fla”。8.3.9課堂練習(xí)——雪花飄飄

ActionScript的功能非常強大，我們前面介紹的內(nèi)容僅是冰山一角，是最簡單、最常用的交互操作，實際上如果我們掌握了這門腳本語言，可以制作出各種各樣絢麗多彩的實例效果。下面就使用ActionScript制作一個隨機飄雪花的動畫，其瞬間效果如圖8-29所示。圖8-29動畫的瞬間效果

(1)啟動FlashCS4軟件，在歡迎畫面中單擊【Flash文件(ActionScript3.0)】選項，創(chuàng)建一個新文檔。

(2)按下Ctrl+J鍵，在【文檔屬性】對話框中設(shè)置尺寸為500×375像素、背景顏色為紅色(#FF0000)、幀頻為12?fps。

(3)在【時間軸】面板中將“圖層1”的名稱更改為“圖片”，按下Ctrl+R鍵，將本書光盤“第8章”文件夾中的“雪人.jpg”文件導(dǎo)入到舞臺的中央位置，如圖8-30所示。圖8-30導(dǎo)入的圖片“雪人.jpg”

(4)按下Ctrl+F8鍵，創(chuàng)建一個新的圖形元件“雪片”，并進入其編輯窗口中。

(5)將舞臺放大到800%，運用“橢圓工具”?繪制一個筆觸顏色為無色的圖形，填充顏色任意，然后使用“選擇工具”?調(diào)整一下，使其為不規(guī)則形狀，如圖8-31所示。圖8-31調(diào)整后的圖形圖8-32??【顏色】面板

(6)按下Shift+F9鍵打開【顏色】面板，設(shè)置類型為“放射狀”，然后設(shè)置左、右兩個色標(biāo)均為白色，設(shè)置左側(cè)色標(biāo)的Alpha值為100%、右側(cè)色標(biāo)的Alpha值為30%，如圖8-32

所示。圖8-33繪制的雪片

(7)選擇工具箱中的“顏料桶工具”?，在繪制的不

規(guī)則圖形上單擊鼠標(biāo)，填充漸變色作為雪片，結(jié)果如圖8-33所示。

(8)按下Ctrl+F8鍵，再創(chuàng)建一個新的影片剪輯元件“飄動的雪片”，并進入其編輯窗口中，然后將“雪片”元件從【庫】面板中拖動到窗口中。

(9)在【時間軸】面板中選擇“圖層1”的第30幀，按下F6鍵插入關(guān)鍵幀。

(10)在“圖層1”的第1～30幀之間任選一幀，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【創(chuàng)建傳統(tǒng)補間】命令，創(chuàng)建傳統(tǒng)補間動畫。

(11)在“圖層1”上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【添加傳統(tǒng)運動引導(dǎo)層】命令，在該層的上方創(chuàng)建一個運動引導(dǎo)層。

(12)選擇工具箱中的“鉛筆工具”?，在舞臺中繪制一條曲線，作為“雪片”運動的軌跡，如圖8-34所示。

(13)選擇“圖層1”第1幀處的“雪片”實例，激活工具箱中的按鈕，將實例吸附到運動引導(dǎo)線的上端，如圖8-35所示。

(14)選擇“圖層1”第30幀處的“雪片”實例，將其吸附到運動引導(dǎo)線的下端，如圖8-36所示。圖8-34繪制的曲線圖8-35吸附“雪片”實例到圖8-36吸附“雪片”實例到引線的上端引線的下端

(15)單擊舞臺上方的??按鈕，返回到舞臺中。

(16)在【庫】面板中選擇“飄動的雪片”元件，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇【屬性】命令，在彈出的【元件屬性】對話框中單擊??按鈕，展開高級選項，在【類】中輸入“xl”，如圖8-37所示。

(17)單擊??按鈕，關(guān)閉該對話框。圖8-37??【元件屬性】對話框

(18)在【時間軸】面板中“圖片”層的上方創(chuàng)建一個新圖層，命名為“代碼”，按下F9鍵打開【動作】面板，輸入如下代碼：

vari:Number=1;

addEventListener(Event.ENTER_FRAME,xx);

functionxx(enent:Event):void

{

varx_mc:xl=newxl(); //定義變量x_mc

addChild(x_mc);

x_mc.x=Math.random()*550;

x_mc.scaleX=0.2+Math.random(); //X軸上產(chǎn)生0.2～1.2之間的隨機數(shù)

x_mc.scaleY=0.2+Math.random(); //Y軸上產(chǎn)生0.2～1.2之間的隨機數(shù)

i++;

if(i>100)

{

this.removeChildAt(1); //刪除已經(jīng)加載的對象

i=100;

}

}

(19)按下Ctrl+Enter鍵測試動畫，可以看到隨機飄落的雪花。

(20)關(guān)閉測試窗口，單擊菜單欄中的【文件】\【保存】命令，將文件保存為“雪花飄飄.fla”。8.4動?畫?的?發(fā)?布

動畫的輸出與發(fā)布是制作Flash動畫的最終環(huán)節(jié)，它直接關(guān)系到動畫作品的有效傳播。通常情況下，在Flash中完成了動畫制作以后，都要對動畫進行優(yōu)化處理，然后再將其輸出為其它格式的文件，以便在別的應(yīng)用程序中使用。一般地，我們制作了Flash動畫以后，都要將其輸出為Flash電影格式，即SWF格式。8.4.1影片優(yōu)化

制作Flash動畫的時候，一定要記住其最終載體是頁面。影片文件的大小直接影響它在因特網(wǎng)上的上傳和下載時間以及播放速度。因此，在發(fā)布影片之前應(yīng)對動畫文件進行優(yōu)化處理。在優(yōu)化影片時，可以從以下幾個方面入手。

1.優(yōu)化對象

動畫對象的類型與大小直接影響Flash動畫文件的大小，這是最主要的一個方面。按以下原則優(yōu)化對象時，可以確保動畫文件足夠?。?/p>

①對于影片中多次出現(xiàn)的對象，建議使用元件。

②同樣的動畫效果，盡量使用補間動畫。原因是補間動畫會大大減小影片的體積。

③避免使用位圖作為影片的背景。

④盡量使用圖層組織不同時間、不同對象的動畫，避免在同一個關(guān)鍵幀安排多個動畫對象同時運動。⑤影片中的音樂盡量采用MP3格式。

⑥盡可能減少漸變色和Alpha透明度的使用。

2.優(yōu)化字體和文字

動畫中存在文字時，可以按以下原則對文字優(yōu)化：

①在使用字體時常會出現(xiàn)亂碼或字跡模糊的現(xiàn)象。這種情況可以使用默認(rèn)字體來解決，而且使用系統(tǒng)默認(rèn)字體可以得到更小的文件體積。

②在Flash影片制作過程中，盡可能使用較少種類的字體，盡可能使用同一種顏色或字號。

③盡量避免將字體分離，因為圖形比文字所占空間大。

3.優(yōu)化線條

由于在Flash動畫中會運用大量的線條，它們的形態(tài)與種類也嚴(yán)重影響著影片的體積，所以對于線條而言，可以在以下方面做優(yōu)化處理：

①使用“刷子工具”?繪制的線條要比使用“鉛筆工具”?繪制的線條所占用的空間大，所以同樣的線條，優(yōu)先使用“鉛筆工具”?。

②限制特殊線條的出現(xiàn)，如虛線、折線、點狀線等。

③減少創(chuàng)建圖形所使用的點數(shù)或線數(shù)，并且可以使用【修改】\【形狀】\【優(yōu)化】命令來優(yōu)化孤立的線條。

4.優(yōu)化圖形顏色

動畫對象顏色的多少也會影響到最終影片的體積，所以對于圖形的顏色也需要進行適當(dāng)?shù)膬?yōu)化處理。

①使用繪圖工具制作對象時，使用漸變顏色的影片文件將比使用單一色的影片文件體積大，所以在制作影片時應(yīng)盡可能使用單色且使用網(wǎng)絡(luò)安全顏色。

②對于調(diào)用外部的矢量圖形，最好在分解狀態(tài)下使用【優(yōu)化】命令進行優(yōu)化之后再使用，這樣能夠優(yōu)化矢量圖形中的曲線，刪除一些不需要的曲線來減小文件的容量。8.4.2SWF文件發(fā)布設(shè)置

完成了Flash動畫的制作以后，我們可以將其發(fā)布為SWF文件，單擊菜單欄中的【文件】\【發(fā)布設(shè)置】命令，打開【發(fā)布設(shè)置】對話框，然后切換到【Flash】選項卡，如圖8-38所示，在這里可以對相關(guān)選項進行設(shè)置。圖8-38??【發(fā)布設(shè)置】對話框的【Flash】選項卡

【播放器】：該下拉列表用于選擇FlashPlayer播放器，它提供了多個版本供選擇。

【腳本】：該下拉列表用于選擇ActionScript版本。但是要注意腳本之間的兼容性，避免影響動畫的正常運行。

【JPEG品質(zhì)】：用于控制影片中JPEG圖像的壓縮率。值越小，壓縮率越高，生成的文件越小，但圖像品質(zhì)變差；值越大，壓縮率越小，圖像品質(zhì)越好。

如果要使高度壓縮的JPEG圖像顯得比較平滑，可以選擇“啟用JPEG解塊”選項，此選項可減少由于壓縮導(dǎo)致的失真。

【音頻流】與【音頻事件】：用于為影片中所有的音頻流或音頻事件設(shè)置采樣率和壓縮比，單擊右側(cè)的??按鈕，在彈出的【聲音設(shè)置】對話框中可以設(shè)置聲音的壓縮格式、比特率與品質(zhì)等。選擇“覆蓋聲音設(shè)置”選項，則不再使用【庫】面板中設(shè)定的聲音屬性，而是統(tǒng)一使用這里設(shè)置的聲音屬性。選擇“導(dǎo)出設(shè)備聲音”選項，可以導(dǎo)出適合于設(shè)備(包括移動設(shè)備)的聲音，而不是【庫】中的原始聲音。和縮短下載時間。當(dāng)文件包含大量文本或ActionScript時，使用該選項十分有益。選擇“包括隱藏圖層”選項，將發(fā)布Flash文檔中包括隱藏層的所有圖層，否則只發(fā)布可見圖層。選擇“包括XMP元數(shù)據(jù)”，默認(rèn)情況下將在【文件信息】對話框中導(dǎo)出輸入的所有元數(shù)據(jù)，單擊??按鈕可以打開該對話框。只有使用ActionScript3.0時“導(dǎo)出SWC”選項才可用，選擇該選項可以導(dǎo)出?.swc文件，該文件用于分發(fā)組件，包含一個編譯剪輯、組件的ActionScript類文件以及描述組件的其它文件。

【跟蹤和調(diào)試】：選擇“生成大小報告”選項，發(fā)布影片時會自動生成一個報告文件，列出最終Flash內(nèi)容中的數(shù)據(jù)量。選擇“防止導(dǎo)入”選項，可以防止發(fā)布后的SWF文件被他人轉(zhuǎn)換回FLA文檔格式。選擇“省略trace動作”選項，測試影片時，可以使Flash忽略當(dāng)前SWF文件中的ActionScriptTrace語句。選擇“允許調(diào)試”選項，可以激活調(diào)試器并允許遠程調(diào)試FlashSWF文件。

【密碼】：當(dāng)選擇了“防止導(dǎo)入”選項時，該項變?yōu)榭捎脿顟B(tài)，用于設(shè)置密碼，以保護FlashSWF文件。

【本地回放安全性】：該下拉列表用于指定已發(fā)布的SWF文件的訪問權(quán)，可以是本地安全性訪問，也可以是網(wǎng)絡(luò)安全