Flash基礎教程與創(chuàng)作實例 第13章 Flash特效制作.ppt

1、第13章 Flash特效制作,內(nèi)容概述- 本章主要講述了用Flash制作特殊動畫效果和Flash配合其他技術(shù)實現(xiàn)網(wǎng)頁交互功能（動態(tài)網(wǎng)頁）兩個方面的內(nèi)容。Flash軟件一個相當重要的應用領域是網(wǎng)頁交互，使用Flash可以制作出各種實用的網(wǎng)頁交互效果且使用Flash制作出的交互網(wǎng)頁特效外觀華麗，配合ASP、JavaScrip等技術(shù)可以在網(wǎng)頁制作領域發(fā)揮強大功能。本章介紹的作品涉及的內(nèi)容大都是網(wǎng)上使用較多且比較實用的，希望讀者通過本章的學習，激發(fā)創(chuàng)作靈感，創(chuàng)作出更為優(yōu)秀的Flash作品。,教學目標,1掌握利用Flash制作網(wǎng)頁特效的方法。 2了解利用Flash制作網(wǎng)頁下拉菜單的方法。 3了解Flas

2、h的網(wǎng)絡交互功能。,13.1 網(wǎng)頁特效 13.2 菜單 13.3 網(wǎng)絡交互 本章小結(jié) 13.4 練習題,13.1 網(wǎng)頁特效,目前Flash動畫在因特網(wǎng)上的應用以幾何級數(shù)增長，因為其效果是傳統(tǒng)網(wǎng)頁所不可比擬的，所以掌握和學習些Flash網(wǎng)頁特效的操作是必需的。 13.1.1 網(wǎng)頁時間動態(tài)顯示的制作 13.1.2 動態(tài)文本的制作 13.1.3 Logo制作,13.1.1 網(wǎng)頁時間動態(tài)顯示的制作,在網(wǎng)頁中插入一個漂亮的電子時鐘，可以使網(wǎng)頁即看起來美觀又為瀏覽者提供方便。Flash中提供的簡單實用的Data類可以動態(tài)顯示當前的時間，來達到這一目的。 這里的實例是用一個動態(tài)文本來顯示時間。既然要動態(tài)地顯

3、示當前的時間，自然就要有一個定時機制不斷地更新當前的時間，而影片剪輯的EnterFrame事件就很合適。 制作步驟： 【步驟1】創(chuàng)建一個影片剪輯元件，把它的一個實例拖入舞臺場景中。,【步驟2】在舞臺中放置一個動態(tài)文本，賦予其實例名為MyText。 【步驟3】在影片剪輯實例上捆綁下面的腳本. 【步驟4】在舞臺上選擇動態(tài)文本，然后在“屬性”面板中單擊“嵌入”按鈕，在彈出的“字符選項”對話框中選中“指定范圍”，并在“包含這些字符”文本框中輸入“年月日時分秒0123456789”。這樣做的目的是嵌入這幾個字符的字體輪廓，從而可以以抗鋸齒方式在動態(tài)文本中顯示這些字符 【步驟5】測試影片，可以看到這只電子

4、鐘的工作情況,13.1.2 動態(tài)文本的制作,動態(tài)文本是一種交互式的文本對象，文本會根據(jù)文本服務器的輸入不斷更新，如天氣預報、股票價格等。它允許用戶隨時更新動態(tài)文本中消息，即使在作品完成后也可以改變其中的信息。,13.1.3 Logo制作,預載畫面的原理是簡單的，就是通過建立關鍵幀，第一個關鍵幀是動畫幀，用于放置預載動畫、已經(jīng)讀入的百分比計算等，第二個關鍵幀用于循環(huán)，使影片在沒有完全讀取之前，不進入正式的畫面。 這里先介紹要用到的兩個重要命令： getBytesLoaded()：得到已經(jīng)讀取的字節(jié)數(shù)。 getBytesTotal()：得到需要讀取的字節(jié)數(shù)總數(shù)。,操作步驟： 【步驟1】新建文件：新

