FLASH影音在線播放器的設(shè)計界面的實(shí)現(xiàn)

1、課件之家精心整理資料-歡迎你的欣賞 南通紡織職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計（論文） FLASH影音在線播放器的設(shè)計與實(shí)現(xiàn) 界面的設(shè)計與實(shí)現(xiàn)季 曉 花3514211班 級 03網(wǎng) 絡(luò) 2 班 專 業(yè) 網(wǎng)絡(luò)技術(shù)/市場營銷 教 學(xué) 系 信 息 系 指導(dǎo)老師 周 悅 完成時間 2007年04月01日至 2007年05月03日目 錄第一章引 言 4第二章FLASH的特點(diǎn)與功能 52.1 FLASH的特點(diǎn) 52.2 FLASH的功能 6第三章元件、實(shí)例的使用 83.1關(guān)于元件 83.1.1 元件和實(shí)例 83.1.2元件的類型 93.1.3 元件的優(yōu)點(diǎn) 93.2創(chuàng)建按鈕 103.3遮罩層的使用 113.4濾鏡和混合模

2、式 12第四章播放器界面功能需求分析 13第五章播放器界面結(jié)構(gòu)分析 145.1界面需求橫向分析（場景幀）145.2界面需求縱向分析（場景層）14第六章色彩的應(yīng)用 166.1色彩在界面中的作用 166.2 色彩的運(yùn)用 16第七章播放器界面實(shí)現(xiàn) 187.1 視頻、進(jìn)度條和列表界面等美工 187.29個常見播放器按鈕的制作 197.3暫停/繼續(xù)按鈕的切換顯示 197.4音量按鈕上的菜單效果 207.5音量大小圖形控制 217.6雙擊視頻區(qū)完成“全屏模式”與“完整模式”間的切換 227.7當(dāng)前播放曲目著重顯示 237.8對盜用SWF的給以友情提示237.9Flash文件優(yōu)化 24第八章設(shè)計總結(jié) 26致

3、 謝 27參 考 文 獻(xiàn) 28FLASH影音在線播放器的設(shè)計與實(shí)現(xiàn) 界面的設(shè)計與實(shí)現(xiàn)【 摘 要 】 現(xiàn)在WEB和電腦用戶對網(wǎng)頁媒體需求是越來越多。因?yàn)閷拵У钠占昂唾|(zhì)量的提高，更多的用戶已經(jīng)不太習(xí)慣下載音樂、MV和電影了。都習(xí)慣于在線觀看瀏覽，而且又不占用硬盤、不需要長時間等待下載、又可以經(jīng)常更新。所以本課題嘗試用時下最為流行且最具發(fā)展前景的WEB元素Flash，設(shè)計并實(shí)現(xiàn)一個多媒體影音在線播放系統(tǒng)，側(cè)重其按鈕、滑條、進(jìn)度條的制作以及頁面框架美工的設(shè)計、功能的實(shí)現(xiàn)?！?關(guān)鍵詞 】 Flash 播放器 多媒體 美工 界面設(shè)計與實(shí)現(xiàn)【 Abstract 】 Now WEB and computer

4、user to the homepage media demand is more and more many. Because of wide band popularization and quality enhancement, more users already not too custom downloading music, MV and movie. All is accustomed to on-line watches the browsing, more over does not take the hard disk, does not need the long ti

5、me to wait for downloading, may frequently renew. Therefore this topic tastes the test to be at present most popular also most to have the prospects for development WEB element - Flash, designs and realizes a multimedia video and music on-line broadcast system contact surface: Button, slippery strip

6、, progress strip manufacture and page frame art designing design, function realization.【 Keyword 】 Flash player Multimedia Art designing Contact surface design and realization第一章 引 言Flash（中文譯為“閃動、一閃”）這個英文單詞是一個用于制作網(wǎng)絡(luò)動畫的軟件的名稱，在今天已是廣為人知了。就像Photoshop、Corel-draw、3D MAX等設(shè)計軟件名稱一樣，已被許多愛好者熟悉和掌握！因?yàn)镕lash是為制作網(wǎng)絡(luò)

7、動畫而開發(fā)的軟件。現(xiàn)在的Flash，它的流行經(jīng)歷了一個由默默無聞到驚天動地的歷程，并終于迎來了它的成功，迎來了市場特別是設(shè)計界的關(guān)注和認(rèn)可，使設(shè)計界對于未來設(shè)計的發(fā)展趨勢有了一個有據(jù)有理的認(rèn)識，也引發(fā)了我對于Flash現(xiàn)象的研究和有關(guān)設(shè)計探索的興趣。 今天，F(xiàn)lash已經(jīng)不是什么新鮮事物了。它大約是在兩年前出現(xiàn)在我國的，那時我國的網(wǎng)絡(luò)才剛剛開始發(fā)展，網(wǎng)絡(luò)正式進(jìn)入千家萬戶，網(wǎng)絡(luò)動畫也隨著進(jìn)入了千家萬戶?；蚴且?yàn)榕d趣，或是因?yàn)樯虡I(yè)的需要，或是因?yàn)樵O(shè)計的需要，部分網(wǎng)民開始了Flash動畫的制作。Flash一族自2000年來逐漸成型，并迅速壯大，F(xiàn)lash原創(chuàng)作品蜂擁而起。因?yàn)閯赢嫷膶?shí)用性、趣味性和娛

8、樂性很強(qiáng)，它已經(jīng)逐步的占據(jù)了廣大青少年、甚至是部分中老年的工作和生活，F(xiàn)lash動畫短片成為一時間網(wǎng)絡(luò)最熱的娛樂方式，也成為了一種時尚和潮流。開始學(xué)習(xí)和制作Flash的人越來越多，人們都以能夠制作出倍受大家關(guān)注的Flash動畫作品而感到驕傲、自豪?，F(xiàn)在有許多專門的如“FLASHEMPIRE閃客帝國，大話三國，閃盟在線”等等這樣的一些網(wǎng)站，這里面不僅擁有大量的Flash動畫供愛好者在線觀看，而且還是Flash迷們的一個專門交流的空間。的確，它的發(fā)展讓人不得不刮目相看。Flash作為現(xiàn)代的一種新的設(shè)計方式和娛樂方式，不僅有其實(shí)用功能，并且還有視覺和聽覺上的雙重享受，更因?yàn)樗哂械娜の缎裕蔀楝F(xiàn)代

