多媒體教學播放工具的註解系統之 設計與實作

國 立 交 通 大 學

資訊科學與工程研究所

碩 士 論 文

多媒體教學播放工具的註解系統之

設計與實作

Design and Implementation of an Annotation System for

Multimedia Lecturing Players

.

研

究

生 ： 林逸珅

指 導 教 授 ： 陳登吉 教授

多媒體教學播放工具的註解系統之

設計與實作

Design and Implementation of an Annotation System for

Multimedia Lecturing Players

研 究 生：

林逸珅

_{Student :}

_{Yi-Shen Lin}

指導教授：

陳登吉

_{Advisor :}

_{Deng-Jyi Chen}

國 立 交 通 大 學

資 訊 工 程 學 系

碩 士 論 文

A Thesis Submitted to

Department of Computer Science and Information Engineering College of Electrical Engineering and Computer Science

National Chiao Tung University in Partial Fulfillment of the Requirements

for the Degree of Master

in

Computer Science and Information Engineering July 2009

Hsinchu, Taiwan, Republic of China.

多媒體教學播放工具的註解系統之

設計與實作

學生：林逸珅

指導教授：陳登吉 博士

國立交通大學資訊工程學系碩士班

摘要

在本論文中，我們提出多媒體教學播放工具的多媒體註解系統的設計技術與實作 雛型。隨著電腦的普及和多媒體技術的發達，因此目前已有多種多媒體教學錄製系統 可用來協助教師利用多媒體進行教學。多媒體教學錄製系統可以即時錄製教師的授課 教學內容及講解動作，提供學生重覆學習的機會。多媒體教學錄製系統由兩個部份組 成：1. 用來製作多媒體教材的「多媒體教學錄製工具」以及用來播放多媒體教材的「多 媒體教學播放工具」。但是，目前的多媒體教學錄製系統加製補充教材須花費時間，而 播放工具對學習註記功能的支援不足，因此本研究的目的是要在多媒體教學播放工具 上實作多媒體註解系統，讓多媒體教學錄製系統的使用者可以利用註解系統加入多媒 體的註解，並幫助使用者利用多媒體播放工具來複習教材以及加入註解內容。 這個多媒體教學播放工具上的多媒體註解系統，提供多媒體的註解，讓使用者除 了可以加入文字註解，還可以加入影片註解與互動教材的註解，同時提供註解群組的 功能讓使用者可以分類註解；註解索引的功能讓使用者可以利用索引連結到註解所在 的位置或是外部的檔案。使用者使用多媒體註解系統時，不但可以由註解讀取教材的 重點，還可以利用閱讀記錄回到原來教材播放的位置，對於教材的製作者更可以利用 多媒體註解加入補充內容，並減少重製教材的需求。 本論文應用了在軟體工程界使用多年的設計樣式設計、實作註解系統，，並利用 這些樣式的應用，對於多媒體教學播放工具，降低本系統和多媒體教學播放工具之間 的藕合，讓本系統更容易和不同的多媒體教學播放工具進行整合。降低本系統功能函 數和使用者介面之間的藕合，讓本系統更容易在使用者介面因為程式發展而變動時， 維持功能函數的正常。 本註解系統已設計和實作完成，可以展示出突破現有多媒體教學錄製系統的限制。

Design and Implementation of an Annotation System for

Multimedia Lecturing Players

.

Student：Yi-Shen

Lin Advisor：Dr. Deng-Jyi Chen

Department of Computer Science and Information Engineering

National Chiao Tung University

Abstract

In this thesis, we present the design and implementation of a multimedia annotation system for multimedia lecturing player. With the popularity of computers and the advance of multimedia technologies, several institutes have presented multimedia learning systems to help instructors to achieve better teaching quality. A multimedia learning system consists of two parts, a multimedia lecturing recorder and a multimedia lecturing player. A multimedia lecturing recorder can be used to create multimedia lecturing materials. On the other hand, a multimedia lecturing player can playback the recorded lecturing materials. However, current multimedia lecturing recorder is not efficient in reproducing or changing the lecturing contents, and the players do not have enough support for readers to write or manage notes. Therefore, this study aims to design and implement a multimedia annotation system for the multimedia lecturing player, such that users can add multimedia annotation and review lecturing materials more easily.

The presented multimedia annotation system can be used to make multimedia annotations, so that users can add not only text annotations but also video and interactive annotations. Additionally, the system provides annotation group function that allows users to categorize annotations, and annotation index function that allows users to link

multimedia annotation system can not only be used to highlight or make notes on the learning materials, but also to cross-refer annotations and the original lecturing materials very effectively. As for producers of learning material, this system can be used to add supplemental multimedia contents to reduce the demand of reproduction.

In this study we also apply design pattern technique in the design and implementation of the annotation system. Therefore, we can decouple the annotation system from the multimedia lecturing player and from the user interface, such that we can integrate the annotation system with various multimedia lecturing players or change user interface easily.

誌謝

感謝指導教授 陳登吉老師的耐心指導與教誨，老師不但在研究上給予我們方向與 指引，對我們的日常生活和健康也非常關心。感謝曾建超老師在百忙之中抽空對我們 的論文研究提供協助。 感謝實驗室裡的同學，在學業上互相幫助，讓我可以更快的了解課本裡所表達的 知識與技術。在技術上給我適度的支援，讓我可以更易容的找到搜尋的方向並且得到 技術的關鍵點。 感謝家人在我求學的過程上一路的支持，讓我在學習的同時不用擔心個人的經濟 問題，在疲備的時候有一個休息的地方。

目錄

