FlashCS3網(wǎng)站商業(yè)設(shè)計(jì)從入門(mén)到精通第4章 Flash組件應(yīng)用.ppt

1、第4章 Flash組件應(yīng)用,隨著Flash技術(shù)的發(fā)展，F(xiàn)lash組件技術(shù)也日趨成熟，功能得到了進(jìn)一步地加強(qiáng)和擴(kuò)展。通過(guò)使用Flash組件，F(xiàn)lash設(shè)計(jì)者們可以方便地重復(fù)使用和共享代碼，不需要編寫(xiě)ActionScript也可以方便地實(shí)現(xiàn)各種動(dòng)態(tài)網(wǎng)站和應(yīng)用程序中常見(jiàn)的交互功能。這無(wú)疑能夠極大地提高Flash用戶的工作效率。 本章將介紹幾種常見(jiàn)的Flash組件應(yīng)用技術(shù)。通過(guò)本章的學(xué)習(xí)，讀者可以了解一些常用組件的功能，并掌握這些組件的使用方法和技巧。,4.1 Flash組件概述,組件是預(yù)先構(gòu)建的Flash元素，是帶有參數(shù)的影片剪輯，其外觀和行為可以通過(guò)設(shè)置相應(yīng)的參數(shù)進(jìn)行修改。對(duì)于Flash開(kāi)發(fā)人員來(lái)

2、說(shuō)，使用組件可以極大地提高工作效率。Flash開(kāi)發(fā)人員可以將開(kāi)發(fā)過(guò)程中常用的功能封裝在組件中。,4.1.1 組件的添加,用戶可以通過(guò)使用“組件”面板將組件添加到Flash文檔中，然后通過(guò)使用“庫(kù)”面板向文檔添加該組件的更多實(shí)例。 在“屬性”面板的“參數(shù)”選項(xiàng)卡或“組件檢查器”面板的“參數(shù)”選項(xiàng)卡中可以設(shè)置組件實(shí)例的屬性。,4.1.1 組件的添加,“組件”面板 向舞臺(tái)上添加組件,4.1.1 組件的添加,設(shè)置組件的實(shí)例名稱和參數(shù) “庫(kù)”面板中的組件,4.1.2 組件參數(shù)設(shè)置,每個(gè)組件都帶有參數(shù)，通過(guò)設(shè)置這些參數(shù)可以更改組件的外觀和行為。最常用的屬性顯示為創(chuàng)作參數(shù)，其他參數(shù)則必須使用ActionSc

3、ript來(lái)設(shè)置。,4.1.2 組件參數(shù)設(shè)置,輸入組件實(shí)例名稱 設(shè)置組件參數(shù),4.1.3 組件類(lèi)別,Flash在“組件”面板中提供的組件分為以下4類(lèi)。 （1）數(shù)據(jù)（Data）組件。使用數(shù)據(jù)組件可加載和處理數(shù)據(jù)源中的信息。 （2）媒體（Media）組件。使用媒體組件能夠很方便地將流媒體加入到Flash中，并對(duì)其進(jìn)行控制。 （3）用戶界面（UI）組件。利用用戶界面組件可以方便地創(chuàng)建復(fù)雜的交互界面，實(shí)現(xiàn)與應(yīng)用程序之間的交互。 （4）FLVPlayback組件。通過(guò)FLVPlayback組件，可以輕松地將視頻播放器嵌入Flash應(yīng)用程序，以便播放通過(guò)HTTP漸進(jìn)式下載的Flash視頻（FLV）文件，或者

4、播放來(lái)自Flash Media Server（FMS）或Flash Video Streaming Service（FVSS）的FLV文件流。,4.2 滾動(dòng)文本,4.2 滾動(dòng)文本,4.2.1 文本滾動(dòng)組件UIScrollBar,使用UIScrollBar組件可以將滾動(dòng)條添加至文本字段。該組件的功能與其他所有滾動(dòng)條類(lèi)似，兩端各有一個(gè)“箭頭”按鈕，按鈕之間有一個(gè)滾動(dòng)軌道和滾動(dòng)滑塊。,4.2.2 實(shí)例制作,本例是一個(gè)在背景圖上放置滾動(dòng)文本的介紹性頁(yè)面。頁(yè)面元素至少由三部分組成，即背景圖、滾動(dòng)文本和滾動(dòng)條。,4.2.2 實(shí)例制作,本例是一個(gè)在背景圖上放置滾動(dòng)文本的介紹性頁(yè)面。,4.2.2 實(shí)例制作,本