9、人放松自我，表現(xiàn)自我，甚至是陶醉自我的一種方式！因?yàn)楦鞔竺襟w對它的宣傳，設(shè)計界和市場也開始對這樣一種新的宣傳和表達(dá)方式重視起來，F(xiàn)lash動畫的價值也開始以秒來計算，大大的刺激了更多的Flash迷的創(chuàng)作熱情。他們匯聚在自己的網(wǎng)絡(luò)空間里，以始終如一的熱情，創(chuàng)作出一個又一個的Flash精品，吸引著成千上萬雙眼睛的關(guān)注！第二章 FLASH的特點(diǎn)與功能FLASH是目前最為流行的網(wǎng)絡(luò)動畫制作工具。它集矢量編輯和動畫創(chuàng)作功能為一體，并具有靈活的交互功能，能將圖形、圖像、音頻、動畫和深層次的交互動作有機(jī)地結(jié)合在一起。由于FLASH廣泛使用矢量圖形，文件非常小，因此特別適合于創(chuàng)建通過INTERNET提供的內(nèi)容

10、。與位圖圖像相比，矢量圖形所需要的內(nèi)存和存儲空間要小的多，因?yàn)樗鼈兪且粩?shù)學(xué)公式而不是大型數(shù)據(jù)集表示圖像自身的。而位圖圖形之所以更大，是因?yàn)閳D像中的每個像素都需要一組獨(dú)立的數(shù)據(jù)來表示。2.1 FLASH的特點(diǎn)FLASH具有簡單易用、高效多能的特點(diǎn)。概況來說，F(xiàn)LASH具有以下一些優(yōu)點(diǎn)：（1） 靈活播放的作品使用FLASH不僅可以制作質(zhì)量非常出色的網(wǎng)頁，還可以制作高質(zhì)量的離線交互作品，并且擁護(hù)不需要使用網(wǎng)頁瀏覽器就可以瀏覽這些FLASH作品。FLASH附帶著一個免費(fèi)發(fā)放的離線播放器，這個離線播放器的文件非常小，因此可以將它和FLASH作品一起放在依仗軟盤上，從而生成一個不需要單獨(dú)安裝既可獨(dú)立播放的

11、演示程序。（2） 作品的網(wǎng)絡(luò)傳輸速度快FLASH中的動畫圖形用的是矢量技術(shù)，而不是在大多傳統(tǒng)網(wǎng)頁動畫圖像中所使用的點(diǎn)陣技術(shù)，因此，F(xiàn)LASH動畫作品的文件非常小，下在一個包含有幾個場景的全屏FLASH動畫文件只需要幾秒鐘，明顯少于下載并播放一個同等大小和復(fù)雜程度的點(diǎn)陣組成的網(wǎng)頁動畫文件的時間。（注：矢量技術(shù)，由數(shù)學(xué)公式和指令描述的圖像被稱為矢量圖形，這些數(shù)學(xué)公式和指令以純文本的形式存在，所以要描述一個全屏幕動畫過程只需要很小的數(shù)據(jù)量。點(diǎn)陣技術(shù)，由具有顏色特征的像素組成的一個矩陣來描述圖像，每個像素的大小和每個給定圖像中的像素的總數(shù)是固定不變的。描述一個像素需要232位數(shù)據(jù)位。）（3） 可自由縮

12、放的FLASH圖像一般來說，在網(wǎng)頁所用的圖像都要盡可能地小，只有這樣才能減少傳輸網(wǎng)頁時的傳輸時間。所以在網(wǎng)頁中使用全屏幕圖像相對較少。否則，瀏覽者為下載圖像花費(fèi)很長的時間，以至于在他們還沒有看到圖像的整個內(nèi)容時就沒有了耐心。而對于FLASH生成的網(wǎng)頁動畫，不管尺寸如何，其文件大小幾乎是一樣的，只是在控制圖像放大倍數(shù)上有微小區(qū)別。因此，對于FLASH網(wǎng)頁動畫來說，不論畫面大小，其運(yùn)行過程都是一樣的。（4） 高質(zhì)量的文字和圖像效果在FLASH中使用矢量圖形最大的好處是，總能保證它的線條圖形和文字的輸出質(zhì)量是瀏覽者的計算機(jī)所能實(shí)現(xiàn)的最高輸出質(zhì)量。因?yàn)槭噶繄D形中的指令可以告訴瀏覽者的計算機(jī)如何去識別這

13、些圖形，從而保證這臺計算機(jī)能盡其所能地輸出高質(zhì)量的圖形，因此在FLASH生成的網(wǎng)頁中，每一個元素都非常清晰和專業(yè)化。而點(diǎn)陣動畫圖像經(jīng)常是通過改變和扭曲被固定了大小的像素矩陣制作出來的，在這個過程中，一些必要的像素可能被夸大或丟失，因此，圖像的質(zhì)量受到了明顯的影響。在FLASH中使用矢量圖形的另一個好處是，F(xiàn)KASH生成的網(wǎng)頁中絕不在它的純色或漸變色色彩區(qū)域內(nèi)找到模糊或游離的像素。（5） 多用性FLASH是一個多能的工具，所輸出的文件還可以被高檔的圖形軟件所接受。因此，F(xiàn)LASH既可以幫助那些不太精通繪圖的人將他們的想法圖形化，又可以讓專業(yè)的圖像設(shè)計師利用它進(jìn)行構(gòu)思或設(shè)計草稿，然后輸出到高檔的圖

14、形軟件中，以便對其做進(jìn)一步的加工和完善，從而簡化操作過程。（6） 瀏覽FLASH作品的障礙正逐漸消除目前幾乎所有先進(jìn)的和具有圖形功能的瀏覽器都加入了支持FLASH的插件，而一些十分流行的多媒體網(wǎng)頁瀏覽器的插件如QuickTime4、Real Audio和Shockwave等都支持FLASH。另外，Macromedia公司已發(fā)布了FLASH動畫文件格式的源代碼，可以提供給任何想要使用它的人，因此可望看到FLASH技術(shù)將被植入到許多新的網(wǎng)頁瀏覽器中，包括Netscape。2.2 FLASH的功能FLASH功能強(qiáng)大。就其基本功能來說，概括起來有以下幾點(diǎn)：（1） 具有較強(qiáng)的矢量繪圖和動畫制作功能，所制

