崑 山 科 技 大 學

資 訊 管 理 系

學 生 專 題 製 作 報 告

3D 遊戲式閱讀履歷系統—

多媒體互動電子書

3D Game-based CSCL e-Portfolio

System—Multimedia e-Book

指導教授： 洪俊銘 老師

專題組員： 學號：

陳秀惠 4970Q007

吳先逸 4970Q022

許芳菁 4970Q033 林念霆 4970Q062

高詠琦 4970Q061

中華民國 101 年 04 月

I

專題製作報告授權同意書

II

崑山科技大學

專題製作審核書

四年制大學部學生陳秀惠、吳先逸、許芳菁、高詠琦、林念霆之專

題製作，題目為 3D遊戲式閱讀履歷系統－多媒體互動電子書為例，經

本委員會審查並舉行口試合格。

指導老師：洪俊銘___________(簽名)

委 員：高淑珍___________(簽名) 林文暉___________(簽名)

曾生元___________(簽名) 張玲華___________(簽名)

吳國龍___________(簽名) 游峰碩___________(簽名)

羅仕堂___________(簽名) 葉俊吾___________(簽名)

柯文長___________(簽名) 沈英謀___________(簽名)

許蕙纓___________(簽名) 徐國鈞___________(簽名)

林孝忠___________(簽名) 侯正裕___________(簽名)

賴正文___________(簽名) 陳熙玫___________(簽名)

系 主 任：王 平___________(簽名)

III

3D遊戲式閱讀履歷系統—

多媒體互動電子書

陳秀惠 吳先逸 許芳菁 高詠琦 林念霆

崑山科技大學資訊管理系

中文摘要

隨著電子書盛行，線上協同學習的條件逐步成熟，為強化原 3D 遊戲式閱讀履

歷系統之線上互動學習概念。

本專題「3D 遊戲式閱讀履歷系統─多媒體互動電子書」以專案管理的內容為

題材，製作出一套具更多媒體互動功能的電子書，其中包括一般基本編輯、錄音、

錄影、圖片多媒體註解和匯入 Word 格式等功能，同時與閱讀履歷系統互動機制相

互整合，使讀者得以在互動與意見交流中進行同儕協同學習，藉以提升讀者閱讀

的興趣。

關鍵字:電子書、專案管理

IV

3D Game-based CSCL e-Portfolio

System—Multimedia e-Book

Chen Siou-Huei , Wu Shian-I , Hsu Fang-Jing ,

Kao Yung-Chi , Lin Nian-Ting

Dept.&Grad Program of Information Management, Kun Shan University of Technology

Abstract

With the prevalence of e-books, the conditions of collaborative e-learning are

mature gradually. For promoting the 3D’s CSCL concept we proposed, this study

implements the multimedia e-Book entitled “project management”, including the basic

editing features, multimedia annotations and Word file transforms. While the e-Book is

embedded into the CSCL environment, thus the readers can be interested by

collaborative e-learning of peer to peer.

Keywords : ebook、project management

V

誌 謝

本專題所發展之「3D遊戲式閱讀履歷系統─多媒體互動電子書」能如

期在短短一年的時間就順利的完成，首先要感謝專題指導老師 洪俊銘

老師的指導。在專題製作期間，老師都會不時的給予我們製作的方向

和意見，按時督促專題的進度，並適時的提供幫助，解決我們所遇到

的種種難題。小組的每位成員在老師將近一年的指導下，都從中獲益

良多。老師不只教導專題製作所應具備的專業知識和操作技術，更常

跟成員分享踏入職場後該更的工作態度和職業倫理，還更日常生活中

為人處事的道理。其認真教學的態度和對學生犯錯的包容，是所更專

題成員所敬佩和景仰的地方。

此外；也要感謝傳福學長熱心的指導。在製作專題的過程中，學

長總是在旁協助我們，不時提供經驗和我們分享，每位專題成員都由

衷的感激學長對本專題無私的指導和奉獻。

最後感謝各位組員一年來的辛勞，雖然在製作專題的過程中難免

更挫折、艱辛和意見相佐的時候，但大家一路互相扶持、鼓勵，並經

過不斷的溝通、討論和改善，實作系統和文件報告終於如期完成。再

次感謝每位組員的團結與合作。

一○一年四月二十日

1

目 錄

專題製作報告授權同意書 ............................................................................................... I

專題製作審核書 ............................................................................................................. II

中文摘要 ........................................................................................................................ III

Abstract ......................................................................................................................... IV

誌 謝 ................................................................................................................................V

目 錄 ................................................................................................................................ 1

圖目錄 .............................................................................................................................. 3

表目錄 .............................................................................................................................. 5

一、緒論 .......................................................................................................................... 6

1.1 製作動機 ................................................................................................................ 6

1.2 製作目的 ................................................................................................................ 6

二、製作內容與方法 ...................................................................................................... 7

