互動式多媒體的視覺化劇情編輯機制應用於多媒體試題樣板套用系統的實作

全文

(1)國立交通大學資訊工程學系碩士論文互動式多媒體的視覺化劇情編輯機制應用於多媒體試題樣板套用系統的實作 The Design and Implementation of a Multimedia Test Question Template System Based on an Enhanced Visual Scenario Authoring Tool. 研. 究. 生：江書瑩. 指導教授：陳登吉教授. 中華民國. 九十四年. 七月.

(2) 互動式多媒體的視覺化劇情編輯機制應用於多媒體試題樣板套用系統的實作 The Design and Implementation of a Multimedia Test Question Template System Based on an Enhanced Visual Scenario Authoring Tool. 研究生：江書瑩. Student : Shu-Ying Chiang. 指導教授：陳登吉. 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 2005 Hsinchu, Taiwan, Republic of China.. 中華民國九十四年七月.

(3) 互動式多媒體的視覺化劇情編輯機制應用於多媒體試題樣板套用系統的實作學生：江書瑩. 指導教授：陳登吉博士. 國立交通大學資訊工程學系碩士班. 摘要近年來，互動式多媒體的應用越來越廣泛，需求量也越來越大。編輯互動式多媒體的工作已從專業的編輯人員落到一般使用者身上，因此互動式多媒體的編輯工具相對的必須根據目前的需求做一些調整。首先，由於編輯的內容越來越多采多姿，包羅萬象，因此需要越豐富的劇情。故互動式多媒體編輯工具需提供條件式的劇情編輯能力，讓編輯者能夠編輯出更生動活潑的劇情。也因為使用這些互動式多媒體編輯工具的人越來越多，且其中包含了許多沒有程式背景的使用者，因此我們提出了視覺化的劇情編輯環境，讓使用者編輯時能更簡易，更容易上手。除了以視覺化的編輯環境來幫助一般使用者進行編輯之外，對於重複性高的互動式多媒體，為了簡化使用者在編輯時的一些重複性，我們提出樣板套用的概念，分析互動式多媒體的樣板性，定義互動式多媒體的樣板種類，以及樣板套用如何提升編輯工作的效率。最後為了不讓使用者辛辛苦苦編輯好的互動式劇情輕易被盜用，我們也提出了一個劇情保護機制，讓使用者能夠自行對於重要的劇情進行保護，以防止辛苦編輯好的劇情經由網路被隨意盜用觀看。. i.

(4) The Design and Implementation of a Multimedia Test Question Template System Based on an Enhanced Visual Scenario Authoring Tool. Student：Shu-Ying Chiang. Advisor：Dr. Deng-Jyi Chen. Department of Computer Science and Information Engineering National Chiao Tung University. Abstract The interactive multimedia presentation has played an important role in today’s digital content area and it will become a mainstream for digital content presentation approach. In general, to create an interactive multimedia presentation content, creators have to have good programming skill and usually have to spend a great deal of effort in order to accomplish the task. Recently, the concept of “interactive multimedia presentation templates” has been proposed to ease the task of multimedia presentation creation. In this thesis research, we focus on the study of “Interactive Multimedia Test Question Template” for the multimedia test question creation, which can be used to evaluate learners’ understandings on a target subject after studying it. Specifically, hundreds of customized Multimedia Test Question Template is catalogued and created using an Enhanced Visual Scenario Authoring Tool. Also, a template replacing system that can be used to create the target Multimedia Test Question is designed and implemented. Several visual scenario authoring mechanisms are proposed and enhanced on an existing authoring tool (編輯手) to make various templates creation possible. A prototype system has constructed and used to create multimedia test questions to demonstrate its applicability and feasibility of the proposed approach.. ii.

(5) 誌謝本論文承蒙指導教授陳登吉老師耐心指導與教誨，陳老師不僅在學術上給予我相當多的指導與鼓勵，在日常生活上也對我非常關心，常常會跟我們聊天分享人生的經驗，也因此我的研究生生涯過的相當積極充實。本論文亦在老師不厭其煩的更正與協助下順利完成，在此特對陳登吉老師致上無限的感激。此外，我要感謝我的同學以及學弟妹在生活以及課業上給予我相當大的協助。尤其是同窗兩年的實驗室同學直穎、宇涵、京荃、宜靖，很慶幸能夠跟他們一起度過兩年的研究所生活，能夠結交到這些優秀的好朋友是我兩年來最大的收穫。最後，感謝養育我、栽培我的父母在背後的支持與鼓勵，使我得以專心完成論文無後顧之憂，也才能有今日的我，謝謝。. iii.

(6) 目錄摘要.......................................................................................................................................................... I. ABSTRACT ................................................................................................................................................. II. 誌謝............................................................................................................................. III 目錄............................................................................................................................. IV 表目錄......................................................................................................................... VI 圖目錄........................................................................................................................VII 一、. 緒論................................................................................................................1. 1.1 互動式多媒體的簡介................................................................................................................1 1.2 動機與目的 ...............................................................................................................................3 1.3 研究方法與步驟........................................................................................................................6 1.4 章節概要....................................................................................................................................6. 二、. 相關研究........................................................................................................7. 2.1 現有互動式多媒體編輯工具的介紹 ..........................................................................................7 2.1.1. Macromedia Flash ..........................................................................................................7. 2.1.2. Macromedia Authorware ................................................................................................8. 2.1.3. Microsoft PowerPoint ..................................................................................................9. 2.1.4. 編輯手 ............................................................................................................................10. 2.2 現有互動式多媒體編輯工具的比較 ........................................................................................12 2.3 理想的互動式多媒體編輯工具 ................................................................................................12 2.4 選擇編輯手加以延伸................................................................................................................13. 三、. 系統需求分析..............................................................................................15. 3.1 條件式劇情的種類..................................................................................................................15 3.2 視覺化的編輯方法..................................................................................................................16 3.2.1. 視覺化語言的介紹 ........................................................................................................16. 3.2.2. 圖示與視覺化語言的關係 ............................................................................................17. 3.2.3. 視覺化的劇情編輯方法 ................................................................................................17. 3.3 多媒體試題樣板......................................................................................................................18 3.3.1. 多媒體試題的組成 ........................................................................................................18. 3.3.2. 多媒體試題的編輯步驟 ................................................................................................20. 3.3.3. 多媒體試題樣板套用系統的功能需求.........................................................................24. 3.4 劇情保護機制..........................................................................................................................25. 四、. 系統設計與實作..........................................................................................27 iv.

(7) 4.1 條件式劇情的實作..................................................................................................................27 4.2 條件式劇情的視覺化編輯......................................................................................................28 4.3 多媒體樣板套用系統的設計與實作......................................................................................34 4.3.1. 系統架構及模組 ............................................................................................................34. 4.3.2. 套用 Data 實作 ..............................................................................................................36. 4.3.3. 套用 Control 實作 ........................................................................................................40. 4.4 劇情保護機制的設計與實作..................................................................................................43. 操作介面 ........................................................................................................................43. 4.4.2. 劇情保護機制系統流程 ................................................................................................44. 五、. 4.4.1. 實作範例......................................................................................................45. 5.1 條件式劇情範例—複選題......................................................................................................45 5.2 多媒體試題樣板套用系統—套用 DATA ................................................................................52 5.3 多媒體試題樣板套用系統-套用 CONTROL ...........................................................................59 5.4 劇情保護機制..........................................................................................................................61. 六、. 結論..............................................................................................................63. 6.1 總結 .........................................................................................................................................63 6.2 未來發展方向..........................................................................................................................64. 參考文獻或資料..........................................................................................................65. v.

(8) 表目錄表 1-互動式多媒體的應用.....................................................................................................................1 表 2-互動式多媒體編輯工具的比較...................................................................................................12. vi.