15、作的圖象質(zhì)量高而動畫和網(wǎng)頁數(shù)據(jù)量小。（2） 具有較強(qiáng)的導(dǎo)入和發(fā)布功能，不但可以導(dǎo)入點(diǎn)陣圖、QUICKTIME格式電影文件和MP3格式音樂文件等，還可以發(fā)布MP3文件等。（3） 采用插件的工作方式，只要電腦中的瀏覽器安裝了SHOCKWAVEFLASH插件，即可觀看FLASH動畫。（4） 采用“流式技術(shù)”播放動畫，文件沒有全部下載完就可觀看以下載的內(nèi)容。（5） FLASH播放器可以直接從網(wǎng)上下載更新版本。（6） 可充分調(diào)用FLASH文件內(nèi)部庫中的符號，重復(fù)利用資源。只要這個庫下載后，其他的電影都可以不在下載共享的符號，直接使用這個庫的符號，是文件字節(jié)數(shù)減少。（7） 包含許多功能更強(qiáng)大的Action

16、Script函數(shù)、屬性和目標(biāo)對象，兼容并支持Flash以前的版本。（8） Apple授權(quán)使用Flash的播放器可內(nèi)置于Apple產(chǎn)品中，這樣就可以通過QuickTime播放Flash的圖片、電影和具有交互能力的圖像。（9） 采用與JavaSpcript類似的語法結(jié)構(gòu)，以及新的文本編輯區(qū)和調(diào)試區(qū)，可進(jìn)一步提高程序的開發(fā)能力，開發(fā)更多的可擴(kuò)展的工具，以便開發(fā)Web應(yīng)用程序。（10） ActionScript編輯器允許有普通模式和專家模式兩種模式.所有的腳本程序均可從外部腳本文件調(diào)入，外部的腳本文件可以和任何ASCII碼的文本文件。（11） 支持XML。第三章 元件、實(shí)例的使用3.1關(guān)于元件元件是在

17、FLASH中創(chuàng)建的圖形、按鈕或影片剪輯，而實(shí)例是指位于舞臺上或嵌套在另一個元件內(nèi)的元件副本，實(shí)例可以與它的元件在顏色、大小和功能上有很大區(qū)別。編輯元件會更新它的所有實(shí)例，但對元件的一個實(shí)例應(yīng)用效果則只更新該實(shí)例。3.1.1 元件和實(shí)例簡單地說，元件是一個特殊的對象，可以是一個形狀，也可以是一個按鈕，甚至可以是一段影片剪輯。它在FLASH中只創(chuàng)建一次，然后可以在整部影片中反復(fù)使用。所創(chuàng)建的任何元件都會自動成為當(dāng)前文檔的庫的一部分。例如，創(chuàng)建了一個小鳥飛翔的影片剪輯元件后，當(dāng)需要制作一個一群小鳥在空中飛翔的場景時，就可以從庫中反復(fù)拖出小鳥飛翔元件的實(shí)例。這些元件實(shí)例的每一個都是對原元件的一次引用，

18、而不是重新創(chuàng)建原元件。原元件只在最終的FLASH影片中存儲一次。不管引用多少次，引用元件對文件大小都只有很小的影響。因此，如果最初做成元件的對象使影片總的文件大小增加可25KB，那么添加10個、20個甚至更多的元件實(shí)例，不會造成文件成倍增長，且文件大小與元件的大小無關(guān)。元件實(shí)例的外觀和動作無需與原元件一樣。每個元件實(shí)例都可以有其不同的顏色和大小，并提供不同的交互作用。例如，可以將按鈕元件的多個實(shí)例放置在場景上，其中每一個實(shí)例都有不同顏色和指定動作。每一個元件都有自己的時間軸、場景及圖層，也就是說，可以將元件實(shí)例放置在場景中的動作看成是將一部小的影片（元件）放置在較大的影片（FLASH項目）中。

19、而且，可以將元件實(shí)例作為一個整體來設(shè)置影片效果。當(dāng)對元件進(jìn)行編輯后，元件的每個實(shí)例都會做相應(yīng)的更新。例如，如果將已經(jīng)用其創(chuàng)建過幾個實(shí)例的矩形元件更改為圓形，那么該元件的每一個實(shí)例也將變成圓形。不過，元件的改動在其實(shí)例中只能從圖形的角度反映出來，而每個元件實(shí)例仍然可以擁有各自的顏色、大小和功能等特定屬性。3.1.2元件的類型每個元件都有一個唯一的時間軸和舞臺及幾層。創(chuàng)建元件時要選擇元件類型，這取決于文檔中如何使用該元件。FLASH中的元件包括以下4種類型。（1）圖形元件：可用于靜態(tài)圖象，并可用來創(chuàng)建連接到主時間軸的可重用的動畫片段，圖形元件與主時間軸同步運(yùn)行。交互式控件和聲音在圖形元件的動畫序列

20、中不起作用。（2）按鈕元件：可用于創(chuàng)建響應(yīng)鼠標(biāo)點(diǎn)擊、滑過或其他動作的交互式按鈕。在制作這種類型的元件時，首先要定義與各種按鈕狀態(tài)關(guān)聯(lián)的圖形，然后將動作指定給按鈕實(shí)例。（3）影片剪輯元件：可用于創(chuàng)建可重用的動畫片段。影片剪輯作為FLASH中最具有交互性、用途最多及功能最強(qiáng)的部分，基本上是小的獨(dú)立影片，它們可以包含主要影片中的所有組成部分（包括聲音、影片及按鈕）。影片剪輯擁有自己的獨(dú)立于主時間軸的多幀時間軸，所以可以將影片剪輯看作是主時間軸內(nèi)的嵌套時間軸。也可以將影片剪輯實(shí)例放在按鈕元件的時間軸內(nèi)，以創(chuàng)建動畫按鈕。（4）字體元件：用于導(dǎo)出字體并在其他FLASH文檔中使用它。3.1.3 元件的優(yōu)點(diǎn)使