5、建一個電影文件，命名為“PreLoader.fla”。 【步驟2】制作進度條：將“圖層1”命名為“Bar”，在第一幀中，使用“矩形”工具，繪制一個寬200像素、高20像素的矩形，再繪制其外框。同樣使用“矩形工具”繪制一個矩形，設置其筆觸高度為3，刪除中間的填充顏色，使用“任意變形”工具修改其大小，繪制的進度條最終形態(tài)， 選中該進度條的主體（不帶邊框），按F8快捷鍵，將進度條圖片轉(zhuǎn)化為影片剪輯元件。在彈出的“轉(zhuǎn)化為元件”對話框中將元件名稱設置為“MyBar”，注意“注冊”的選擇，將基點定在左邊的中間， 單擊“確定”按鈕完成設置。 為“MyBar”影片剪輯設置實例名稱，這樣Action Scrip

6、t語句就可以使用實例名稱來控制進度條的寬度。選中“MyBar”影片剪輯，按CtrlF3組合鍵調(diào)出屬性面板，填寫實例名稱“progress Bar”，把“寬度”改為1.0像素， 【步驟3】制作百分比文本框：在舞臺上需要用一個動態(tài)文本框來顯示已經(jīng)讀取內(nèi)容的百分比，以及讀取多少字節(jié)等動態(tài)信息。使用“文本工具”添加一個文本框，放置在進度條的正下方。 將“文本類型”設置為“動態(tài)文本”，在這里尤其要注意的是將“變量”選項設置為“Load Date”（Data是保留字，不能作為變量名）。在線條類型下拉列表框中選擇“多行”選項，以便輸入多行文字，單擊“多行”右邊第二個按鈕， 將文本呈現(xiàn)為HTML語句。,【步驟

7、4】導入電影內(nèi)容：新建圖層，命名為“Content”在該圖層第3幀按F7插入一個空白關鍵幀，導入一張圖片，在該圖層第30幀處按F5增加幀。 【步驟5】輸入Action Script代碼?？梢杂胓etBytesLoaded()函數(shù)得到已經(jīng)讀取的字節(jié)數(shù)，而用getBytesTotal()得到總共有的字節(jié)數(shù)，利用這兩個數(shù)字就可以計算得到一個百分比，已經(jīng)確定了使用第二幀作為循環(huán)，不斷掃描第一幀的Action Script，這樣百分比放在第一幀就可以計算一些所需要的數(shù)據(jù)。 新建一個圖層“Action”，在第2幀和第3幀插入空白關鍵幀。 選中“Action”層的第1幀，然后按F9，在彈出的窗口中，輸入代碼

8、. 注意：測試時按Ctrl+Enter是看不出效果的，因為該文件已經(jīng)保存在硬盤中，并不需要從網(wǎng)上下載；連續(xù)兩次按Ctrl+Enter才能模擬網(wǎng)站上瀏覽的情形，實現(xiàn)預載的效果。 連續(xù)兩次按Ctrl+Enter組合鍵以后，查看播放器中“視圖”菜單，其中有一個“下載設置”子菜單. “下載設置”子菜單有多種下載設置可供選擇。一般情況下選擇56k，這樣就完成了預載畫面的制作。,13.2 菜單,可以利用Flash的交互功能制作模擬菜單,下拉菜單的制作 【步驟1】運行Flash 8，新建一個Flash文檔。 【步驟2】選擇“文件”/“導入”/“導入到舞臺”命令，在彈出的“導入”對話框中選擇一個圖形文件并將其

9、導入到舞臺中， 【步驟3】選擇菜單中的“插入”/“新建元件”命令，彈出“創(chuàng)建新元件”對話框。在該對話框的“名稱”文本框中輸入“標題”，類型選擇“按鈕”選項。 【步驟4】單擊“確定”按鈕，進入“元件”編輯模式。選擇“矩形”工具，筆觸顏色設置為褐色，填充顏色為綠色，然后再繪制矩形， 【步驟5】選中“指針經(jīng)過”幀按F6鍵插入關鍵幀，選擇“矩形”工具，筆觸顏色設置為淺綠色，填充顏色為無色，然后再繪制矩形。 【步驟6】選擇菜單欄中的“插入”/“新建元件”命令，如【步驟3】新建一個按鈕元件，命名為“菜單”。 【步驟7】單擊“確定”按鈕，進入元件編輯模式。定位在“彈起”幀上，選擇“矩形”工具，筆觸顏色設置為