5、例是一個(gè)在背景圖上放置滾動(dòng)文本的介紹性頁(yè)面。,4.3 日歷,4.3 日歷,4.3.1 日歷組件DateChooser,DateChooser組件是一個(gè)允許用戶選擇日期的日歷。該組件包含一些按鈕，這些按鈕允許用戶在月份之間來(lái)回翻動(dòng)并單擊選中某個(gè)日期?？梢栽O(shè)置指定月份和日期、星期的第一天、任何禁用日期以及加亮顯示當(dāng)前日期的參數(shù)。,4.3.2 對(duì)組件使用樣式,Flash為每個(gè)UI組件都準(zhǔn)備了可供用戶編輯的樣式屬性。對(duì)于一個(gè)組件實(shí)例，可以通過(guò)使用setStyle()和getStyle()方法來(lái)設(shè)置和獲取樣式屬性值。為組件實(shí)例指定屬性和屬性值的語(yǔ)法為： 組件實(shí)例名稱.setStyle(屬性名稱, 屬性值

6、); 屬性名稱：一個(gè)字符串，指示樣式屬性的名稱。不同的組件支持不同的樣式。每個(gè)組件都有一個(gè)可供用戶設(shè)置的不同的樣式集。 屬性值：屬性的值。如果該值是字符串，它必須括在引號(hào)中。,4.3.3 實(shí)例制作,本例主要由一個(gè)DateChooser組件和一個(gè)背景圖組成。在制作時(shí)，應(yīng)當(dāng)根據(jù)用戶的閱讀習(xí)慣，對(duì)日歷中各元素的顯示方法進(jìn)行相應(yīng)的設(shè)置。步驟如下:,4.3.3 實(shí)例制作,本例主要由一個(gè)DateChooser組件和一個(gè)背景圖組成。步驟如下:,4.3.3 實(shí)例制作,本例主要由一個(gè)DateChooser組件和一個(gè)背景圖組成。步驟如下:,4.4 層疊窗口,4.4 層疊窗口,4.4.1 窗口組件Window,使用

7、Window組件可以在一個(gè)具有標(biāo)題欄、邊框和“關(guān)閉”按鈕（可選）的窗口內(nèi)顯示影片剪輯的內(nèi)容。該組件可以是模式的，也可以是非模式的。模式窗口會(huì)防止鼠標(biāo)和鍵盤(pán)輸入轉(zhuǎn)至該窗口之外的其他組件。Window組件還支持拖動(dòng)操作，用戶可以單擊標(biāo)題欄并將窗口及其內(nèi)容拖動(dòng)到另一個(gè)位置。拖動(dòng)邊框不會(huì)更改窗口的大小。,4.4.2 實(shí)例制作,本例中包含三個(gè)圖片窗口，這三個(gè)圖片窗口將分別從外部讀取不同的圖片文件。,4.5 加載進(jìn)度,4.5 加載進(jìn)度,4.5.1 加載器組件Loader,Loader組件是一個(gè)容器，可以顯示SWF或JPEG文件（漸進(jìn)式JPEG文件除外）。用戶可以縮放加載器的內(nèi)容，或者調(diào)整加載器自身的大小來(lái)

8、匹配內(nèi)容的大小。默認(rèn)情況下，該組件會(huì)自動(dòng)調(diào)整內(nèi)容的大小以適應(yīng)加載器。運(yùn)行時(shí)也可以加載內(nèi)容，并監(jiān)控加載進(jìn)度（不過(guò)內(nèi)容加載一次后會(huì)被緩存，所以進(jìn)度會(huì)快速跳進(jìn)到100%）。,4.5.2 進(jìn)度條組件ProgressBar,ProgressBar組件能顯示加載內(nèi)容的進(jìn)度，可用于顯示加載圖像和應(yīng)用程序各部分的狀態(tài)。加載進(jìn)程可以是確定的也可以是不確定的。當(dāng)要加載的內(nèi)容量已知時(shí)，使用確定的進(jìn)度欄。確定的進(jìn)度欄是一段時(shí)間內(nèi)任務(wù)進(jìn)度的線性表示。當(dāng)要加載的內(nèi)容量未知時(shí)，使用不確定的進(jìn)度欄。可以通過(guò)添加標(biāo)簽來(lái)顯示加載內(nèi)容的進(jìn)度。,4.5.3 實(shí)例制作,本例中，加載外部圖片的任務(wù)是由兩個(gè)組件協(xié)同完成的。因此，正確處理好

