|
第四章 多媒體網(wǎng)站初級應(yīng)用實例
我們說過，F(xiàn)lash制作的多媒體網(wǎng)站是Flash動畫制作的精髓，也是Flash動畫最為廣泛的用途。在Flash出現(xiàn)以前，網(wǎng)站設(shè)計是靜態(tài)的和Gif動畫的天下。當然還有Java和JavaScript等眾多軟件。但這些軟件的應(yīng)用范圍并不廣泛。網(wǎng)絡(luò)帶寬也是影響網(wǎng)絡(luò)多媒體發(fā)展的一個瓶徑。但Flash出現(xiàn)了。它帶給網(wǎng)絡(luò)全新的意義，帶給網(wǎng)絡(luò)互動的媒體，使網(wǎng)絡(luò)交互多媒體成為可能，成為現(xiàn)實。三年前當我們?yōu)g覽國外的網(wǎng)站榜評時，還主要是停留在一些平面設(shè)計作品上，但是現(xiàn)在國外的榜評已經(jīng)擁有了很多的互動多媒體動畫網(wǎng)站。Flash發(fā)展的速度由此可見。IE瀏覽器在6.0版本中已經(jīng)內(nèi)置了Flash Player播放器，似乎在預(yù)示著網(wǎng)站制作的發(fā)展道路。讓我們一起來領(lǐng)略互動的魅力。
4.1Loading預(yù)載動畫程序設(shè)計
Loading網(wǎng)頁預(yù)載程序是網(wǎng)頁動畫中的一個關(guān)鍵，因為即便是Flash生成的文件很小，但是制作出的大型動畫對于使用調(diào)制解調(diào)器的用戶速度還是需要解決的。如果沒有一個預(yù)載的過程，只怕動畫觀看起來也不會很流暢。特別是在動畫中加入了大量的聲音和圖像的動畫沒有了Loading將不會流暢的展現(xiàn)在我們眼前。
在此之前先學習一下在這章將要出現(xiàn)的屬性與函數(shù)。如果由于例中使用了沒有接觸過的函數(shù)和屬性，請先照例制作，等在以后的章節(jié)中學習了相關(guān)的其它函數(shù)后回過頭來再看的話，就會完全明白例子中的作用。
◆ _framesloaded
_framesloaded是電影剪輯的屬性，用來獲取電影剪輯中的已經(jīng)下載的幀數(shù)，當然大部的應(yīng)用于電影剪輯的屬性都可以應(yīng)用于整部動畫。此屬性只能用來獲取。
if(_root.mc._framesloaded>100){
_root.gotoandplay(1)
}
此例子在普通模式下輸入將成為：
if(getproperty("_root.mc",_framesloaded)>100){
gotoandplay(1)
}
普通模式中對屬性的獲取將使用getproperty函數(shù)，但此函數(shù)在新的.語法的使用中并非最佳，在以下的例子中將不再引用。此例中以獲得電影剪輯已經(jīng)下載的幀數(shù)大于100時，開始返回場景重新播放。這也是在網(wǎng)站制作中一個比較典型的例子，很多的電影剪輯因為體積問題，在“流”式播放過程中不會很流暢。而下例將是一個錯誤的例子。
_root.mc._framesloaded=100;
_root.gotoandplay(1);
在編程中將不允許對_framesloaded屬性進行賦值，如果你想當下載的幀數(shù)等于100時根目錄開始回放的話，請按下例制作。
if(_root.mc._framesloaded=100){
_root.gotoandplay(1);
}
◆ _totalframes
_totalframes屬性是用來獲取電影剪輯實體的總幀數(shù)。也可以用來獲取動畫的總幀數(shù)。在下例中會看到它的用法。
i=_root.mc._totalframes;
if(_root.cuttentframes=i);
_root.stop();
}
程序中將電影剪輯實體的總幀數(shù)賦值賦予了變量i，而當主場景的動畫播放指針播放到與電影剪輯中的總幀數(shù)相同的數(shù)目時，動畫停止播放。此屬性同樣為非賦值屬性。
◆ ifFramesloaded
ifFramesloaded函數(shù)也是用來獲取已經(jīng)下載的幀數(shù)的，與_framesloaded不同的是它用于一個簡單的行為來描述已下載的幀數(shù)。而且此函數(shù)似乎是專為Loading設(shè)計，它位于Basic Actions指令集，指令名稱為If Frames Is Loaded。以下實例將構(gòu)成一個最為簡單的Loading。
ifFrameLoaded(_totalframes){
gotoandplay(3);
}else{
gotoandplay(1);
}
將此程序加于影片的第二幀，可用于所有動畫的預(yù)載技術(shù)。意思為當裝入的幀數(shù)為總幀數(shù)時開始播放第三幀，如果不然，播放第一幀。在Flash5以后開始使用更多的函數(shù)和屬性，所以此函數(shù)不推薦使用。
◆ getBytesLoaded()
getBytesLoaded()為獲取電影剪輯實體的已下載字節(jié)數(shù)，如果是外部動畫將返回動畫的總字節(jié)數(shù)。GetBytesLoaded用于更加精確的Loading設(shè)計，因為它并不像_framesloaded屬性是獲取影片的總幀數(shù)，而是以字節(jié)做為單位獲取。如果說動畫的最后一幀將是一個大型的圖像或是聲音角色的話，哪么_framesloaded所獲得的百分比將不準確，getBytesLoaded有效的彌補了此方面的不足。例：
i=_root.getBytesTotal();
if(_root.getBytesLoaded()>=1000000){
n=_root.getBytesLoaded();
if(n<=i/4){
_root.stop();
trace "下載了1M，還不到四分之一，動畫太大，下載時間會很長，是否繼續(xù)？"
}
}
此句的意思為當動畫下載到1MB時，比較是否已經(jīng)下載了動畫的四分之一，如果是，停止動畫的播放，在調(diào)試窗口顯示“下載了1M，..."等字符串，根據(jù)動畫中的其他行為判斷是否繼續(xù)播放。此例的另一特點是，停止的地方如果有插入電影剪輯的話，電影剪輯將不會停止播放。也可以通過動態(tài)文本顯示已經(jīng)下載的文字數(shù)，假設(shè)在動畫的主場景中有一個變量名為text的動態(tài)文本變量，哪么例：
_root.text=_root.getBytesLoaded();
if(_root.getBytesLoaded()>=_root.getBytesTotal()){
gotoandplay(3);
}else{
gotoandplay(1);
}
動態(tài)文本框會動態(tài)顯示已經(jīng)下載的字節(jié)數(shù)為觀眾服務(wù)。觀眾也會了解在動畫的下載過程中動態(tài)的進度了。
◆ getBytesTotal()
getBytesTotal()函數(shù)是用來獲取動畫或是電影剪輯的總字節(jié)數(shù)，當然我們可以通過對文件的大小來觀察動畫的總字節(jié)數(shù)，但對于網(wǎng)絡(luò)上使用瀏覽器的觀眾來說，動態(tài)顯示文件大小是很有必要的。還有，如果想觀察動畫中電影剪輯的體積就只有靠getBytesTotal()函數(shù)了。
If(_root.getBytesTotal()>=1000000){
_root.stop();
}
這個程序的意思是當動畫的總字節(jié)超過1M時停止動畫播放。
◆ gettimer()
gettimer()函數(shù)用來獲取電影剪輯或是動畫的已經(jīng)播放時間數(shù)，此函數(shù)并不僅僅應(yīng)用于Loading的制作，在今后的學習過程中還會接觸到它。在Flash5的對動畫播放時間的控制上會有g(shù)ettimer()函數(shù)大顯身手的舞臺。但gettimer()函數(shù)獲取的時間是以毫秒做為計算單位的，一般在程序制作過程中還會對它除以一千來取得秒，這樣更加符合對于時間播放程序的顯示。假設(shè)動畫中有一個text的動態(tài)文本框變量。例：
text=gettimer()/1000;
通過幀循環(huán)或是其它的誅如OnClipEvent(enterframe)等行為的控制會動態(tài)的顯示動畫播放的時間過程。又例如：
text=gettimer()/1000;
if(text>=10){
gotoandstop(3);
}else{
gotoandplay(1);
}
假設(shè)此程序位于動畫的主場景的第二幀。那么當開始播放10秒鐘之后才會正式開始播放，不然只會在第一幀與第二幀之間循環(huán)。
4.1.1 一個簡單的Loading
一個簡單的Loading制作并不需要很高深的編程基礎(chǔ)，而且大部份設(shè)計人員開始學習Flash腳本編程時都是從Loading開始學起的。也是因為制作Loading對于動畫傳播方面起著至關(guān)重要的作用。(此實例在光盤范例\ch4\4-1.fla)
步驟一、打開Flash5，新建一個文件。在影片的默認設(shè)置中背景色是白色的，動畫將以每秒十二幀的速度播放，這些你可以通過點擊Modify|Movie命令打開Movie Properties對話框觀察到。如圖4-1所示。但是實踐告訴我們，使用影片默認設(shè)置制作的動畫，在網(wǎng)上瀏覽時，并不能很流暢，所以設(shè)計人員一般喜歡把默認的每秒12幀更改的高一點，這樣就可以在發(fā)布了以后觀看到比較流暢的動畫了。
圖4-1 Movie Properties對話框
步驟二、在影片的第一幀，使用Window|Panels|Stroke命令打開Stroke筆觸面板，將筆觸的寬點拉桿拉到3，如圖4-2所示。
圖4-2 用Stroke面板改變筆觸粗細
步驟三、點擊繪圖面板中的方形繪圖工具。在繪圖面板Colors項上面的油漆桶工具中把色彩選為紅色。然后在場景中繪制出一個長方形，如圖4-3所示。
圖4-3 繪制一個長方形進度條
步驟四、在編輯區(qū)內(nèi)用鼠標點擊長方形的紅色處，你會發(fā)現(xiàn)色彩出現(xiàn)了很多小麻點，已經(jīng)處于了被選取狀態(tài)。
步驟五、點擊Insert|Convert to Symbol，將紅色長方形轉(zhuǎn)換為符號，在隨后打開的Symbol Properties對話框中的Name輸入框輸入符號的名稱為Loading。然后選擇Movie Clip電影剪輯項，點擊OK。
步驟六、現(xiàn)在點擊紅色長方形你會發(fā)現(xiàn)它已經(jīng)不再出現(xiàn)小麻點了，而是出現(xiàn)了一個藍色的外框，因為它已經(jīng)是一個符號了。現(xiàn)在選Window|Panels|Instance命令打開Instance實例面板。
步驟七、在面板中的Name項中輸入名稱Loading，為這個符號取了一個分身名稱。如圖4-4所示。
圖4-4 為進度條符號取分身名稱
步驟八、在時間軸的第二幀按F6鍵，插入一個關(guān)鍵幀。
步驟九、用鼠標雙擊此幀打開幀的Action面板。我們要開始制作預(yù)載動畫的程序了。
步驟十、雙擊Action面板左邊的指令里的Actions項，在打開的指令里選擇if，用鼠標又擊，if指令出現(xiàn)在編輯區(qū)了。
步驟十一、在Action面板的下半部份參數(shù)輸入?yún)^(qū)里Condition輸入欄中輸入代碼_framesloaded>=_totalframes。如圖4-5所示。
圖4-5 在if指令參數(shù)框內(nèi)輸入代碼
步驟十二、然后點擊指令區(qū)的Basic Actions命令集里的goto指令，在隨后的參數(shù)輸入框內(nèi)的Frame欄目中輸入數(shù)字3。如圖4-6所示。
圖4-6 goto指令的參數(shù)輸入欄
步驟十三、然后點擊 Actions指令集中的else項。
步驟十四、再次點擊goto指令，這回不用更改幀序列數(shù)字了。
步驟十五、點擊Action指令集的Setproperty指令，選擇Properties下拉框中的_xscale屬性，然后在Target輸入欄中輸入“_root.loading"，點選后面的Expression單選框項目。
步驟十六、在Value輸入欄中輸入代碼(_framesloaded/_totalframes)*100，點選后面的Expression單選框。
圖4-7 Setproper指令參數(shù)輸入框
步驟十七、指令已經(jīng)輸入完畢了。接下來開始在第三幀后面制作你的動畫，然后發(fā)布，上傳，觀看。你也可以打開Control|Debug Movie測試電影，在隨后打開的瀏覽窗口中使用Debug菜單中的模擬下載速度來測試。
程序解讀：
第1-2行中if(_framesloaded>=_totalframes)句的意思是當已經(jīng)下載的幀數(shù)大于等于影片的總幀數(shù)時，跳轉(zhuǎn)到第三幀開始播放。
第3-5行，如果下載的幀數(shù)小于總幀數(shù)的話，跳轉(zhuǎn)到第一幀播放。并且安裝分身名稱為loading的電影剪輯的長度屬性，使它的長度成為已經(jīng)下載的幀數(shù)除以總幀數(shù)再乘100。
知識要點：
Loading制作很多設(shè)計人員喜歡使用幀行為，其實用很多的功能都可以實現(xiàn)Loading制作。本例中使用(_framesloaded/_totalframes)*100的表達式來制作進度條的寬度。其它Loading制作方法不管是用下載時間函數(shù)還是用下載字節(jié)函數(shù)，但下載數(shù)除以總數(shù)乘以100的表達式基本上是沒什么變化的了。
4.1.2 精確的Loading設(shè)計
上述的哪個Loading程序有一些比較簡單，雖然它已經(jīng)達到了預(yù)載的效果，但是對于要求比較高的朋友可能就不能滿足了。哪么請看圖4-8，這個預(yù)載動畫將使用到比較多的函數(shù)，使動畫預(yù)載看起來更加的人性化。(此實例在光盤范例\ch4\4-2.fla)
圖4-8 高級的Loading程序界面
制作過程：
步驟一、打開剛才我們設(shè)計的Loading動畫。這個Loading程序?qū)⑹窃谏鲜鯨oading的基礎(chǔ)上修改而成的。
步驟二、使用文字工具，并且使用Window|Panels|Character命令，打開Character字符面板，將字號設(shè)置為25，字色為黑色。如圖4-9所示。
圖4-9 Character面板的設(shè)置
步驟三、將文字按圖4-8這樣式輸入在界面里。然后打開Window|Panels|Align命令，打開Align對齊面板。
步驟四、使用其中的對齊方式將文字對齊成圖4-8之樣式。
步驟五、點擊文字工具，在總字節(jié)的文字后面用鼠標拖出一個文本框，注意用調(diào)節(jié)點調(diào)節(jié)文本框的寬度。然后打開Window|Panels|Text Options命令打開Text Options文本屬性面板，在下拉菜單中選擇Dynamic Text打開動態(tài)文本設(shè)置框。
步驟六、在動態(tài)文本框的Variable項輸入這個文本框的變量為zbye，如圖4-10所示。
圖4-10 動態(tài)文本面板中設(shè)置動態(tài)文本變量
步驟七、用同樣的方法在繪制七個動態(tài)文本框在各字符的后面。已經(jīng)下載字節(jié)后面的字段變量為yby，總幀數(shù)的為zfrm，已下載幀數(shù)的是yfrm，需要的時間后面變量名為xtim，已用時間的為ytim，在進度條下方的下載進度變量為yload。
步驟八、設(shè)置完畢開始進行程序設(shè)計。打開第二幀的Action面板，你可以看到我們剛才設(shè)計的程序。在這個程序中有很多的內(nèi)容無需改變，只要再添加一些程序就可以了。
步驟九、我們將Setproperty("_root.loading",_xscale,(_framesloaded/_totalframes)*100這句用鼠標拖動上移一行，在指定區(qū)的Actions指令集中選擇Set Variable指令。
步驟十、在打開的變量輸入框中，Variable項填寫總幀數(shù)的字段變量zby，在Value欄中輸入代碼_root.getbytestotal（），勾選后面的Expression單選框。
圖4-11 變量輸入框
步驟十一、用同樣的方法輸入其它變量。yby=_root.getbytesloaded（）。
步驟十二、zfrm = _root._totalframes。
步驟十三、yfrm = _root._framesloaded。
步驟十四、ytim=gettime()/1000 + "秒"。
步驟十五、xtim = int(zby-yby)/yby*tim) + "秒"。
步驟十六、yload = _framesloaded/_totalframes*100。
步驟十七、整個程序輸入結(jié)束。對照參考圖4-12。
圖4-12 高級Loading的完整程序
程序解讀：
這前幾行程序基本上不用解讀，哪些都是Action中所擁有的函數(shù)，只要將本章開始時的函數(shù)學習好，把它們賦值給變量就可以了。
第十行，用了一個表達式來獲得了還需要的時間變量值。總字節(jié)減去已經(jīng)下載的字節(jié)的值除以已下載的字節(jié)再乘以已經(jīng)使用的時間。
第十一行，用已經(jīng)下載的幀數(shù)除以總幀數(shù)再乘以100得到下載進度，其實這行程序還可以變化為yfrm/zfrm*100。
知識要點：
高級Loading其實制作起來也并不復(fù)雜，你可以通過對函數(shù)的了解來做到。另外這里有一個概念，getbytesloaded和另外幾個函數(shù)都是Movie Clip的函數(shù)，為什么也可以在場景中使用呢？其實你可以把場景看成是一個大的Movie Clip，很多電影剪輯的函數(shù)都可以使用在場景中，包括gettimer()。而動態(tài)文本變量正是去顯示這些函數(shù)的數(shù)值的，其實在Loading中還有一個概念，就是利用幀循環(huán)也可以達到循環(huán)效果，與一般的編程不同的是Flash可以使用幀循環(huán)去達到一些效果，有時候因為幀循環(huán)的時間特性，做出的循環(huán)比用while等循環(huán)語句構(gòu)造出更加意想不到的效果。學習好這些函數(shù)正是高級Loading制作的關(guān)鍵。
出處：藍色理想
責任編輯：藍色
上一頁 下一頁 4.1.3 - 趣味Loading設(shè)計
◎進入論壇Flash專欄版塊參加討論
|
第 1 頁 FLASH 5 教程 — 網(wǎng)絡(luò)應(yīng)用實例
第 2 頁 