摘要 ...i Abstract...ii 誌謝 ...iv 目錄 ...v 表目錄 ...vii 圖目錄 ...viii 一、 緒論 ...1 1.1 多媒體教學系統 ...1 1.2 註解的應用 ...1 1.3 動機與目的 ...1 1.4 研究方法與步驟 ...2 1.5 章節概要 ...3 二、 相關研究 ...4 2.1 註解的組成 ...4 2.2 多媒體教學錄製系統 ...5 2.2.1 多媒體講解錄製系統 ...5 2.2.2 多媒體教學播放工具 ...6 2.3 註解系統 ...8 2.3.1 文字註解系統 ...8 2.3.2 影片註解系統 ...10 2.3.3 既有多媒體教材的註解方法 ...12 2.4 設計樣式 ...13 三、 系統分析 ...16 3.1 理想的多媒體教學播放工具上的註解系統 ...16 3.2 多媒體學習註解系統的功能 ...16 3.2.1 註解多媒體教材 ...17 3.2.2 瀏灠已加註多媒體教材 ...17 3.2.3 列印已加註多媒體教材 ...18 3.2.4 支援多媒體的註解 ...19 四、 系統設計與實作 ...20 4.1 模組間的運作關係 ...20 4.2 通用的使用者介面 ...21 4.3 核心模組與使用者介面 ...22 4.4 多媒體教學註解系統與多媒體教學播放工具 ...23

五、 應用實例 ...25 5.1 教師加入補充教材 ...26 5.2 學生學習應用 ...28 5.3 學生複習應用 ...29 六、 結論 ...31 6.1 總結 ...31 6.2 未來方向 ...31 參考文獻或資料 ...33

表目錄

表 1: 多媒體教學錄製系統的比較表 ...6 表 2: Annotation type of PDF...10

圖目錄

圖 1: 多媒體教學錄製系統的架構圖 ...5 圖 2: 講解手播放工具的使用者介面 ...7 圖 3: Powercam 播放工具的使用者介面 ...8 圖 4: PDF-XChange 的註解形式。 ...9 圖 5: PDF-XChange 的註解管理。 ...9 圖 6: Youtube 的註解編輯畫面... 11 圖 7: Youtube 的註解編輯流程...12

圖 8: Façade Design Pattern ...13

圖 9: Bridge Design Pattern ...14

圖 10: Adapter Design Pattern...15

圖 11: 註解多媒體教材的使用流程 ...17 圖 12: 複習的使用流程-電腦輔助複習...18 圖 13: 複習的使用流程-紙張複習...18 圖 14: MLAS 的模組圖...20 圖 15: 使用者移動多媒體教學播放工具的示意圖 ...22 圖 16: 模心模組的結構 ...22 圖 17: 使用者介面和模心模組的結構 ...23 圖 18: Adapter 的結構 ...23 圖 19: MLAS 與講解手播放工具整合後的使用者介面...25 圖 20: MLAS 註解清單...26 圖 21: 點擊滑鼠 ...27 圖 22: 選擇影片註解 ...27 圖 23: 選擇影片路徑 ...28 圖 24: 改變註解的群組 ...28 圖 25: 選擇文字註解 ...29 圖 26: 改變註解群組 ...29 圖 27: 閱讀記錄 ...30 圖 28: 列印編輯 ...30

一、 緒論

1.1 多媒體教學系統

隨著電腦與網路的普及，利用數位學習系統進行教學，已成為教育非常重要的一 環，多媒體教學錄製系統利用將教師上課情形記錄下來的方式，讓教師可以減少重覆 教學的次數，而教師可以將錄製完成的多體教材放進資料庫中，讓學生透過遠距教學 在家裡就可以學習。多媒體教學錄製系統中包括負責製作教材的多媒體錄製工具與負 責播放教材的多媒體教學播放工具。

1.2 註解的應用

註解被廣泛的應用在各種數位系統中，包括用於多媒體教學的可即時錄製教材講

解的製作系統 (Real-Time Recordable Lecturing Content Creation System) [1]、用於影片

的 MultiMedia MultiModal Annotation Tool (M4Note)[2][3]、用於數位資料庫(Digital Library)的 Flexible Annotation Service Tool (FAST) [4]

可即時錄製教材講解的製作系統是一個多媒體教學教材製作器，結合註解與即時 錄製，把老師的敘述和解釋錄製到數位教材中，讓教師可以在教材上做記號、畫重點， 幫助學生的學習與理解。M4Note 是一個影片註解系統，可以在畫面中加入各種形狀 的註解，最後匯出符合 MPEG-7[5]規範的註解影片檔。FAST 利用註解讓使用者可以 與數位資料庫(Digital Library)中的數位內容產生關連，並利用這些關連作關連搜尋。

1.3 動機與目的

在數位學習的環境中，教師容易利用多媒體教學系統進行教學，但現有多媒體教 學系統存在許多限制與不足如下： 1. 重製教材花費大量時間 當教材製作完成之後，如果教材製作者需要增加額外內容至多媒體教材 中，可以利用多媒體教學系統的多媒體錄製工具重製教材，但是每次為了增 加小量內容就必須重製教材是非常花費時間的，而且當教材製作者和教師不 是同一個人的時候，教師要重製教材更是困難。

2. 筆記功能不足 當使用者針對多媒體教材的內容產生心得或需要製作筆記時，可以利用 外部的文件系統或用紙筆抄寫。但是用這樣的方法，筆記內容與教材內容間 缺少索引連結，而且沒辦法提供聲音及影片形式的筆記內容。 3. 重點複習困難 國小、國中的一節課為四十至五十分鐘，而一節演講往往超過一個小時， 對於具有長時間課程內容的多媒體教材，當學習者需要對其部份內容作重點 複習時，必需利用學習者在第一次學習時對其重點內容的段落位置與播放位 置的印象，方能複習其重點內容。 4. 補充內容模糊教材焦點 教材製作者為了讓初學者也能理解教材內容，往往在多媒體教材中加入 更多的基礎內容，來讓初學者更容易學習，但是用這樣的方法，對於進階的 學習者等於被迫接受重覆的內容。 可即時錄製教材講解的製作系統把註解應用在多媒體教學教材製作器中，幫助學 生更容易理解教師所要傳達的知識，而本研究希望將註解的概念引導至多媒體教學播 放工具中，設計並實作在多媒體教學播放工具上進行註解展示與管理的多媒體學習註 解系統 (Multimedia Learning Annotation System, MLAS)，而 MLAS 對不同的使用者有 不同的應用。對數位學習的學生，利用 MLAS 可以達到筆記與複習的需求。對於教師 可以利用 MLAS，記錄額外的講解、重點與補充資料，幫助學生的學習與理解。 也就是說，多媒體學習註解系統讓這個多媒體學系統不但支援學生的筆記功能更 讓教師可以靈活地使用多媒體教材。