9、兩個(gè)組件之間的關(guān)系是完成任務(wù)的關(guān)鍵.步驟如下:,4.5.3 實(shí)例制作,步驟如下: 設(shè)置下載速率,4.6 折疊菜單,4.6 折疊菜單,4.6.1 折疊組件Accordion,Accordion組件是包含一系列子項(xiàng)的瀏覽器，可用來(lái)顯示多部分表單。 該組件呈縱向布局，其標(biāo)題按鈕橫跨整個(gè)組件。一個(gè)子項(xiàng)與一個(gè)標(biāo)題按鈕關(guān)聯(lián)，且每個(gè)標(biāo)題按鈕均從屬于Accordion組件而不從屬于子項(xiàng)。當(dāng)用戶單擊某個(gè)標(biāo)題按鈕時(shí)，關(guān)聯(lián)的子項(xiàng)即會(huì)顯示在該標(biāo)題按鈕下方，并且在過(guò)渡到新的子項(xiàng)的過(guò)程中將使用過(guò)渡動(dòng)畫(huà)。用戶可以通過(guò)單擊各子項(xiàng)的標(biāo)題按鈕在子項(xiàng)之間進(jìn)行瀏覽。,4.6.2 屏幕功能,Flash的屏幕功能為用戶提供了一個(gè)帶有結(jié)構(gòu)

10、構(gòu)造塊的創(chuàng)作界面，使用戶可以輕松構(gòu)建復(fù)雜的應(yīng)用程序（例如，幻燈片演示文稿或基于表單的應(yīng)用程序等），而無(wú)需在時(shí)間軸中使用多個(gè)幀和圖層，也無(wú)需查看時(shí)間軸。 在創(chuàng)作基于屏幕的文檔時(shí)，屏幕排列在用戶創(chuàng)建的結(jié)構(gòu)化層次結(jié)構(gòu)中。用戶可以通過(guò)在分支樹(shù)中嵌套屏幕來(lái)創(chuàng)建文檔的結(jié)構(gòu)，也可以輕松地預(yù)覽和修改基于屏幕的文檔結(jié)構(gòu)。 基于屏幕的文檔分為兩種類(lèi)型，即針對(duì)順序演示文稿設(shè)計(jì)的幻燈片屏幕和針對(duì)基于表單的非線性應(yīng)用程序設(shè)計(jì)的表單屏幕。在使用時(shí)，應(yīng)當(dāng)根據(jù)具體情況選擇合適的屏幕類(lèi)型。,4.6.3 實(shí)例制作,本例是通過(guò)直接在FLA文檔中放置圖片來(lái)實(shí)現(xiàn)圖片的顯示的。在實(shí)際應(yīng)用時(shí)，也可以通過(guò)外部載入的方式實(shí)現(xiàn)圖片的顯示。另外，

11、相應(yīng)地設(shè)置各表單的內(nèi)容，也可以輕松實(shí)現(xiàn)諸如網(wǎng)站導(dǎo)航、文檔目錄等實(shí)用功能。,4.7 視頻播放器,4.7 視頻播放器,4.7.1 視頻回放組件FLVPlayback,通過(guò)FLVPlayback組件，可以輕松地將視頻播放器嵌入Flash應(yīng)用程序，以便播放通過(guò)HTTP漸進(jìn)式下載的Flash視頻（FLV）文件，或者播放來(lái)自Flash Media Server（FMS）或Flash Video Streaming Service（FVSS）的FLV文件流。,4.7.2 實(shí)例制作,本例中所要加載的視頻是存儲(chǔ)在遠(yuǎn)程服務(wù)器上的。根據(jù)具體的需要（諸如制作課件、演示產(chǎn)品等），也可以將視頻文件放置在本地，或直接導(dǎo)入到