21、用元件的優(yōu)點(diǎn)主要有以下4個方面：（1） 可以簡化影片的剪輯。在應(yīng)派內(nèi)剪輯過程紅，可以把要多次使用的元素做成元件。當(dāng)修改了元件以后，使用他的所有實(shí)例都會隨之更新，而不必逐一更改。（2）由于所有實(shí)例在文件中僅保存一個完整描述，其余只需保存參考指針，因此應(yīng)用元件可以使影片文件的大小大大縮減。（3）制作運(yùn)動類型的過渡影片時，必須使用元件。（4）在使用軟件時，由于一個實(shí)例在瀏覽中僅需要下載一次，因此可以加快影片的下載速度。3.2創(chuàng)建按鈕按鈕實(shí)際上是一個四幀的交互影片剪輯。當(dāng)為元件選擇按鈕行為時，F(xiàn)LASH會創(chuàng)建一個四幀的時間軸。前三幀顯示按鈕的三種可能狀態(tài)，第四幀則定義按鈕的活動區(qū)域。如果要使一個按鈕具

22、有交互性，可以把該按鈕元件的一個實(shí)例放在舞臺上，然后給該實(shí)例指定動作。必須將動作指定給文檔總的按鈕實(shí)例，而不是指定給按鈕時間軸中的幀。按鈕元件時間軸上的每一幀都表示一種狀態(tài)，這4種狀態(tài)的功能如下：（1）第1幀：彈起狀態(tài)，表示指針沒有經(jīng)過按鈕時該按鈕的狀態(tài)。（2）第2幀：指針經(jīng)過狀態(tài)，表示當(dāng)指針滑過按鈕時，該按鈕的外觀。（3）第3幀：按下狀態(tài)，表示單擊按鈕時，該按鈕的外觀。（4）第4幀；點(diǎn)擊狀態(tài)，定義響應(yīng)鼠標(biāo)單擊的區(qū)域。此區(qū)域在SWF文件中是不可見的。如果沒有在“點(diǎn)擊”幀指定動作，則顯示“彈起”幀中的對象就作為響應(yīng)鼠標(biāo)事件的動作。創(chuàng)建按鈕的操作步驟如下：（1）確保沒有選擇舞臺上的任何內(nèi)容。（2）

23、選擇“插入”|“新建元件”命令，彈出“創(chuàng)建新元件”對話框，在“名稱”文本框中鍵入新按鈕元件的名稱，并在“類型”選項組中單擊“按鈕”單選按鈕。（3）單擊“確定”按鈕，切換到元件編輯模式。同時時間軸的標(biāo)題會變?yōu)轱@示4個標(biāo)簽分別為“彈起”、“指針經(jīng)過”、“按下”和“點(diǎn)擊”的連續(xù)幀。第1幀（“彈起”）是空白關(guān)鍵幀。（4）創(chuàng)建彈起狀態(tài)的按鈕圖像。可以使用繪畫工具、導(dǎo)入一幅圖形或在舞臺上放置另一個元件的實(shí)例。（注：可以在按鈕中使用圖形元件和影片剪輯元件，但不能在按鈕中使用另一個按鈕）（5）單擊標(biāo)示為“指針經(jīng)過”的第2幀，然后選擇“插入”|“時間軸”|“關(guān)鍵幀”命令，使其成為一個關(guān)鍵幀。（6）將按鈕圖象改為

24、“指針經(jīng)過”狀態(tài)。（7）為“按下”幀和“點(diǎn)擊”幀重復(fù)步驟（5）和（6）。（8）完成之后，單擊編輯欄上的“返回”按鈕退出元件編輯模式。然后從“庫”面板中拖出按鈕元件即可在文檔中創(chuàng)建該元件的實(shí)例。3.3遮罩層的使用使用FLASH的遮罩功能可以制作很多復(fù)雜的效果。遮罩層的功能就像一個蠟版，當(dāng)用戶將蠟版防在一個表面并在該表面涂抹顏料時，顏料只會涂在沒有被蠟版遮掩住的地方，其他地方則被隔開或被遮掩住。例如，要獲得聚光燈效果以及轉(zhuǎn)變，可以使用遮罩層創(chuàng)建一個孔，通過這個孔可以看到下面的圖層。遮罩項目可以是填充的形狀、文字對象、圖形元件的實(shí)例或影片剪輯?？梢詫⒍鄠€圖層組織在一個遮罩層之下來創(chuàng)建復(fù)雜的效果。要創(chuàng)

25、建遮罩層，可以將遮罩項目反復(fù)在要用作遮罩的圖層上。和填充或筆觸不同，遮罩項目像是個窗口，透過它可以看到位于下面的鏈接層區(qū)域。除了透過遮罩項目顯示的內(nèi)容之外，其余的所有內(nèi)容都被遮罩層的其余部分隱藏起來。一個遮罩層只能包含一個遮罩項目。按鈕內(nèi)部不能有遮罩層，也不能將一個遮罩應(yīng)用于另一個遮罩。與遮罩層連接的常規(guī)圖層實(shí)際上已經(jīng)成了被遮罩層，但它保留了常規(guī)層的所有功能，可以使用任何被連接圖層上的多個元件、對象和文本，甚至可以將它們處理成動畫。簡言之，遮罩層是包括用作遮掩的實(shí)際對象的層，與被遮罩層是一個受遮罩層影響的層。遮罩層可以有多個與之相聯(lián)系的或相連接的被遮罩層。與遮罩層連接的常規(guī)圖層中的內(nèi)容只能通過

26、遮罩層上具有實(shí)心對象（如圓、正方形、群組、文本甚至元件）的區(qū)域顯示?？梢詫⒄谡謱由系倪@些對象做成動畫以創(chuàng)建移動的遮罩層。創(chuàng)建一個遮罩層的操作步驟如下：（1）創(chuàng)建一個常規(guī)層，并在上面畫出將要透過遮罩的洞顯示的圖形與文本。（2）單擊時間軸左下角的“插入圖層”命令，新建一個圖層。（3）在新圖層上創(chuàng)建填充形狀、文字或元件實(shí)例。（4）右擊新建圖層，從彈出的快捷菜單中選擇“遮罩層”命令。此時該圖層即轉(zhuǎn)換為遮罩層，并用一個遮罩層圖標(biāo)來表示。緊貼它下面的圖層將連接到遮罩層，其內(nèi)容會透過遮罩層上的填充區(qū)域顯示出來。被遮罩的圖層的名稱將以縮進(jìn)形式顯示，其圖標(biāo)將更改為一個被遮罩的圖層的圖標(biāo)。（5）鎖定遮罩層和被遮住