1.4 研究方法與步驟

本研究首先研究現有的註解系統，其次分析多媒體學習註解系統的系統需求，然 後設計並實作多媒體學習註解系統，研究的五個步驟如下： 1. 相關文獻的收集與研究，包括註解、數位學習 2. 研究現有的多媒體教學錄製系統與註解系統，並找出現有註解系統使用在 多媒體教學播放工具時的限制 3. 分析理想的多媒體教學播放工具上的註解系統的系統需求

4. 分析 MLAS 與多媒體教學播放工具間的互動關係 5. 設計並實作 MLAS

1.5 章節概要

第一章， 緒論，介紹研究動機與目的以及研究方法。 第二章， 相關研究，研究註解系統與多媒體教學錄製系統。 第三章， 系統分析，說明什麼是理想的多媒體教學播放工具上的註解系統，並分析 MLAS 的系統需求。 第四章， 系統設計與實作。依第三音的系統分析並利用 Design Pattern 來設計並實作 MLAS。 第五章， 應用實例，分別從教師補充教材、學生學習與學生複習這三個方面來說明 MLAS 的使用實例。

二、 相關研究

2.1 註解的組成

數位內容 (Digital Content) 的註解有五個性質，包括 Identification、Cooperation、 Linking、Semantics、Materialization [7]分別說明如下：  識別 (Identification) 對於每一個數位內容或是註解，我們必須有唯一的識別 (Identification)，讓我們可以正確地對映 (Mapping)註解和數位內  合作 (Cooperation) 註解系統必須設置使用權限與使用者角色的機制提供網路上的使用者合 作與分享註解。使用權限分為不可讀寫 (Denied)、唯讀 (Read only)、可讀寫 (Read and write) 而註解分享的方式分為私有 (Private)、分享 (Shared)、公開 (Public)。

 連結 (Linking)

註解必須和數位內容連結才具有意義，註解與數位內容連結的形式有註 解連結 (Annotate link) 與相關連結 (Relate-to link)。每個註解都必須依附在 另一個數位內容或註解上，這種連結就是註解連結，而註解內可能參考其他 的數位內容或註解，這種連結就是相關連結。

 語意 (Semantics)

註解在實際的應用時有各種用途，常見的三種用途為學習 (Comprehension and study)、解釋(Interpretation and elucidation)、交流 (Cooperation and revision)

 實現 (Materialization)

註解的形式 (Sign of annotation) 包括文字形式 (Textual sign)、圖形形式 (Graphic sign)、影片形式 (Video sign)、以及聲音形式 (Auditive sign)。

2.2 多媒體教學錄製系統

多媒體教學錄製系統由兩部份組成：負責製作教材的多媒體錄製工具與負責播放 教材的多媒體教學播放工具。首先教師利用多媒體錄製工具製作完成多媒體教材，接 著將多媒體教材上傳至學習平台，然後學生再利用多媒體教學播放工具學習。學習平 台提供各種網路服務，包括數位版權管理、學習管理、課程管理等等，如圖 1。

資料庫

學習平台

Server side

閱讀端 Internet

End-user side

....

下載

上傳

教材 多媒體 教材 多媒體 教材 製作端

資料庫

學習平台

學習平台

Server side

閱讀端 Internet Internet

End-user side

.... ....

下載

下載

上傳

上傳

教材 多媒體 教材 多媒體 教材 多媒體 教材 多媒體 教材 製作端 製作端 圖 1: 多媒體教學錄製系統的架構圖

2.2.1 多媒體講解錄製系統

現有的多媒體教學錄製系統依教材錄製方式可分兩大類型：一類是以影片錄製的 方式記錄實體教學行為的影像錄製系統，另一類是以電腦播放數位教材，並錄製教學 筆跡的多媒體講解錄製系統，如：訊連科技的串流大師[9]、台灣數位學習科技的 Powercam[10]以及智勝國際科技的講解手[11]…等。 影像錄製系統因為利用攝影機的方式直接錄製教師在課堂上的教學情況，所以會 把課堂上不相關的內容也一併錄進影片中，而且攝影機的等級以及現場的環境會影響 影片的清晰度；多媒體講解錄製系統因為利用電腦播放並錄製，中間不需要使用攝影

另外現在利用網路來做為多媒體教材傳送與分享的媒介，多媒體教材的檔案大小 變得非常重要。影像錄製系統製作影片格式的多媒體教材，利用影片壓縮技術可以縮 減檔案大小。多媒體講解錄製系統因為把數位教材、教師講解分開儲存，所以可以製 作相對於影片格式檔案容量更小的多媒體教材。所以本研究選擇多媒體講解錄製系統 進行系統研究。 表 1: 多媒體教學錄製系統的比較表 影像錄製系統 多媒體講解錄製系統 錄製方式 攝影機錄製實體教學內容 電腦播放教材錄製筆跡與 講解內容 多媒體教材的清晰度 低 高 多媒體教材的格式 影片格式 自訂的多媒體教材格式或 影片格式 多媒體教材的檔案大小 大 小 多媒體教材的教材內容 實體教學 教材與教師講解 多媒體教學播放工具 可利用一般影片播放程式 需利用特別的播放程式

2.2.2 多媒體教學播放工具