10、褐色，填充顏色為淺灰色，然后再繪制矩形。,【步驟8】選中繪制的矩形，然后刪除矩形的上下2條邊線， 【步驟9】選中“指針經(jīng)過”幀按F6插入關鍵幀，選擇“矩形”工具，筆觸顏色設置為淺綠色，填充顏色設置為淺黃色，然后再繪制矩形， 【步驟10】單擊“場景1”按鈕，返回到主場景中。單擊“插入圖層”按鈕，在“圖層1”的上面添加“圖層2”，將“庫”面板中的“標題”元件拖入到舞臺，然后繼續(xù)拖動2次“標題”元件到舞臺中 【步驟11】分別在“圖層1”和“圖層2”的第15幀按F5鍵插入幀。在“圖層2” 上面添加一個“圖層3”，在“圖層3”的第5幀按F6插入關鍵幀，然后將“庫”面板中的 “菜單”元件拖動到舞臺， 【步

11、驟12】按住Alt建的同時拖動“菜單”元件，將其復制到“標題”元件的正下方，對齊位置，同樣復制出多個“菜單”元件，用作不同的菜單項， 【步驟13】在“圖層3”的第10幀、第15幀上分別按F6鍵插入關鍵幀，然后將“菜單”元件移動到相應“標題”元件的下面，并對齊位置。 【步驟14】在“圖層3”上面新建“圖層4”，選擇文本工具，在舞臺上輸入文本“環(huán)保標準”、“環(huán)保知識”和“生態(tài)園林”，并調(diào)整文本的大小及位置，分別位于第1個、第2個和第3個“標題”元件的上面， 【步驟15】在“圖層4”的第5幀上按F6插入關鍵幀，使用文本工具在所有的“菜單”元件上輸入文本，,【步驟16】在“圖層4”的第10幀和第15幀

12、上按F6分別插入關鍵幀，使用“文本”工具在所有的“菜單”元件上輸入文本， 【步驟17】在“圖層2”的第1幀、第5幀、第10幀和第15幀按F6插入關鍵幀，選擇菜單中的“窗口” /“動作”命令，打開“動作”面板，分別添加命令行Stop();用來控制動畫的播放。 【步驟18】選中“圖層2”的第1幀的第1個“菜單”元件，在“動作”面板中輸入如下腳本代碼：On (Release) GotoAndPlay (5) ; 【步驟19】選中“圖層2”的第1幀的第2個“菜單”元件，在“動作”面板中輸入如下腳本代碼：On (Release) GotoAndPlay (10) ; 【步驟20】選中“圖層2”的第1幀的

13、第3個“菜單”元件，在“動作”面板中輸入如下腳本代碼：On (Release) GotoAndPlay (15) ; 【步驟21】插入新建元件，命名為“返回”，類型為“按鈕”。 【步驟22】單擊“確定”按鈕，進入元件編輯模式。選擇矩形工具，筆觸顏色為無色，填充顏色為任意顏色，然后繪制矩形，并將矩形的透明度改為0， 【步驟23】在“圖層1”上面新建“圖層5”。在“圖層5”的第5幀插入關鍵幀，從“庫”面板中將“返回”元件拖動到當前第5幀的舞臺中，調(diào)整整個元件的大小和位置，使它與整個菜單重合并比菜單大些 【步驟24】選中“返回”元件，在“動作”面板中輸入程序代碼： on(rollOver)gotoA

14、ndPlay(1);， 【步驟25】按CtrlEnter可預覽效果，,13.3 網(wǎng)絡交互,13.3.1 Flash網(wǎng)絡交互功能簡介,Flash腳本編程指的就是利用Flash內(nèi)建的ActionScript語句進行程序設計。ActionScript語言自形成以來已經(jīng)發(fā)展了多年。Flash Profesional 8引入的一些新的語言元件而且更徹底地實現(xiàn)了面向?qū)ο缶幊獭?高級的Flash編程可以實現(xiàn)復雜的交互游戲，根據(jù)用戶的操作響應不同的電影，與后臺數(shù)據(jù)庫及各種程序進行交流，如ASP、PHP、SQL Server等。龐大的數(shù)據(jù)庫系統(tǒng)及各種程序與Flash內(nèi)置的編程語句相結(jié)合，可以制作出很多人機交互的

