崑山科技大學

資訊工程系

專題製作報告

互動式童話

學生：吳宗軒、吳承維、林韋志

指導老師：黃慶祥

中華民國 103年 3 月

II

I

互動式童話

學生：吳宗軒、吳承維、林韋志 指導老師：黃慶祥

崑山科技大學資訊工程系

摘 要

現今社會上，電子產品帶給了人類許多的方便性，然而因為智慧型手

機的普及化其功能不在局限於基本的語音通訊功能，手機上的應用軟體及

遊戲更是多元。

此專題使用 Android 平台來實作，使用 Eclipse Java與 Android SDK

開發，可以隨時隨地輕鬆閱讀，用聽的方式瞭解童話故事，幼兒還可以藉

此 APP達到寓教於樂互動的目標。

II

致 謝

非常感謝指導教授黃慶祥老師，在我們於專題上遭遇到困難與瓶頸

時，給予我們突破瓶頸的方法與方向，並告知我們專題上有哪些不足與需

要修改的地方，讓我們能夠順利完成專題及學習到不同層面的知識。同時

也感謝在這一年多的專題製作期間，周遭的師長、同學也時常給我們許多

的協助。

III

目 錄

摘要………………………………………………………………………Ⅰ

致謝………………………………………………………………………Ⅱ

目錄………………………………………………………………………Ⅲ

表目錄……………………………………………………………………Ⅳ

圖目錄……………………………………………………………………Ⅴ

第一章 緒論 ………………………………………………………………1

1.1 研究動機及目的…………………………………………1

1.2 研究目的…………………………………………………1

第二章 相關研究 …………………………………………………………2

2.1 Android 介紹……………………………………………2

2.1.1 Android 是什麼 ………………………………2

2.1.2 Android 系統介紹 ……………………………2

2.1.3 Android 發展與應用 …………………………4

2.1.4 Android 系統的優勢 …………………………4

2.2 Eclipse…………………………………………………5

2.3 App Inventor……………………………………………5

2.4 Processing………………………………………………9

2.5 SAI………………………………………………………10

第三章 系統架構…………………………………………………………15

3.1 系統需求 …………………………………………………15

IV

3.2 系統環境建置 ……………………………………………16

第四章 系統實作…………………………………………………………21

4.1 系統流程圖 ………………………………………………21

4.2 使用者流程圖 ……………………………………………22

4.3 使用者操作流程 …………………………………………23

4.4 系統製作 …………………………………………………25

4.4.1 開新專案………………………………………25

4.4.2 影片播放………………………………………26

4.4.3 找不同…………………………………………28

4.4.4 圖畫……………………………………………32

4.4.5 問答……………………………………………36

第五章 結論………………………………………………………………40

第六章 參考文獻…………………………………………………………41

V

表 目 錄

表2.3.1 App Inventor 系統需求……………………………………………6

表 3.1.1 java套件……………………………………………………………15

VI

圖 目 錄

圖 2.1.1 Android系統架構圖…………………………………………………2

圖 2.2.1 Eclips各版本總覽表………………………………………………5

圖 2.3.1 MIT App Inventor官方網頁………………………………………6

圖2.3.2 登入 App Inventor線上服務………………………………………7

圖2.3.3 選擇 Google 帳號………………………………………………… 7

圖2.3.4 新增 App…………………………………………………………… 8

圖2.3.5 App Inventor 開發介面……………………………………………8

圖2.4.1 Processing 安裝 SDK Manager……………………………………9

圖2.4.2 安裝 Processing 的 Android Mode………………………………10

圖2.5.1 基本介面……………………………………………………………11

圖2.5.2 新建檔案……………………………………………………………12

圖2.5.3 工具選擇與微調……………………………………………………13

圖2.5.4 使用成果……………………………………………………………14

圖 3.2.1 JDK 下載頁面………………………………………………………16

圖 3.2.2 Eclipse 下載頁面…………………………………………………17

圖 3.2.3 SDK 下載頁面………………………………………………………17

圖 3.2.4 Android Development Tools安裝畫面 …………………………18

https://www.google.com.tw/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CDEQFjAA&url=http%3A%2F%2Fappinventor.mit.edu%2F&ei=an0yU-2_NcOVlQXrroHQDQ&usg=AFQjCNHFs37W9GZmj5eXoMwfkFeXIuRpZw&sig2=cu9EYVehcpWarKO-h1kzWQ

VII

圖 3.2.5 Android 安裝畫面…………………………………………………19

圖 3.2.6 Android AVD 建立畫面……………………………………………20