為了讓多媒體學習註解系統可以與多媒體教學播放工具合作，本小節研究現有多 媒體講解錄製系統的多媒體教學播放工具包括講解手與 Powercam 的多媒體教學播放 工具。  講解手播放工具 講解手是由智勝國際科技股份有限公司製作的多媒體教學錄製系統，整 合了網路部落格樣板國度[13]、學習管理機制、數位版權管理機制…等。匯 出的多媒體教材格式包括講解手自訂的 BST 格式、Adobe 的 SWF[12]格式… 等。 播放講解手製作的多媒體教材需利用講解手播放工具，講解手播放工具 的使用者畫面包括播放畫面、課程管理、播放管理、課程訊息，如圖 2 所示。

播放畫面

課程管理

播放管理

課程訊息

筆跡

播放畫面

課程管理

播放管理

課程訊息

筆跡

圖 2: 講解手播放工具的使用者介面  Powercam 播放工具 Powercam 是由台灣數位學習科技股份有限公司製作的多媒體教學錄製 系統，匯出的多媒體教材格式包括 Microsoft Windows 的可執行檔[14]、Adobe 的 SWF[12]格式。

播放 Powercam 製作的多媒體教材需利用 Powercam 播放工具，Powercam 播放工具的使用者畫面包括播放畫面、課程管理、播放管理、課程訊息，如 圖 3 所示。

播放畫面

課程管理

播放管理

課程訊息

筆跡

播放畫面

課程管理

播放管理

課程訊息

筆跡

圖 3: Powercam 播放工具的使用者介面

2.3 註解系統

為了提供適合學習者作筆記的註解系統，本研究探討既存的註解系統所使用的註 解方法。本章節中將探討具有註解功能的文件瀏灠工具與具有註解功能的影片瀏灠工 具。我們稱具有註解功能的文件瀏灠工具為文件註解系統，如：PDF 文件註解系統的 XChange[16]；稱具有註解功能的影片瀏灠工具為影片註解系統，如：YouTube[17]。

2.3.1 文字註解系統

 PDF-XChange

PDF-XChange[16]是由 Tracker Software Products 公司所開發的一套編 輯、瀏覽 PDF 文件的文件處理系統，註解形式有文字形式的文字、文字方塊、 選擇性顯示的註解等，如圖 4 所示。由於註解直接顯示在文件內容中，所以

使用者可以直接對照註解與被註解的文件內容，而使用者還可以利用回覆功 能，對註解做補充，如圖 5 所示。 圖 4: PDF-XChange 的註解形式。 在註解管理的部份，註解清單讓使用者可以瀏灠目前所有的註解，註解 群組讓使用者可以分類註解，而且使用者可以利用註解清單中的註解來索引 被註解的文件內容，如圖 5 所示。 圖 5: PDF-XChange 的註解管理。 在 ISO-PDF[8]的規範中，對於註解的形式有相當完整的定義，如文字形 式的 Text、Free Text 等，圖形形式的 Circle、Line、Highlight 等，影片形式 有 Video，如表 2 所示。目前有許多註解形式尚未被完整實作，如 Video、 3D 等。

表 2: Annotation type of PDF

資料來源：ISO, PDF 1.7 www.iso.org

2.3.2 影片註解系統

 Youtube

光燈等。在註解顯示方面，藉由調整註解開始時間與註解結束時間來設定註 解的顯示，此外還可以加入暫停註解，讓影片停格，Youtube 註解編輯的使 用者介面如圖 6 所示。 圖 6: Youtube 的註解編輯畫面 Youtube 的註解編輯流程如圖 7 所示，首先依使用者需求選擇註解形式。 接著在播放畫面上點按滑鼠即可新增註解，由滑鼠點按的位置決定註解在播 放畫面顯示的位置。在畫面的下方可以利用拖拉的方式設定「註解的顯示時 間」與「註解的消失時間」，Youtube 註解系統會依此設定，當影片播放時， 隨著播放時間的進行，顯示與消失註解內容。選擇性的加入暫停標記，此標 記可以設定「暫停的開始時間」與「暫停的持續時間」，Youtube 註解系統會 依此設定，當影片播放而播放時間到達暫停標記的「暫停的開始時間」時， 即暫停影片播放並倒數「暫停的持續時間」，當倒數歸零時，取消暫停並開始 播放影片。選擇性的加入註解連結，此連結可設定連結位置，讓使用者在播 放影片時可連結至其他的 Youtube 影片。最後使用者利用檢視功能，預灠影 片與註解同步顯示的效果。

選擇註解形式 新增註解 調整出現與消失的時間 加入暫停 檢視 加入連結 選擇註解形式 新增註解 調整出現與消失的時間 加入暫停 檢視 加入連結 圖 7: Youtube 的註解編輯流程

2.3.3 既有多媒體教材的註解方法

本節將探討應用既有註解方法於多媒體教材上的可行性。  既有多媒體教學播放工具提供的註解方法 既有的多媒體教學播放工具利用附件檔案或是利用網頁整合的方法讓使 用者可以對多媒體教材加入註解，比如：講解手可以對個別的段落加入附件 檔案或是利用樣版國度[13]中的部落格功能對個別課程加入評論；Powercam 可以利用網路學習平台[15]對個別課程加入學習筆記，但是這樣的註解方法 有以下限制：  筆記內容與教材內容間缺少連結  多為文字或圖片的註解，缺少聲音與影片的註解  對註解管理的支援不足，如群組、索引  利用影片註解系統 我們可以將多媒體教材轉成影片格式後，使用影片註解系統為教材加入 註解，但是這樣的註解方法有以下限制：  需轉成影片格式  佔空間、清晰度低。  無法利用原始多媒體教學播放工具  失去多媒體教學系統的部份功能，如：課程段落、課程管理  多為文字或圖片的註解，缺少聲音與影片的註解  對註解管理的支援不足，如：群組、索引  利用影片編輯系統