27、的圖層，既可在FLASH中顯示遮罩效果。3.4濾鏡和混合模式使用濾鏡，可以為文本、按鈕和影片剪輯增添有趣的視覺效果，并且可以將投影、模糊、發(fā)光和斜角等圖形效果應(yīng)用于圖形元素。FLASH所獨(dú)有的一個功能是可以使用補(bǔ)間動畫讓應(yīng)用的濾鏡活動起來。例如，如果創(chuàng)建一個具有投影的球（既球體），可以在時間軸將投影位置從起始幀移動到終止幀，來模擬光源從對象一側(cè)移動到另一側(cè)的效果應(yīng)用濾鏡后，可以隨時改變其選項，或者重新調(diào)整濾鏡順序以試驗(yàn)組合效果。在屬性檢查器中，可以啟用、禁用或者刪除濾鏡。刪除濾鏡時，對象恢復(fù)原來的外觀。通過選擇對象，可以查看應(yīng)用于該對象的濾鏡；該操作會自動更新屬性檢查器中所選對象的列表。每個濾

28、鏡都包含控件，可以調(diào)整所應(yīng)用濾鏡的強(qiáng)度和質(zhì)量。在運(yùn)行速度較慢的計算機(jī)上，使用較低的設(shè)置可以提高性能。如果在一系列不同性能的計算機(jī)上創(chuàng)建回放內(nèi)容，或者不能確定觀眾所使用計算機(jī)的計算能力，應(yīng)將質(zhì)量級別設(shè)置為低，以實(shí)現(xiàn)最佳的回放性能。（注：應(yīng)用于對象的濾鏡類型、數(shù)量和質(zhì)量會影響SWF文件的播放性能。對象應(yīng)用的濾鏡越多，為正確顯示用戶創(chuàng)建的視覺效果，Macromedia Flash Player要處理的計算量也就越大。因此，對于一個給定對象，建議用戶只應(yīng)用有限數(shù)量的濾鏡。）在FLASH中，使用混合模式可以創(chuàng)建復(fù)合圖像。復(fù)合是改變兩個或兩個以上重疊對象的透明度或者顏色相互關(guān)系的過程。使用混合，可以混合重

29、疊影片剪輯中的顏色，從而創(chuàng)造獨(dú)特的效果?；旌夏Ｊ揭矠閷ο蠛蛨D像的不透明增添了控制尺度?？梢允褂肍LASH混合模式來創(chuàng)建突出顯示或陰影效果，以透顯下層圖像的細(xì)節(jié)或者對不飽和的圖像涂色。混合模式包含這些元素：（1）混合顏色：應(yīng)用于混合模式的顏色。（2）不透明度：應(yīng)用于混合模式的透明度。（3）基準(zhǔn)顏色：混合顏色下的像素的顏色。（4）結(jié)果顏色：基準(zhǔn)顏色的混合效果。第四章 播放器界面功能需求分析（1）視頻框/進(jìn)度條/列表等美工 給人以立體、醒目、輕松的視覺效果。（2）常見播放器按鈕的制作 每個按鈕都有3中狀態(tài)：彈起、指針經(jīng)過、按下。這里只需要“彈起”和“指針經(jīng)過”兩種狀態(tài)即可。有區(qū)于鼠標(biāo)是否在該按鈕上（

30、即按鈕是否在鼠標(biāo)點(diǎn)擊范圍里）。（3） 暫停/繼續(xù)按鈕的切換顯示 當(dāng)影片狀態(tài)為停止時或暫停時，“;”按鈕隱藏而“4”按鈕顯現(xiàn)；當(dāng)影片狀態(tài)為正在播放時，“4”按鈕隱藏而“;”按鈕顯現(xiàn)。（4） 音量按鈕上的菜單效果 鼠標(biāo)移入音量按鈕既顯出音量控制梯形圖；鼠標(biāo)移出梯形圖或音量按鈕亦隱藏音量控制梯形圖。（5） 音量大小圖形控制 鼠標(biāo)點(diǎn)擊音量指示梯形圖，音量大小得到設(shè)置，同時更新音量指示梯形圖。（6） 雙擊視頻區(qū)完成“全屏模式”與“完整模式”間的切換 Flash 8中，鼠標(biāo)動作里沒有雙擊鼠標(biāo)的動作。這就需要變通達(dá)到雙擊切換的控制效果。（7） 當(dāng)前播放曲目著重顯示 在播放列表里，將正在播放的曲目用其他顏色著

31、重標(biāo)出。以重新刷新列表的Html文本實(shí)現(xiàn)。（8） 對盜用SWF的給以友情提示 當(dāng)其他網(wǎng)站調(diào)用播放器時，播放器提示“非法登入”同時提供“返回主頁”的鏈接。（9） Flash文件優(yōu)化 優(yōu)化庫里文件：刪除無用元件、合并相同元件以減少編譯后的文件體積。第五章 播放器界面結(jié)構(gòu)分析5.1界面需求橫向分析（場景幀）播放器不同于動畫，需要很多幀。該播放器在場景里只需要4幀。每一幀都對應(yīng)播放器的一種狀態(tài)。是通過代碼在對應(yīng)幀中跳轉(zhuǎn)的。幀之間關(guān)系示意圖如下：第一幀第二幀第三幀第四幀圖1：場景跳轉(zhuǎn)幀關(guān)系示意圖第一幀 數(shù)據(jù)載入界面 當(dāng)用戶剛打開播放器時候，播放器要訪問網(wǎng)絡(luò)請求播放列表（過程如圖2：Flash載入播放列表

32、示意圖）。播放器請求播放列表到播放器得到頁面返回播放列表之間會有不定時長的網(wǎng)絡(luò)延遲。此期間，要給用戶提示一個等待的畫面和提示。也給主Flash載入用戶當(dāng)?shù)靥鞖忸A(yù)報的小SWF以時間。腳 本文 件Data返回查找結(jié)果返回AS腳本訪問URL查找數(shù)據(jù)庫Flash第一幀圖2：Flash載入播放列表示意圖同時，得到的播放列表是一長串字符,賦在變量“concent”里，該幀也分割處理該字符串，以數(shù)組形式存放曲目。方便以后使用。第二幀 初始化視頻連接和變量并定義一些函數(shù) 視頻連接對象、聲音對象的初始化；時間格式化函數(shù)：timeFormat()、播放函數(shù)：playFLV()的定義。第三幀 完整模式頁面 該頁面有

