使用Flash MX 建置遠距教學應用程式.ppt

《使用Flash MX 建置遠距教學應用程式.ppt》由会员分享，可在线阅读，更多相关《使用Flash MX 建置遠距教學應用程式.ppt（72页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、使用 Flash MX 開發遠距教學應用程式主講人：零壹科技 林靖崴AGENDA前言視訊教學系統應用技術介紹Flash Com開發環境安裝安裝Flash Communication Server MX安裝Flash Communication Components開發即時視訊教學系統完整聊天室的ActionScript建置隨選視訊系統建置線上簡報系統前言在過去Flash就等於是動畫的代名詞現在的Flash MX不只是做動畫的工具，更是一個多媒體系統的開發工具在Macromedia Rich Internet Applications的概念下，提供了兩項技術：Flash Communicatio

2、n Server (影音視訊串流技術)Flash Remoting(動態資料庫連結)以下章節會針對Flash Communication Server(影音視訊串流技術)製作即時互動視訊系統即時互動視訊系統與非即時隨選視訊。視訊教學系統應用技術及作業平台介紹視訊教學系統應用技術Flash MXFlash Communication Server MXFlash Communication Components作業平台程式編輯平台：Flash MX(Win/Mac)影音串流平台：Flash Communication Servre只能安裝在 Win NT/2000/XP Server or Li

3、nuxFlash Communication Server MX版本說明Flash Communication Server MX 1.5 Personal50個點同時連線 or 1MB每秒資料上傳下載頻寬限制連線數或頻寬擴充最多5套(250點同時連線，5MB頻寬限制)Flash Communication Server MX 1.5 Professional2500個點同時連線 or 10MB每秒資料上傳下載頻寬限制連線數或頻寬擴充沒有上限，不過建議安裝不同主機可做負載平衡Flash Communication Server MX 1.5開發版5個點同時連線 or 250KB每秒資料上傳下載

4、頻寬限制免費，沒有使用期限限制。Flash Communication Server下載網址Flash Communication Server MX(Developer Edition)http:/ Communication Server MX Componentshttp:/ Player 6http:/ MX試用版http:/ professional為例：可以在新增/移除程式，選擇新增/移除Windows元件利用Windows元件精靈，選擇安裝Internet Information Services(IIS)(不過請確認有將Win 2000 professional放進光碟機中)安

5、裝Flash Communication Server MX選擇Flash Communication MX Install安裝程序(一)取得資料安裝程序(二)請選擇Next安裝程序(三)請選擇Yes安裝程序(四)確認安裝路徑後，選擇Next安裝程序(五)預設值Typical，請選擇Next安裝程序(六)輸入Username 及 Password 和 Confirm Password，選擇Next安裝程序(七)選擇IIS，選擇Next安裝程序(八)確認安裝資訊後，選擇Next安裝程序(九)安裝狀態安裝程序(十)選擇Finish安裝Communication組件(一)連上http:/ 下載免費的

6、Flash Communication Components將組件解壓縮後，將Communication Components.fla放置在Flash MX/First Run/Components/安裝Communication組件(二)將解壓縮後的scriptlib檔案複製到Flash Communication Server MX的目錄下。(例如：d:program files Macromedia Flash Communication Server MX)啟動Flash MX 確認Communication組件啟動Flash MX，在組件面板上會出現Communication Com

7、ponents的組件清單這些組件都是可以直接拖曳至舞台上，設定好參數就能使用確認新增的ActionScript物件及指令其中比較常用的幾個ActionScriptCamera:擷取影像設定及品質設定Microphone:麥克風聲音來源NetConnection:建立FlashCom連線NetStream:傳送影音串流ShareObject:紀錄或傳遞訊息給所有Client端Video:顯示攝影機影像Communication Components簡介Chat：文字交談組件SimpleConnect：負責連結FlashCom伺服器的組件UserColor：設定交談文字的顏色ConnectionL

8、ight：顯示連線狀態SetBandwidth：選擇連線傳輸資料的品質VideoConference：提供視訊交談功能建置視訊交談應用程式建置視訊交談應用程式視訊交談應用程式實做步驟(一)請先在Pogram files Macromedia Flash Communication Server MX applications路徑下，新增一個ABC在同一路徑下Sample _videoconference目錄中將sharedobjects資料夾及main.asc複製到先前新增的ABC資料夾中。main.asc主要是載入Flash Communication Server MX元件內的核心檔案。視