我們可以將多媒體教材轉成影片格式後，使用影片編輯系統為教材加入 註解，將註解和教材影片疊合在一起，但是這樣的註解方法有以下限制：  影片編輯系統的輸出為影片檔，編輯完成後修改困難  所有的註解都必須展示在畫面中  編輯介面複雜  無法使用原始多媒體教學播放工具  失去多媒體教學系統的部份功能，如：課程段落、課程管理  沒有註解管理的功能，如：群組、索引

2.4 設計樣式

本研究應用軟體工程領域的設計樣式在系統設計與實作中，在本章節中介紹本研究所 應用的三種設計樣式，包括 Façade、Bridge 以及 Adapter[18]。

Façade Design Pattern 就是將多個模組定包裝成一個子系統並定義統一的高階介 面讓子系統更容易使用，其優點包括：避免外界觸及子系統的元件、促成外界與子系 統間的低度耦合以及將元件系統間的依存關係分層…等。在圖 8 中，Façade 知道子系 統內各類別負責處理的訊息內容，並且負責將外界的訊息轉換成適當訊息給子系統物 件；subsystem classes 包括許多小模組，實作子系統的功能，並且處理由 Façade 物件 所送來的訊息，但其沒有指回 Façade 的參考。

圖 8: Façade Design Pattern 資料來源：www.dofactory.com

對方，其的優點包括：將介面與實作隔離、易於擴充以及隱藏內部實作細節…等。在 圖 9 中，Abstraction 是抽象體的介面，負責維護指向 Implementor 物件的參考； RefinedAbstraction 擴充 Abstraction 所定義的介面；Implementor 是實作體的介面，通 常只包含基本的操作，提供給 Abstraction 以組出更高階的操作；ConcreteImplementor 具體實作 Implementor 所定義的介面；Client 是 Bridge Design Pattern 的使用者，利用 Abstraction 提供的介面完成需要的操作。

圖 9: Bridge Design Pattern 資料來源：www.dofactory.com

Adapter Design Pattern 就是將類別的介面轉換成外界所預期的另種介面，讓原本 介面不相容的類別可以整合在一起使用，其優點包括：包裝現有的類別或函式庫形成 我們需要的介面以及讓程式可以使用尚未定義的類別或函式庫。在圖 10 中，Target 定義 Client 所預期的介面；Adaptee 是需要被轉換的既有介面；Adapter 將 Adaptee 轉 換成 Target 的介面；Client 是 Adapter Design Pattern 的使用者，利用 Target 提供的介 面完成需要的操作。

圖 10: Adapter Design Pattern 資料來源：www.dofactory.com

三、 系統分析

利用多媒體講解錄製系統解決了影像錄製系統佔用記憶體空間、錄製困難等諸多 限制，但是既有的多媒體講解錄製系統還是有重製花費時間高、重複學習困難等限制。 本研究針對多媒體講解錄製系統的多媒體教學播放器設計並實作註解系統，並利用這 個註解系統來突破現有多媒體講解錄製系統的限制。

3.1 理想的多媒體教學播放工具上的註解系統

在第二章研究了既有多媒體講解錄製系統的限制，以及利用既有的影片註解系統 應用在多媒體教材做註解的限制，因此在本節中定義什麼是理想的多媒體教學播放工 具上的註解系統。理想的多媒體教學播放工具上的註解系統應該具備以下條件：  直接對映註解與多媒體教材內容 多媒體講解錄製系統會把教材和教師的講解與筆跡錄製下來，當使用者 要對多媒體教材加入註解時，註解內容往往和教材與教師的講解有關，所以 要能讓使用者直接對映教材內容與註解。  支援多媒體的註解 為了讓使用者可以利用註解系統代替多媒體講解錄製系統的重製功能， 以及讓使用者可以將補充的內容以註解的形式加入教材，註解系統必須支援 多媒體的註解，包括文字、圖片、聲音、網頁等。  提供移動、刪除、修改註解的功能  支援註解的管理功能 當註解的數量增加時，會造成使用者使用上的困難，所以需要有註解群 組、註解清單、註解閱讀記錄，幫助使用者管理註解。  註解系統必需能很容易和不同的多媒體教學播放工具做整合 目前的多媒體教學播放器的種類繁多，註解應該要可以在不同的播放器 上使用，所以註解系統必須容易和不同的播放器做整合。  支援註解列印的功能 註解列印的功能可以滿足使用者使用紙張閱讀註解的需求。

3.2 多媒體學習註解系統的功能

在本章節中，主要分三個部份說明 MLAS 的功能，包括「註解多媒體教材」、「瀏 灠已加註多媒體教材」以及「列印已加註多媒體教材」，並說明 MLAS 支援的多媒體 教材的格式。

3.2.1 註解多媒體教材

使用者可以利用 MLAS 對多媒體教材加入註解，如圖 11 所示。使用者利用多媒 體教學播放器播放下載的多媒體教材，當教材播放中有補充資料或心得筆記時，可以 利用新增註解的功能記錄補充資料或心得筆記。註解管理的功能可以將註解分類，最 後使用者可以將已加註多媒體教材匯出儲存使用。 下載教材 播放教材 新增註解 管理註解 儲存註解 管理註解 改變註解的段落 新增群組 改變註解的群組 註解多媒體教材的流程 下載教材 播放教材 新增註解 管理註解 儲存註解 管理註解 改變註解的段落 新增群組 改變註解的群組 註解多媒體教材的流程 圖 11: 註解多媒體教材的使用流程 註解多媒體教材的功能性分析：  下載、播放多媒體教材 利用 MPL 提供的下載、播放功能  新增註解 點選播放畫面，決定新註解的座標位置 輸入註解文字  註解管理 新增群組 改變註解的群組 改變註解的段落  儲存已加註教材

3.2.2 瀏灠已加註多媒體教材