15、網(wǎng)頁、游戲以及在線商務系統(tǒng)。,13.3.2 JS與Flash實現(xiàn)交互,1從Flash到JavaScrip的通信 一個HTML頁面中的Flash電影，能把消息發(fā)送到位于同一HTML頁面中的JavaScript程序的原理，是因為當Flash電影調(diào)用fscommand函數(shù)時，位于同一HTML頁面中的一個名為movieName_DoFSCommand的JavaScript函數(shù)會被自動調(diào)用，而在fscommand函數(shù)中指定的參數(shù)會被movieName_DoFSCommand函數(shù)截獲，從而實現(xiàn)通信。 在這里，movieName_DoFSCommand中的movie Name是在EMBED標簽的NAME屬性

16、或OBJECT標簽的ID屬性中指定Flash Player的名字。例如，如果Flash Player被指派了名字myFlash，那么調(diào)用的JavaScript函數(shù)將是myFlash_DoFSCommand。 fscommand函數(shù)的使用格式如下：fscommand (“command”, “parameter”) 在這里，如果消息是要被發(fā)送到JavaScript程序，那么command就應該是你自定義的命令，這個自定義的命令實際上是一個字符串，這個字符串會被作為參數(shù)傳遞給movieName_DoFSCommand函數(shù)，而parameter是你為command命令指定的值，parameter也是

17、一個字符串，也將被作為參數(shù)傳遞給movieName_DoFSCommand函數(shù)；如果消息是要被發(fā)送到播放該Flash電影的Flash Player從而對Flash Player進行一些控制，則command就應該是預定義的一些“命令”，而parameter相應的也應該是針對這些預定義的可用的值。,2從JavaScrip到Flash的通信,一個HTML頁面中的JavaScrip程序能把消息發(fā)送到位于同一HTML頁面中的Flash電影的原理是：因為你可以從JavaScrip程序調(diào)用Flash JavaScrip函數(shù)，這些函數(shù)調(diào)用可以被Flash Player截獲和理解，因此，這些特殊的JavaSc

18、rip函數(shù)也被成為Flash Player方法。,13.3.3 ASP基本知識,ASP是微軟公司推出的一種用于產(chǎn)生動態(tài)頁面的技術(shù)，ASP不是一種編程語言。實際上，ASP是一個運行在Web服務器中能夠解釋多種語言的腳本解釋器，用其他語言編寫的腳本可以被ASP解釋和執(zhí)行。并且，ASP只能用于Windows系統(tǒng)。盡管我們經(jīng)常會擴展名為.asp的文件稱為“ASP程序”，但實際上，一個ASP文件并不是一個程序，而只是一個頁面，只不過這個頁面內(nèi)被嵌入了幾段腳本（用來標注），ASP是Active Serve Pages(活動服務器頁面)的縮寫。,ASP的工作過程是這樣的：當客戶機通過瀏覽器請求Web服務器上

19、的某個ASP頁面時，Web服務器就啟動ASP的一個新進程，開始對該ASP頁面 進行處理，Web服務器仍然處理一般的HTML標記，當遇到ASP腳本開始標記時，Web服務器就知道下面的內(nèi)容是該由ASP解釋器處理的腳本，因此，Web服務器就將處理權(quán)交給ASP解釋器，ASP 解釋器會執(zhí)行這段腳本直到碰到ASP腳本結(jié)束標志，并把執(zhí)行的結(jié)果返回給Web服務器，同時處理權(quán)也交給Web服務器，如此這般直至整個ASP頁面被處理完。最后由靜態(tài)的HTML標記和腳本執(zhí)行的結(jié)果共同組成的頁面就由Web服務器發(fā)送回客戶機瀏覽器。,ASP技術(shù)較之傳統(tǒng)的CGI（公共網(wǎng)關接口的縮寫，是最早建立的一種用于創(chuàng)建動態(tài)網(wǎng)頁內(nèi)容的約定，