33、完整的各種控制按鈕、進(jìn)度條、播放列表、天氣預(yù)報和場景1/3大小視頻區(qū)。第四幀 全屏模式頁面 場景100%的視頻區(qū)和一個退出全屏按鈕。5.2界面需求縱向分析（場景層）Flash層的概念使得場景上各個元件、圖片、組件顯得井井有條。大大的加快了Flash制作的速度、提高了工作效率。運(yùn)用層還可以使用遮罩、引導(dǎo)等來做特殊的效果。以下是場景中層的說明（由上至下）：1. ActionScript ： 用以放置幀動作。2. 關(guān)于 ： 版權(quán)、制作者信息。3. 外框 ： 在網(wǎng)頁SWF框架不成比例時，用以遮蓋場景以外的Flsah元素。4. 天氣 ： 外部載入的，第三方提供的天氣預(yù)報的SWF。5. 進(jìn)度條AS ： 有

34、關(guān)下載/播放進(jìn)度條的幀動作。6. 全屏 ： 有關(guān)全屏控制的一些按鈕和動作。7. 音量控制 ： 有關(guān)音量控制的一些按鈕和動作。8. 警示框 ：曲目播放結(jié)束后或曲目鏈接無效，而自動跳轉(zhuǎn)下一首時提示給用戶。9. 按鈕/進(jìn)度條 ： 所有按鈕和進(jìn)度條的相關(guān)元件和元件動作。10. 列表 ： 曲目列表相關(guān)元件11. 視頻框架樣式 ： 視頻區(qū)外圍框架的樣式效果。12. 背景動畫 ： 完整模式中飛花和“氣泡”的動畫。13. 背景 ： 載入頁面的載入動畫、完整頁面的風(fēng)景背景、全屏的黑屏背景。第六章 色彩的應(yīng)用色彩給人視覺上造成的沖擊力是最為直接與迅速的。作為第一視覺語言，色彩在多媒體制作中的作用是字體與圖像等其他

35、要素所無法替代的。由于對色彩的愛好是人類一種最本能、最普遍的美感，它對觀看者的影響便是最為直接的。設(shè)計者要考慮觀看者最初一瞬間的色彩感覺，牢牢地捕捉住他們的眼光，以達(dá)到引起關(guān)注的目的。較高藝術(shù)性的媒體播放器是內(nèi)容與美的形式的統(tǒng)一，應(yīng)集結(jié)構(gòu)對稱、色彩柔和、搭配合理、審美性強(qiáng)為一體。6.1色彩在界面中的作用1. 色彩可以被當(dāng)作一種很好的格式規(guī)劃工具來使用。特別是當(dāng)同一界面里包容大量信息，且利用慣常的空間區(qū)域分隔的方法來對它們進(jìn)行組織和規(guī)劃非常困難的時候。我們則用同一顏色顯示它們，用顏色的紐帶將它們聯(lián)系起來。如果我們要提醒用戶對界面上某一部分的注意，可以采用高亮度顯示或動畫顯示等技巧，但這些辦法可能

36、都不如利用顏色來得靈活方便。2. 色彩本身充當(dāng)有特定意義的視覺符號顏色是有意義的。這種意義可能來自于人們的長期共識，約定俗成。利用顏色的這種性質(zhì)，我們可以把它當(dāng)成一個很重要的屏幕元素來使用。比如：綠色的按鈕表示“開始”;紅色的按鈕表示“停止”;白色的邊框表示標(biāo)題區(qū);藍(lán)色的邊框表示正文區(qū);紅色區(qū)域顯示警告信息;黃色區(qū)域提供幫助信息。這些都將大大提高人機(jī)界面的親和性。在將色彩作為某種意義符號或渲染感情的手段時，設(shè)計者必須要注意：你所指定的這種色彩意義或情感象征一定要為用戶所了解并接受，不能與他的固有色彩經(jīng)驗(yàn)發(fā)生沖撞。還有，在整個設(shè)計中，色彩的意義一定要具有穩(wěn)定性、一致性。3. 借助色彩逼真地反映客

37、觀世界。我們周圍的世界是五彩繽紛的，特別需要以照片、動畫、活動視頻等來展示一些客觀對象和過程，這時候逼真的彩色顯得尤其重要。6.2 色彩的運(yùn)用在選用色彩設(shè)計多媒體播放器界面時，最重要的是明確色彩使用的目的和可能的作用，力求發(fā)揮色彩輔助交流、促進(jìn)信息傳播的作用。要做到合理運(yùn)用色彩應(yīng)注意以下幾個方面：1. 對色彩的基本認(rèn)識。在選用色彩時，最基本的要求是了解人眼的視覺系統(tǒng)：明確色彩濫用可能導(dǎo)致的問題，并盡量去避免它;考慮色彩搭配帶來的情景效應(yīng);考慮視野環(huán)境因素等等。最重要的是明確色彩的作用是輔助交流，我們最終要達(dá)到的目標(biāo)是完成信息從機(jī)到人的有效傳遞。換言之，色彩的作用應(yīng)是為界面增色，而界面設(shè)計不可依

38、賴色彩。2. 避免同時使用太多顏色。同一畫面中不要使用太多的顏色，一般以四五種為限。過多的顏色易于引起視覺疲勞。我們可以用一些其他的技巧，如：空間劃分、層次變化及幾何形狀等來配合顏色使用，以增加屏幕的視覺效果。3. 用色彩來起強(qiáng)調(diào)作用。在同調(diào)的色中，局部加上不同調(diào)的色，形成視覺美點(diǎn)。色彩的點(diǎn)綴在界面中產(chǎn)生一種緊張感，成為整體的一個著力點(diǎn)。點(diǎn)綴的色應(yīng)該采用小的面積，并與其他色形成強(qiáng)烈反差，以加強(qiáng)吸引力，形成視覺中心。根據(jù)一些色彩知識與應(yīng)用，故我選橙黃色作為播放器界面的主色調(diào)。與金屬相結(jié)合的黃色，具有快樂，希望，智慧和輕快的個性，它的明度最高，而且是理論性思考事情的“理智之色”?？吹近S色，便容易提