(9) 圖目錄圖 1-互動式多媒體試題題目呈現.........................................................................................................2 圖 2-動態呈現不同回饋.........................................................................................................................3 圖 3-FLASH 的操作介面 .........................................................................................................................7 圖 4-AUTHORWAR 的操作介面 ..............................................................................................................9 圖 5-POWERPOINT 操作介面 .................................................................................................................10 圖 6-編輯手編輯內容頁面的操作介面 ............................................................................................... 11 圖 7-編輯手編輯劇情頁面的操作介面 ............................................................................................... 11 圖 8-互動式多媒體內容結構圖 ...........................................................................................................19 圖 9-多媒體試題編輯流程 ...................................................................................................................21 圖 10-多媒體試題的重複性 .................................................................................................................22 圖 11-多媒體試題編輯流程(重複性)...................................................................................................23 圖 12-加入樣板套用的多媒體試題編編輯流程..................................................................................23 圖 13-循環演出的 PARSING TREE 範例 ...............................................................................................28 圖 14-劇情編輯系統的系統架構.........................................................................................................29 圖 15-循環控制的對話表單.................................................................................................................30 圖 16-條件控制的對話表單.................................................................................................................31 圖 17-設定條件式的對話表單.............................................................................................................32 圖 18-設定成立劇情的對話表單.........................................................................................................33 圖 19-多媒體試題樣板套用系統的系統架構 .....................................................................................34 圖 20-多媒體試題樣板套用系統的系統模組 .....................................................................................35 圖 21-多媒體試題樣板套用系統的使用者操作流程 .........................................................................36 圖 22-套用 DATA 的流程.......................................................................................................................37 圖 23-套用動畫的流程 .........................................................................................................................38 圖 24-套用動畫 .....................................................................................................................................40 圖 25-套用 CONTROL(簡易套用)的流程 ..............................................................................................41 圖 26-套用 CONTROL(進階套用)的對應設定......................................................................................42 圖 27-套用 CONTROL(進階套用)的系統流程 ......................................................................................42 圖 28-劇情保護使用者操作介面 .........................................................................................................43 圖 29-劇情保護機制系統流程 .............................................................................................................44 圖 30-設定條件控制劇情.....................................................................................................................45 圖 31-條件控制對話表單.....................................................................................................................46 圖 32-設定條件式對話表單.................................................................................................................46 圖 33-條件控制對話表單(條件式已設定) .........................................................................................47 圖 34-設定成立劇情對話表單.............................................................................................................47 圖 35-設定不成立劇情對話表單.........................................................................................................48. vii.

(10) 圖 36-條件控制對話表單(均已設定) .................................................................................................49 圖 37-條件控制設定完成.....................................................................................................................49 圖 38-樣板系統所提供之試題樣板.....................................................................................................52 圖 39-套用影片.....................................................................................................................................53 圖 40-選擇影片.....................................................................................................................................53 圖 41-完成套用影片.............................................................................................................................54 圖 42-套用聲音.....................................................................................................................................54 圖 43-選擇聲音.....................................................................................................................................55 圖 44-套用文字.....................................................................................................................................55 圖 45-輸入文字.....................................................................................................................................56 圖 46-套用文字之後的結果.................................................................................................................56 圖 47-套用圖片.....................................................................................................................................57 圖 48-選擇圖片.....................................................................................................................................57 圖 49-套用圖片之後的結果.................................................................................................................58 圖 50-套用完成結果.............................................................................................................................58 圖 51-套用劇情.....................................................................................................................................59 圖 52-選擇劇情樣板.............................................................................................................................60 圖 53-設定劇情對應關係.....................................................................................................................60 圖 54-保護劇情.....................................................................................................................................61 圖 55-使用者認證視窗.........................................................................................................................62. viii.

(11) 一、緒論 1.1. 互動式多媒體的簡介. 在 Zanichelli 編輯的 Sailing Across 辭典當中對互動式多媒體下了一個定義[1]: “Interactive Multimedia is an application involving substantial user input or control and presenting at least two of the following: text, graphics, sound, image, video, and animation. Applications can be in the areas of education, entertainment, information and publishing, and transactions.” 「互動式多媒體是一種與使用者真實的輸入及控制有關的應用，且以下的內容: 文字，圖表、聲音、圖片、影片和動畫，至少包含兩項以上。其應用可能是在教育，娛樂，資訊，出版或是交易的領域上。」首先我們先了解什麼是多媒體。多媒體是指結合多種媒體的表達方式來呈現所要展現的意思；其中不僅包括平面文字、圖片、聲音、動畫及影片均可搭配。此種表達方式多藉由電腦或其他電子設備來傳送。而互動式多媒體指的就是能讓使用者更進一步控制且適時地展現其所選取的物件，讓使用者與多媒體的溝通不再是單方面的，而是能即時的雙向溝通。傳統單向播放的多媒體已無法滿足現在使用者的需求，良好的溝通應建立於雙方都可以互動地表達彼此的想法，當使用者在操作的過程當中，一但有了新的想法或興趣，能夠即時的根據自己的需求來做不同的互動，如此不僅讓使用者更有臨場感，還能讓使用者收到更多層面的訊息。表 1 將介紹目前互動式多媒體在不同領域的一些應用。[7][10][14] 表 1-互動式多媒體的應用應用. 互動式多媒體. 簡報. 互動式多媒體簡報. 教育. 互動式多媒體教材，互動式多媒體試題. 電子出版. 電子報，電子書. 娛樂. 電子賀卡，遊戲. 旅遊. 多媒體導覽系統. 1.

(12) 由以上各種的應用可以看出來，互動式多媒體的使用已經越來越廣泛，這是因為互動式多媒體包含了多媒體的聲光效果以及互動式的雙向溝通，直接給了使用者視覺及聽覺的刺激，因此許多應用都趨向於使用互動式多媒體。也因為互動式多媒體在我們生活當中越來越重要，應用越來越廣泛，所以需要的互動式劇情也越來越豐富。以下我們實際以互動式多媒體試題為例子，了解一下如果試題用互動式多媒體的方式呈現，會有怎樣的效果。 (1). 首先作答者會看到如下圖的多媒體試題題目呈現。. 圖 1-互動式多媒體試題題目呈現. (2). 當使用者作答之後，會動態判斷使用者答案的正確性，並給予不同的反應。如下圖所示，當作答者選擇了正確答案之後，就會出現答對了的回饋訊息，如果作答者選擇了錯誤的答案，就會出現答錯的訊息，並告知正確答案為何加深作答者的印象。. 2.

(13) 選擇了套餐A和套餐C (正確答案). 選擇了套餐A和套餐B (錯誤答案). 就會出現答對了的動畫觀看答案. 觀看答案. 就會出現答錯的訊息，並解釋正確答案. 圖 2-動態呈現不同回饋. 由以上的例子我們可以發現，以互動多媒體來做試題不僅更生動有趣，作答完畢之後還能即時的得到回應，測驗及學習效果都會比傳統的紙筆測驗好很多，因此此種擁有豐富劇情的互動式多媒體是被需要的。. 1.2 動機與目的由上節我們了解到了互動式多媒體的重要性，因此我們開始探討要如何編輯出如這樣子的互動式多媒體。我們實際以 Flash 做為編輯的工具，了解一下如何用 Flash 編輯出上述的互動式多媒體。 3.

(14) 1 2. 一開始先將所有要用到的多媒體檔案匯入，調整其大小並放到適當的位置。為所有多媒體物件定義互動效果，為了編輯出上述的互動式多媒體試題，必須手動撰寫以下的程式碼: 2.1. 定義區域變數，做為之後判斷物件是否有被按下的依據。 A_selected = "false"; B_selected = "false"; C_selected = "false"; stop();. 2.2. 為每個答案選項的圖片定義名稱，並寫程式碼設定按下事件的動作。按下事件的動作包括把之前定義的區域變數設成 true，以及改變答案選項的位置。. on (press) { _root.A_selected = "true"; _root.AText._x = _root.AText._x-180; _root.AText._y = _root.AText._y+130; }. 2.3. 設定按下觀看答案之後的互動，在觀看答案圖片的按下事件中判斷是否正確答案選項的圖片有被按下且非正確答案的圖片沒有被按下，如果是的話就跳到影格 2，也就是跳出正確答案的訊息，如果否的話就跳到場景 2，也就是答錯訊息。. on (press) { if ((_root.A_selected == "true") && (_root.B_selected == "false") && (_root.C_selected == "true")) { gotoAndPlay(2); } else { gotoAndPlay("場景 2", 1); } }. 4.