9、訊交談應用程式實做步驟(二)將SimpleConnect及VideoConference組件拖曳到編輯舞台中視訊交談應用程式實做步驟(三)給VideoConference組件命名(範例是用“VC”)視訊交談應用程式實做步驟(四)點選舞台中SimpleConnect組件在屬性面板中出現兩個設定項目，Application Directory 請輸入 rtmp:/ABC。另外一個Communication Compo請點選兩下打開，按+號新增值，請將先前命名的組件名稱(VC)輸入。按下確定。視訊交談應用程式實做步驟(五)控制測試影片(Ctrl+Enter)，測試連線結果注意：如果您是在已經安裝好F

10、lash Communication Server的主機上測試，會直接呈現結果。如果不是在Flash Communication Servr主機上，請將您的swf檔案複製到Flash Communication Server主機上視訊交談應用程式組件說明(一)FlashCom是走RTMP的通訊協定，圖上輸入的路徑是FlashCom範例的路徑是我們用來測試應用程式使用，實際上發佈成可以線上使用的程式方式會在後面單元介紹。除了SimpleConnect組件之外，每個組件都要設定名稱，同時在SimpleConnect的Communication Components中也要加入這些組件名稱才能夠連線運

11、作。視訊交談應用程式組件說明(二)VideoConference有四個參數設定Show boundary：顯示邊界Show background：顯示背景Clip mask：加上遮片DragSharing：提供影像拖曳視訊交談應用程式組件說明(三)SetBandwidth組件的上傳下載速率(kbps)可以自行調整設定，上圖所示是預設值。視訊交談應用程式組件說明(四)ConnectionLight組件有兩項參數設定Measurement Interval：測試間距，預設值是2秒測試一次Latency Threshold：延遲臨界點，預設值是0.1秒，如果延遲時間超過就會亮黃燈，斷線就會亮紅燈。發

12、佈成應用程式(一)開啟檔案總管路徑：C:Inetpub wwwroot flashcom applications 新增一個新資料夾命名為VC(Video Conference)回到Flash MX編輯狀態，將檔案存檔在C:Inetpub wwwroot flashcom applications VC發佈成應用程式(二)選擇檔案 發佈設定勾選 Flash 及 HTML發佈成應用程式(三)Flash發佈設定版本：Flash Player 6壓縮影片：不壓縮：152 KB壓縮：47.3 KBJPG品質：依需要做調整音效串流：依需要做調整。一般而言，聲音傳輸的檔案比起影像檔案是小大多了。發佈成應用

13、程式(四)HTML發佈設定尺寸：符合影片、像素、百分比等三種選擇。按下發佈做測試發佈成應用程式(五)開啟Internet管理員在預設的web站台新增虛擬目錄虛擬目錄別名，命名為VCWeb站台內容目錄，路徑指向C:InetpubwwwrootflashcomapplicationsVC依照設定流程完成設定。開啟瀏覽器，輸入http:/localhost/vc測試對外連線則需要實體IP，供其他使用者連線上來做影音交談。建置多人聊天室建置多人聊天室建置多人聊天室(一)將元件 Chat 及SimpleConnect拖曳到編輯區中。將Chat元件命名為Chat在SimpleConnect的元件連結，將C

14、hat加入，在rtmp設定可以設定為ABC然後發佈成網頁測試建置多人聊天室(二)如果一切正常，別人連上來也可以多人線上聊天。您是否發覺到，聊天的內容無法清除。所以說，我們必須加入一個可以清除對話的機制。做法如下一頁所示建置多人聊天室(三)組件選擇Flash UI Components將PushButton拖曳到編輯區中。屬性：Label填入Button顯示的名稱(例如：ClearChat)Click Handler填入C(待會兒ActionScript會用到)建置多人聊天室(四)在動作面板選擇專家模式，並請輸入下列所示之ActionScript語法Function C()Chat.clearH

15、istory();說明：這個語法會清除掉聊天室的歷史資料。建置多人聊天室(五)發布到網頁上之後，按下ClearChat清除先前的對話。如果成功就完成了!建置隨選視訊建置隨選視訊一、先建立錄影環境(錄製教材)將SimpleConnect及VideoRecord拖曳到編輯區中建立連結：將VideoRecord元件命名為VR，在SimpleConnect中加入VR元件的連結，而RTMP連結ABC二、錄影測試先將檔案儲存，可以命名為Stream.fla接上WebCam，然後按下Ctrl+Enter測試。按下錄影鍵錄影，錄一段影片之後按下停止。可以選擇撥放建直接撥放剛才錄製的影片。做這個錄影動作有兩個目

16、的：建立撥放的影片範例檔建立存放影片資料的路徑，以便日後將影片檔案放到這個路徑下。三、建立隨選視訊將Simpleconnect 及 VideoPlayback拖曳到編輯區中將VideoPlayback元件命名為VP，在SimpleConnect加入VP元件及建立RTMP路徑ABC四、建立隨選視訊選單將PushButton拖曳到編輯區中，Label命名為Play1，ClickHandler命名為p1五、輸入Actionscript在動作控制面板中，選擇專家模式。輸入ActionScript語法控制影片撥放Function p1()VP.streamName=“video”;六、撥放測試控制測試影