圖 3.2.7 成功啟動智慧型手機模擬器………………………………………20

圖 4.1.1 系統流程圖…………………………………………………………21

圖 4.2.1 使用者流程圖………………………………………………………22

圖 4.3.1 步驟一………………………………………………………………23

圖 4.3.2 步驟二………………………………………………………………23

圖 4.3.3 步驟三………………………………………………………………24

圖 4.4.1 開新專案……………………………………………………………25

圖 4.4.2 影片播放……………………………………………………………26

圖 4.4.3 影片播放顯示效果…………………………………………………27

圖 4.4.4 設定像素及比例……………………………………………………28

圖 4.4.5 座標及筆的顏色粗細………………………………………………28

圖 4.4.6 找不同顯示效果……………………………………………………30

圖 4.4.6 找顏色不同顯示效果………………………………………………31

圖 4.4.8 紀錄移動的座標位置………………………………………………32

圖 4.4.9 儲存圖片及清除面板………………………………………………32

圖 4.4.10圖畫顯示效果………………………………………………………35

圖 4.4.11取得點選位置………………………………………………………36

VIII

圖 4.4.12答案顯示……………………………………………………………36

圖 4.4.13問答顯示效果………………………………………………………39

1

第一章 緒論

1.1 研究背景與動機

隨著科技時代的進步，世界潮流的改變，造成許多變革，電子產品帶

給了人類許多的方便性。而近年來「智慧型手機」成為手機產業主流的趨

勢。智慧型手機不再只是基本的語音通訊功能，更可以拿來閱讀、瀏覽網

頁、看影片。

1.2 研究目的

隨著使用 3C 產品年齡層下降的趨勢，google play 的兒童幼教 APP 越

來越多，因此製作藉著手指觸碰螢幕來訓練手指的小肌肉群，並且藉由影

片觀賞來回答影片中的題目，此專題的字型旁邊都有注音符號加註，方便

兒童閱讀文字順暢。

1.2 手繪的原因

當初一開始並沒有產生手繪的想法，但是隨著進度的增加所要用到的

圖片也增多，可是如果都用從網路上找尋的圖片會有許多的問題，最後也

因為自己本身很喜歡繪圖所以才會想說圖片就用自己手繪的方式去呈現，

這樣不但可以避免一些問題也能夠增加作品的獨特性。

2

第二章 相關研究

2.1 Android 介紹

2.1.1 Android是什麼

Android不是手機，以 Linux為核心的平台，專為智慧型手機設計

的手機作業系統，靠著「免費」和「開放」兩個優勢，在手機作業系統

中掀起了熱潮。

2.1.2 Android系統介紹

圖 2.1.1 Android 系統架構圖

http://zh.wikipedia.org/wiki/Linuxhttp://zh.wikipedia.org/wiki/%E4%BD%9C%E6%A5%AD%E7%B3%BB%E7%B5%B1

3

Android 系統架構圖，主要元件包括：

(1) Applications

在Android SDK手機模擬器和實體手機中，有一系列以Java語

言撰寫的核心應用程式。使用者一開始就可以使用這些基本的功

能來操作應用手機，包含：電子郵件程式、簡訊程式、日曆、地

圖、瀏覽器及其它應用程式。

(2) Application Framework

在開發Android應用程式時，可以完整的使用統一的應用程式

標準介面（GUI），讓應用程式框架的架構重覆使用各個原件比較

容易，所有的應用程式都可以提供出本身的功能，所有的應用程

式比較容易的使用其它程式的功能。這樣子的機制，有助於開發

者去改寫自己新的軟體原件。

(3) Libraries

提供許多函示供開發應用程式使用，包括了：介面設計、資

料庫管理、網頁瀏覽器、影音格式支援等等。

4

(4) Android Runtime

Android SDK的Android Runtime分成二個重要的元件來執行

系統，這二個重要元件分別是核心函式庫和虛擬機器。

(5) Linux Kernel

在 Android SDK的作業系統是使用 Linux，提供許多核心的系

統服務。

2.1.3 Android發展與應用

Android SDK提供必要的API與開發工具，使用Java語言為主體，在

Android平台上開發應用軟體，除了有許多軟體上的函示庫讓開發者使

用之外，另外還有許多手機硬體設備的支援，如：Camera 相機功能、

GPS 衛星定位、電子羅盤、加速度感測裝備等等，讓開發者輕鬆地開發

出豐富的Android 應用程式。

2.1.4 Android系統的優勢

因為Android使用免費和開放原始碼的策略，對軟體開發者來說，

