App inventor 教學講義 chapter6

App Inventor 教學講義

6

吳為勇

2

Chapter 6

Drawing and Animation(繪圖與動畫) 關於繪圖與動畫 App inventor提供了三個元件 Ball(球)、Canvas(畫布)及ImageSprite(圖片動畫)。其中最重要也是最常用的是 Canvas(畫布)。使用Canvas(畫布)元件通常會搭配 Ball(球)和 ImageSprite(圖片動畫)來達到動畫的效果。接下來我們會一一來介紹這三個元件。

圖表 1 Drawing and Animation(繪圖與動畫)位置

3

Canvas 畫布 Canvas畫布元件是一個觸控感應矩形作業畫版。此元件可以在上面畫畫與做指定

圖片之二維(X,Y)空間移動。所謂二維維度(X,Y):

X代表此元件最左邊起算之X軸的數值，單位為像數(pixel)。

Y代表此元件最頂端起算之Y軸的數值，單位為像數(pixel)。

可以使用畫布提供的事件來判斷畫布是否被觸摸（Touch）或是動畫物件是否正

在被拖動(Drag)或是「Flung（揮過）」、「TouchDown（手指壓下）」與「TouchUp

（手指拿起）」等等的動作。

另外也提供了畫點、線和圓、儲存或是另存新檔等方法。

Canvas 畫布元件的屬性（Properties）：

屬性名稱屬性說明

BackgroundColor 背景顏色

BackgroundImage 背景圖片

FontSize 字型大小

LineWidth 畫筆線寬

PaintColor 畫筆顏色

TextAlignment 排列方向

Visible 勾選啟用為可見，未勾選為不可見

Width 畫布寬度

Height 畫布高度

Canvas 畫布元件的事件（Event）:

事件名稱事件說明

拖拉

Dragged(number startX,number

startY,number prevX,number prevY,

number currentX, number

currentY,Boolean draggedSprite)

當此畫布開始拖拉事件時，有許多參數會依照

拖拉的進行而有所變化。

當使用者用手指頭拖拉時,觸控點會由(prevX,

prevY)移到(currentx, currenty),

當下的座標點皆是(currentx, currenty)。

(startX, startY)這組座標代表使用者第一次觸

4

碰螢幕時的那一點。

"draggedSprite"代表指定動畫元件正被使用

者拖拉中。

Touched(number x, number y, boolean

touchedSprite)

當使用者點擊畫布時,回傳(x,y)座標代表使用者

所點擊的位置。如果"TouchedSprite"值為真代

表某個動畫元件也正好在此位置上。

Flung(number x,number y,number

speed,number heading ,number

xvel,number yvel,Boolean

flungSprite)

手指在螢幕上快速滑過，當手指抬起時會產生

Flung 事件。 Flung 事件中提供滑動的開始觸

點坐標（x，y），滑動速度（speed），滑動

方向（heading）和在 X軸和 Y軸的滑動速度

（xvel，yvel）。滑動方向（heading）如下圖

所示：

TouchDown(number x,number y)

當使用者手指按下畫布時,回傳(x,y)座標代表使

用者所按下的位置。

TouchUp(number x,number y)

當使用者手指放開畫布時,回傳(x,y)座標代表使

用者所放開的位置。

5

Canvas 畫布元件的方法:

方法名稱方法說明

Clear() 清除畫布

清除此畫布。若此畫布有設定背景圖，則背景

圖不會被清除掉。

DrawCircle(number x, number y, number

r)

畫圓

在畫布上指定座標處（x, y）繪製一實心圓形，

需指定其半徑 r。

DrawLine(number x1, number y1, number

x2, number y2)

畫線

在畫布上畫出一條直線，起始點（x1, y1），終

點（x2, y2）。

DrawPoint(number x, number y) 畫點

在畫布上指定座標處（x, y）畫出一個點。

DrawText(text text, number x, number y) 畫字

在指定座標處 (x, y) 顯示文字 text 內容。

DrawTextAtAngle(text text, number x,

number y, number angle)

在指定座標處 (x, y) 顯示文字 text 內容，並

指定旋轉角度 angle。angle 為數字型態，代

表逆時針旋轉的角度，從 0 開始為水平。

GetBackgroundPixelColor(number x,

number y)

擷取指定座標處 (x, y) 的顏色，回傳值為數

字，代表該處顏色的色碼。本指令可擷取包