17、片按下Play1按鈕再按下撥放影片按鈕加入其它範例影片C:Program FilesMacromediaFlash Communication Server MXapplicationsABCstreams_definst_將事先準備好的影片資料檔(.flv)複製到上述的路徑下，將來有新的影片檔案也是放在這裡新增影片撥放選項新增Play2及Play3的按鈕，並分別ClickHandler命名為p2及p3將先前複製到Stream路徑下的檔案名稱記起來下個步驟連結影片檔時會用到隨選視訊的Actionscript語法請輸入下列的Actionscript語法Function p1()doclose()

18、;VP.streamName=“video”;Function p2()doclose();VP.streamName=“98”;Function p3()doclose();VP.streamName=“90”;Function doclose()var s=new Sound();s.stop();VP.initNetStream();ActionScript語法說明Function p1()VP.streamName=“video”;以上語法是說明撥放“video”這個影片檔案doclose();以上語法是呼叫Function doclose()Function doclose()var

19、 s=new Sound();s.stop();VP.initNetStream();以上語法是使串流的聲音停止及回到最原始預設值(目的在於終止影片串流服務)Function p1()doclose();VP.streamName=“video”;Function p2()doclose();VP.streamName=“98”;Function p3()doclose();VP.streamName=“90”;Function doclose()var s=new Sound();s.stop();VP.initNetStream();撥放測試控制測試影片按下Play1按鈕再按下撥放影片按鈕

20、(先選擇影片檔，再按下撥放鈕)如此一來隨選視訊部份就完成啦!線上簡報系統建置線上簡報系統這個單元：線上簡報系統，分為兩個部分簡報系統本身簡報資料檔建置線上簡報系統(一)開啟新檔將元件PresentationSWF及SimpleConnect拖曳至編輯區將PresentationSWF命名為P在SimpleConnet中，設定rtmp:/ABC，加入Component連結P命名存檔。(例如：presentA.fla)建置線上簡報系統(二)在第1影格，使用動作面板，請選擇專家模式，輸入以下Actionscript語法Stop();_global.speakerMode=true;選專家模式建置線上

21、簡報系統(三)PresentationSWF的預設值是simple_preso.swf。這個檔案在C:Inetpubwwwrootflashcomsamplessample_broadcast的資料夾中有簡報範例。可以先將simple_preso.swf複製下來，貼到presentA.fla相同的路徑下。按下Ctrl+Enter測試Flash簡報檔製作簡報檔的製作很單純，就是將一個影格當成一張簡報檔，依照自己的需要製作。如果你先前已經會製作動畫，可以加入動畫特效，來增加簡報資料的可看性。簡報檔製作(一)先將圖層1命名為BG(background)選取簡報Title底圖顏色，然後用矩形工具在編輯

22、區中畫出適當的底圖大小(例如左圖所示)簡報檔製作(二)新增圖層，修改名稱為標題在標題區，輸入標題(例如：第一頁簡報標題)簡報檔製作(三)新增圖層，修改名稱為內容在編輯區將內容資料輸入簡報檔製作(四)按下F6新增關鍵影格，然後編輯第二頁簡報資料。依此類推，將所需要的簡報資料輸入簡報資料檔製作(五)當完成你所需要的簡報資料之後，請點選第1格影格。在動作面板上輸入 stop();然後命名存檔(例如：p.fla)存檔路徑記得和先前的PresentA.fla 同一路徑簡報資料檔製作(六)回到PresentA.fla，在屬性的位置，將PresentationSWF的預設值修改成P.swf然後執行測試。加入

23、可以變更簡報的功能(一)選擇文字工具在編輯區設定適當大小，在屬性的實體名稱上命名為swf_txt加入可以變更簡報的功能(二)在Flash UI Components中拖曳Button到編輯區，並且在Click Handler欄位輸入loadfile加入可以變更簡報的功能(三)加入Actionscript語法Function loadfile()p.LoadSWF(swf_txt.text);總結以上的教學範例，是在使用最少程式的情況下製作出一個影音視訊交談系統及隨選視訊。如果要更使功能更完善，一定要使用Actionscript語法，在您安裝好Flash Communication MX的同時，在C:Inetpub wwwroot flashcom 路徑下就有Sample範例檔，可以直接打開範例的原始檔(.fla)來看Actionscript的寫法。FAQ有產品及技術相關問題請聯絡：Macromedia 全系列產品代理商 零壹科技Macromedia 產品專員 林靖崴 02-25652323#263 .tw