Android上的應用程式相容於各種型號的Android手機，並且能透過

「Google Play」將自己的應用程式銷售到世界各地；對於使用者來說，

Android開放性的平台，使得硬體設備和軟體資源增加，搭配人性化的

人機介面，更貼近使用者的需求。

5

2.2 Eclipse

Eclipse 是著名的跨平台開源整合式開發環境（IDE）。最初主要用來

Java語言開發，目前亦有人透過外掛模組使其作為 C++、Python、PHP等其

他語言的開發工具。

Eclipse 的本身只是一個框架平台，但是眾多外掛模組的支援，使得

Eclipse擁有較佳的靈活性。

圖2.2.1 Eclipse各版本總覽表

2.3 App Inventor

App Inventor原是Google實驗室（Google Lab）的一個子計畫，在2012

年移交給麻省理工學院行動學習中心進行後續的開發與推展。

http://zh.wikipedia.org/wiki/%E8%B7%A8%E5%B9%B3%E5%8F%B0http://zh.wikipedia.org/wiki/%E8%B7%A8%E5%B9%B3%E5%8F%B0http://zh.wikipedia.org/wiki/%E9%9B%86%E6%88%90%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83http://zh.wikipedia.org/wiki/Javahttp://zh.wikipedia.org/wiki/%E6%8F%92%E4%BB%B6http://zh.wikipedia.org/wiki/C%2B%2Bhttp://zh.wikipedia.org/wiki/Pythonhttp://zh.wikipedia.org/wiki/PHPhttp://zh.wikipedia.org/wiki/%E6%8F%92%E4%BB%B6

6

App Inventor系統需求：

作業系統 瀏覽器

Windows XP/Vista/7/8 Microsoft Internet Explorer 7以上版本

Mac OS X 10.5/10.6 Google Chrome 4.0以上版本

Ubuntu 8+/Debian 5+ Mozilla Firefox 3.6以上版本

Apple Safari 5.0以上版本

表2.3.1 App Inventor 系統需求

圖2.3.1 MIT App Inventor 官方網頁

使用前必須先擁有一個Google帳號，若沒有的話請先自行申請，在此

由於我們已經擁有Google帳號，所以網頁會請我們選擇一個要使用的

Google帳號，選則好後就按下Allow

https://www.google.com.tw/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CDEQFjAA&url=http%3A%2F%2Fappinventor.mit.edu%2F&ei=an0yU-2_NcOVlQXrroHQDQ&usg=AFQjCNHFs37W9GZmj5eXoMwfkFeXIuRpZw&sig2=cu9EYVehcpWarKO-h1kzWQ

7

圖2.3.2 登入App Inventor 線上服務

圖2.3.3 選擇Google帳號

進入App Inventor的使用畫面，基本這也是一個Web Application的應

用，所有程式開發的動作都可以透過瀏覽器完成，由於第一次使用並沒有

建立過任何App，所以就先點選紅框內的New來新增一個App。

8

圖2.3.4 新增App

輸入App的名稱，在此填入Test，按下OK，基本的內容有左邊紅框內的

各種元件，以及中間紅框內的螢幕空間，讓我們可以將需要的元件從左邊

紅框內拖至中間螢幕空間內。

圖2.3.5 App Inventor 開發介面

9

2.4 Processing

Processing是一個開放原始碼的程式語言及開發環境，提供給那些想

要對影像、動畫、聲音進行程式編輯的工作者。支援的平台有Linux、Mac OS

X及Windows。

下載單獨的 Android SDK：

圖2.4.1 Processing 安裝SDK Manager

10

圖2.4.2 安裝 Processing 的 Android Mode

2.5 SAI

Easy Paint Tool SAI，簡稱SAI，是一個已經轉型商業化的繪圖軟體，

是由日本的SYSTEAMAX開發的。2008年02月25日，Easy Paint Tool SAI

Ver.1.0.0 正式版發行。目前SAI還在持續更新，新版本仍在繼續開發調試

中。在正式版發行之前，SAI是作為自由軟體試用的形式對外發布的。

與其他同類軟體不同的是，SAI給眾多數字插畫家以及CG愛好者提供了一個

輕鬆創作的平台。SAI極具人性化，其追求的是與數碼繪圖板極好的相互兼

容性、繪圖的美感、簡便的操作以及為用戶提供一個輕鬆繪圖的平台。（出

處：維基百科）

11

圖2.5.1 基本介面

sai 的基本介面有許多功能可以使用，像是有把圖片分層的功