含了 Canvas 畫布上大部份元件的顏色，包

含點、線與圓圈，但不包含動畫元件。

GetPixelColor(number x, number y) 擷取指定座標處 (x, y) 的顏色，回傳值為數

字，代表該處顏色的色碼。

SetBackgroundPixelColor(number x,

number y, number color)

設定指定座標處 (x, y) 的顏色，本指令與

DrawPoint 指令不同之處在於本指令可以指

定

顏色，DrawPoint 指令則無法指定顏色。

Save() 儲存

將畫布當下狀態存成一張圖檔，並儲存於

Android 裝置的外部儲存空間（SD 記憶卡），

接著回傳該檔案的完整路徑。如果發生錯誤

時，會由 Screen 元件的 ErrorOccurred

事件

6

來處理

SaveAs(text fileName) 另存新檔

將畫布當下狀態存成一張圖檔，並儲存於

Android 裝置的外部儲存空間。本方法需指

定存檔檔名，並必須加上副檔名

為 .JPEG、.JPG 或 .PNG 其中之一。本方法

一樣會回傳儲

存檔案的完整路徑。

7

範例

簡易塗鴉板

利用畫布背景功能與畫筆功能使其指定畫筆顏色、粗細來進行塗鴉，並可將此繪

圖儲存成檔案。

使用元件：Canvas, HorizontalArrangement,Button,Label。設計師元件佈置作業：

Step1:設定色塊與狀態元件

1. 先在左側 Layout裡選擇『HorizantalArrgement』水平排列元件依序拖拉四個此元件放到 Viewer中。每個水平排列元件的寬度都設定為 Fill Parent。

圖表 2 放入四個水平排列元件，並設定寬度

2. 在第一個水平排列元件中放入三個 Button，分別為紅色(btnRed)、藍色

(btnBlue)與綠色(btnGreen)。Properties屬性設定如下表：

元件名稱 Properties屬性設定

紅色(btnRed) BackgroundColor:Red

8

Text：紅色

TextColor:White 藍色(btnBlue) BackgroundColor:Blue

Text：藍色

TextColor:White 綠色(btnGreen) BackgroundColor:Green

Text：綠色

TextColor:White

3. 在三個按鈕旁在放入一個『HorizantalArrgement』水平排列元件。在此元件中依序放入四個 Label元件。分別為線寬(Label1)，線寬值(lblLineWidthValue)，顏色(Label3)，所選擇的顏色(lblSelectColor)。Properties屬性設定如下表：


線寬(Label1) Text：線寬:

線寬值(lblLineWidthValue) Text：0

顏色(Label3) Text：顏色

所選擇的顏色(lblSelectColor) Text：

元件佈置如圖表 3。

圖表 3 設定色塊元件

9

Step2:設定畫布

1. 先在左側 Drawing and Animationt裡選擇『Canvas』畫布元件拖拉放到第二個水平排列元件中。

2. 元件名稱改為 cavDrawing。Properties屬性設定如下表：


畫布(cavDrawing) PaintColor：Red Width：Fill Parent Height：350px

到目前為止元件佈置如圖表 4

圖表 4 設定畫布

Step3:設定畫筆粗細調整元件

1. 在第三個水平排列元件中放入三個 Button，分別為＋(btnInline)、－(btnDeline)與清除(btnClear)。Properties屬性設定如下表：


＋(btnInline) Text：＋ TextSize：18 FontBold：Checked

－(btnDeline) Text：－ TextSize：18 FontBold：Checked

清除畫布(btnClear) Text：清除

10

FontBold：Checked

到目前為止元件佈置如圖表 5

圖表 5 設定畫筆粗細調整元件

Step4:設定檔案儲存元件

1. 在第三個水平排列元件中清除(btnClear)的右邊在加入兩個按鍵。分別為儲存(btnSave)與另存新檔(btnSaveas)。Properties屬性設定如下表：


存檔(btnSave) Text：存檔

另存新檔(btnSaveas) Text：另存新檔

圖表 6 設定儲存與另存新檔按鈕

11

2. 在第四個水平排列元件中放入一個 TextBox(txtFilename)及兩個 Label。第一個 Label(lblPng)是設定圖片附檔名。第二個 Label(lblSaveStatus)則為存檔狀態。Properties屬性設定如下表：


檔名(txtFilename) Hint：請輸入檔名

圖片附檔名(lblPng) Text：.png