39、高自制力和注意力。 喜好黃色的人，大多屬于理論家類型。雖然才能出眾，卻容易恃才傲物。由于自尊心強(qiáng)，又對自己的能力極具信心，因此，經(jīng)常希望得到別人的肯定和贊賞。盡管如此，有時又能溫順服從，表現(xiàn)出合作的個性，由此而言，毫無疑問，愛好黃色的人是一位真正生命力強(qiáng)勝的人。而橙色是一種激奮的色彩，具有輕快，歡欣，熱烈，溫馨，時尚的效果。它代表著節(jié)日的喜慶，充滿了生機(jī)，在一間用橙色裝飾的房子里想要變得憂郁悲傷都是件困難的事情。橙色能吸引人們的注意力，給人們帶來能量、熱力、樂趣和青春活力。第七章 播放器界面實(shí)現(xiàn)7.1 視頻、進(jìn)度條和列表界面等美工視頻區(qū)背景畫一白色圓角矩形。中間鏤空，鏤空部分與視頻區(qū)吻合。以作

40、為視頻框，使得視頻區(qū)凸顯于播放器背景。把圓角矩形轉(zhuǎn)換為影片剪輯（圖片不可使用濾鏡效果）。選中該影片剪輯，在“屬性”“濾鏡”使用投影，強(qiáng)度設(shè)置為140，其他默認(rèn)，進(jìn)度條也一樣。這樣做可以增加視覺上的立體效果，不容易與背景混為一起。列表里，動態(tài)文本框外圍也擴(kuò)大一些畫一個矩形，填充色為灰色，20%的透明（可以隨意調(diào)節(jié)以適合為宜），筆觸顏色“#CC3300”、筆觸高度“2”、筆觸樣式“虛線”，用以表示列表文本框。將該矩形也轉(zhuǎn)為影片剪輯做如上的濾鏡。動態(tài)文本框設(shè)置字體字號和和顏色（宋體、12號、黑色）。文本框類型為“多行”、變量為“l(fā)ist”，另外要注意“”按鈕要點(diǎn)選，表示list里的文本表現(xiàn)成Html

41、。同時添加濾鏡“發(fā)光”，顏色選用“#FF8631”其他默認(rèn)。這用以在列表字周圍有發(fā)光顏色，用以在播放器背景前較容易的看清字。調(diào)節(jié)擺放各個按鈕和視頻、列表、進(jìn)度條還有天氣預(yù)報的位置。如下圖3：圖3：播放器頁面設(shè)計7.2 9個常見播放器按鈕的制作2個上下首、2個快進(jìn)后退、停止、播放、暫停、全屏、靜音。其中除了“靜音”為影片剪輯，其他類型為按鈕。每個按鈕都只有2幀：第一幀彈起為水晶效果（上下有白色光亮）、第二幀指針經(jīng)過為平板效果，得以區(qū)分鼠標(biāo)當(dāng)前是否在該按鈕上?！办o音”為4幀的影片剪輯，是2個按鈕樣式（同上，一個按鈕兩個效果即兩幀） 和 。用代碼控制顯示，對應(yīng)表示當(dāng)前是否為靜音。另外，當(dāng)按鈕為 同時

42、鼠標(biāo)在按鈕上，即顯示音量調(diào)節(jié)梯形圖（）。以完成靜音和音量大小的控制。7.3 暫停/繼續(xù)按鈕的切換顯示這兩個按鈕為重疊疊放。給這兩個按鈕命名實(shí)例名稱“button_pause” 和“button_play”。每個按鈕動作上使用點(diǎn)擊動作“on (release)”來設(shè)置自身和另一按鈕的“_visible”屬性。如下“button_play”按鈕的動作：on (release) /釋放鼠標(biāo)my_ns.pause(); /影片暫停和播放間的切換button_play._visible = false; /自身不顯示button_pause._visible = true; /暫停按鈕顯示出來因?yàn)椤皶和?/p>

43、”和“停止”按鈕對應(yīng)的是同一個“繼續(xù)”或叫“開始”的按鈕。所以只用上面的辦法不太方便控制按鈕的顯現(xiàn)。所以同時采用了視頻狀態(tài)監(jiān)聽（NetStream.onStatus 處理函數(shù)）：onStatus = function(infoObject:Object) 每當(dāng)狀態(tài)更改或發(fā)布針對 NetStream 對象的錯誤時調(diào)用。如果您要對此事件處理函數(shù)做出響應(yīng)，則必須創(chuàng)建一個函數(shù)來處理該信息對象。以下事件在發(fā)生某些 NetStream 活動時通知您。代碼屬性含義NetStream.Buffer.Empty數(shù)據(jù)的接收速度不足以填充緩沖區(qū)。數(shù)據(jù)流將在緩沖區(qū)重新填充前中斷，此時將發(fā)送 NetStream.Buf

44、fer.Full 消息，并且該流將重新開始播放。NetStream.Buffer.Full緩沖區(qū)已滿并且流將開始播放。NetStream.Buffer.Flush數(shù)據(jù)已完成流式處理，剩余的緩沖區(qū)將清空。NetStream.Play.Start播放已開始。NetStream.Play.Stop播放已結(jié)束。NetStream.Play.StreamNotFound無法找到傳遞給 play() 方法的 FLV。NetStream.Seek.InvalidTime對于使用漸進(jìn)式下載方式下載的視頻，用戶已嘗試跳過到目前為止已下載的視頻數(shù)據(jù)的結(jié)尾或在整個文件已下載后跳過視頻的結(jié)尾進(jìn)行搜尋或播放。NetSt

45、ream.Seek.Notify搜尋操作完成。按鈕監(jiān)聽部分代碼如下：var my_ns:NetStream = new NetStream(my_nc);my_ns.onStatus = function(infoObject:Object) if (infoObject.code = NetStream.Play.Start) button_play._visible = false;button_pause._visible = true;7.4 音量按鈕上的菜單效果音量按鈕（即上面提到的靜音按鈕）里4幀，每一幀都有個“stop()”。第一幀里是一個只有一幀的按鈕，是彈起情況下的有聲圖案。