能、圖片的縮放、畫材的效果等不同的功能，也有提供各種的

繪圖工具可以使用。

12

圖2.5.2 新建檔案(檔案->開啟新檔->設定大小->完成)

新建檔案的方法，從畫面的左上角點選檔案然後開啟新檔，設

定檔案的名稱解析度，解析度有一開始已經設定好的也可以隨

自己的喜歡去修改，決定完成後按確定就創建成功。

13

圖2.5.3 工具選擇.微調

選擇工具完後的一些細部微調，可以調整筆尖的形狀、最大直

徑、最小直徑、濃度大小等等。

14

圖2.5.4 使用成果

sai使用後簡易的作品圖案。

15

第三章 系統架構

3.1 系統需求

安裝 JDK SUN JAVA套件:

Sun J2SE 5.0 套件

名稱

Sun Java SE 6 套件

名稱 描述

sun-java5-jdk

sun-java5-jre

sun-java6-jdk

sun-java6-jre

Sun JDK 開發工具，開發

Java 程式必備

Sun Java Runtime，僅供執

行 Java 程式，不包含

compiler 等開發工具

sun-java5-fonts

sun-java5-plugin

sun-java6-fonts

sun-java6-plugin

Sun JRE 提供了一系列的

Lucida TrueType 字體，這

個套件使到這些字體能夠

被 defoma 使用

供網頁瀏覽器用的 Sun

Java™ Applet 插件

sun-java5-doc

sun-java5-source

sun-java6-doc

sun-java6-source

JDK API 文檔 (javadoc)

Java API 的 源 代 碼

(src.zip)

sun-java5-demo

sun-java5-bin

ia32-sun-java5-bin

sun-java6-demo

sun-java6-bin

ia32-sun-java6-bin

Java 演示與程式例子

jre 和 plugin 套件所依賴

的，所以不需單獨安裝

在 Intel 64-bit (包括

amd64 和 ia64) 平台上

執行 32-bit Sun Java 所

需要的檔案

表 3.1.1 java 套件

16

3.2 系統環境建置

選擇開發環境：Windows 7 64bits，由於Android應用程式都是以Java

JDK5以上的Java程式語言進行開發，且通常會以Eclipse進行程式的編寫與

除錯工作，因此我們必須先安裝JDK與Eclipse開發環境。