存檔狀態(lblSaveStatus) Text：

3. 最後設計出來的樣式如下：

圖表 7簡易塗鴉板畫面佈置

12

Blocks 拼塊編輯作業

Step1:設定全域變數

1. 進入Blocks拼塊編輯作業裡點選左側Built in 裡 Variables的設定三個全域變數。第一個變數是設定畫筆初始值（DrawPenWidth）為數字 5。第

二個變數是設定畫筆粗細最大值（MaxWidth）為數字 10。第三個變數

是設定畫筆粗細最小值（MinWidth）為數字 1。

圖表 8設定全域變數

Step2:設定顏色按鈕按下時的事件

1. 點選左側 Screen1->btnRed->『When btnRed.Click do』拖拉到 Viewer 中。 2. 點選左側 Screen1->cavDrawing->『Set cavDrawing.PaintColor to』將此事件拖拉到『When btnRed.Click do』中。

3. 點選左側 Built in->Color->紅色拼塊，將此放到『Set cavDrawing.PaintColor to』右邊的缺口裡。

4. 點選左側 Screen1->lblSelectColor->『set lblSelectColor.BackgroundColor to』將此事件拖拉到『When btnRed.Click do』中。另外也選擇一個紅色拼塊

放到右邊的缺口中。

5. 以上的步驟是在設定當按下紅色按鈕時要將畫筆顏色與畫筆顏色狀態都設紅色。

6. 同樣的方式也來設定一下按下 btnBlue 跟按下 btnGreen 的事件。

13

圖表 9設定顏色按鈕按下時的事件

Step3:設定畫布被拖拉時的事件（就是要畫筆畫出指定顏色的色條）

1. 點選左側 Screen1->cavDrawing->『When cavDrawing.Dragged do』拖拉到Viewer 中。

2. 點選左側 Screen1->cavDrawing->『call cavDrawing.DrawLine x1,y1,x2,y2』將此事件拼塊放到『When cavDrawing.Dragged do』的缺口裡。

3. 將游標指到『When cavDrawing.Dragged do』裡的 prevX 上方久一點就可以取得『get prevX』拼塊。將此拼塊放到『call cavDrawing.DrawLine

x1,y1,x2,y2』其中的 x1 缺口裡。依此方法將 y1 的缺口放置『get prevY』，

將 x2 的缺口放置『get currentX』及將 y2 的缺口放置『get currentY』。

4. 『call cavDrawing.DrawLine x1,y1,x2,y2』就是畫線的事件。而任一線段都是由兩個座標組成的(起始與結束的座標)。(x1,y1)是上一個座標，所以

我們放入(prevX,prevY)。(x2,y2)是現在的座標，所以我們放入

(currentX,currentY)。

14

圖表 10 設定畫布被拖拉時的事件

Step4:設定畫線線條粗細與清除畫線的事件

1. 先來設定將線條變粗的事件。點選左側 Screen1->btnInline->『When btnInline.Click do』拖拉到 Viewer 中。

2. 點選左側 Built in->Control->『if then』將此拼塊拖拉到『When btnInline.Click do』中。

3. 判斷如果現在畫筆數值（DrawPenWidth）小於最大畫筆粗細最大值（MaxWidth）則將目前畫筆數值+1。所以我們可以先選擇 Built

in->Math->『 < 』放到 if 旁的缺口，第一個空格放入從『get global

DrawPenWidth』。第二個空格則是要放入『get global MaxWidth』。然後 then

旁的缺口則是要放入『set global DrawPenWidth to』。準備讓畫線值+1，

在『set global DrawPenWidth to』右邊的缺口放入一個『 + 』。第一

個空格放入從『get global DrawPenWidth』。第二個空格則是要放入數值

1。

4. 將畫布裡的線條設定為此畫筆數值『get global DrawPenWidth』。點選左側 Screen1->cavDrawing->『set cavDrawing.LineWidth to』將此拼塊放到

『if then』下方。而『set cavDrawing.LineWidth to』右邊則是放入『get global

DrawPenWidth』。

5. 將線條數值顯示於上方的 Label 中。點選左側Screen1->lblLineWidthValue->『set lblLineWidthValue to』將此拼塊放到『set

15

cavDrawing.LineWidth to』下方。『set lblLineWidthValue.text to』右邊則是

放入『get global DrawPenWidth』。設定完後結果應該如下圖：

圖表 11 btnInline設定