(15) 實際以 Flash 編輯過後，我們發現以 Flash 來編輯有以下一些限制: . 雖然 Flash 提供了條件式的劇情編輯，支援強大的劇情編輯能力，但編輯上述互動式劇情時必須手動撰寫程式碼，所以編輯者必須要具有一定的程式背景，一般的使用者不易上手。. . 編輯步驟太過複雜，必須花費大量的時間及心力才能編輯好一份互動式多媒體。. . 對於互動式劇情並無提供保護。劇情的編輯往往需要很多創意且編輯起來也很耗時，因此編輯者並不希望辛辛苦苦編輯好的劇情被隨意觀看盜用。以上述編輯試題為例，當按下觀看答案之後會去做一些邏輯判斷來判斷選擇的答案是否為正確答案，並且會根據判斷的結果演出不同的劇情。編輯者可能不希望答案被隨便觀看，因此會希望保護此部分的劇情。因此針對以上幾點我們提出了以下的解決方法:. (1) 豐富劇情編輯: 條件式劇情控制: 除了一般的非條件式控制之外，還提供了條件式的劇情控制來達到更強大的劇情編輯能力。 (2) 方便編輯: 視覺化的劇情編輯環境: 以視覺化的編輯提供使用者更簡單及友善的編輯環境。樣板套用系統: 對於重複性高的內容(例如:英文試題)，可經由樣板套用系統來簡化編輯的步驟，節省人力以及時間的花費。 (3) 數位內容保護: 劇情保護機制: 讓使用者可自行對於重要的劇情進行保護。因此我整體的研究目標如下: . 為了讓沒有程式背景的使用者都能夠很輕易的編輯出一份有豐富互動式劇情的互動式多媒體，我們希望建立一個『視覺化的劇情編輯環境』，並加上『條件式劇情控制』的能力，讓使用者不需要撰寫程式就能夠編輯出充滿變. 5.

(16) 化的劇情。 . 對於編輯像試題這類重複性高的內容的使用者，為了簡化她們的編輯步驟，我們提供了一個『多媒體試題樣板套用系統』，讓她們能夠經由樣板套用的方式來節省編輯時間及步驟。. . 為了讓使用者可以自行對於重要的互動式多媒體劇情進行保護，我們提供了一個『劇情保護機制』，讓使用者在編輯的時候就能輕易的對於內容中想要保護劇情進行保護。. 1.3. 研究方法與步驟. 首先我們會先了解目前互動式多媒體的需求，接著探討現有的互動式多媒體編輯工具特性，並針對其不足與限制提出解決的方法。之後針對我們提出的方法做需求分析以及實作，詳細的步驟條列如下: (1) (2) (3) (4) (5) (6) (7). 了解目前互動式多媒體的需求情況探討現有互動式多媒體編輯工具的不足分析所需條件式劇情的種類分析視覺化的編輯方法根據使用者的編輯步驟提出樣板套用觀念，並分析樣板套用的種類分析劇情保護機制的需求設計並實作出視覺化的劇情編輯環境、多媒體試題樣板套用系統、劇情保護機制。. 1.4. 章節概要. 第一章，我們提出撰寫本篇論文的動機與目的，以及研究方法與步驟。第二章，分析目前多媒體編輯工具的特性，探討其限制及不足。第三章，針對提出的解決方法進行功能需求分析。第四章，以編輯手做為基礎，加以改良設計實作出符合論文目標的互動式多媒體編輯工具以及多媒體試題樣板套用系統。第五章，以實際範例示範如何使用改良過後的編輯手編輯出有條件式劇情的互動式多媒體，如何使用多媒體試題樣板套用系統來編輯出一份試題，以及為互動式劇情做保護第六章，作一個總結，並對未來的發展提出一些建議。. 6.

(17) 二、相關研究 2.1 現有互動式多媒體編輯工具的介紹目前市面上已有許多編輯互動式多媒體的工具，代表性的專業編輯工具有: Macromedia Flash、Macromedia Director以及Macromedia Authorware；代表性的一般使用者編輯工具有:編輯手、Hyper Card以及 Microsoft PowerPoint，以下分別為它們做一些介紹[11][12]:. 2.1.1 Macromedia Flash Flash 是 Macromedia 公司所推出的軟體，它是專門用來設計互動式多媒體動畫的軟體。FLASH 製作動畫的原理是將每一種即定的多媒體元件，如圖片、聲音、影像…等，以成員角色(Symbol)的方式展現，配合在舞台(Stage) 上的安排及時間軸(Timeline)的應用，讓各種元件緊密結合在一起。Flash 的操作介面如下圖所示:. 1. 4. 7. 2. 圖 3-Flash 的操作介面 7. 3. 5. 6.

(18) 1.下拉式功能表選單. 2.時間軸面板. 共由 10 個功能表構成，是指定 Flash 構成要素的選單。由影格和圖層組成，可以新增影格和關鍵影格來製作想要的動畫. 3.舞台(Stage). 工作進行中的畫面。. 4.工具箱. 工具箱內的工具可建立、修改文字與圖像。. 5.面板. 其他各種類的面板。. 6.動作面板. 設定互動，撰寫 ActionScript 的面板。. 7.屬性面板. 顯示物件屬性的面板。. 雖然 Flash 的功能強大，但缺點是必須要有一些電腦與美工的基礎，且對時間軸的觀念要很清楚才容易上手，此外在 Flash 中如果要編輯互動的話，使用者必須透過手動撰寫 ActionScript 來定義物件之間的互動，例如我們希望物件一被按下之後跳到場景二的影格一，我們就必須在物件一的動作面板寫下: on (press) { gotoAndPlay("場景 2", 1); }. 2.1.2 Macromedia Authorware Authorware 也是 Macromedia 提供的一個互動式多媒體編輯工具，它是一種基於圖示(Icon)和流線(Line)的流程圖導向式的編輯軟體。Authorwar 允許使用者經由編輯流程圖的方式來控制物件的呈現，也提供了一個簡單的 script language 讓使用者能夠對資料做運用或計算。以下透過下圖簡單說明一下 Authorwar 的操作介面:. 8.

(19) Presentation window Design window Icon palette. 圖 4-Authorwar 的操作介面 (1). Presentation window: 用來編輯多媒體物件的位置、大小、版面並用來預覽編輯後的結果。. (2) (3). Design window: 用來設計多媒體物件的呈現順序。 Icon palette: 包含許多用來表示不同類型的多媒體物件以及它們的邏輯控制的圖示。此外如果想要用 Authorwar 編輯出類似條件式這種比較豐富的劇情，和 Flash 一. 樣使用者都必須手動撰寫 script language。. 2.1.3 Microsoft PowerPoint PowerPoint 是微軟公司所開發的簡報只做軟體，常用於教育訓練、公司介紹、讀書報告…等等。PowerPoint 將簡報分成頁面與許多的簡報物件，使用者可以自行選擇需要的物件在頁面上組成簡報，當中最主要的物件有文字方塊、圖片物件以及繪圖物件。 PowerPoint 的操作介面如下圖所示，所有的功能都可以在主功能表當中找到，為了方面使用，系統也提供了一些浮動的工具列，可以直接叫出常使用的功能，但缺點是支援的功能太過簡單，尤其是互動的部分，僅提供很簡單的互動效果，因此編出來的互動式多媒體效果有限。. 9.

(20) 主功能表. 工具列. 投影片編輯區. 工作窗格. 投影片縮圖. 檢視模式切換鈕. 繪圖工具列. 圖 5-PowerPoint 操作介面. 2.1.4 編輯手編輯手是由智勝國際科技所發展的，是一套具有劇情式與動畫式的互動式多媒體編輯工具，透過引導式的操作設計，不需撰寫程式，輕輕鬆便可完成編輯。編輯互動方面，提供了基本的互動功能，且不需要手動撰寫程式碼，只需經由拖拉就可以輕易完成一個互動選單，製作出創意十足的互動式多媒體。製作出來的互動式多媒體內容，不僅能夠輕輕鬆鬆轉成 Javascript 語言格式，適用於任一瀏覽器播放；也有提供轉成 Scorm 國際標準的功能，使製作出來的教材，具有標準的格式，促成教材能在各學習平台間流通自如，擴大資源互通與應用。. 10.

(21) 編輯手的操作介面最主要分成編輯內容頁面以及編輯劇情頁面，分別如下所示:. 編輯模式. 編輯區. 工具列圖 6-編輯手編輯內容頁面的操作介面. 圖 7-編輯手編輯劇情頁面的操作介面. 11.