20、至今已有10年歷史）有3個優(yōu)勢： 1ASP是直接內(nèi)建與Web服務器（IIS）中，并且是作為Web服務器的一個服務來運行的，因此，對ASP頁面的處理和執(zhí)行都是在Web服務器內(nèi)部完成的。這與CGI情況下Web服務器必須通過CGI協(xié)議才能與外部的CGI程序傳遞數(shù)據(jù)自然要快得多。 2ASP支持多線程。對于每一個ASP頁面的請求，服務器只需一個ASP的新線程，創(chuàng)建一個線程的開銷要比創(chuàng)建一個進程小得多，因為所有的線程都運行在同一個進程中，所有線程共享操作系統(tǒng)分配給該進程的資源。而請求CGI程序時是啟動一個新進程，操作系統(tǒng)需要做一些諸如為這個新進程分配存儲空間這樣的事情，這些都需要花費比啟動新線程更多的時間

21、，也會占用更多資源。這對于那些訪問量很大的網(wǎng)站是不能接受的。 3ASP與HTML可以更好的結(jié)合。因為ASP腳本是直接嵌入到HTML頁面中的，你可以像平常編寫一個HTML頁面時一樣來編寫ASP頁面，只在需要呈現(xiàn)動態(tài)內(nèi)容的地方插入所需的腳本即可。這使得用ASP開發(fā)應用變得很迅速，因為你可以很輕松地就安排好動態(tài)內(nèi)容在HTML頁面中出現(xiàn)的位置，而通過編寫CGI程序來產(chǎn)生漂亮的HTML頁面所花費的時間要長得多。 4Flash 與ASP的交互.,13.3.4 IIS服務器的配置,你只需要安裝一個Web服務器即可。目前最流行的兩大Web服務器軟件是IIS（Internet Information Servi

22、ces-Internet信息服務）和Apache。 Apace更加穩(wěn)定也更加安全，但Apache 的安裝相當復雜，而IIS盡管不穩(wěn)定也不安全，但IIS的安裝更加的簡單，更適合初學者，況且對于本地調(diào)試來說，談不上安全問題，因為只有你自己訪問你的Web站點,13.3.5 IIS的安裝,基于Windows操作系統(tǒng)的不同，安裝IIS的過程會有所不同。 1對于Windows 2000/XP系統(tǒng) 選擇“開始”/“設置”/“控制面板”，在打開的窗口中雙擊“添加/刪除程序”，在彈出 的對話框中選擇“添加/刪除Windows組件”，在出現(xiàn)的“Windows組件向?qū)А敝羞x擇“Internet信息服務（IIS）”，

23、然后單擊“下一步”按鈕，之后根據(jù)屏幕提示完成安裝即可。 2對于Windows Server 2003系統(tǒng) 選擇“開始”/“控制面板”/“添加或刪除程序”，在彈出的對話框中選擇“添加/刪除Windows組件”，在出現(xiàn)的“Windows組件向?qū)А敝羞x擇“應用程序服務器”，然后單擊“詳細信息”按鈕，在出現(xiàn)的“應用程序服務器”對話框中選擇“Internet信息服務（IIS）”，然后單擊“確定”按鈕，在 “Windows組件向?qū)А敝袉螕簟跋乱徊健卑粹o，之后根據(jù)屏幕提示完成安裝即可。 3對于Windows 98系統(tǒng) 在Windows 98中沒有完整的IIS，只有IIS的一個簡化版，即PWS(Persona

24、l Web Server個人Web服務器)，不過PWS對于調(diào)試我們的CGI程序已經(jīng)足夠了。你可以在Windows 98光盤的add-onspws文件夾中找到它，直接雙擊Setup.exe即可。安裝時選擇“典型”即可。,13.3.6 IIS的配置,1對于Windows2000/xp系統(tǒng) 【步驟1】打開“控制面板”，雙擊“管理工具”，然后雙擊“Internet服務管理器”，在彈出的對話框中單擊你的計算機名前面的折疊按鈕，將看到“默認Web站點”。 【步驟2】在“默認Web站點”上單擊鼠標右鍵，選擇“屬性”命令，在彈出的對話框選擇“主目錄”選項卡，在“連接到此資源時，內(nèi)容應該來自于”選項組中選中“此計算機上的目錄”單選按鈕，然后單擊“本地路徑”右邊的“瀏覽”按鈕，導航并選擇My Web文件夾，單擊“確定”按鈕。默認網(wǎng)站現(xiàn)在已經(jīng)指向了你的My Web文件夾。 【步驟3】因為通常一個網(wǎng)站的首頁名默認為index.htm，而Windows 2000/xp系統(tǒng)中的IIS默認只把名為Default.