6. 再來設定將線條變細的事件。點選左側 Screen1->btnDeline->『When btnDeline.Click do』拖拉到 Viewer 中。

7. 點選左側 Built in->Control->『if then』將此拼塊拖拉到『When btnDeline.Click do』中。

8. 判斷如果現在畫筆數值（DrawPenWidth）大於最大畫筆粗細最小值（MinWidth）則將目前畫筆數值-1。所以我們可以先選擇 Built

in->Math->『 > 』放到 if 旁的缺口，第一個空格放入從『get global

DrawPenWidth』。第二個空格則是要放入『get global MinWidth』。然後 then

旁的缺口則是要放入『set global DrawPenWidth to』。準備讓畫線值-1，在

『set global DrawPenWidth to』右邊的缺口放入一個『 - 』。第一個

空格放入從『get global DrawPenWidth』。第二個空格則是要放入數值 1。

9. 將畫布裡的線條設定為此畫筆數值『get global DrawPenWidth』。點選左側 Screen1->cavDrawing->『set cavDrawing.LineWidth to』將此拼塊放到

『if then』下方。而『set cavDrawing.LineWidth to』右邊則是放入『get global

DrawPenWidth』。

10. 將線條數值顯示於上方的 Label 中。點選左側Screen1->lblLineWidthValue->『set lblLineWidthValue to』將此拼塊放到『set

cavDrawing.LineWidth to』下方。『set lblLineWidthValue.text to』右邊則是

放入『get global DrawPenWidth』。設定完後結果應該如下圖：

圖表 12 btnDeline設定

11. 最後來設定清除線條。點選左側 Screen1->btnClear->『when btnClear.Click do』的事件拼塊放到Viewer 中。

16

12. 點選左側 Screen1->cavDrawing->『call cavDrawing.Clear』放到『when btnClick.Click do』中。這樣就完成清除線條的設定了。

圖表 13 btnClear 的設定

Step5:設定儲存與另存新檔

1. 先設定存檔事件。點選左側 Screen1->btnSave->『When btnSave.Click do』拖拉到 Viewer 中。

2. 點選左側 Screen1->lblSaveStatus->『Set lblSaveStatus.Text』到『When btnSave.Click do』中。

3. 點選 Screen1->cavDrawing->『call cavDrawing.save』。將此拼塊放到『Set

lblSaveStatus.Text』右邊的缺口。這樣就完成存檔的設定。圖片會被存入

指定路徑內的資料夾。通常是\My Documents\Pictures\，同時會由系統直

接命名，其命名方式為App_Inventor_+ID(系統自動產生).png。

4. 設定另存新檔事件。點選左側 Screen1->btnSave->『When btnSaveas.Click do』拖拉到 Viewer 中。

5. 為了防止檔名為空值，所以我們需要加入個『if then』判斷式來檢查一下輸入的檔名長度是否大於 0。點選 Built in->Control->『if then』放到

『When btnSaveas.Click do』中。並點選『if then』中間藍色圈圈將此『if

then』加進一個 else。選擇 Built in->Math->『 > 』放到 if 旁的缺口。

第一個空格先放入 Built in->Text->『length』，『length』旁的缺口放入

Screen1->txtFilename-> 『txtFilename.Text』。第二個空格則是放入數字 0。

圖表 14 判斷是否有輸入檔名

17

6. 如果檔名長度大於 0的話就來執行另存新檔的動作。點選Screen1->cavDrawing->『call cavDrawing.SaveAs FileName』放到 then 旁的

缺口裡。再點選 Built in->Text->『join』並放入『call cavDrawing.SaveAs

FileName』旁的缺口。『join』的第一個值放入 Screen1->txtFilename->

『txtFilename.Text』。第二個值放入 Screen1->lblPng->『lblPng.Text』。這

樣就可以組合成一個XXXX.png 的圖檔名稱並存檔了（XXXX表示

『txtFilename.Text』的值）。

圖表 15 有輸入檔名執行另存新檔動作

7. 如果沒有輸入檔名就按下 Saveas 時就要顯示提示訊息。點選Screen1->txtFilename-> 『set lblSaveStatus.Text to』放到 else 旁的缺口。『set

lblSaveStatus.Text to』旁的缺口就放入『請輸入檔名！』的字串。

8. 這樣就完成了儲存與另存新檔的設定了。

圖表 16 設定儲存與另存新檔

18