46、該按鈕上動作為“ on (rollOver) this.gotoAndStop(2); ”，當(dāng)鼠標(biāo)滑入時該影片剪輯跳圖4：空按鈕（亮藍(lán)部分）轉(zhuǎn)并停在第二幀。第二幀里兩個按鈕和一個控制音量的影片剪輯。一個按鈕是指針經(jīng)過下的有聲圖案，一個是以音量控制的影片剪輯和上面按鈕之外空白部分為熱點(diǎn)的空按鈕（如圖4）。空白按鈕的功能是鼠標(biāo)經(jīng)過熱點(diǎn)（圖中亮藍(lán)部分，不與圖上按鈕和剪輯重疊）時，“on (rollOver， rollOut， dragOver， dragOut) this.gotoAndStop(1); ”以達(dá)到移出音量按鈕和剪輯后，音量按鈕回位到彈起狀態(tài)。即實(shí)現(xiàn)菜單效果。7.5 音量大小圖形控制在

47、上面“音量控制的影片剪輯”里是用到了遮罩。用代碼控制遮罩下的橘紅色的矩形影片剪輯的“_xscale”屬性的值來達(dá)到梯形圖示聲音大小。首先在最底層畫一個白色的矩形，作為背景。倒數(shù)第二層繪制一些逐漸變高的矩形，并調(diào)整好間距，以達(dá)到梯形效果。筆觸為空，填充為灰色。復(fù)制剛剛的梯形圖那幀，在新建一頂部圖層并粘貼剛復(fù)制的幀。在這一幀下面在新建一圖層，繪制一個橘紅色的矩形，矩形大小要剛剛好覆蓋整個梯形圖。轉(zhuǎn)換橘紅的矩形為影片并命名實(shí)例為“vol_img”。再設(shè)置第一層為遮罩，此時第二層被自動設(shè)為了被遮罩層，其他為正常層。返回上一元件，命名“音量控制的影片剪輯” （即圖4中按鈕上的剪輯）實(shí)例名為“vol_lo

48、go”。在該實(shí)例上添加動作如下：on (press, release, releaseOutside, dragOver, dragOut) if (_xmouse40.7) /40.7是橘紅色矩形的寬度mouse_x = 40.7; else if (_xmouse0) mouse_x = 0; else mouse_x = _xmouse;_root.now_vol = Math.floor(mouse_x/40.7*100);/_root.now_vol為當(dāng)前音量_root.flv_Audio.setVolume(_root.now_vol);this.vol_img._xscale =

49、 _root.now_vol; 當(dāng)用戶拖拽、點(diǎn)擊梯形中位置時會調(diào)節(jié)聲音大小。在該幀中添加幀動作：stop()this.vol_logo.vol_img._xscale = _root.now_vol;這樣在每次彈出梯形圖時表示的就是當(dāng)前系統(tǒng)的音量。7.6 雙擊視頻區(qū)完成“全屏模式”與“完整模式”間的切換在ActionScript 2.0里全屏是在導(dǎo)出為EXE文件時才可有效的：fscommand(fullscreen, true); /為false時為取消全屏這句代碼在WEB里的SWF文件中無效。那么要在WEB中的SWF里完成全屏的切換，就沒有辦法了嗎？在AS 2.0里是做不到的。但是AS 3.

50、0里提供了這樣的方法：StagedisplayState = fullScreen; /全屏StagedisplayState = normal; /取消全屏在需要的地方添加上這些代碼編譯即可。但是，當(dāng)瀏覽時只有Adobe Player 9.0 以上的播放器才能有效果。但是按鈕動作里沒有雙擊的動作函數(shù)。幸好還有變通的方法來達(dá)到一樣的效果：首先在視頻區(qū)域上畫上一樣大小的矩形，轉(zhuǎn)換為按鈕。編輯按鈕，把第一幀（“彈起”）移動到“點(diǎn)擊”幀上，其他三個幀為空白關(guān)鍵楨。這就形成了只有熱點(diǎn)，卻看不見的“空按鈕”。返回到場景，調(diào)整這個空按鈕以蓋住整個視頻區(qū)。在該按鈕上添加動作：on (press) Stage

51、displayState = fullScreen; /全屏gotoAndStop(4); /主場景第四幀，全屏頁面再復(fù)制該空按鈕（不是幀）并粘貼。刪掉剛剛新粘貼出來的空按鈕上的動作，并命名實(shí)例為“full_pin”并調(diào)整好位置以覆蓋整個視頻區(qū)。在該場景幀中添加幀動作：function checkFull() full_pin._visible = true;clearInterval(full_check);full_pin.onPress = function() full_pin._visible = false; /隱藏最上面一個空按鈕full_check = setInterval(

52、checkFull, 300);實(shí)現(xiàn)過程是：有全屏代碼的空按鈕在后復(fù)制粘貼出來的空按鈕下面。幀動作里是說，當(dāng)最上面一個空按鈕被點(diǎn)擊后這個空按鈕被隱藏（隱藏不限于看不見，而是在場景中不存在）。下面的有全屏代碼的空按鈕被顯示出來，可以被點(diǎn)擊。當(dāng)300毫秒到了，就執(zhí)行“checkFull()”函數(shù)，即顯示剛剛被隱藏的空按鈕，同時刪除間隔。也就是點(diǎn)擊一次視頻區(qū)，在300毫秒內(nèi)再點(diǎn)擊一次視頻區(qū)就算是雙擊了視頻區(qū)，就會執(zhí)行全屏。從全屏模式轉(zhuǎn)到完整模式也是一樣。7.7 當(dāng)前播放曲目著重顯示播放列表顯示的內(nèi)容是在“l(fā)ist”變量里的。對應(yīng)的動態(tài)文本支持Html標(biāo)簽，里面就有字體設(shè)置的標(biāo)簽。在每次更新曲目的時候從“flv_list”數(shù)組里重新組織了更新“l(fā)ist”：for (var i = 0; iflv_list.length; i+) if (now_play = i) /now_play 為當(dāng)前播放的曲目編號list += +flv_listi0+; else List += + flv_listi0+;此代碼跟在“playFLV()”函數(shù)里