(22) 由以上操作介面我們可以發現編輯手擁有人性化的介面，直覺式的操作，不用撰寫任何文字程式碼即可完成編輯，美中不足的是提供的互動有限，並未提供條件式劇情的編輯，且目前無樣板套用機制，無法經由樣板套用來簡化使用者的編輯步驟，除此之外如同其他的編輯工具，均尚未對於編輯內容中的互動式劇情提供保護機制，無法讓編輯者對於辛辛苦苦編輯好的互動式劇情做保護。. 2.2 現有互動式多媒體編輯工具的比較了解了目前互動式多媒體編輯工具的特性之後，我們分別就其各種支援度來做一個比較，結果如下表所示，專業的編輯工具雖然有提供比較強大的劇情編輯能力，不過編輯方法是要手動撰寫文字程式碼，且操作上比較複雜，不易上手；一般使用者的編輯工具雖然比較容易使用，不過無法編輯出有條件式的豐富劇情。且不管是專業編輯工具或是一般使用者的編輯工具，大部分都沒有提供劇情保護機制，也沒有一個成熟完善的樣板套用機制。表 2-互動式多媒體編輯工具的比較描述檔支援編輯條件式條件式劇情劇情方式. 容易樣板套劇情保轉成網上傳上手用機制護機制頁格式機制. Macromedia Flash. √. 手動撰寫程式碼. N/A. N/A. N/A. √. N/A. Macromedia Director. √. 手動撰寫程式碼. N/A. N/A. N/A. √. N/A. 編輯手. √. 無開放編輯. √. N/A. N/A. √. √. Hyper Card. N/A. N/A. √. N/A. N/A. N/A. N/A. Microsoft PowerPoint. N/A. N/A. √. N/A. N/A. √. N/A. 2.3 理想的互動式多媒體編輯工具在分析和評估目前互動式多媒體編輯工具的優缺點之後，我們綜合出一個理想的互動式多媒體編輯工具應該要符合下列三個特性: (1)支援編輯豐富的劇情 (2)方便編輯 (3)支援劇情保護，以下我們就對這三個特性做詳細的介紹。. 12.

(23) 1. 【支援編輯豐富的劇情】: 由於互動式多媒體的應用越來越廣泛，所以為了能編輯出更包羅萬象的互動式多媒體，必須提供能夠編輯更加豐富的互動式劇情的能力。因此除了提供循序、平行這些一般的非條件式控制之外，還必須提供條件的劇情控制編輯能力，補足非專業互動式多媒體製作工具的缺點。 2. 【方便編輯】: 因為互動式多媒體越來越普遍，使用互動式多媒體編輯工具的人也越來越多，例如:老師編輯互動式多媒體教材，或是一般使用者編輯電子卡片等等，當中包含了很多沒有程式背景的人，所以在設計上，我們希望能夠提供視覺化的編輯環境，讓使用者可以很方便的編輯，只需經過短時間的學習就能夠輕輕鬆鬆的編輯好一份互動式多媒體。除了視覺化的編輯環境，我們也希望能夠讓使用者經由樣板套用的方式，重複利用一些可以重用元件來簡化編輯時候的步驟，不需從頭到尾重新編輯一份互動式多媒體，增加使用者編輯時候的便利性。 3. 【支援劇情保護】: 互動式劇情對於一份互動式多媒體來說是非常重要的，因為有豐富的互動式劇情才能讓一份互動式多媒體看起來更為吸引動人，且編輯者在編輯互動式劇情時，往往需要很多創意且要花費許多心思，因此使用者辛辛苦苦編輯出來的互動式劇情，有時不希望隨便被人觀看到用。但由於網路越來越發達，數位內容也越來越容易經由網路而被盜用，所以為了讓編輯者可以對於編輯好的互動式劇情加上保護，我們希望多媒體編輯工具能夠提劇情保護機制，讓使用者可以安心編輯想要編輯的互動式劇情而不用擔心被盜用。. 2.4 選擇編輯手加以延伸決定了我們的研究目標，開始進行系統的設計與實作之前，首先我們要考慮是否要重新打造一個全新的互動式多媒體編輯工具?答案是否定的。因為目前的互動式多媒體編輯工具在功能上已經有一定程度的水準，重新設計一套新的系統未必能夠超越現有的編輯工具，且花費的時間相當可觀。如果能在現有的互動式多媒體編輯工具中，挑選出一套與我們需求最接近的再加以延伸修改，不但可以減少多餘的開發時間，也能省下更多的時間專注於研究如何做更好的延伸。在眾多的互動式多媒體編輯工具當中，我們選擇了智勝國際所開發的「編輯手」作為修改的基礎，因為他符合了以下需求:. 13.

(24) (1) (2) (3) (4). 為本實驗室所合作發展之軟體，在原始碼的取得較其他軟體容易許多。原本的編輯環境就相當視覺化，使用起來直覺易懂。編輯方式簡單，不需撰寫程式，只需拖拉即可完成編輯。本身就擁有基本的互動式能力，且描述檔支援更進一步的條件式劇情控制，只是尚未開放讓使用者做編輯。. 14.

(25) 三、系統需求分析 3.1. 條件式劇情的種類. 一般的劇情控制，例如:循序演出，同時演出…等等，可以編輯出簡單的互動效果，但無法根據播放當時的狀態來動態的改變劇情，所以在某些情況會顯得能力不足，例如在編輯複選題時，必須動態根據作答者的回答來判斷正確答案，或者是在編輯教材時，會希望動態根據學生學習的狀況來改變播放的教材內容。因此我們根據實際的需求提出了以下的條件式劇情種類: (1)循環演出 -loop (2)條件控制-condition (3)分支控制-switch，為了支援以上這一些條件式控制，我們還加上了(4)算數及邏輯運算的能力，讓使用者可以動態改變某些值或是設定較有彈性的條件是來編輯更為生動活潑的劇情。以下詳細介紹這些條件式劇情控制及算數及邏輯運算的功能和語法[8][9]: (1) 循環演出(loop) 功能敘述: 用來指定某段劇情可重複循環表演的次數。例如：一個人走路的動作，是可重複性的、循環的，故可以走兩步為一循環，指定走多步。 . 描述檔語法: REPEAT ( <Variable_Integer> ) <Scenario_Block>. (2) 條件控制(condition) 功能敘述: 可根據演員本身的屬性來設定條件式，條件式成立的話則演出成立劇情，不成立的話則演出不成立劇情。例如：當學生點選了正確的答案就演出答對了的動畫，如果點選的錯誤的答案就顯示答錯了並告知正確答案為何。 . 描述檔語法: IF ( <Expression> ) <Scenario_Block> <Else_Block>. (3) 分支控制(switch) 功能敘述: 可根據演員的播出動畫來設定條件值，根據條件值的不同來演出相. 15.

(26) 對應的劇情。例如：當太陽演出上升的動畫，就要演出農夫到稻田工作的劇情；當太陽演出下山的動畫，就要演出農夫回家休息的劇情。 . 描述檔語法: SWITCH ( <Expression> ) { <Case_Block> }. (4) 算數及邏輯運算功能敘述: 為了支援上述的條件式控制，所以必須要有算數及邏輯運算讓使用者可以動態改變某些值，設計出更為生動活潑的劇情。 . 描述檔語法: <Lvalue> = <Expression>. 3.2. 視覺化的編輯方法. 有了豐富的條件式劇情能力之後，要如何讓一般沒有程式背景的人都能夠很容易操作，不需撰寫撰寫文字程式碼即可輕輕鬆鬆編輯出豐富的條件式劇情?為了達到這個目的，我們必須提供一個視覺化的編輯方法，來幫助一般的使用者不需手動撰寫文字程式，就能夠編輯出豐富的劇情。. 3.2.1 視覺化語言的介紹視覺化語言(Visual Languages)已經被研究了很多年，也已經被應用在各種不同的領域上[2][3][4][5]。對於視覺化語言的定義，在Visual Object-Oriented Programming Concepts And Environments書中提說了一個說法[6]： “when at least some of the terminals of the language are graphical,such as pictures or forms or animations,we say the language has a visual syntax. We use the term visual programming language to mean a language with a visual syntax＂「當語言的結束語法(Terminals)是圖形式的, 如同圖片或者形式(表格)或者動畫, 我們說語言有視覺化句法。我們用視覺化語言這個術語來意指一個有視覺化語法的語言。」另外對於視覺化程式的定義，在Visual Object-Oriented Programming Concepts And Environments書中提出[6]：. 16.