完成所有的 Blocks編輯作業如下圖：

圖表 17 簡易塗鴉板 Blocks

19

模擬器上執行結果：

圖表 18 簡易塗鴉板執行結果

20

ImageSprite圖片精靈 ImageSprite 圖片精靈往往與 Canvas 畫布一起作用，透過此精靈可以讓圖

片在畫布中自由的移動、翻轉。

ImageSprite 圖片精靈屬性（Properties）：

屬性名稱屬性說明

Picture 所屬圖片

Enable 勾選啟用，不勾選則停用

Interval 啟用頻率（單位：毫秒）

Rotates 元件翻轉，決定是否要進行圖片翻轉

Visible 勾選啟用為可見，未勾選為不可見

Heading 旋轉方向。單位為度。

0 度代表水平指向右(東)方

90 度是朝上(北)方

180 度是左(西)方

270 度是下(南)方

X 所在位置 X座標

Y 所在位置 Y座標

Speed 每單位時間移動的像素

Width 寬度

Height 高度

ImageSprite 圖片精靈的事件（Event）:

事件名稱事件說明

ColliedWith(other)

當兩個動畫元件(動畫或球)相撞時呼叫本事件,

參數 other 代表與它碰撞的另一個元件。

Dragged()

21

物件被拖移時呼叫此事件，有許多參數會依照

拖拉的進行而有所變化。

當使用者用手指頭拖拉時,觸控點會由(prevX,

prevY)移到(currentx, currenty),

當下的座標點皆是(currentx, currenty)。(startX,

startY)這組座標代表使用者第一次觸碰螢幕時

的那一點。

EdgeReached(edge)

當 ImageSprite 與螢幕邊緣接觸時呼叫本事件,

參數 edge 代表圖片接觸的位置,如下所示:

‧ north = 1,螢幕上(北)緣

‧ northeast = 2,螢幕右上(東北)角

‧ east = 3,螢幕右(東)緣

‧ southeast = 4,螢幕右下(東南)角

‧ south = -1,螢幕下(南)緣

‧ southwest = -2,螢幕左下(西南)角

‧ west = -3,螢幕左(西)緣

‧ northwest = -4,螢幕左上(西北)角

請注意相反的方向是彼此互為相反數

NoLongerCollidingWith(other)

當兩個圖片精靈元件不再碰撞時呼叫本事件。

Flung(number x,number y,number speed,number

heading ,number xvel,number yvel)

手指在圖片上滑過，當手指抬起時會產生 Flung

事件。 Flung 事件中提供滑動的開始觸點坐標

（x，y），滑動速度（speed），滑動方向（heading）

和在 X軸和 Y軸的滑動速度（xvel，yvel）。

22

TouchDown(number x,number y)

當使用者手指按下圖片時,回傳(x,y)座標代表使

用者所按下的位置。

TouchUp(number x,number y)

當使用者手指放開畫布時,回傳(x,y)座標代表使

用者所放開的位置。

Touched()

當元件被點取時回傳(x,y)座標代表使用者所放

開的位置。

23

ImageSprite 圖片精靈的方法:

方法名稱方法說明

Bounce(number edge) 使 ImageSprite 彈跳,就好像真的撞到牆或角

落一樣。參數和 EdgeReached 事件的參數相

同,因此我們可以利用 EdgeReached 事件讓圖

片每次碰到畫布邊緣都會彈跳,讓 ImageSprite

栩栩如真地自由彈跳。

boolean CollidingWith(component other) 代表 ImageSprite 是否和指定元件發生碰撞。

MoveIntoBounds() 如果 ImageSprite 跑出界了,可利用本方法將

它抓回界內。

MoveTo(number x,number y) 讓 ImageSprite 移動到指定點座標。

PointTowards(component target) 讓 ImageSprite 轉向對準指定的目標。新的

heading 即為兩個元件中心所構成直線之指

向。

24

範例：

笨鳥慢飛

利用畫布與圖片精靈元件讓小鳥的圖案可以從螢幕的左邊飛到螢幕的右邊，且飛

過來飛過去的。

使用元件：Canvas, ImageSprite, Clock, Label。設計師元件佈置作業：

Step1:設定畫布與 ImageSprite元件

1. 先在左側 Drawing and Animation裡選擇『Canvas』拖拉放到 Viewer中。寬度設定為 Fill Parent。高度則設定為 300pixel。