用者可以由註解來讀取補充資料或心得筆記，同時可以利用註解清單和註解群組做重 點式的複習，如果有新的補充資料或心得筆記時，可以及時修改、更新註解。 圖 12: 複習的使用流程-電腦輔助複習 瀏灠已加註多媒體教材的功能性分析：  開啟已加註多媒體教材 由多媒體教學播放工具載入多媒體教材 由本註解系統載入註解  註解索引 由索引視窗讀取註解 利用註解索引改變多媒體教學播放工具播放時間與播放段落  閱讀記錄 記錄閱讀順序，包括播放時與段落 利用閱讀記錄回到之前的播放時間與段落

3.2.3 列印已加註多媒體教材

使用者可以利用 MLAS 列印已加註多媒體教材，如圖 13。首先利用群組功能協 助使用者選擇想要列印的註解，接著設定註解列印的格式，然後用預覽功能預覽列印， 確認無誤後列印註解。 圖 13: 複習的使用流程-紙張複習 列印已加註多媒體教材的功能性分析：  註解列印

選擇列印的群組 預覽 列印註解

3.2.4 支援多媒體的註解

本系統支援多媒體註解的內容形式包括：  文字  圖片  聲音  影片  互動式教材與網頁

四、 系統設計與實作

由於目前的多媒體教學播放工具種類繁多，並且希望利用同一個 MLAS 讓每一個 多媒體教學播放工具擁有註解的功能，所以 MLAS 的設計原則包括降低 MLAS 和多 媒體教學播放工具間的藕合以及降低功能函數和使用者介面間的藕合。 本論文應用設計樣式的技術設計、實作 MLAS，對於多媒體教學播放工具，降低 MLAS 和多媒體教學播放工具之間的藕合，讓 MLAS 更容易和不同的多媒體教學播放 工具進行整合；對於 MLAS 的使用者介面，降低 MLAS 功能函數和使用者介面之間 的藕合，讓 MLAS 在使用者介面變動時，維持功能函數的正常運作。

4.1 模組間的運作關係

MLAS 模組間的運作關係如圖 14 所示，上面是 MLAS 的使用者，下面是多媒體 教學播放工具(Multimedia Lecturing Player, MLP)。MLAS 利用 Façade Design Pattern 把 主要的功能函數包裝成核心模組(Core Module)，對於使用者介面(User Interface)，利用 Bridge Design Pattern 隔離使用者介面與核心模組，對於多媒體教學播放工具，利用 Adapter Design Pattern 隔離多媒體教學播放工具和核心模組，對於不同的多媒體教學 播放工具對映不同的 Adapter 組件。

MLP

USER

Façade Core Module

MLP1

Adapter1

MLP2

Adapter2

Bridge

User

Interface1

User

Interface2

…

…

MLAS

…

MLP

USER

Façade Core Module

MLP1

Adapter1

MLP2

Adapter2

Bridge

User

Interface1

User

Interface2

…

…

MLAS

…

Façade Core Module

MLP1

Adapter1

MLP2

Adapter2

Bridge

User

Interface1

User

Interface2

…

…

MLAS

…

圖 14: MLAS 的模組圖

4.2 通用的使用者介面

設計並實作一通用的使用者介面，讓 MLAS 更容易和不同的多媒體教學播放工具 做整合。以下說明什麼是通用的註解視窗、如何顯示註解視窗、如何整合註解視窗與 多媒體教學播放工具的播放視窗以及如何更新註解圖示位置。 在 MLAS 中，註解圖示顯示的位置和多媒體教學播放工具的播放畫面內容相關， 如果直接顯示註解圖示在多媒體教學播放工具的播放視窗上，當播放視窗移動時，註 解圖示自然會跟著多媒體教學播放工具的播放視窗移動，但是這樣的設計卻可能有以 下問題：  多媒體教學播放工具播放視窗難以取得 當多媒體教學播放工具的應用程式介面(Application programming interface,API)沒有提供取得播放視窗的方法時，可以從作業系統所提供的 API 強迫的取得其播放視窗。但是當 MLAS 的執行權限較低或多媒體教學播放工 具用自訂格式繪製播放視窗…等情況時，會增加利用作業系統的 API 取得播 放視窗的困難。  多媒體教學播放工具播放視窗的重繪 將 MLAS 的註解圖示顯示在多媒體教學播放工具的播放視窗上的方 法，就是在播放視窗重繪完成後再把註解圖示繪製在播放視窗上。但是這個 方法需要多媒體教學播放工具或作業系統提供 API，當播放視窗重繪完成 時，通知 MLAS。  MLAS 和多媒體教學播放工具間的依賴性過大 因為播放視窗難以取得以及重繪困難，所以對於不同的多媒體教學播放 工具，往往需要使用特別的方法。在這種情況下，必須涉入多媒體教學播放 工具的實作細節，增加 MLAS 與不同多媒體教學播放工具整合的難度以及維 護 MLAS 的難度。 通用的 MLAS 使用者介面必需減低 MLAS 使用者介面與多媒體教學播放工具播 放視窗的依賴性。本研究設計利用透明視窗實作 MLAS 的註解視窗，把註解圖示顯示 在註解視窗上。MLAS 註解視窗的好處如下：  減低 MLAS 和多媒體教學播放工具播放視窗的依賴性  無需取得多媒體教學播放工具播放視窗的完整控制，只需取得其大小與位置  把重繪問題委託給作業系統處理 顯示註解視窗時，首先透過多媒體教學播放工具的 API 取得多媒體教學播放工具 播放視窗的位置與大小，然後將 MLAS 的註解視窗覆蓋在多媒體教學播放工具的播放

MLAS 得到「播放視窗改變」的事件時，更新註解視窗的大小與位置以及 MLAS 註解 圖示的位置。當 MLAS 註解視窗隨多媒體教學播放工具播放視窗改變大小時，註解視 窗上註解圖示的相對位置必須跟著更改， 即顯示的註解位置 = 儲存的註解位置 * 視窗大小。 圖 15: 使用者移動多媒體教學播放工具的示意圖

