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

1、 03網絡2 季曉花 11 南通紡織職業(yè)技術學院畢業(yè)設計（論文） flash影音在線播放器的設計與實現(xiàn) 界面的設計與實現(xiàn)季 曉 花3514211班 級 03網 絡 2 班 專 業(yè) 網絡技術/市場營銷 教 學 系 信 息 系 指導老師 周 悅 完成時間 2007年04月01日至 2007年05月03日目 錄第一章引 言 4第二章flash的特點與功能 52.1 flash的特點 52.2 flash的功能 6第三章元件、實例的使用 83.1關于元件 83.1.1 元件和實例 83.1.2元件的類型 93.1.3 元件的優(yōu)點 93.2創(chuàng)建按鈕 103.3遮罩層的使用 113.4濾鏡和混合模式 12

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

3、7參 考 文 獻 28flash影音在線播放器的設計與實現(xiàn) 界面的設計與實現(xiàn)【 摘 要 】 現(xiàn)在web和電腦用戶對網頁媒體需求是越來越多。因為寬帶的普及和質量的提高，更多的用戶已經不太習慣下載音樂、mv和電影了。都習慣于在線觀看瀏覽，而且又不占用硬盤、不需要長時間等待下載、又可以經常更新。所以本課題嘗試用時下最為流行且最具發(fā)展前景的web元素flash，設計并實現(xiàn)一個多媒體影音在線播放系統(tǒng)，側重其按鈕、滑條、進度條的制作以及頁面框架美工的設計、功能的實現(xiàn)?！?關鍵詞 】 flash 播放器 多媒體 美工 界面設計與實現(xiàn)【 abstract 】 now web and computer user

4、 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 time t

5、o 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, pr

6、ogress strip manufacture and page frame art designing design, function realization.【 keyword 】 flash player multimedia art designing contact surface design and realization第一章 引 言flash（中文譯為“閃動、一閃”）這個英文單詞是一個用于制作網絡動畫的軟件的名稱，在今天已是廣為人知了。就像photoshop、corel-draw、3d max等設計軟件名稱一樣，已被許多愛好者熟悉和掌握！因為flash是為制作網絡動畫而開

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

8、，它已經逐步的占據了廣大青少年、甚至是部分中老年的工作和生活，flash動畫短片成為一時間網絡最熱的娛樂方式，也成為了一種時尚和潮流。開始學習和制作flash的人越來越多，人們都以能夠制作出倍受大家關注的flash動畫作品而感到驕傲、自豪?，F(xiàn)在有許多專門的如“flashempire閃客帝國，大話三國，閃盟在線”等等這樣的一些網站，這里面不僅擁有大量的flash動畫供愛好者在線觀看，而且還是flash迷們的一個專門交流的空間。的確，它的發(fā)展讓人不得不刮目相看。flash作為現(xiàn)代的一種新的設計方式和娛樂方式，不僅有其實用功能，并且還有視覺和聽覺上的雙重享受，更因為它所具有的趣味性，成為現(xiàn)代人放松自

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

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

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

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

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

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

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

16、pt函數(shù)、屬性和目標對象，兼容并支持flash以前的版本。（8） apple授權使用flash的播放器可內置于apple產品中，這樣就可以通過quicktime播放flash的圖片、電影和具有交互能力的圖像。（9） 采用與javaspcript類似的語法結構，以及新的文本編輯區(qū)和調試區(qū)，可進一步提高程序的開發(fā)能力，開發(fā)更多的可擴展的工具，以便開發(fā)web應用程序。（10） actionscript編輯器允許有普通模式和專家模式兩種模式.所有的腳本程序均可從外部腳本文件調入，外部的腳本文件可以和任何ascii碼的文本文件。（11） 支持xml。第三章 元件、實例的使用3.1關于元件元件是在flas

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

44、full 消息，并且該流將重新開始播放。netstream.buffer.full緩沖區(qū)已滿并且流將開始播放。netstream.buffer.flush數(shù)據已完成流式處理，剩余的緩沖區(qū)將清空。netstream.play.start播放已開始。netstream.play.stop播放已結束。netstream.play.streamnotfound無法找到傳遞給 play() 方法的 flv。netstream.seek.invalidtime對于使用漸進式下載方式下載的視頻，用戶已嘗試跳過到目前為止已下載的視頻數(shù)據的結尾或在整個文件已下載后跳過視頻的結尾進行搜尋或播放。netstream

45、.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); ”，當鼠標滑入時該影片剪輯跳圖4：空按鈕（亮藍部分）轉并停在第二幀。第二幀里兩個按鈕和一個控制音量的影片剪輯。一個按鈕是指針經過下的有聲圖案，一個是以音量控制的影片剪輯和上面按鈕之外空白部分為熱點的空按鈕（如圖4）?？瞻装粹o的功能是鼠標經過熱點（圖中亮藍部分，不與圖上按鈕和剪輯重疊）時，“on (rollover， rollout， dragover， dragout) this.gotoandstop(1); ”以達到移出音量按鈕和剪輯后，音量按鈕回位到彈起狀態(tài)。即實現(xiàn)菜單效果。7.5 音量大小圖形控制在上面“音

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

48、在該實例上添加動作如下：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為當前音量_root.flv_audio.setvolume(_root.now_vol);this.vol_img._xscale = _ro

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

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

51、laystate = fullscreen; /全屏gotoandstop(4); /主場景第四幀，全屏頁面再復制該空按鈕（不是幀）并粘貼。刪掉剛剛新粘貼出來的空按鈕上的動作，并命名實例為“full_pin”并調整好位置以覆蓋整個視頻區(qū)。在該場景幀中添加幀動作：function checkfull() full_pin._visible = true;clearinterval(full_check);full_pin.onpress = function() full_pin._visible = false; /隱藏最上面一個空按鈕full_check = setinterval(chec

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