2. 在左側 Drawing and Animation裡再選擇一個『ImageSprite』。將其拖到畫布中。其屬性設定如下：


動畫圖片（IspBlueBird） Heading：180

Interval：100

Picture：BlueBird.png(要先上傳上

去，另外還要傳一個

BlueBirdRight.png 圖檔上去之後會

用到)

X：180

Y：50

Z：1

Step1:設定 Clock 與 Label元件

1. 先在左側 User Interface裡選擇『Label』拖拉放到 Viewer中 Canvas下方。


25

顯示Heading（label1） Text：空值

Width：Fill Parent

2. 再在左側 User Interface裡選擇『Clock』拖拉放到 Viewer中。屬性設定如下：


Clock（clock1）設定移動的頻率 TimerAlwaysFires：打勾

TimerEnabled：打勾

TimerInterval：5000

設定好的畫面佈置：

圖表 19 笨鳥慢飛畫面佈置

26

Blocks 拼塊編輯作業

Step1:設定 Timer

1. 我們先來設定在一定的頻率裡面要小鳥的圖案移動的距離。進入 Blocks拼塊編輯作業裡點選左側 Screen1->Clock1->『When Clock1.Timer do』。

然後再點選左側 Screen1->IspBlueBird->『Set IspBlueBird.Speed to』放到

『When Clock1.Timer do』中。設定 Speed(每單位時間移動的像素)為 10。

圖表 20設定 Timer

Step2:設定圖片移到碰到左右邊界時的處理

1. 當圖片移動時如果碰到左右邊界時，我們希望圖片可以轉向然後繼續移

動到另外一邊的邊界。我們可以點選左側 Screen1->IspBlueBird->『When

IspBlueBird.EdgeReached do』拖拉到 Viewer 中。

2. 設定讓圖片每次碰到畫布邊緣都有彈跳的感覺。點選左側

Screen1->IspBlueBird->『Call IspBlueBird.Bounce edge』方法放到『When

IspBlueBird.EdgeReached do』的拼塊中。將滑鼠游標移到『When

IspBlueBird.EdgeReached do』中間的『edge』取得『get edge』放到『Call

IspBlueBird.Bounce edge』旁的缺口。

3. 設定顯示圖片與邊界接觸的位置。點選左側 Screen1->label1->『set label1.Text to』，設定其值為『get edge』。

4. 設定圖片與邊界接觸後要做的事情。加入個『if then』判斷式來判斷是圖片碰到左邊還是右邊。點選 Built in->Control->『if then』放到『Call

IspBlueBird.Bounce edge』下方。並點選『if then』中間藍色圈圈將此『if

then』加進一個 else if。選擇 Built in->Math->『 = 』放到 if 旁的缺

口。第一個空格先放入『get edge』，第二個空格則是放入數字 -3(代表

碰到左邊的邊界)。

5. 設定當碰到左邊邊界時希望圖片要轉 180 度後繼續移動。點選左側Screen1->IspBlueBird->『set IspBlueBird.Heading to』。後面的空格放入數

字『0』代表要水平向右。再點選左側 Screen1->IspBlueBird-> set

IspBlueBird.Picture to』。右邊空格填入文字『BlueBirdRight.png』。

6. 設定當碰到右邊邊界時希望圖片要轉 180 度後繼續移動。點選左側Screen1->IspBlueBird->『set IspBlueBird.Heading to』。後面的空格放入數

27

字『180』代表要水平向左。再點選左側 Screen1->IspBlueBird-> set

IspBlueBird.Picture to』。右邊空格填入文字『BlueBird.png』。

7. 這樣就設定好了。設定圖片移到碰到左右邊界時的處理拼塊設定如下圖：

圖表 21 設定圖片移到碰到左右邊界時的處理

完成所有的 Blocks編輯作業如下圖：

圖表 22 笨鳥慢飛 Blocks編輯作業

28

模擬器上執行結果：

圖表 23 笨鳥慢飛執行結果

29

參考網站與書籍：書籍：

1. Android手機程式超簡單 App Inventor 入門卷作者：CAVE教育團隊出版社：馥林文化

2. Google App Inventor開發手冊：不會寫程式也能設計你的 APP 作者：王培坤出版社：上奇資訊

網站：

1. http://appinventor.mit.edu 2. http://blog.sina.com.cn/s/blog_55e6acc00101by3x.html

Software

App inventor 教學講義 chapter6