(27) “Visual programming is distinguished both by what is described and how it is described. What is described are programs,expressed in terms of the syntax and semantics of the programming language.＂「視覺化程式是被分別在本身如何被描述的和如何描述，被描述的是程式，按照程式語言的句法和語意學表達。」傳統撰寫程式的方法是用文字文式來撰寫，使用者利用鍵盤輸入依照自己的需求輸入的符合程式語法的文字。視覺化語言提供圖形為表達工具，使用對話表單、視窗、圖示等比喻來和使用者溝通，使用者則利用滑鼠、鍵盤等設備來編輯所要表達的程式，系統會依使用者編完的內容產生一相對應的程式。. 3.2.2 圖示與視覺化語言的關係傳統語言的語法是由文字所描述，而視覺化語言的建構模式就是把那些文字式描述的語法轉換成視覺化的語法，所謂的視覺化語法就是以圖示(Icon)、表格、動畫等模式來代表文字式語法。使用圖示(Icon)來建立視覺化語言來優點包括： (1) 可讀性高(Readable)：人對具體事物的熟悉度遠高於抽象概念，所以直接用圖形來呈現程式的流程、物件的關係等等，將程式的每個部份都呈現在你眼前，而不必憑抽象的程式碼去想像最終的結果，可以讓寫作者能輕鬆寫作一個程式。 (2) 使用者介面友善：圖形使用介面(GUI)讓使用者在操作上更加方便、學習上的速度也加快，讓初學者和非專業人員也可以輕鬆的撰寫程式。. 3.2.3 視覺化的劇情編輯方法在編輯劇情當中的一些條件式設定或是演出劇情控制，我們需要設計一個編輯環境讓使用者不需要去撰寫程式碼也不需要去看到它們的描述語言。因此這些控制我們必須以圖式的方式來表示，並以拖拉的方式加上對話表單的協助，幫助使用者完成編輯動作。[13] 我們所使用視覺化方法如下： (1) 將所有控制圖示化並以 syntax-direct authoring 方式來編輯： 17.

(28) 每個控制都以一個對應的圖示來代替，讓使用者在編輯時容易辨識、不需要記憶語法和指令。 (2) 以拖拉及點擊的方式進行編輯：在編輯劇情時，若想要在某段劇情中加上某個演員，只需將演員拖拉至相對應劇情區塊，若是想編輯條件式劇情，只需在工具列點選欲編輯條件式劇情種類即可。 (3) 以對話表單(Dialog Form)來輸入參數：每個條件式劇情控制都有一個對應的對話表單，幫助使用者來設定參數。 (4) 編輯的結果以縮圖來表示：編輯的好結果會以縮圖的方式顯示在劇情區塊當中，不僅能幫助使用者觀看編輯結果，也能幫助使用者之後進行修改。. 3.3. 多媒體試題樣板. 為了簡化使用者的編輯步驟，我們提出了樣板套用的概念，讓使用者不需一再重複某些相同動作，只需經由套用置換即可編輯出想要的內容。以下我們實際以多媒體試題為例，探討多媒體試題的組成，之後分析多媒體試題的編輯步驟，然後提出多媒體試題樣板的種類。. 3.3.1 多媒體試題的組成我們都知道一份試題包含了(1)題目情境(2)問題(3)答案這三個部分，只是傳統的試題只能夠用文字或是靜態的圖片來呈現這三個部分，那如果是多媒體試題的話能夠如何呈現呢?在探討之前我們必須要先來了解一下一份互動式多媒體的結構。. 18.

(29) 圖 8-互動式多媒體內容結構圖. 互動式多媒體的組成結構如上圖所示，一個互動式多媒體包含了許多場景，每一個場景裡面包含了許多角色以及角色之間的劇情互動，每個角色是由其素材、動畫及位置大小所組成。當中素材指的其實就是所使用的多媒體，包含文字、圖片、聲音或是影片。而動畫指的就是為這些素材所編製的移動軌跡與特效。我們可以由另一個觀點進一步的為這些組成做分類，其實場景當中的角色、角色的素材、位置大小、動畫我們都可以稱做是 Data，它們都是屬於一些多媒體資料，與播放的邏輯無關。而場景中的劇情指的就是 Control，也就是用來控制場景當中 Data 的播放順序及流程。了解了互動式多媒體的結構之後，我來看看試題應用在互動式多媒體上會有呈現方式。以下分別由題目情境、問題及答案三方面來探討: (1) 題目情境(Stimulus): 一個試題的問題情境表現方式最為多變，有可能是由文字、圖片、聲音、影片或是這些的組合所組成，總共包含有:文字、圖片、聲音、影片、文字加圖片、文字加聲音、文字加圖片加聲音、圖片加聲音、圖片加影片這些組合，除此之外，我們還加上了一種特別的情境呈現方式—對話，讓情境表現起來可以更加生動活潑。 19.

(30) (2) 問題(Question): 問題的表現方式比較單純，只有文字、聲音以及文字加聲音這三種組合。 (3) 答案(Answer): 答案的呈現方式會隨著試題的題型而有所不同，以下根據不同的試題題型來說明其答案呈現方式: I.. 選擇題: 如果題型為選擇題的話，其答案呈現方式就是一些選項，這些選項的呈現方式有可能是文字、圖片、聲音、文字加圖片、文字加聲音、文字加圖片加聲音以及圖片加聲音。. II.. 文字輸入: 如果是文字輸入的題型，例如填充題、問答題的話，答案的呈現方式就是以文字敘述請作答者輸入文字。. III. 聲音輸入: 如果聲音輸入的題型，答案的呈現方式就是以文字敘述請作答者以聲音作答。. 3.3.2 多媒體試題的編輯步驟了解了多媒體試題的組成之後，我們來看一下多媒體試題的編輯步驟。多媒體試題的編輯步驟大致上可以歸納為: (1) (2) (3) (4) (5) (6) (7). 設計試題構思試題呈現方式選擇素材定義素材屬性與動畫特效編輯劇情預覽存檔. 如下圖所示. 20.

(31) 設計試題. 根據評量目標設計試題內容. 構思試題呈現方式. 選擇符合試題內容的呈現方式. 選擇素材. 使用編輯工具所準備的圖片或是自行掃描，繪製。. 定義素材屬性與動畫特效. 編排圖片位置，文字顏色大小，或是編輯動畫編輯劇情. 決定各個圖片文字的出現時機，先後順序。預覽. 存檔. 圖 9-多媒體試題編輯流程. 一開始編輯者必須要設計試題，思考試題的內容，之後就要構思此試題的呈現方式，也就是以何種媒體來呈現會達到比較好的測驗效果。呈現方式決定之後，就要開始尋找做為呈現的這些素材，可能是圖片、文字或是聲音等等。接著就要定義這些素材的屬性以及動畫，決定素材的位置、大小或是動畫為何。當所有的素材都定義好之後，就要開始編輯劇情，也就是決定這些素材的先後呈現順序或是彼此的互動，之後預覽結果，如果有任何不滿意的地方再回去做修改，等確定全部都滿意之後就存檔。但編輯試題的時候，往往會重複編輯相同類型的試題。如下圖所示，編輯者在編輯一個題目情境試是圖片，問題方式是文字，答案是以圖片呈現的試題，當他下一次要編輯同樣類型的試題的時候，他又必須要重複一次相同的動作。. 21.

(32) z z z z z z z z z. 插入題目情境圖片調整圖片大小調整圖片位置輸入問題文字調整字型大小調整文字位置插入答案選項圖片調整圖片大小調整圖片位置. 重複性高 z z z z z z z z z. 插入題目情境圖片調整圖片大小調整圖片位置輸入問題文字調整字型大小調整文字位置插入答案選項圖片調整圖片大小調整圖片位置. 圖 10-多媒體試題的重複性. 由上述的例子可以發現，當編輯編輯相同類型的試題時，存在著許多重複性，使得編輯者必須一再的重複某些相同的動作，不僅耗時，也會消耗編輯者大量的心力。如下圖所示:. 22.