4.3 核心模組與使用者介面

當 MLAS 和不同的多媒體教學播放工具整合時，需要特別的使用者介面，為了降 低 MLAS 功能函數和使用者介面的藕合，必須分離核心模組和使用者介面，本章節說 明本研究如何降低 MLAS 功能函數和使用介面的藕合。

首先 MLAS 利用 Façade Design Pattern，將註解管理模組(Annotation Manager Module)、群組管理模組(Group Manager Module)、索引管理模組(Index Manager Module)…等功能包裝成一個統一的模組，把這個模組稱為核心模組(Core Module)，如 圖 16。接著利用 Bridge Design Pattern，在核心模組和使用者介面間，實作 Bridge 組 件。使用者介面藉由 Façade 控制核心模組，而核心模組藉由 Bridge 組件控制使用者 介面，如圖 17 所示。

Façade

Core Module

Sign Module

Group Module

Body Module

Client

Façade

Core Module

Sign Module

Group Module

Body Module

Client

圖 16: 模心模組的結構

Pattern 可以讓系統易於擴充以及隱藏內部實作細節，所以使用者介面和模心模組便被 這兩個設計樣式分離了，如圖 17 所示。

Façade

Bridge

提供統一

介面

MLAS

User Interface

MLAS Core Module

Façade

Bridge

提供統一

介面

MLAS

User Interface

MLAS Core Module

圖 17: 使用者介面和模心模組的結構

4.4 多媒體教學註解系統與多媒體教學播放工具

為了讓 MLAS 容易和不同的多媒體教學播放工具做整合，必須降低 MLAS 和多 媒體教學播放工具之間的藕合。

4.4.1 利用 Adapter Design Pattern

利用 Adapter Design Pattern 分離 MLAS 核心模組和多媒體教學播放工具，只要對 不同多媒體教學播放工具實作特別的 Adapter 組件，就可以將 MLAS 和不同的多媒體 教學播放工具(MLP)整合。

Façade

Adapter

MLP

MLAS Core Module

Event

Control

Façade

Adapter

MLP

MLAS Core Module

Event

Control

利用 Adapter 包裝後，利用 Façade 控制核心模組，如圖 18 所示。  整合 MLAS 與多媒體教學播放工具的方法：

對個別的多媒體教學播放工具實作特別的 Adapter 組件，並利用 Adapter 包裝多媒體教學播放工具的 API。由於物件導向的特性與 Adapter Design Pattern 的應用，MLAS 的 Adapter 組件用特別的 Adapter 組件替換後，不用 修改 MLAS 的核心模組即可讓 MLAS 的核心模組使用這特別的 Adapter 組 件。

4.4.2 MLAS 與多媒體教學播放工具間的介面

由前面的系統分析以及系統設計，可以歸納出 MLAS 需要多媒體教學播放工具提 供以下的 API：  多媒體教學播放工具的播放控制 1. 開始播放 2. 暫停播放 3. 停止播放 4. 改變播放段落 5. 改變播放時間  取得多媒體教學播放工具播放視窗的狀態 1. 取得播放視窗的位置 2. 取得播放視窗的大小  取得多媒體教學播放工具播放的情況 1. 取得狀態 2. 取得播放段落 3. 取得播放時間 4. 取得課程 ID 5. 取得段落名稱  多媒體教學播放工具的事件 1. 事件--多媒體教學播放工具改變播放段落 2. 事件--多媒體教學播放工具改變播放時間 3. 事件--多媒體教學播放工具改變播放視窗

五、 應用實例

本論文應用在智勝公司的講解手播放工具為整合實例。MLAS 與講解手播放工具 整合後的使用者介面如圖 19 所示，圖片中間為原始的講解手播放工具的使用者介 面，左上為 MLAS 的閱讀記錄，左下為 MLAS 的註解清單，右上為註解形式選擇表 單，右下為控制表單。

閱讀記錄

註解清單

原始多媒體教學播放工具

閱讀記錄

註解清單

原始多媒體教學播放工具

圖 19: MLAS 與講解手播放工具整合後的使用者介面 在註解清單的部份，可以選擇以課程段落的方式來呈現註解，也可以選擇以群組 的方式來呈現註解，如圖 20 所示。

以段落顯示清單

_{以群組顯示清單}

以段落顯示清單

_{以群組顯示清單}

圖 20: MLAS 註解清單 以下章節從三種使用者的角度應用 MLAS，包括教師加入補充教材、學生加入註 解、以及學生複習。

5.1 教師加入補充教材

教師利用講解手錄製工具製作昆蟲生態的多媒體教材，在教材的蝴蝶段落中，教 師利用蝴蝶的圖片說明蝴蝶的生態，由於圖片不夠生動活潑，如果能在教材中加入蝴 蝶影片的補充教材，將可以讓教材更生動有趣。 首先在想加入註解的位置點按滑鼠，如圖 21 所示，並選擇影片註解形式，如圖 22 所示以及選擇影片的檔案路徑，如圖 23 所示，即完成新增註解的動作。最後教師透 過註解群組的功能，用滑鼠拖拉的方式，將註解分類為教師的註解，如圖 24 所示。

滑鼠點擊

滑鼠點擊

圖 21: 點擊滑鼠

選擇影片註解

選擇影片註解

圖 22: 選擇影片註解

選擇影片路徑

選擇影片路徑

圖 23: 選擇影片路徑 圖 24: 改變註解的群組

5.2 學生學習應用

學生利用講解手播放工具播放多媒體教材，並且可以利用 MLAS 把心得和感想用

註解的方式加進多媒體教材中。首先在想要加入註解的位置點按滑鼠、選擇文字註解， 如圖 25 所示。再輸入心得和感想，即完成加入註解的動作，最後學生可以透過註解 群組功能將註解分類至重點群組，如圖 26 所示。

選擇文字註解

選擇文字註解