2.1 製作流程 ................................................................................................................ 7

2.2 製作方法研究 ........................................................................................................ 8

2.3 建模軟體介紹 ........................................................................................................ 9

2.3.1 Blender 介紹................................................................................................ 9

2.3.2 Google Sketchup 介紹............................................................................... 9

2.3.3 HTML5 介紹 ................................................................................................ 9

2.4 遊戲引擎介紹 ...................................................................................................... 10

2.5 EBOOK 介紹.......................................................................................................... 10

2.5.1 一般電子書的需求 .......................................................................................11

2.5.2 電子書發展軟體 ...........................................................................................11

2.5.3 ePUB3.0 規範 .................................................................................................11

2.6 開發工具(XAML+C#) ........................................................................................ 14

2.6.1 XAML 介紹................................................................................................... 14

2.6.2 WPF 架構 ...................................................................................................... 14

三、系統分析 ............................................................................................................... 16

3.1 系統流程圖 ......................................................................................................... 16

3.2 使用案例圖 .......................................................................................................... 17

2

3.2.1 使用者使用案例圖 ...................................................................................... 17

3.2.2 管理者使用案例圖 ...................................................................................... 18

3.3 需求分析表 .......................................................................................................... 20

四、系統展示 ................................................................................................................ 22

4.1 電子書功能 .......................................................................................................... 22

4.1.1 Word 檔案匯入電子書.................................................................................. 22

4.1.2 筆記類 .......................................................................................................... 23

4.1.3 註解類 .......................................................................................................... 23

4.1.4 書籤類 .......................................................................................................... 26

4.2 電子書內容 .......................................................................................................... 27

4.3 場景、人物建置 .................................................................................................. 27

五、結論 ........................................................................................................................ 31

六、所需人力及時程安排 ............................................................................................ 32

6.1 WBS 工作分解結構........................................................................................... 32

6.2 進度甘特圖 ........................................................................................................ 34

6.3 職務分配表 ........................................................................................................ 34

6.4 軟硬體需求 ........................................................................................................ 35

七、參考文獻 ................................................................................................................ 36

3

圖目錄

圖 1 製作流程圖 .............................................................................................................. 7

圖 2 各式硬體閱讀器 ....................................................................................................11

圖 3 EPUB3.0 內容格式規範 ........................................................................................ 12

圖 4 EPUB 架構圖 ......................................................................................................... 13

圖 5 XAML 架構圖 ....................................................................................................... 15

圖 6 系統流程圖 ........................................................................................................... 16

圖 7 使用者使用案例圖 ............................................................................................... 17

圖 8 管理者使用案例圖 ............................................................................................... 18

圖 9 電子書使用者使用案例 ........................................................................................ 18

圖 10 使用者登入系統─活動圖 .................................................................................. 19

圖 11 點選加入新書 ..................................................................................................... 22

圖 12 選擇要放入之 WORD 檔 ................................................................................... 22

圖 13 詢問是否加入封面圖片 ..................................................................................... 22

圖 14 點選欲加入之圖片 ............................................................................................. 22

圖 15 出現新的書籍 ...................................................................................................... 22

圖 16 打開書籍，即您匯入的內容 .............................................................................. 22

圖 17 點選鍵盤輸入筆記 .............................................................................................. 23

圖 18 輸入欲筆記的內容 .............................................................................................. 23

圖 19 點選手寫繪畫板筆記 .......................................................................................... 23

圖 20 手寫欲筆記的內容 .............................................................................................. 23

圖 21 選擇文字並點選紅色螢光筆 ............................................................................. 24

圖 22 紅色螢光筆 ......................................................................................................... 24

圖 23 選擇文字並點選藍色螢光筆 .............................................................................. 24

圖 24 藍色螢光筆 ......................................................................................................... 24

圖 25 選取欲圖片註解的文字 ..................................................................................... 24

圖 26 點選加入圖片註解按鈕 ..................................................................................... 24

圖 27 選擇使用 GOOGLE搜尋圖片或從檔案匯入 ...................................................... 25

圖 28 文字下方即顯示圖片 ......................................................................................... 25

圖 29 選取欲影音註解的文字 ..................................................................................... 25

圖 30 點選加入影音註解按鈕 ...................................................................................... 25

圖 31 選擇影音檔案 ..................................................................................................... 25

圖 32 文字下方即顯示影音 .......................................................................................... 25

圖 33 選取欲錄音的文字 .............................................................................................. 26

圖 34 點選加入錄音書籤按鈕 ...................................................................................... 26

圖 35 開始錄音 .............................................................................................................. 26

4

圖 36 左上即顯示錄音書籤，點選播放 ...................................................................... 26

圖 37 選取欲做影像書籤的文字 .................................................................................. 26

圖 38 點選加入影像書籤按鈕 ...................................................................................... 26

圖 39 選擇錄影格示並開始錄影 .................................................................................. 27

圖 40 左上即顯示影像書籤，點選即可播放 .............................................................. 27

圖 41 電子書內容顯示畫面 .......................................................................................... 27

圖 42 PMPBOK 的圖..................................................................................................... 27

圖 43 紅色區塊為新增建築物 ...................................................................................... 28

圖 44 孔子石像 .............................................................................................................. 28

圖 45 創意媒體學院 ...................................................................................................... 28

圖 46 游泳池 .................................................................................................................. 29

圖 47 國父銅像 .............................................................................................................. 29

圖 48 學生宿舍 .............................................................................................................. 29

圖 49 行政中心 .............................................................................................................. 29

圖 50 體育館 .................................................................................................................. 29

圖 51 動作:揮手 ............................................................................................................ 29

圖 52 動作:坐下............................................................................................................. 30

圖 53 動作:跳耀 ............................................................................................................ 30

圖 54 進度甘特圖 .......................................................................................................... 34

5

表目錄 表 1 EPUB2.0 與 EPUB3.0 之比較 ................................................................................. 14

表 2 需求分析表 ........................................................................................................... 20

表 3職務分配表 ............................................................................................................ 34

表 4 軟硬體需求分析表 ................................................................................................ 35

表 5 軟硬體需求分析表 ................................................................................................ 35

表 6 電腦需求配備表 .................................................................................................... 35

6

一、緒論 1.1 製作動機

1.實體書本在內容的呈現方式上，缺乏與讀者產生互動以提升讀者閱讀的興趣。

2.一旦書本數目越多，則越佔空間及重量，且攜帶不便，易受週遭環境的影響而造

成損壞。

3.讀者必頇遷就書的內容(指舊式電子書)，較難快速而隨心所欲的選擇某部份內容

進行閱讀。

4.實體書本內容無法進行即時的更新，難於適應變遷的社會環境。

1.2 製作目的

我們延續學長所做的 3D 遊戲式閱讀履歷系統，加強其電子書功能，在電子書

方面，添加更豐富且齊全的互動功能與多媒體製作。

因此，歸納以下為研究目的:

1.在呈現上，以專案管理的內容為題材製作出一套具更多媒體互動功能的電子書，

藉由互動學習提升閱讀的興趣。

2.將書本內容製成電子書，易於保存且不占空間。

3.藉由多媒體標籤的標記功能，紀錄某部分內容，使讀者易於閱讀。

7

二、製作內容與方法 2.1 製作流程

圖 1 製作流程圖

8

2.2 製作方法研究

延續學長的 3D 遊戲式閱讀履歷系統，在崑山科技大學的校園場景，我們加強

部分建築物以及修改學校部分環境變更地方，在這方面使用 Blender 和 Sketchup

建造 3D 模型，並使用 Unity 3D 整合所更場景物件。

針對多媒體互動電子書:

1. 電子書

首先製作、設計一個擁更很多功能的電子書可以結合 XAML+C#、PHP 以及

HTML5 來製作。我們使用 XAML+C#製作翻頁功能、畫線、畫重點、便利貼功能

以及標籤功能等基本互動功能。

2. 數位內容保護

在發展電子書上，是否更拿到作者的同意是很重要的，這方面牽涉智慧財產

權，是讓人不容小覷的，除了與作者協調版權外，我們在這部分利用金鑰來控管。

當使用者取得解密金鑰時才可開啟檔案或者進行下載。更效的防止別人盜取電子

書的內容以及電子書的軟體，保障創作者的權利 。

3. 內容呈現

進入校園後，可以發現場景的更新，與現在的校園相似度更高，而我們使用

XAML+C#製作而成的電子書，將此電子書與 3D 閱讀場景做連接，讓使用者可以

在優美的環境下，進入圖書館閱讀書本，採取試讀的方式，讓使用者想購買此本

書，而註冊會員後購買此本書並且取得金鑰，之後下載電子書軟體，開啟電子書

軟體需先載入書籍才可進行閱讀、註解編輯（影音、錄音、圖片等註解功能）。

4. 互動式內容

我們利用 XAML+C#在電子書軟體增添了影音註解、圖片註解、錄音註解等功

能，讓使用者增加編輯電子書的註解功能。再利用註解功能編輯過後，回傳資料

庫，並且讓使用者得以利用註解相關字詞，找到編輯過相同註解之同好，以利同

好間可以互相討論之互動性。

9

2.3 建模軟體介紹

2.3.1 Blender 介紹

Blender可以執行於不同的平台而且安裝需求空間很少。但它擁更極豐富的功

能，而且大部份都是進階模組塑造軟體，本專題選擇Blender依照影像圖片來塑造

模型。

在 Blender 中，物體與數據是分離的，這使其可以快速塑模，在動畫工具中，

包括了反向動作組件，可設定骨幹，關鍵影格，結構變形，時間線，系統規定參

數，非線性動畫，頂點量重及柔化動量組件，也支援不同的幾何圖元包括網孔碰

撞偵察和一個具更偵察碰撞的粒子系統、多邊形網紋、快速表層塑模、曲線及向

量字元和基本的非線性影像編輯及製作功能。

2.3.2 Google Sketchup 介紹

Sketchup為一種設計輔助軟件，主要是用在三維建模，這套軟體分為建模、動

畫、著色這三大部分。Sketchup表面上極為簡單，實際上卻能快速以及便利的進行

創建和修改。

本專題針對 Sketchup 塑模在建築這方面的塑造優勢，將利用 Sketchup 塑模來

添增崑山科技大學尚未完成之部分建築。

2.3.3 HTML5 介紹

隨著網頁技術的發展，頁面上的標題、段落、表格、圖片、文字變化等。在

背後定義這些結構的語言，就是 HTML。

網頁運用 HTML5 之後，使用者將會在幾個方面感受到它的影響，例如：一、減

少對外掛模組的依賴：現今的網頁應用程式已經相當豐富，但使用者可能需要安

裝各種瀏覽器外掛模組，才能享受到所更的介面元素、應用程式和遊戲。例如我

們需要加裝 Flash 才能玩 FaceBook 上的某些遊戲。相對之下，HTML5 為多媒

體和網頁應用程式立下標準並提供運作機制，減少了使用外掛模組的需要。二、

外觀與介面：HTML5 提供更精細的方式來呈現網頁元素，例如透明度、圖文旋轉、

文字分欄、內嵌字體、點陣繪圖、向量繪圖等，讓網頁讀起來更美觀、更舒適。

三、更豐富的應用程式：HTML5 可運用許多新的 API，讓網頁應用程式可以輕

鬆地達成更多功能和任務。四、HTML5 在網頁加上聲音、影片、或是文字樣式，

變得比較簡單，程式的撰寫也更加輕鬆。目前的 HTML 標準是 HTML 4.01 和

XHTML 1.1，此外還更專門用來表示網頁外觀與樣式的 CSS2。為了讓網頁技術更

上一層樓，相關組織正在擬定下一代的 HTML 標準，這個新標準就是 HTML5。

10

2.4 遊戲引擎介紹

1. Unity 3D

Unity 3D 是一套遊戲製作軟體，它可以製作 3D 與 2D 的遊戲，3D 的遊戲介

面比起 2D（Two Dimensional）的介面增加了 Z 軸，其代表了某個圖像或影像

與觀察者之間的距離以及遠近，Unity 3D 遊戲引擎可將現實生活環境模擬至虛

擬世界中，它簡易卻精美的場景製作、光影與材質的效果都相當逼真，讓使用者

更具臨場感，在最新的版本裡，也相容於許多的平台(例如:大瀏覽器、Wii、PS3、

iPhone、iPad 等)，這是我們選擇 Unity 3D 的重要因素。

使用 Unity 3D，頇了解其操作介面，而 Unity 的介面都是圖型化的使用者介

面，且物件與物件之間都更許多直覺化的操控方式，例如直線拉一拉或用拖曳的

方式設定物件的屬性，其中使用最頻繁的是 Inspector 欄位，其功能為調整整個

畫面中的任一個數值，像是 Transform 值，可以調整任何物件的大小、旋轉與

座標。而 Project 欄位則是存放專案所需的物件、素材、模組與程式碼等。

Hierarchy 則是整個虛擬世界中已使用到的 Object，包含 Terrain、Camera 等基

本物件。

在主操作介面中包含 Scene 和 Game 畫面。Scene 是建構一切場景與環境

的畫面，利用拖曳、移動、旋轉與縮放四個功能按鈕來繪製。而 Game 畫面搭

配 Main Camera 便能夠預覽 Scene 所產生的遊戲畫面，透過 Scene 與 Game 畫

面的相互協調，使我們更能清楚地檢視所繪製的虛擬空間的錯誤與瑕疵。

2.5 ebook 介紹

網際網路的興起，各種不同的網路應用也隨之而起，電子書的興起即是一例。

電子書(e-book)是一種以電子與數位化方式替代傳統紙本圖書的方案，對數位化後

的書籍內容進行閱讀的動作。

以下介紹 ebook 市場趨勢：

1. 在電子書產業鏈的形成過程中，技術商、傳統銷售商、印刷商等都更可能轉化

為電子書分銷服務商。

2. 定價以及盜版成為電子書市場的焦點問題。

3. 大量平板電腦將集中在 2011 年推出，電子書 3.0（APP 和增強型電子書）將成

為平板電腦最重要的應用之一，繼續在蘋果商店和 Android 等其他商店的發展勢

頭。

4. 電子課本及電子書包的試點範圍進一步擴大

11

2.5.1 一般電子書的需求

1. 註解

2. 實體翻頁功能

3. 畫重點、便利貼功能、標籤功能

4. 圖片內容呈現

5. 防止書籍內容被複製

6. 連結至其他網頁、email附加功能，使資訊立即回饋

7. 動態 Unity 3D 製作環境

8. 音效製作(如:真人發音)

2.5.2 電子書發展軟體

製作電子書前，尋找一些製作電子書的軟體，如:SimMagic ebook、Adobe

InDesign CS5、eCub、 Calibre 、Sigil等進行測試。再利用各式 Reader 規格閱讀

電子書，如: Adobe digital edition、 Lovelyreader 、Koobe、 FBReader、

EPUBReader 、firefox add-on等。將所製作好的電子書置於硬體閱讀器。各式硬體

閱讀器如圖 2。

圖 2 各式硬體閱讀器

2.5.3 ePUB3.0 規範

ePUB 是由國際數位出版論壇 IDPF(International Digital

Publishing Fourm)所制定的標準，並於 2007 年 10 起正式採

用。圖 3為 ePUB3.0 最新內容格式規範圖(資策會創研所 陳美莉組長)、圖 4為 ePub

架構圖。

ePUB 是一個自由的開放標準，屬於一種可以「自動重新編排」的內容；也就

是文字內容可以根據閱讀設備的特性，以最適於閱讀的方式顯示 。檔案內部使用

了 XHTML 來展現文字、並以 zip 壓縮格式來包裹檔案內容 。格式中包含了數位

12

版權管理（DRM）相關功能可供選用。

ePub 檔是由很多網頁檔的結合。ePub 的格式包括了三個部分：

1. OCF (Open Container Format) 開放容器格式

定義 XML、XHTML、CSS 內容的版面，廠商能遵循該標準來開發電子書閱

讀器，不同廠牌的電子書閱讀器都能顯示不同電子出版品提供商所製作的電子出

版品

2. OPF (Open Packaging Format) 開放包裝格式

定義以 XML 為基礎的.opf檔案結構，描述電子出版品中各單元內容間的關連

性，將數個 OPS 電子出版品內容單元包成一本電子出版品。

3. OPS (Open Publication Structure) 開放出版架構

將所更相關文件收集至 ZIP 壓縮檔案之中，便於電子出版品傳送。

圖 3 ePUB3.0 內容格式規範

13

圖 4 ePUB 架構圖

14

下列表格為 ePub2.0 與 epub3.0 之比較，由此表格得知 epub3.0 在各方面都比

ePub2.0 更完善，說明了 epub3.0 在未來發展上更具優勢。

表 1 ePub2.0 與 ePub3.0 之比較

ePub2.0 ePub3.0

是否支援 Html5 和 CSS3 不支援 支援

內容是否更多媒體更聲

書

無 多媒體播放

文字語音同步

互動性 無 可輸入/儲存/回覆

語言與排版 只能橫排 支援多國語言及直排

可使用數字符號標記語言

內容註記 無 可文字註記,圖片註記,影

音註記

文字內容 無 字典查詢/全文搜尋

2.6 開發工具(XAML+C#)

2.6.1 XAML 介紹

XAML(Extensible Application Markup Language)，是 WPF（Windows

Presentation Foundation）的一部分，是一種 XML 的使用者介面描述語言，更著

HTML 的外觀，又揉合了 XML 語法的本質，例如：可以使用標籤設定按

鈕（Button）。類似 Linux 平台下的 glade。

XAML屬於一種.NET Programming Language， 屬於通用語言執行時（Common

Language Runtime），同 C#、VB.NET 等同。與 HTML 類似，特點是用來描述使用

者介面。XAML 可以定義 2D 和 3D 物件、旋轉、動畫，以及各式各樣的效果。

2.6.2 WPF 架構

1. 管理層：

WPF 的管理層是.NET Framework 組成的一套類型，這意味著它是由 Common

Language Runtime （CLR）管理的。

2. 非管理層：

Direct3D：在 WPF 的圖形呈現，它是低級別的 API。

http://zh.wikipedia.org/wiki/Windows_Presentation_Foundationhttp://zh.wikipedia.org/wiki/Windows_Presentation_Foundationhttp://zh.wikipedia.org/wiki/Linuxhttp://zh.wikipedia.org/wiki/Common_Language_Runtimehttp://zh.wikipedia.org/wiki/Common_Language_Runtimehttp://zh.wikipedia.org/wiki/Chttp://zh.wikipedia.org/wiki/VB.NEThttp://zh.wikipedia.org/wiki/HTML

15

USER32：每一個程序使用的主要核心 API。它實際上是管理內存和進程分離。

GDI & Device Drivers：固定的操作系統，是從應用程序用於訪問低級別的 API。

圖 5 XAML 架構圖

16

三、系統分析

3.1 系統流程圖

1. 首先登入 3D 閱讀情境系統後，到圖書館取得閱讀帳號及金鑰（例如：

UMAYMNJCSMAEDLPHBTMJ）

2. 進入圖書館，點擊書籍，下載 ebook 閱讀器

3. 安裝 ebook 時輸入金鑰（例如：UMAYMNJCSMAEDLPHBTMJ），與閱讀帳號

的對應關係並存入書商資料庫

4. 進入 ebook，使電子書具更翻頁、標籤、多媒體註解、章節題庫互動

5. 傳送閱讀紀錄：需要靠金鑰的比對，進行傳送時間、頁次、註解內容、註解位

置、註解型態等等存入資料庫。

6. 電子書閱讀歷程資料庫：可以統計分析，1.哪一本書或頁次被閱讀的次數 2.哪

些人閱讀了哪些書 3.交叉分析註解與人的關係，找出閱讀同好

7. 透過查詢履歷，可以查詢出同好並且在閱讀情境系統以第三人稱的角度與其他

同好透過聊天系統互動

8. 加值應用後可以達成協同學習目的

圖 6 系統流程圖

17

3.2 使用案例圖

3.2.1 使用者使用案例圖

圖 7 使用者使用案例圖

18

3.2.2 管理者使用案例圖

圖 8 管理者使用案例圖

圖 9 電子書使用者使用案例

19

圖 10 使用者登入系統─活動圖

20

3.3 需求分析表

表 2 需求分析表

事件 觸發器 來源 活動 回應 目的地

使用者登入系統 帳號、密

碼

使用者 檢驗登入資料 系統主畫

面

使用者

使用者註冊會員 會員資料 使用者 註冊成為會員 成功加入

會員

使用者

使用者查詢書籍 書籍資料 使用者 查詢書籍資料 成功查詢 系統

使用者查詢留言 留言資料 使用者 查詢留言版資

料

成功查詢 系統

使用者查詢心得 心得資料 使用者 查詢心得資料 成功查詢 系統

使用者查詢對話 對話資料 使用者 查詢對話資料 成功查詢 系統

使用者修改會員資

料

會員資料 使用者 修改會員資料 成功修改 使用者

使用者新增留言 留言資料 使用者 新增留言資料 新增成功 使用者

使用者新增心情 心得資料 使用者 新增心得資料 新增成功 使用者

使用者新增評論 評論資料 使用者 新增評論資料 新增成功 使用者

使用者修改評論 評論資料 使用者 修改評論資料 修改成功 使用者

使用者刪除評論 評論資料 使用者 刪除評論資料 刪除成功 使用者

使用者查詢評論 評論資料 使用者 查詢評論資料 查詢成功 使用者

使用者修改心情 心得資料 使用者 修改心得資料 修改成功 使用者

使用者刪除留言 留言資料 使用者 刪除留言資料 刪除成功 使用者

使用者新增書籍 書籍資料 使用者 新增書籍資料 新增成功 使用者

管理者查詢會員 使用者會

員資料

管理者 查詢會員資料 成功訊息 系統

管理者修改會員 使用者會

員資料

管理者 修改會員資料 成功訊息 系統

管理者新增書籍 書籍資料 管理者 新增書籍資料 新增成功 系統

21

管理者修改書籍 書籍資料 管理者 修改書籍資料 修改成功 系統

管理者刪除書籍 書籍資料 管理者 刪除書籍資料 刪除成功 系統

管理者查詢書籍 書籍資料 管理者 查詢書籍資料 成功查詢 系統

管理者刪除留言 留言資料 管理者 刪除留言資料 刪除成功 系統

管理者刪除心得 心得資料 管理者 刪除心得資料 刪除成功 系統

管理者新增心情 心得資料 管理者 查詢心得資料 新增成功 系統

管理者修改心情 心得資料 管理者 修改心得資料 修改成功 系統

管理者查詢心情 心得資料 管理者 查詢心得資料 查詢成功 系統

管理者新增留言 留言資料 管理者 查詢留言資料 查詢成功 系統

管理者修改留言 留言資料 管理者 修改留言資料 修改成功 系統

管理者查詢留言 留言資料 管理者 查詢留言資料 查詢成功 系統

22

四、系統展示

4.1 電子書功能

4.1.1 Word 檔案匯入電子書

圖 11 點選加入新書

圖 12 選擇要放入之 WORD 檔

圖 13 詢問是否加入封面圖片

圖 14 點選欲加入之圖片

圖 15 出現新的書籍

圖 16 打開書籍，即您匯入的內容

23

4.1.2 筆記類

使用鍵盤輸入以及手寫繪畫板做筆記，當筆記標示錯誤時，可點選刪除筆記，

進行刪除這個動作。

圖 17 點選鍵盤輸入筆記

圖 18 輸入欲筆記的內容

圖 19 點選手寫繪畫板筆記

圖 20 手寫欲筆記的內容

4.1.3 註解類

註解方面，可以使用螢光筆作重點標記，當覺得這段文字可以用某張圖片或

影音表示，可以使用圖片註解及影音註解座標示，當標示錯誤時，利用清除註解

來清除。

24

(1) 螢光筆註解

圖 21 選擇文字並點選紅色螢光筆

圖 22 紅色螢光筆

圖 23 選擇文字並點選藍色螢光筆

圖 24 藍色螢光筆

(2) 多媒體圖片註解

圖 25 選取欲圖片註解的文字

圖 26 點選加入圖片註解按鈕

25

圖 27 選擇使用 google 搜尋圖片或從

檔案匯入

圖 28 文字下方即顯示圖片

(3)多媒體影音註解

圖 29 選取欲影音註解的文字

圖 30 點選加入影音註解按鈕

圖 31 選擇影音檔案

圖 32 文字下方即顯示影音

26

4.1.4 書籤類

(1)多媒體錄音書籤

圖 33 選取欲錄音的文字

圖 34 點選加入錄音書籤按鈕

圖 35 開始錄音

圖 36 左上即顯示錄音書籤，點選播放

(2)多媒體影像書籤

圖 37 選取欲做影像書籤的文字

圖 38 點選加入影像書籤按鈕

27

圖 39 選擇錄影格示並開始錄影

圖 40 左上即顯示影像書籤，點選即可

播放

4.2 電子書內容

電子書內容為專案管理知識體指南 PMBOK(第四版)，其專案管理的結構呈現

為目錄、章節、內容、圖文、題目。

圖 41 電子書內容顯示畫面

圖 42 PMPBOK 的圖

4.3 場景、人物建置

新增新的人物建模及動畫製作，使人物能做出更多的動作，擴大環境建設、

增加原先缺少的建築物模型，如：創意媒體學院、行政中心、學生宿舍、體育館、

籃球場、游泳池以及今年新增的建築物，如:孔子石像、國父銅像。

為了使系統運作更加流暢所以在建模時盡量使每個模型的面數不超過 5000面

避免系統運行時發生延遲。

28

圖 43 紅色區塊為新增建築物

圖 44 孔子石像

圖 45 創意媒體學院

29

圖 46 游泳池

圖 47 國父銅像

圖 48 學生宿舍

圖 49 行政中心

圖 50 體育館

圖 51 動作:揮手

30

圖 52 動作:坐下

圖 53 動作:跳耀

31

五、結論 由於電子書可以節省紙張的浪費，減少樹木的砍筏，在現今環保意識抬頭

的社會中將掀起一股風潮。坊間更許多各式各樣的電子書如雨後春筍般出現，

在這競爭激烈的市場上，只更方便使用，操作流暢，才會受消費者喜愛，並且

支持。

在做專題的一年中我們學習到互助合作，以團隊為中心，把自己份內的工

作完成，並且幫助未完成的同學完成他的部分與其加快進度。

在這過程中遇到了許多的困難我們沒更被困住、被擊倒，我們向老師、學

長請求支援，在老師及學長的教導中我們不斷的吸收、學習，並將我們所遇到

的困難用文字記錄下來，幫助後進的學弟妹們可以參考並且快速的跨過我們曾

經的障礙，不斷的朝更精緻更新奇、創意的方向前進。

32

六、所需人力及時程安排 6.1 WBS 工作分解結構

3D 遊戲式閱讀履歷系統—多媒體互動電子書(100%)

1 前置階段(25%)

1.1 成員組建表 (1%)

1.2 教育訓練(20%)

1.2.1 Blender 人物製作學習時數報告表(5%)

1.2.2 SketchUp 建築物製作學習時數報告表(3%)

1.2.3 Unity 3.0 JavaScript 程式設計學習時數報告表(4%)

1.2.4 PHP 程式設計學習時數報告表(2%)

1.2.5 FLASH CS5 ActionScript3.0(4%)設計學習時數報告表

1.2.6 HTML 5 & RIA(2%) 學習時數報告表

1.3 Unity遊戲平台製作環境升級步驟說明書(1%)

1.4 蒐集需求(3%)

1.4.1 網站規劃與管理電子書資料目錄

1.4.2 網站規劃與管理電子書中文內文

1.4.3 建物照相相片

1.4.4 蒐集所需圖片

1.4.5 整理資料

2 規劃階段(25%)

2.1 規劃網站分鏡腳本(2%)

2.2 遊戲任務、場景與關卡的結構設計圖(3%)

2.3 遊戲劇情規劃書(1%)

2.4 軟硬體網路系統環境需求分析書(1%)

2.5 網站功能與介面需求書(4%)

2.6 美工文案標準流程建議書(1%)

2.7 文案對照表(3%)

2.8 網站規劃與管理中文手冊(5%)

2.9 網站地圖規劃書(1%)

2.10 資料庫綱要表(DB Schema)(1%)

2.11 技術風險登錄表(0.5%)

2.12 擬定 WBS(0.5%)

2.13 UML 規劃書(1%)

33

2.14 期初報告書(0.5%)

2.15 期初簡報(0.5%)

3 執行階段(35%)

3.1 製作資料庫(2%)

3.1.1 資料庫連線之測試技術報告(1%)

3.1.2 指令腳本(1%)

3.1.2.1 資料庫表格建立(0.5%)

3.1.2.2 展示劇情腳本 (0.5%)

3.2 電子書內容管理網站系統(5%)

3.3 電子書同好搜尋系統

3.4 網站規劃與管理電子書內容電子檔(10%)

3.5 Blender 基本動作動畫 FBX 檔案(10%)

3.5.1 3D 人物模型(5%)

3.5.2 3D 模型(5%)

3.6 SketchUp 基本動作動畫 skp 檔案(4%)

3.6.1 3D 物品模型(2%)

3.6.2 3D 建築模型(2%)

3.7 人物匯入 Unity 之可操控物件

3.8 發展 DRM(2%)

3.8.1 DRM 研究報告(1%)

3.8.2 DRM 改善或替代方案(1%)

3.9 發展串流技術(2%)

3.9.1 影音串流介面系統架構

4 系統測試(5%)

4.1 白箱測試(1%)

4.2 黑箱測試(0.5%)

4.3 問卷調查表(2%)

4.4 回收問卷分析(1%)

4.5 測試要件檢核表(Checklist)(0.25%)

4.6 技術風險回應表(0.25%)

5 期末結案(10%)

5.1 海報(1%)

5.2 期末報告書(4%)

5.3 投稿稿件(3%)

34

5.4 校內競賽申請表(0.25%)

5.5 校外競賽申請表(0.25%)

5.6 經驗傳承記錄(1%)

5.7 系統軟體與文件交接 DVD(0.25%)

5.8 審核通過簽名表(0.25%)

6.2 進度甘特圖

圖 54 進度甘特圖

6.3 職務分配表

表 3 職務分配表

職 務 職責 成 員

組 長 監督進度、資料庫設計

規劃系統、網站製作

陳秀惠

組 員 文書美工、文書撰寫

規劃系統、網站製作

吳先逸

組 員 規劃系統、網站製作

許芳菁

組 員 3D 建模、遊戲任務場景設計

林念霆

組 員 3D 建模、人物建築設計

高詠琦

35

6.4 軟硬體需求

製作 3D 遊戲式閱讀履歷系統─多媒體互動電子書，所使用的各項軟硬體需

求。

表 4 軟硬體需求分析表

軟體 應用

Windows XP 作業系統 軟體執行環境

Windows VISTA 作業系統 軟體執行環境

表 5 軟硬體需求分析表

軟體 應用

Blender 3D 建模、建立動作

Unity 3D 製作 3D 遊戲場景，撰寫程式

Google Skecthup 8 3D 建立建築物模型

Flash CS5 建立多媒體動態介面

PHP 網頁及資料庫連結程式

MYSQL 資料庫系統

表 6 電腦需求配備表

配備項目 基本配備

CPU Pentium 4

記憶體 1GB 以上

硬碟 160GB

音效卡 16Bit

顯示卡 內建顯示卡

36

七、參考文獻

[1]Unity 3D 引擎入門教學，http://v.youku.com/v_show/id_XMTA2NzUwMDU2.htm

[2]Unity 3D，官方網站，http://unity3d.com/ [3]介紹 Google Sketchup，http://active.tceb.edu.tw/post/124/1475

[4]Blender，官方網站，http://www.blender.org/

[5]Blender，維基百科，http://zh.wikipedia.org/zh-tw/Blender

[6]PHP介紹，http://www.go.net.tw/4/A5.htm

[7]資料庫系統教學，http://www.twbsd.org/cht/book/ch19.htm

[8]MYSQL基本語法，http://tsuozoe.pixnet.net/blog/post/21283890

[9]德魯依的動畫實驗室，http://www.youtube.com/user/druiddin

[10]解析HTML5，http://www.ios.com.tw/article.php?id=80

[11]ePUB3.0，http://5-gu.blogspot.com/2011/02/epub30.html

[12]XAML架構，http://www.longhorncorner.com/uploadfile/nipuntomar/wpf-an-introduction-part-2/

[13]XAML，維基百科， http://zh.wikipedia.org/wiki/XAML

http://v.youku.com/v_show/id_XMTA2NzUwMDU2.htmhttp://unity3d.com/http://active.tceb.edu.tw/post/124/1475http://active.tceb.edu.tw/post/124/1475http://www.go.net.tw/4/A5.htmhttp://www.youtube.com/user/druiddinhttp://www.ios.com.tw/article.php?id=80http://5-gu.blogspot.com/2011/02/epub30.htmlhttp://www.longhorncorner.com/uploadfile/nipuntomar/wpf-an-introduction-part-2/http://zh.wikipedia.org/wiki/XAML