(33) 設計試題. 此兩步驟重複性高且耗時. 構思試題呈現方式. 選擇素材定義素材屬性與動畫特效編輯劇情. 預覽. 使用者一再重複此三步驟. 存檔. 圖 11-多媒體試題編輯流程(重複性) 為了降低以上所說的重複性，我們提供了一個「樣板套用機制」 [15][16][17]，針對編輯者的需求，提供大量樣板給他們使用，讓他們只需要經由「套用」的方式，針對需要改變的地方做置換，不需一再重複相同的動作，即可達到相同的編輯效果，如下圖所示: 設計試題選擇樣板. 套用置換. 預覽存檔. 之前重複性高的動作已被樣板套用取代而簡化. 圖 12-加入樣板套用的多媒體試題編編輯流程. 23.

(34) 3.3.3 多媒體試題樣板套用系統的功能需求為了達到上述所說的以樣板套用的方式簡化編輯流程，首先必須能夠提供使用者一個與他所想要編輯的試題的類型相同的樣板，接著必須能夠讓使用者針對要修改的內容進行套用置換，以下我們詳細列出多媒體試題樣板套用系統所應該要提供的功能: (1) 提供試題樣板: 為了提供使用者一個適用的試題樣板，我們根據 3.31 節所分析出來的多媒體試題的呈現方式，列出題目情境、問題以及答案的所有組合，製作了所有可能的多媒體試題類型。如此使用者一但決定試題要用何種多媒體來呈現之後，就可以由我們所提供的試題樣板當中選擇一個符合的樣板來使用。 (2) 套用置換: 為了讓使用者可以很方便的將選擇的試題樣板修改為想要的試題，我們必須提供套用置換的功能，讓使用者對於想要修改的地方進行置換。根據 3.31 節所提到的互動式多媒體內容結構，我們知道一份互動式多媒體包含了有 Data 和 Control 兩個部分，因此系統必須分別提供這兩個部分的套用置換，以下分別為各位做介紹: 套用 Data(多媒體資料): 所需要編輯的內容，各角色之間呈現的順序與方式與樣板是相同的，但 Data 有所改變，所以需要經由樣板套用的方式來套換 Data。Data 又詳細分為:素材、動畫以及角色，因此套用 Data 我們可以在細分為套用素材、套用動畫以及套用角色，它們分別的功能為: . 套用素材: 使用者可以將內容中所呈現的多媒體檔案，包含:圖片，聲音，文字，影片，套換成素材樣板庫中的素材。套用動畫: 使用者可以將使用者為素材所編制的移動軌跡與特效套換成動畫樣板庫中的動畫。套用角色: 使用者可以將素材與其動畫的組合，包含素材的大小，位置等等，套換成角色樣板庫中的角色。. 套用 Control(控制劇情): 所需要編輯的內容，需要的 Data 與樣板是相同的，但各角色之間呈現的順序與方式有所改變，所以需要經由套用劇情樣板的方式來套換 Control。所謂的 Control 其實就是劇情，因此套用 Control 就是要提供 24.

(35) 使用者可以將各角色之間呈現的順序與方式，可能是素材時間與空間的關係，或時間與狀態變化的關係，套換成劇情樣板庫中的劇情。 (3) 設定正確答案: 一個測驗試題除了題目的部分，應該還要再加上正確答案才會完整，因此除了題目方面的呈現之外，我們希望能夠提供使用者設定正確答案的功能，如此測驗的時候系統就能自動根據編輯者所設定的正確答案來判斷作答者的答案正確與否。 (4) 上傳: 編輯好的試題如果都只存在編輯者本身的電腦當中，那實用性就大大的降低了，因此我們希望提供一個上傳機制，讓編輯好的試題能夠實際放到網路上讓大家共享。在上傳方面，我們希望能夠提供了兩個上傳的功能，一個是讓使用者將編輯好的試題上傳到一練習平台，之後學生可以實際連上此練習平台做試題練習；另外我們還希望讓使用者可以將編輯好的試題上傳到一個測驗平台做管理，之後學生就可以實際連上此測驗平台做測驗。. 3.4. 劇情保護機制. 為了讓使用者辛辛苦苦編輯好的互動式劇情不會輕易被盜用觀看，我們必須提供一個劇情保護機制來為互動式劇情做保護。所以接下來我們要分別來探討到底我們要保護的對象是誰、編輯者要如何對劇情做保護、系統如何保護劇情以及讀取保護過的劇情所要用到的認證機制。[18][19][20] . 保護的對象: 不同於傳統的方式，保護的對象都是整份的文件或內容，我們希望提供更有彈性的方式，讓編輯者可以自行對所內容當中的任何一段劇情進行保護。如此編輯者可以自行定義哪些劇情是想要分享給其他人觀看，哪些部分是希望被保護。. . 編輯者如何對劇情做保護: 我們希望提供編輯者一個很簡單的方式，不需要了解任何有關數位保護的知識，只需要在編輯劇情的時候，當遇到想要保護的劇情時，點選工具列上的保護圖示，即可完成保護的動作。. . 系統如何保護劇情: 我們以播放器來做控制，當播放到保護過的劇情時，會先連到一個認證系統認證，當認證為合法的使用者時，使用者才能夠觀看到保護過. 25.

(36) 的劇情，以此來達到保護的作用。 . 認證機制本系統所使用的認證機制是使用林怡慧同學所開發的 DRM 認證機制，此機制不僅可以提供使用者做認證，系統還會自動根據使用者的行為扣除點數，方便管理者做管理。如欲詳細了解此 DRM 認證系統，請參考林怡慧同學的論文錯誤! 找不到參照來源。。. 26.

(37) 四、系統設計與實作 4.1. 條件式劇情的實作. 之前 3.1 節我們已經分析了條件式劇情的種類以及語法，接著我們就來看看我們如何實際作出條件式劇情的效果。首先我們要先了解一下一個很重要的資料結構，就是 SceneEventTable。 SceneEventTable 紀錄了整個場景的所有劇情在 parsing tree 中的起始位置，包含有開場劇情、退場劇情、演員間的互動劇情…等等，詳細的結構如下:. struct SceneEventTable { etlink OnPrelude; etlink OnFinale; etlink OnSuccess; etlink OnError; etlink OnHelp; vector<etlink> Rules; vector<ControlEvents> ControlEventTable; }; 接著我們來了解一下整體的運作流程，首先一開始呼叫 lex&yacc 的 yyparse()，產生出劇情的 parsing tree，並存到相對應的 SceneEventTable 當中，之後當劇情被觸發之後，Player 就會到 SceneEventTable 當中抓出被觸發劇情的 parsing tree，之後根據這個 parsing tree 演出應該演出的劇情。我們以循環演出為例子來做詳細的介紹，假設我們設定在開場劇情的時候，演員 1 要循環演出 3 次，那麼開場劇情的描述檔會如以下所示: 開場劇情: repeat(3){ 演員 1.play(); } 經由 yyparse()之後，就會產生開場劇情的 parsing tree(下圖列出循環演 27.

(38) 出部份的 parsing tree)且整個開場劇情的 parsing tree 會存入 SceneEventTable 當中的 OnPrelude。. 圖 13-循環演出的 parsing tree 範例. 之後當演出開場劇情時，Player 就會到 SceneEventTable 的 OnPrelude 找出開場劇情的 parsing tree，當 Player 解析到 Repeat_Statement 的時候，就會知道這是一個循環演出，接著會到 Expr_Integer 的 node 抓出要循環的各數，也就是此範例的 3 次，之後會到 Scenario_Block 的 node 抓要重複演出的劇情，以此範例為例就是演出演員 1。. 4.2. 條件式劇情的視覺化編輯. 為了達到視覺化的編輯，我們必須要將傳統由使用者輸入文字程式碼的動作捨棄，將所有要產生程式碼的動作都交由系統去做，使用者只需藉由系統提供的對話方塊的協助，以點擊和拖拉的方式來完成編輯。因此我們的系統必須要在使用者以及系統描述檔之間提供一個視覺化的溝通，以下先介紹一下劇情編輯系統的系統架構:. 28.