12、FLA文檔中。然后對(duì)組件的參數(shù)進(jìn)行相應(yīng)的設(shè)置即可。,4.7.2 實(shí)例制作,保持該組件的選中狀態(tài)，打開(kāi)“參數(shù)”面板。,4.8 MP3播放器,4.8 MP3播放器,4.8.1 下拉列表組合文本框組件ComboBox,ComboBox組件由Button組件、TextInput組件和List組件三個(gè)子組件組成。通過(guò)使用該組件，用戶可以從下拉列表中做出一項(xiàng)選擇。例如，可以在客戶地址表單中提供一個(gè)包括各省市名稱的下拉列表。 該組件可以是靜態(tài)的，也可以是可編輯的。通過(guò)使用可編輯的ComboBox組件，用戶可以在列表頂部的文本字段中直接輸入文本，也可以從下拉列表中選擇一項(xiàng)。如果下拉列表到達(dá)文檔底部，該列表將會(huì)

13、向上打開(kāi)，而不是向下打開(kāi)。,4.8.2 媒體回放組件MediaPlayback,MediaPlayback組件由MediaDisplay組件和MediaController組件兩個(gè)子組件組成。該組件提供對(duì)媒體內(nèi)容進(jìn)行流式處理的方法，使媒體可以流入到Flash內(nèi)容中，并為媒體回放提供標(biāo)準(zhǔn)的用戶界面控件（播放、暫停等）。該組件的參數(shù)必須在“組件檢查器”面板中進(jìn)行設(shè)置，,4.8.3 實(shí)例制作,本例中由于需要實(shí)現(xiàn)兩個(gè)組件的協(xié)同工作，組件之間將通過(guò)相應(yīng)的ActionScript腳本實(shí)現(xiàn)聯(lián)系。因此，對(duì)腳本的編寫(xiě)是實(shí)現(xiàn)播放列表效果的關(guān)鍵。讀者如果還不清楚ActionScript的具體編寫(xiě)方法，可以先不必研究

14、腳本的具體含義。等學(xué)習(xí)完以后的章節(jié)，可以再回過(guò)頭來(lái)參考這些腳本。,4.8.3 實(shí)例制作,步驟如下:,4.9 導(dǎo)航菜單,4.9 導(dǎo)航菜單,4.9.1 菜單欄組件MenuBar,使用MenuBar組件可以創(chuàng)建帶有彈出菜單和命令的水平菜單欄，就像常見(jiàn)的軟件應(yīng)用程序中包含“文件”菜單和“編輯”菜單的菜單欄一樣。其常用參數(shù)有如下幾種。,4.9.2 滾動(dòng)窗口組件ScrollPane,使用ScrollPane組件可以將影片剪輯、JPEG文件和SWF文件限定在一個(gè)可滾動(dòng)區(qū)域中顯示。通過(guò)使用該組件，可以限制這些媒體類(lèi)型所占用的屏幕區(qū)域的大小。例如，如果有一幅大尺寸的圖像，而在應(yīng)用程序中只有很小的空間可用于該圖像

15、的顯示，則可以將該圖像加載到ScrollPane組件中。,4.9.3 實(shí)例制作,本例中對(duì)MenuBar組件內(nèi)容的添加主要依靠ActionScript代碼來(lái)實(shí)現(xiàn)。與上例同樣，讀者可以先學(xué)會(huì)使用這兩種組件的方法，而不必細(xì)究其中的腳本。掌握一定的ActionScript編程方法后，可以再回到本節(jié)進(jìn)行深入學(xué)習(xí)。,4.10 注冊(cè)表單,4.10 注冊(cè)表單,4.10.1 表單常用組件,1文本輸入組件TextInput ：TextInput組件是單行文本組件，可以使用該組件來(lái)輸入單行文本字段。 2單選按鈕組件RadioButton：使用RadioButton組件可以強(qiáng)制用戶只能選擇一組選項(xiàng)中的一項(xiàng)。 3數(shù)字選擇器組件NumericStepper：NumericStepper組件允許用戶逐個(gè)通過(guò)一組經(jīng)過(guò)排序的數(shù)字。 4復(fù)選框組