圖 25: 選擇文字註解 圖 26: 改變註解群組

5.3 學生複習應用

當學生需要做重點式的複習時可以利用 MLAS 註解清單，直接讀取重點群組中的 註解，並且利用註解清單索引至被註解的教材內容，直接複習教師對重點內容的講解。 於複習完重點內容後再利用閱讀記錄回到原來多媒體教材播放的位置，如圖 27 所 示。最後 MLAS 的註解列印功能讓學生利用註解群組選擇需要列印的註解，如圖 28 所示。列印完成後，學生可以用紙張方式閱讀註解內容。

利用閱讀記錄

回到原來的播放位置

利用閱讀記錄

回到原來的播放位置

圖 27: 閱讀記錄

選擇要列印的群組

選擇要列印的群組

圖 28: 列印編輯

六、 結論

6.1 總結

既有的多媒體講解系統存在重製教材花費大量時間、筆記功能不足、重點複習困 難以及補充內容模糊焦點的問題。雖然可以利用影片註解系統的方法，註解轉換成影 片格式的多媒體教材，但這樣的方法卻會失去原來多媒體講解系統的優點，包括學習 管理功能、佔用較少的儲存空間…等。所以本研究提供一個多媒體教學註解系統，在 多媒體教學播放工具上進行註解展示與管理，提供學生方便記錄學習心得、標記重點 與製作筆記，而複習時則可以直接對照多媒影片與註解，並且配合智勝國際科技公司 的講解手為實作實例，對於其他的多媒體教學播放工具亦可以同樣方式使用多媒體教 學註解系統。

6.2 未來方向

Web2.0 的概念之一就是讓每個使用者都可以成為數位內容的提供者，而這種概念 讓知識籍由共享更容易的疊積，而多媒體教學錄製系統作為數位學習的一種工具，將 Web2.0 的概念引進多媒體教學錄製系統中，勢必會得到很好的結果。所以多媒體教學 註解系統未來可增加以下功能：  關鍵字網路搜尋功能 當學習者在利用多媒體播放工具學習時，往往會碰到不懂的單字或是不 常見的專有名詞，使用者可以利用網路功能，運用網路字典查找單字以及運 用網路搜尋引擎搜尋專有名詞。如果多媒體教學註解系統和網路服務作結 合，讓使用者直接利用多媒體教學註解系統使用前述的網路服務，將簡化使 用者查找的複雜度，同時節省使用者的時間。  Web 分享功能，讓使用者上傳註解和別人分享 利用 Web 分享功能，讓使用者容易和別人分享註解，利用這種功能讓一 般的使用者從單純資訊接收者的位置轉到資訊發送者的位置，由於資訊來源 增加，讓知識更快速的疊積。  多人共同編輯註解功能 利用多人共同編輯註解的功能讓教材具有更多的彈性，同一份教材可以 從不同角色、不同職燉的人身上，得到各種不同的註解。  跨播放工具的註解管理功能 既有的多媒體教學播放工具種類繁多，同一個使用者使用不同多媒體教

教材上整合一份統一的筆記。利用多媒體教學註解系統，使用者得到一個橫 跨不同多媒體教學播放工具的橋梁，利用跨播放工具的註解管理功能，使用 者可以在不同系統的教材中快連的查找需要的內容，並且利用多媒體教學註 解系統中統一的筆記，選擇播放不同格式的多媒體教材。

參考文獻或資料

[1] Hong-Chi Chen, “The Design and Implementation of a Real-Time Recordable Content Creation System”, Master thesis of N.C.T.U., Taiwan, 2002

[2] R. Goularte, J. A. Camacho-Guerrero, V. R. Inácio, R. G. Cattelan, M. G. C. Pimentel, “M4note: a multimodal tool for multimedia annotation”, In Proceedings of the 2nd IW3C2 Latin American Web Congress, pp. 142–149, 2004.

[3] R. Goularte, R. G. Cattelan, J. A. Camacho-Guerrero, V. R. Inácio Jr., M. G. C.

Pimentel, “Interactive Multimedia Annotations: Enriching and Extending Content”, In ACM DocEng, pages 84–86, 2004

[4] M. Agosti, N. Ferro, “A System Architecture as a Support to a Flexible Annotation Service”, Lecture Notes in Computer Science, Vol. 3664, pp. 147-166, 2005 [5] ISO/IEC, ” MPEG-7 Overview”, October, 2004, [On-line]. Available:

www.chiariglione.org/mpeg

[6] M. Agosti, N. Ferro, “Annotations: Enriching a digital library”, T. Koch and I. T. Solvberg (Eds.): In Proceedings of the 7th European Conference on Research and Advanced Technology for Digital Libraries. Lecture Notes in Computer Science, vol. 2769, pp. 88-100, Springer, Heidelberg, Germany, 2003.

[7] M. Agosti, N. Ferro, “A Formal Model of Annotations of Digital Content”, ACM Transactions on InformationSystems,Vol.26, No.1, Article3, November 2007 [8] ISO, “Document management—Portable document format—Part 1: PDF 1.7”

32000-1:2008

[9] 訊連科技，串流大師，[On-line]. Available: tw.cyberlink.com

[10] 台灣數位學習科技，Powercam，[On-line]. Available: www.powercam.com.tw [11] 智勝國際科技，”講解手”，[On-line]. Available: www.caidiy.com

[13] 智勝國際科技，樣版國際，[On-line]. Available: www.soezblog.com [14] Microsoft, [On-line]. Available: www.microsoft.com

[15] 台灣數位學習科技，Powercam.cc，[On-line]. Available: www.powercam.cc [16] Tracker Software Products, PDF Xchange Viwer, [On-line]. Available:

www.docu-track.com

[17] Google, Youtube, [On-line]. Available: www.youtube.com

[18] Gamma, Johnson, Helm,Vlissides, “Design Patterns: Elements of Reusable Object-Oriented Software”, Addison Wesley Longman,1995