(39) 圖 14-劇情編輯系統的系統架構. 我們可以看到，此系統最主要有三大部分，分別是 Message Recognizer、 Scenario Manager 以及 Interpreter，以下分別對這三大部分做一個詳細的介紹: (1)Message Recognizer: 負責辨識物件傳過來的訊息，並根據辨識過後的訊息產生相對應的對話表單。 (2)Scenario Manager: 負責控制及顯示劇情，當使用者根據對話表單的協助輸入完畢之後，Scenario Manager 會將使用者輸入的內容存入對應的劇情庫當中，並將結果以圖式顯示出來。 (3)Interpreter: 描述檔的直譯器，一開始 Interpreter 會將從描述檔讀入的程式碼轉成相對應的劇情，並傳給 Scenario Manager 存到相對應的劇情庫中，等到最後要存檔的時候，Interpreter 會將劇情庫當中的劇情轉成相對應的程式碼，並存入描述檔當中。舉一個例子，當使用者在開場劇情點選了編輯條件劇情的時候，Message Recognizer 就會出現條件劇情的對話表單來協助使用者編輯。當使用者編輯完畢之後，Scenario Manager 就會將使用者輸入的結果存入開場劇情的劇情庫 29.

(40) 當中，然後將條件劇情以圖式顯示出來。之後當使用者存檔的時候，Interpreter 就會將剛剛所存的條件劇情轉成相對應的程式碼，並存入描述檔當中。接下來我們就以循環控制(loop)和條件控制(condition)為例子，來看看劇情控制的圖示、語法以及對話表單的設計。 (1)循環控制(loop). . 圖示:. . 語法: REPEAT ( <Variable_Integer> ) <Scenario_Block>. . 對話表單: 根據循環控制的語法，我們知道循環控制最主要就是要知道循環的次數，因此對話表單設計為一個下拉的選單，讓使用者以下拉的方式設定循環的次數. 圖 15-循環控制的對話表單. (2)條件控制(condition). . 圖示:. . 語法: IF ( <Expression> ) <Scenario_Block> <Else_Block>. . 對話表單: 首先根據條件控制的描述檔語法我們可以知道，條件控制分為三大 30.

(41) 部分，分別是條件式、成立劇情以及不成立劇情，因此一開始點選條件控制時，會跳出如圖 x.的對話表單，幫助使用者了解說設定條件控制時，必須要設定條件式，成立劇情以及不成立劇情。. 圖 16-條件控制的對話表單. 接著就分別來看看設定條件式、成立劇情和不成立劇情的對話表單條件式: 條件式的語法: Expression> :: = <Integer> | CHARC | STRING | <Lvalue> | ( <Expression> ) | <Expression>&& <Expression> | <Expression> <= <Expression> | <Expression> >= <Expression> | <Expression> || <Expression> | <Expression> == <Expression> | <Expression> != <Expression> . 設定條件式的對話表單: 根據條件式的語法，我們將設定條件式的對話表單設計成如下圖所示，一開始點選左邊的縮圖來設定條件演員，點選之後條件演員就會出現在右邊的框框，並出現”被按下”以及”沒被按下”兩種條 31.

(42) 件，之後再以滑鼠點擊設定條件演員的條件即完成了條件式的設定。. (1)點選答案選項縮圖來設定條件演員. (2)以點選的方式來設定條件演員的條件. 圖 17-設定條件式的對話表單. 以一開始的例子為例，如果設定套餐 A、套餐 C 有被按下而且套餐 B 沒有被按下的條件式，首先先點選縮圖當中三個套餐的圖片，將這三個圖片設為條件演員，之後在右邊就會自動顯示出被按下以及沒被按下兩個框框，依照我們的需求，將套餐 A，C 勾選被按下，套餐 B 勾選沒被按下，如此就設定好我們的條件式了。成立劇情: 成立劇情的語法: <Scenario_Block> :: = { <Statement_List> } | { } <Statement_List> :: = <Statement> | <Statement_List> <Statement> <Statement> :: = <Expression> ; | NEXTSCENE <Scene_Parameter> ; | PREVIOUSSCENE <Scene_Parameter> ; 32.

(43) | MAINSCENE <Scene_Parameter> ; | TRANSFERSCENE <Variable_Integer> <Scene_Parameter> ; | PARALLEL ( <Cast_Action_List> ) ; . 設定成立劇情的對話表單: 我們根據成立劇情的語法，將設定成立劇情的對話表單設計如. 下圖所示，使用者可以點選左邊的縮圖設定成立劇情所要播放的演員，或是點選右邊的故事場景設定成立劇情所要跳躍的場景，編輯後的結果會馬上以縮圖呈現在下方的劇情框框當中，幫助使用者進行編輯。. 編輯的結果會立即. (1)點選左方的縮圖選擇成立劇情要播放的演員或選. 的視覺化顯示出來. 擇右邊的故事場景來選擇要成立劇情要跳躍的場景. 圖 18-設定成立劇情的對話表單. 我們以一個例子來做介紹，假設今天的成立劇情是播放對話框、老師，之後跳到場景 2，那首先就是在左邊的縮圖依序點選對話框的圖片、老師的圖片、之後在右邊的場景區點選場景 2，如此就編輯好了成立劇情，且此劇情會以縮圖的方式立即呈現在下方給使用者知道。不成立劇情: 不成立劇情與成立劇情相似，請參考上面的成立劇情。. 33.

(44) 介紹完了這些圖示以及對話表單之後，我可以發現如此設計的一些編輯特性: (1) 簡易的編輯方式: 以上所說的設定都是以滑鼠拖拉或點擊的方式來進行，完全不需要撰寫程式，編輯起來非常的簡單容易。 (2) 精簡的編輯步驟: 以上的設定都不需要太多的編輯步驟，因為我們已經根據使用者的需求來簡化要設定的參數，許多不太會變動的參數都已經由系統內定好，不需要再麻煩使用者做輸入。 (3) 視覺化的編輯環境: 所有的編輯都是以圖示或對話表單來做協助，提供了使用者一個視覺化的編輯環境。. 4.3. 多媒體樣板套用系統的設計與實作. 4.3.1 系統架構及模組首先我們來看看多媒體樣板套用系統的系統架構。根據之前 3.3.3 小節對於多媒體試題樣板套用系統功能的分析，我們的系統架構設計如下圖所示:. 圖 19-多媒體試題樣板套用系統的系統架構. 34.

(45) 系統總共包含三個大部分，一個是 Player 播放器，用來預覽多媒體試題樣板或是編輯好的結果，再來就是 Template Gallery Container，它是用來管理所有的樣板庫，例如當使用者選擇要套用圖片的時候，Template Gallery Container 就會到將圖片樣板庫中所有的圖片顯示出來，供使用者選擇。再來就是 Template Imitate System，也是系統最核心的部分，其功用就是用來做所有的套用置換，例如當使用者選擇好所要套用的圖片時，Template Imitate System 就會去抓取演員的資料，並將資料當中的圖片換成使用者所選擇的圖片樣板，之後再將結果存回描述檔。下圖更詳細列出了系統的模組:. 圖 20-多媒體試題樣板套用系統的系統模組. 了解了系統大致上的架構之後，我們來看一下使用者的操作流程:. 35.

(46) 圖 21-多媒體試題樣板套用系統的使用者操作流程. 一開始使用者會選擇一個與他需求相符合的試題樣板，之後點選編輯轉到編輯模式，接著就開始根據使用者的需求對這個樣板做修改，當選擇了要置換的演員之後，在選擇要置換的種類，經由一再的套用置換的方式，使用者就可以完成了一個互動式多媒體試題的編輯，最後如果試題要上傳到測驗平台做測驗，就必須要設定試題的正確答案，設定完之後，就可以點選上傳，系統就會自動幫使用者將試題上傳到一測驗平台，就可以將此試題實際拿來做測驗。這當中比較值得一提的是，因為試題已經樣板化了，所以當使用者點選設定答案的時候，系統會自動根據樣板的類型跳出不同的設定答案視窗。例如當使用者一開始選擇得是答案選項是圖片的類型，這意味著使用者所要編輯的試題題型一定是選擇題，因為如果是其他題型的話答案選項不可能用圖片來呈現，因此系統就會挑出設定選擇題答案的視窗。. 4.3.2 套用 Data 實作根據 3.3.3 的分析我們知道套用 Data 分為套用素材、套用動畫以及套用角色，首先我們來了解一下套用 Data 的流程。. 36.

