《Flash8動(dòng)畫(huà)設(shè)計(jì)》 組件和模板.ppt

第八章組件和模板 本章主要內(nèi)容 8 1組件簡(jiǎn)介8 2使用組件8 3常用組件8 4使用模板8 5應(yīng)用實(shí)例8 6本章習(xí)題與實(shí)驗(yàn)指導(dǎo) 第8章組件和模板 8 1組件簡(jiǎn)介 組件是帶有參數(shù)的影片剪輯 組件既可以是一個(gè)簡(jiǎn)單的用戶界面控件 如單選按鈕或復(fù)選框 也可以包含一定的內(nèi)容 如滾動(dòng)窗格 組件還可以是不可見(jiàn)的 如FocusManager 組件是面向?qū)ο蠹夹g(shù)的一個(gè)重要特征 每個(gè)組件都有預(yù)定義參數(shù) 用戶也可以在使用時(shí)重新設(shè)置這些參數(shù) 并且每個(gè)組件還有一組獨(dú)特的動(dòng)作腳本方法 屬性和事件 也稱API 應(yīng)用程序編程接口 在運(yùn)行組件時(shí)用戶可以設(shè)置參數(shù)和其他選項(xiàng) 包含四類(lèi)組件 用戶界面組件 UI 媒體組件 數(shù)據(jù)組件和管理器 l用戶界面組件 UI 可以快速地與應(yīng)用程序交互操作 例如 Button組件 CheckBox組件等 l媒體組件 可以將媒體流入到應(yīng)用程序中 例如 MediaDisplay組件 MediaPlayback組件等 數(shù)據(jù)組件 可以加載和處理數(shù)據(jù)源的信息 例如 DataBinding組件 DataHolder組件 DataSet組件 WebServiceConnector組件等 管理器 管理器組件是一組不可見(jiàn)的組件 使用這些組件可以在應(yīng)用程序中管理諸如焦點(diǎn)或深度之類(lèi)的功能 例如 DepthManager類(lèi) FocusManager類(lèi) PopUpManager類(lèi)等 8 2使用組件 使用組件有多種方法 可以使用 組件 面板來(lái)查看組件 也可以在創(chuàng)作過(guò)程中將組件添加到文檔中 這樣可在 屬性 面板或 組件檢查器 面板中查看或修改組件屬性 此外 在多數(shù)情況下 用戶還需要編寫(xiě)動(dòng)作腳本 以便對(duì)組件數(shù)據(jù)進(jìn)行處理 所有組件都存儲(chǔ)在 組件 面板中 選擇 窗口 開(kāi)發(fā)面板 組件 命令 或按下組合鍵 Ctrl F7 都可以打開(kāi) 組件 面板 第8章組件和模板 組件 面板 1 添加組件和刪除組件向文檔中添加組件 只需要打開(kāi) 組件 面板 將選中組件從 組件 面板中拖放到舞臺(tái)上 或者在 組件 面板中雙擊要添加的組件即可 若從Flash文檔中刪除組件的實(shí)例 可通過(guò)刪除庫(kù)面板中編譯剪輯 SWC 圖標(biāo)來(lái)刪除組件 或者直接選中舞臺(tái)上的組件實(shí)例 按 Delete 鍵 2 組件檢查器 面板和 屬性 面板將組件添加到Flash文檔后 可以使用 屬性 面板來(lái)設(shè)置和查看組件實(shí)例 也可以使用 組件檢查器 面板來(lái)設(shè)置組件實(shí)例的參數(shù) 需要說(shuō)明的是有些參數(shù)必須使用動(dòng)作腳本來(lái)設(shè)置 在 組件檢查器 面板中查看組件實(shí)例 選擇一個(gè)組件的實(shí)例 單擊 窗口 組件檢查器 命令 打開(kāi) 組件檢查器 面板 單擊 參數(shù) 選項(xiàng)卡查看參數(shù) 3 處理組件事件所有組件都有事件 若處理事件 需要編寫(xiě)在觸發(fā)事件時(shí)執(zhí)行的腳本代碼 用戶可以通過(guò)以下兩種方式來(lái)處理組件事件 使用on 組件事件處理函數(shù)處理組件事件最簡(jiǎn)單的方式是使用on 組件事件處理函數(shù) 用戶可以將on 處理函數(shù)分配給組件實(shí)例 就像將處理函數(shù)分配給按鈕或影片剪輯一樣 使用組件事件偵聽(tīng)器處理組件事件最強(qiáng)大的方式是使用偵聽(tīng)器 事件由組件進(jìn)行廣播 作為偵聽(tīng)器注冊(cè)到事件廣播器 組件實(shí)例 的任何對(duì)象都會(huì)收到該事件的通知 用戶可以向一個(gè)組件實(shí)例注冊(cè)多個(gè)偵聽(tīng)器 也可以向多個(gè)組件實(shí)例注冊(cè)一個(gè)偵聽(tīng)器 使用事件偵聽(tīng)器模型 需要?jiǎng)?chuàng)建一個(gè)偵聽(tīng)器對(duì)象 該對(duì)象所帶的屬性應(yīng)為事件的名稱 8 3常用組件 8 3 1Button 按鈕 組件Button組件是一個(gè)可調(diào)整大小的矩形用戶界面按鈕 可以給按鈕添加一個(gè)自定義圖標(biāo) 也可以將按鈕的行為從按下改為切換 在單擊切換按鈕后 它將保持按下?tīng)顟B(tài) 直到再次單擊時(shí)才會(huì)返回到彈起狀態(tài) 第8章組件和模板 1 Button參數(shù)licon 給按鈕添加自定義圖標(biāo) 該值是 庫(kù) 面板中影片剪輯或圖形元件的鏈接標(biāo)識(shí)符 沒(méi)有默認(rèn)值 llabel 設(shè)置按鈕上文本的值 默認(rèn)值是 Button llabelPlacement 確定按鈕上的標(biāo)簽文本相對(duì)于圖標(biāo)的方向 該參數(shù)可以是left right top或bottom之一 默認(rèn)值是right lselected 該參數(shù)指定是按下 true 還是釋放 false 按鈕 默認(rèn)值為false ltoggle 將按鈕轉(zhuǎn)變?yōu)榍袚Q開(kāi)關(guān) 值為true時(shí) 按鈕在按下后保持按下?tīng)顟B(tài) 直到再次按下時(shí)才返回到彈起狀態(tài) 值為false時(shí) 按鈕的行為就像普通按鈕 默認(rèn)值為false 請(qǐng)進(jìn)入Flash通過(guò)實(shí)例介紹Button組件的具體應(yīng)用 2 Button組件的應(yīng)用下面通過(guò)實(shí)例介紹Button組件的具體應(yīng)用 請(qǐng)進(jìn)入Flash窗口 根據(jù)教材介紹的操作步驟完成實(shí)例制作 測(cè)試按鈕效果圖 8 3 2CheckBox 復(fù)選框 組件CheckBox是一個(gè)可以選中或取消選中的方框 復(fù)選框是任何表單或Web應(yīng)用程序中的一個(gè)基礎(chǔ)部分 每當(dāng)需要收集一組非相互排斥的true或false值時(shí) 都可以使用復(fù)選框 當(dāng)復(fù)選框被選中后 框中會(huì)出現(xiàn)一個(gè)復(fù)選標(biāo)記 對(duì)于一組復(fù)選框選項(xiàng) 用戶可以不選或者選擇選項(xiàng)中的一個(gè)或多個(gè) 1 CheckBox參數(shù)llabel 設(shè)置復(fù)選框上文本的值 默認(rèn)值是CheckBox llabelPlacement 確定復(fù)選框上標(biāo)簽文本的方向 該參數(shù)可以是下列四個(gè)值之一 left right top或bottom 默認(rèn)值是right lselected 將復(fù)選框的初始值設(shè)為選中 true 或取消選中 false CheckBox組件參數(shù) 2 CheckBox組件的應(yīng)用下面的示例是一個(gè)用于收集客戶個(gè)人信息的表單 其中包含一組個(gè)人興趣愛(ài)好列表供客戶選擇 請(qǐng)進(jìn)入Flash窗口完成操作 復(fù)選框組件實(shí)例效果圖 8 3 3ComboBox 組合框 組件ComboBox有靜態(tài)和可編輯之分 使用靜態(tài)組合框可以從下拉列表中做出一項(xiàng)選擇 使用可編輯的組合框可以在列表頂部的文本字段中直接輸入文本 也可以從下拉列表中選擇一項(xiàng) 組合框是由Button TextInput和List三個(gè)子組件組成 1 ComboBox參數(shù)ldata 為ComboBox組件中的每個(gè)項(xiàng)目設(shè)置一個(gè)相關(guān)聯(lián)數(shù)據(jù)值 該數(shù)據(jù)參數(shù)是一個(gè)數(shù)組 leditable 確定ComboBox組件是可編輯的 true 還是只能選擇的 false 默認(rèn)值為false labels 用一個(gè)文本值數(shù)組填充ComboBox組件 rowCount 設(shè)置在不使用滾動(dòng)條的情況下一次最多可以顯示的項(xiàng)目數(shù) 默認(rèn)值為5 ComboBox組件參數(shù) 2 ComboBox組件的應(yīng)用制作一個(gè)組合框 并在其下拉列表中呈現(xiàn)出一個(gè)從中選擇城市的列表 請(qǐng)進(jìn)入Flash窗口完成操作 ComboBox組件應(yīng)用 8 3 4Label 標(biāo)簽 組件Label組件是Flash8中新加入的一個(gè)組件 通常使用Label組件為表單的其它組件創(chuàng)建文本標(biāo)簽 也可以使用Label組件來(lái)替代普通文本字段 Label組件參數(shù) 1 Label參數(shù)參數(shù)含義如下 autoSize 指明標(biāo)簽的大小和對(duì)齊方式應(yīng)如何適應(yīng)文本 默認(rèn)值為none html 指明標(biāo)簽是否采用HTML格式 默認(rèn)值為false text 指明標(biāo)簽的文本 默認(rèn)值是Label 2 Label組件的應(yīng)用用Label組件為復(fù)選框及組合框添加標(biāo)簽 請(qǐng)進(jìn)入Flash窗口完成操作 組件應(yīng)用效果圖 8 3 5List 列表框 組件List組件是一個(gè)可滾動(dòng)的單選或多選列表框 它與ComboBox組件有相似的功能和用法 1 List組件參數(shù)其它參數(shù)含義如下 lmultipleSelection 是一個(gè)布爾值 用于設(shè)置列表框的選項(xiàng)能否多選 默認(rèn)值為false 即只能選擇其中一項(xiàng) 若選擇true 可同時(shí)選擇多項(xiàng) 選擇多項(xiàng)時(shí)需要按下 Ctrl 鍵的同時(shí)點(diǎn)擊要選擇的項(xiàng)目 lrowHeight 可以設(shè)置列表框每行的高度 默認(rèn)值是20 2 List組件的應(yīng)用請(qǐng)進(jìn)入Flash窗口完成操作 List組件應(yīng)用 List組件參數(shù) 8 3 6NumericStepper 數(shù)字微調(diào)器 組件NumericStepper組件允許用戶在一個(gè)數(shù)值范圍內(nèi)選擇某一值 NumericStepper只處理數(shù)值數(shù)據(jù) 此外 要顯示兩個(gè)以上的數(shù)值位置 例如 數(shù)字5246或1 34 在編輯時(shí)必須調(diào)整數(shù)字微調(diào)器的大小 1 NumericStepper參數(shù)參數(shù)含義如下 Maximum 設(shè)置步進(jìn)的最大值 默認(rèn)值為10 minimum 設(shè)置步進(jìn)的最小值 默認(rèn)值為0 stepSize 設(shè)置步進(jìn)的變化單位 默認(rèn)值為1 value 設(shè)置當(dāng)前步進(jìn)的值 默認(rèn)值為0 NumericStepper組件參數(shù) 2 NumericStepper組件的應(yīng)用本例中的數(shù)字微調(diào)器允許用戶從 50 50之間選擇一個(gè)數(shù)字 增量為1 請(qǐng)進(jìn)入Flash窗口完成操作 NumericStepper組件應(yīng)用 8 3 7RadioButton 單選按鈕 組件使用RadioButton組件允許用戶從一組選項(xiàng)中選擇惟一的選項(xiàng) RadioButton組件必須用于至少有兩個(gè)RadioButton實(shí)例的組 在任何給定的時(shí)刻 都只有一個(gè)組成員被選中 用戶可以設(shè)置groupName參數(shù) 以指明單選按鈕屬于哪個(gè)組 1 RadioButton參數(shù)ldata 是與單選按鈕相關(guān)的值 lgroupName 單選按鈕的組名稱 默認(rèn)值為radioGroup llabel 設(shè)置單選按鈕的標(biāo)簽 llabelPlacement 設(shè)置標(biāo)簽文本在單選按鈕的什么位置 默認(rèn)值是right lselected 將單選按鈕的初始值設(shè)置為是否被選中 設(shè)置RadioButton組件參數(shù) 2 RadioButton組件的應(yīng)用設(shè)置單選按鈕用于顯示性別 請(qǐng)進(jìn)入Flash窗口完成操作 組件實(shí)例效果 8 3 8ScrollPane 滾動(dòng)窗格 組件ScrollPane組件的功能是提供滾動(dòng)條 用戶可以很方便地觀看尺寸過(guò)大的影片剪輯 JPEG文件和SWF文件 另外 在創(chuàng)作和運(yùn)行時(shí) 都可以使用動(dòng)作腳本來(lái)設(shè)置滾動(dòng)窗格的內(nèi)容 1 ScrollPane參數(shù)contentPath 設(shè)置要加載到滾動(dòng)窗格中的內(nèi)容 該值可以是本地SWF或JPEG文件的相對(duì)路徑 Internet上文件的相對(duì)或絕對(duì)路徑 也可以是設(shè)置 為動(dòng)作腳本導(dǎo)出 的影片剪輯元件的鏈接標(biāo)識(shí)符 lhLineScrollSize 設(shè)置單擊水平滾動(dòng)條的向左或向右箭頭時(shí)滑動(dòng)尺寸的大小 ScrollPane組件參數(shù) lhPageScrollSize 設(shè)置每次按下軌道時(shí)水平滾動(dòng)條移動(dòng)多少個(gè)單位 默認(rèn)值為20 lhScrollPolicy 設(shè)置是否顯示水平滾動(dòng)條 該值可以為on 無(wú)論影片剪輯與滾動(dòng)窗格的相對(duì)大小如何都顯示水平滾動(dòng)條 off 無(wú)論影片剪輯與滾動(dòng)窗格的相對(duì)大小如何都不顯示水平滾動(dòng)條 或auto 根據(jù)影片剪輯與滾動(dòng)窗格的相對(duì)大小來(lái)決定顯示水平滾動(dòng)條 lscrollDrag 設(shè)置是否允許用戶在滾動(dòng)窗格中用鼠標(biāo)拖拽影片剪輯對(duì)象 默認(rèn)值為 false 即只能通過(guò)滾動(dòng)條查看滾動(dòng)窗格中的影片剪輯 若設(shè)為true 允許用戶直接使用鼠標(biāo)拖拽滾動(dòng)窗格中的影片剪輯 lvLineScrollSize 設(shè)置單擊垂直滾動(dòng)條的向上或向下箭頭時(shí)滑動(dòng)尺寸的大小 lvPageScrollSize 設(shè)置每次按下軌道時(shí)垂直滾動(dòng)條移動(dòng)多少個(gè)單位 lvScrollPolicy 是否顯示垂直滾動(dòng)條 該值的設(shè)置方法與hScrollPolicy參數(shù)相似 2 ScrollPane組件的應(yīng)用使用滾動(dòng)窗格顯示一幅風(fēng)景圖片 請(qǐng)進(jìn)入Flash窗口完成操作 ScrollPane組件應(yīng)用 8 3 9TextArea 文本域 組件TextArea組件可以提供多行文本的輸入 1 TextArea組件參數(shù)leditable 指明TextArea組件是否可編輯 默認(rèn)值為true html 指明文本是否采用HTML格式 默認(rèn)值為false text 指明TextArea的內(nèi)容 wordWrap 指明文本是否自動(dòng)換行 默認(rèn)值為true TextArea組件參數(shù) 2 TextArea組件的應(yīng)用為兩個(gè)TextArea組件實(shí)例的參數(shù)分別設(shè)置不同的值 將會(huì)有不同的效果 請(qǐng)進(jìn)入Flash窗口完成操作 TextArea組件不同參數(shù)應(yīng)用效果圖 8 3 10TextInput 輸入文本框 組件TextInput組件和TextArea組件功能比較相似 都可以提供文本輸入 不同是TextInput組件只能提供單行文本的輸入 1 TextInput組件參數(shù)editable 指明TextInput組件是否可編輯 默認(rèn)值為true password 指明字段是否為密碼字段 默認(rèn)值為false text 指定TextInput的內(nèi)容 2 TextInput組件的應(yīng)用將兩個(gè)TextInput組件實(shí)例中的password參數(shù)分別設(shè)為true和false兩種情況 觀察運(yùn)行結(jié)果 TextInput組件參數(shù) TextInput組件應(yīng)用 8 3 11DateChooser 日期選擇 組件DateChooser組件允許用戶從日歷中選擇一個(gè)或多個(gè)日期 1 DateChooser組件參數(shù)ldayNames 顯示周的文本 默認(rèn)為S M T W T F S分別代表周日至周六 ldisabledDays 設(shè)置每周的哪一天無(wú)效 反白 不能選擇 0為周日 1為周一 2為周二 依此類(lèi)推 lfirstDayOfWeek 設(shè)置哪一天為每周的第一天 0為周日 1為周一 2為周二 lmonthNames 可以根據(jù)語(yǔ)言的種類(lèi)指定顯示月份的名稱 默認(rèn)是英文的月份單詞lshowToday 是否使用特殊標(biāo)志顯示當(dāng)天的日期 默認(rèn)是true DateChooser組件參數(shù) 2 DateChooser組件的應(yīng)用下面通過(guò)一個(gè)簡(jiǎn)單的示例說(shuō)明DateChooser組件的使用方法 請(qǐng)進(jìn)入Flash窗口完成操作 測(cè)試效果圖 8 3 12Window 窗口 組件Window組件在一個(gè)具有標(biāo)題欄 邊框和關(guān)閉按鈕 可選 的窗口內(nèi)顯示電影剪輯的內(nèi)容 Window組件還支持拖動(dòng)操作 用戶可以單擊標(biāo)題欄并將窗口及其內(nèi)容拖動(dòng)到另一個(gè)位置 但拖動(dòng)邊框不會(huì)更改窗口的大小 1 Window組件參數(shù)lcloseButton 指明是否顯示關(guān)閉按鈕 lcontentPath 指定窗口的內(nèi)容 內(nèi)容可以是電影剪輯的鏈接標(biāo)識(shí)符 或是屏幕 表單或包含窗口內(nèi)容的幻燈片的元件的名稱 也可以是要加載到窗口的SWF或JPG文件的絕對(duì)或相對(duì)URL ltitle 指明窗口的標(biāo)題 Window組件參數(shù) 2 Window組件的應(yīng)用在Window中顯示一幅禮花綻放的圖片 請(qǐng)進(jìn)入Flash窗口完成操作 Window組件應(yīng)用 8 4使用模板 Flash8附帶了多個(gè)幫助用戶簡(jiǎn)化工作的模板 使用這些模板制作動(dòng)畫(huà)時(shí) 通常只需要修改文本的內(nèi)容 而不需要編寫(xiě)腳本代碼 這將使得模板的使用較為簡(jiǎn)單 但同時(shí)也限制了模板一般只應(yīng)用于功能性的互動(dòng)應(yīng)用 第8章組件和模板 1 使用照片幻燈片模板照片幻燈片模板使用戶可以輕松地創(chuàng)建和自定義照片幻燈片 以制作個(gè)人相冊(cè)為例來(lái)說(shuō)明照片幻燈片模板的使用方法 請(qǐng)進(jìn)入Flash窗口根據(jù)教材提供的操作步驟完成操作 導(dǎo)入風(fēng)景照片并編輯內(nèi)容 2 使用演示文稿模板Flash8附帶的演示文稿模板可以幫助用戶創(chuàng)建 自定義和發(fā)布演示文稿 制作一個(gè)關(guān)于學(xué)生興趣調(diào)查的演示文稿 來(lái)說(shuō)明演示文稿模板的使用方法 請(qǐng)進(jìn)入Flash窗口根據(jù)教材提供的操作步驟完成操作 演示文稿 8 5 1調(diào)查問(wèn)卷本實(shí)例是一張可用于網(wǎng)上用戶資料調(diào)查信息的填寫(xiě)表 它利用了Flash8用戶界面組件來(lái)完成 并配合動(dòng)作腳本語(yǔ)句進(jìn)行數(shù)據(jù)的收集與發(fā)布 請(qǐng)進(jìn)入Flash窗口根據(jù)教材提供的操作步驟完成操作 8 5應(yīng)用實(shí)例 第8章組件和模板 調(diào)查問(wèn)卷實(shí)例的界面調(diào)查問(wèn)卷最終效果圖 8 5 2自然風(fēng)光本例主要運(yùn)用組件來(lái)顯示多張具有說(shuō)明文字的自然風(fēng)光圖片 請(qǐng)進(jìn)入Flash窗口根據(jù)教材提供的操作步驟完成操作 封面效果圖組件的布局 本章習(xí)題與實(shí)驗(yàn)指導(dǎo) 本章習(xí)題 第219頁(yè)實(shí)驗(yàn)指導(dǎo) 第219頁(yè) 第8章組件和模板 Thankyouverymuch 本章到此結(jié)束 謝謝您的光臨