JDK(http://www.oracle.com/technetwork/java/javase/downloads/index.html)。

圖 3.2.1 JDK 下載頁面

http://www.oracle.com/technetwork/java/javase/downloads/index.html

17

Eclipse (http://www.eclipse.org/downloads/)

圖 3.2.2 Eclipse 下載頁面

最後安裝的是 Android SDK (http://developer.android.com/sdk/index.html)

圖 3.2.3 SDK 下載頁面

http://www.eclipse.org/downloads/http://developer.android.com/sdk/index.html

18

Android SDK也就是智慧手機模擬器。將剛剛下載下來的 Android SDK

壓縮檔解壓縮後，開啟 SDK Manager 後會有一堆 Android 版本的模擬器選

項要安裝，我們選擇全部安裝，等待安裝完成後我們開啟安裝完成的

Eclipse。

把 Android 開發工具 (Android Development Tools,ADT)安裝到

Eclipse，進入主畫面後點選下拉式選單列「Help→Install New Software」

開啟了一個對話框，按 ADD 按鈕後，在 Location 欄位中輸入

「http://dl-ssl.google.com/android/eclipse/」後按下 OK，將會看到

Developer Tools選項，勾選後按下 Next按鈕就開始安裝了。

圖3.2.4 Android Development Tools 安裝畫面

19

接著開啟選單「Window→Preferences」開啟對話框設定，先在左側的

選項中點選Android，接著在右側視窗框中按下Browse開啟先前解壓縮的

Android SDK資料夾，依序按下Apply和OK即可。

圖3.2.5 Android安裝畫面

最後，在選單中「Window→Android Virtual Device Manager」開啟

對話框，然後按右側New按鈕可創建一個自己的智慧手機模擬器，Target可

選擇版本，然後創造AVD，之後啟動Start。

20

圖3.2.6 Android AVD 建立畫面

即可看見我們的模擬智慧手機

圖 3.2.7 成功啟動智慧型手機模擬器

21

第四章 系統實作

4.1 系統流程圖

圖 4.1.1 系統流程圖

互動式童話分成兩種年齡層、五種不同的模式。年齡層分成三

到六歲與六到十二歲兩種，三到六歲又分成閱讀童話、找顏色

不同、問答三種模式，六到十二歲又分成找不同、繪圖兩種模

式。

22

4.2 使用者流程圖

圖 4.2.1使用者流程圖

使用者開啟 APP後會進入程式的初始畫面，之後再選擇適合自己

的年齡層，接下來在選擇自己想要的模式根據年齡成的不同會有

不同的模式產生，選擇完成後就可以開始進行遊玩。

23

使用者選擇自己的年齡層

選擇要進行的模式

4.3 使用者操作流程

圖 4.3.1 步驟一

24

選擇要進行的故事

圖 4.3.2 步驟二

圖 4.3.3 步驟三

25

4.4 系統製作

使用 Eclipse軟體製造專題：

4.4.1 開新專案：

圖 4.4.1 開新專案

26

4.4.2 影片播放

圖 4.4.2 影片播放

影片播放 XML

27

圖 4.4.3 影片播放顯示效果

故事的閱讀我們是採用影片撥放的方式來進行，父母跟小孩透

過觀看影片中的內容來教導小孩子一些道理，也可藉此增進父

母跟孩子的互動，在最後還有提供問答的遊戲來加深小孩子對

故事內容的印象。

28

4.4.3 找不同

圖 3.4.4 設定像素及比例

圖 4.4.5 座標及筆的顏色粗細

29

找不同 XML

30

圖 4.4.6 找不同顯示效果

讓小孩子從上下兩張圖中透過互相比對來找出不一樣的地

方，點選不一樣的地方後會出現紅色的圓圈提示說尋找正確，

當全部找到後則會進入下一個難度，並且可以透過這個遊戲來

增進小孩對圖案的敏感度。

31

圖 4.4.6 找顏色不同顯示效果

讓小孩子從上下兩張有顏色的圖案去找出顏色不同的地方，點

選顏色不同的地方後會出現紅色的圓圈來提是已經找到錯

誤，當全部找到後難度會依序提升，並且也能夠增進小孩子對

顏色的敏感度。

32

4.4.4 圖畫

圖 4.4.8 紀錄移動的座標位置

圖 4.4.9 儲存圖片及清除面板

33

圖畫 XML

34

35

圖 4.4.10 圖畫顯示效果

畫圖我們有分成兩種模式:

一、 一張全白的只提供給小孩子們自由的創作，可以訓練他

們的創作能力。

二、 完成的圖片並且提供顏色的三原色讓小孩子們自行發

揮創意去上色，可以增加他們對顏色搭配的能力。

如果對自己所畫的圖片很滿意有提供儲存的功能，不滿意的話也

也提供重新作畫的功能。

36

4.4.4 問答

圖 4.4.11 取得點選位置

圖 4.4.12 顯示答案

37

問答 XML

RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/qans"

tools:context=".Main4Activity3" >

38

android:textAppearance="?android:attr/textAppearanceLarge" />

39

android:layout_height="wrap_content"

android:text="紅磚屋"

android:textSize="25sp" />

圖 4.4.12 問答顯示效果

所有問答的題目都是從剛才所觀看的影片中所出，而我們問題

的背景就是答案，假如小朋友不知道答案就可以從這觀察出答

案，點選 Commit後即會顯現答案正確與否。

40

第五章 結論

在完成這次專題製作裡面，我們從增加組員再重新分配工作，造成我

們的進度落後，但是過程中我們體會到了團隊的合作與互助精神。老師們

也提出幾項論點，針對不同年齡層兒童分類以利學習、增加注音符號幫助

兒童便於閱讀、……等，過程中我們也因為一些程式的問題，花了很多時

間，是因為老師點出我們程式方面的盲點及組員們的共同努力去排除錯誤。

41

第六章 參考文獻

1. http://developer.android.com/reference/packages.html

2. 黃彬華“Android 4.X App開發教戰手冊：適用 Android 4.x~2.x

碁峰資訊

3. 維基百科

Android http://zh.wikipedia.org/wiki/Android

SAI http://zh.wikipedia.org/wiki/SAI

http://developer.android.com/reference/packages.htmljavascript:%20location.href=SearchLink('%E9%BB%83%E5%BD%AC%E8%8F%AF','%E5%85%A8%E9%A4%A8%E6%90%9C%E5%B0%8B','au');javascript:%20location.href=SearchLink('%E7%A2%81%E5%B3%B0%E8%B3%87%E8%A8%8A','%E5%85%A8%E9%A4%A8%E6%90%9C%E5%B0%8B','bl');http://zh.wikipedia.org/wiki/Androidhttp://zh.wikipedia.org/wiki/SAI