(47) 套用 Data 的流程如下圖所示，一開始使用者要選擇套用 Data 的種類，選擇是要套用素材、動畫還是角色，假設使用者選擇了要套用素材，之後再選擇要套用的素材種類為何，是文字、圖片、聲音還是影片，選定之後系統就會自動連結到相對應的素材樣板庫，將樣板庫當中的樣板呈現給使用者選擇，當使用者從樣板庫當中選擇了適當的樣板之後，按下確定系統就會自動將使用者所選的素材樣板套換到要置換的演員身上，如此變完成了套用素材的動作，套用動畫以及套用角色的流程與套用素材類似。. 圖 22-套用 Data 的流程. 接著我們實際以套用動畫來了解系統模組之間的呼叫流程，其流程如下圖所示，一開始當使用者選擇套用動畫時，Template Imitate System 就會去呼叫管理樣板的 Template Gallery Container，跟他說現在有人要套用動畫，之後 Template Gallery Container 就會連結動畫樣板庫，將動畫樣板庫中的動畫樣板都抓出來，並以圖形顯示給使用者知道目前動畫樣板庫當中有哪些動畫樣板。再來當使用者選擇了要套用的動畫樣板之後，Template Gallery Container 就會將使用者所選擇的資訊傳回給 Template Imitate System，接著 Template Imitate System 就會根據此資訊來將原本的動畫置換成使用者所選擇的動畫樣板，並且將置換後的結果呈現回去給使用者知道。. 37.

(48) 圖 23-套用動畫的流程. 由以上的流程我們可以知道，在套用 Data 的時候，最重要的兩個模組就是 Template Gallery Container 以及 Template Imitate System，分別是用來連結樣板庫以及實際上作套用置換的動作。接著我們看看 Template Imitate System 是如何實際上將 Data 置換掉，首先我們先來看看這些 Data 在描述檔中是如何表示的: 以下為一個描述檔段的範例，首先從[CAST]之後的演員型態可以得知此演員為何種型態的演員，在此範例中 MCAnim 為圖片演員，從 PicFile 以及 FrameCount 我們可以知道此圖片演員圖片的路徑及 Frame 數，由 SegmentCount 我們可以知道此演員有幾段動畫，之後會分別紀錄這幾段動畫的路徑以及聲音檔路徑。. 38.

(49) [CAST] MCAnim Begin Name = Actor027 NowValue = 0 Key = 0 Position = 430 11 93 Size = 22 21 Visible = 1 Speed = 10 DragMode = 2 PicFile = "v1\7button\BU0102.eir" FrameCount = 1 SegmentCount = 1 Segment0 = -1 -1 1 1 5 "@Res006.mp3" 5 (1, 3) ( 2, 4) ( 3, 4) ( 4, 4) ( 5, 4) SegmentIndex = 0 PlayWhenStart = 104 …… End. 演員型態. 圖片的位置以及 Frame 數. 動畫路徑以及聲音檔路徑. 了解描述檔是如何儲存 Data 之後，我們就可以根據使用者所選擇的樣板，實際上來做套用置換的動作，以下以套用動畫為例子:. 39.

(50) 1.抽離 2.填入. 圖 24-套用動畫. 左邊是原本互動式多媒體描述檔，右邊是動畫樣板庫，在樣板庫當中存有許多動畫路徑的描述檔，當使用者選擇好動畫樣板之後，Template Imitate System 就會將被套用演員的動畫路徑從原本的多媒體描述檔抽離，再將選擇的動畫樣板描述檔填入被抽離掉的動畫路徑當中，之後存檔就完成了套用動畫的動作。套用其他 Data(文字、圖片、聲音、影片)的做法其實都是類似的，都是將原本描述檔儲存 Data 的部分抽離，再填入所選擇樣板的敘述。. 4.3.3 套用 Control 實作在套用 Control 的部分，系統分為簡易套用以及進階套用兩種。簡易套用提供了比較簡易的劇情樣板，這些樣板是專門針對 Stimulus 而設計，原因是由於在試題的三大部分當中，Stimulus 的變化性最高，需要比較多的劇情控制。使用簡易套用時，使用者只需選擇好適當的劇情樣板，系統會自動根據樣板做設定。進階套用則提供了比較多變化的劇情控制樣板，使用者選擇了適當的劇情樣板之後，還必須設定演員與劇情樣板的對應關係才算完成套用 Control。以下分別詳述此兩種 Control 的套用是如何實作。 40.

(51) 簡易套用: 簡易套用提供了一些針對 Stimulus 的劇情樣板，我們分析了 Stimulus 可能的呈現方法之後，提出了四種劇情樣板，分別是依序演出、同時演出、依序演出且演出完消失、同時演出且播放完消失。當使用者選擇好了適當的樣板之後，系統會自動根據樣板改變 Stimulus 的劇情，下圖為簡易套用的系統實作流程。. 抓出內容中的 Stimulus演員根據抓出的演員製作出依序且演出後消失的劇情描述. 劇情樣板庫. Stimulus依序 Stimulus同時. 填入. 抽離. [CAST] MCAnim Begin Name = Actor001 …. PicFile = "v1\1human\C0113.eir" FrameCount = 9 … End [END_CASTDEFINE] 開場劇情: Actor003.play(); Actor002.play(); Actor001.play();. 劇情描述. 互動劇情: Actor001: Actor003.play(); 退場劇情:. Stimulus依序且演出後消失 Stimulus同時且演出後消失. 圖 25-套用 Control(簡易套用)的流程當使用者選好需要的樣板之後，系統就會去抓現在的 Stimulus 演員是哪些，之後根據使用者所選擇的樣板產生對應的劇情描述，例如當使用者選擇了 Stimulus 依序且演出後消失，系統就會根據抓出來的 Stimulus 演員產生 Stimulus 依序且演出後消失的劇情描述，接著就會將原本描述檔當中的開場劇情拿掉，填入系統剛剛產生的劇情描述，如此試題的 Stimulus 在呈現的時候就會依序出現且演出後會消失。進階套用: 在進階套用的部分，目前我們針對試題提供了單選題，複選題(2 個正確答案)以及複選題(3 個正確答案)的樣板，使用者可以根據套用不同的樣板做出不同類型的試題。當使用者選擇了適當的樣板之後，就要設定演員與劇情樣板間的對應關係，如下題所示，以拖曳的方式，將欲演出的演員拖曳到欲套用的劇情身上。. 41.

(52) 圖 26-套用 Control(進階套用)的對應設定當對應關係都設定好之後，系統就會根據所設定的對應關係，將劇情樣板中的劇情填入原本的劇情當中，如下圖所示: [CAST] MCAnim Begin Name = Actor001 …. PicFile = "v1\1human\C0113.eir" FrameCount = 9 … End [END_CASTDEFINE] 開場劇情: 互動劇情: Actor001: Actor003.play(); Actor002.play(); Actor001.play();. 劇情樣板庫. 根據對應關係填入相對應的劇情. 開場劇情: 互動劇情: Actor: if ( Actor001.NowValue == 0) { Actor.play(); } else{ Actor000.play(); }. Actor002: Actor002.play(); Actor003.play();. Actor000: Actor001.play(); Actor.play();. Actor003: Actor001.play();. Actor001: Actor.play();. 退場劇情:. 退場劇情:. 圖 27-套用 Control(進階套用)的系統流程. 42.

(53) 4.4. 劇情保護機制的設計與實作. 在這個章節，首先我們會介紹使用者如何進一步對互動式多媒體的劇情做保護，以及使用者的操作介面，再來會看一下與認證機制整合的整個系統的流程以及架構。. 4.4.1 操作介面為了讓使用者能夠進一步對內容當中的劇情做保護，且能夠提供使用者一個簡單易懂的操作方式，所以在介面的設計上，我們將對劇情做保護的功能設計在編輯劇情的工具列上，如此使當用者在編輯的時候，遇到任何想要保護的部分，只需要在工具列上點一下保護的圖示即可，不需要特別記憶一些額外的語法或使用步驟。系統的操作介面如下圖所示，在工作列上會有一個保護的圖示，當使用者想要對內容做保護時，只需點選一下工具列上的保護圖示即可完成保護動作，且結果會以縮圖馬上顯示出來。. 結果縮圖. 工具列上保護圖示. 圖 28-劇情保護使用者操作介面. 43.