介紹Draw,Animation and ImageSprite與範例實作

1. App Inventor 教學講義
6
吳為勇

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

3. 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. 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. 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. 6
來處理
SaveAs(text fileName) 另存新檔
將畫布當下狀態存成一張圖檔，並儲存於
Android 裝置的外部儲存空間。本方法需指
定存檔檔名，並必須加上副檔名
為 .JPEG、.JPG 或 .PNG 其中之一。本方法
一樣會回傳儲
存檔案的完整路徑。

7. 7
範例
簡易塗鴉板
利用畫布背景功能與畫筆功能使其指定畫筆顏色、粗細來進行塗鴉，並可將此繪
圖儲存成檔案。
使用元件：Canvas, HorizontalArrangement,Button,Label。
設計師元件佈置作業：
Step1:設定色塊與狀態元件
1. 先在左側 Layout 裡選擇『HorizantalArrgement』水平排列元件依序拖
拉四個此元件放到 Viewer 中。每個水平排列元件的寬度都設定為 Fill
Parent。
圖表
2
放入四個水平排列元件，並設定寬度
2. 在第一個水平排列元件中放入三個 Button，分別為紅色(btnRed)、藍色
(btnBlue)與綠色(btnGreen)。Properties 屬性設定如下表：
元件名稱
Properties 屬性設定
紅色(btnRed)
BackgroundColor:Red

8. 8
Text：紅色
TextColor:White
藍色(btnBlue)
BackgroundColor:Blue
Text：藍色
TextColor:White
綠色(btnGreen)
BackgroundColor:Green
Text：綠色
TextColor:White
3. 在三個按鈕旁在放入一個『HorizantalArrgement』水平排列元件。在
此元件中依序放入四個 Label 元件。分別為線寬(Label1)，線寬值
(lblLineWidthValue)，顏色(Label3)，所選擇的顏色(lblSelectColor)。
Properties 屬性設定如下表：
元件名稱
Properties 屬性設定
線寬(Label1)
Text：線寬:
線寬值(lblLineWidthValue)
Text：0
顏色(Label3)
Text：顏色
所選擇的顏色(lblSelectColor)
Text：
元件佈置如圖表 3。
圖表
3
設定色塊元件

9. 9
Step2:設定畫布
1. 先在左側 Drawing
and
Animationt 裡選擇『Canvas』畫布元件拖拉放到
第二個水平排列元件中。
2. 元件名稱改為 cavDrawing。Properties 屬性設定如下表：
元件名稱
Properties 屬性設定
畫布(cavDrawing)
PaintColor：Red
Width：Fill
Parent
Height：350px
到目前為止元件佈置如圖表 4
圖表
4
設定畫布
Step3:設定畫筆粗細調整元件
1. 在第三個水平排列元件中放入三個 Button，分別為＋(btnInline)、－
(btnDeline)與清除(btnClear)。Properties 屬性設定如下表：
元件名稱
Properties 屬性設定
＋(btnInline)
Text：＋
TextSize：18
FontBold：Checked
－(btnDeline)
Text：－
TextSize：18
FontBold：Checked
清除畫布(btnClear)
Text：清除

10. 10
FontBold：Checked
到目前為止元件佈置如圖表 5
圖表
5
設定畫筆粗細調整元件
Step4:設定檔案儲存元件
1. 在第三個水平排列元件中清除(btnClear)的右邊在加入兩個按鍵。分別
為儲存(btnSave)與另存新檔(btnSaveas)。Properties 屬性設定如下
表：
元件名稱
Properties 屬性設定
存檔(btnSave)
Text：存檔
另存新檔(btnSaveas)
Text：另存新檔
圖表
6
設定儲存與另存新檔按鈕

11. 11
2. 在第四個水平排列元件中放入一個 TextBox(txtFilename)及兩個 Label。
第一個 Label(lblPng)是設定圖片附檔名。第二個 Label(lblSaveStatus)
則為存檔狀態。Properties 屬性設定如下表：
元件名稱
Properties 屬性設定
檔名(txtFilename)
Hint：請輸入檔名
圖片附檔名(lblPng)
Text：.png
存檔狀態(lblSaveStatus)
Text：
3. 最後設計出來的樣式如下：
圖表
7 簡易塗鴉板畫面佈置

12. 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. 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. 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. 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. 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 DocumentsPictures，同時會由系統直
接命名，其命名方式為 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. 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. 18
完成所有的 Blocks 編輯作業如下圖：
圖表
17
簡易塗鴉板 Blocks

19. 19
模擬器上執行結果：
圖表
18
簡易塗鴉板執行結果

20. 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. 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. 22
TouchDown(number x,number y)
當使用者手指按下圖片時,回傳(x,y)座標代表使
用者所按下的位置。
TouchUp(number x,number y)
當使用者手指放開畫布時,回傳(x,y)座標代表使
用者所放開的位置。
Touched()
當元件被點取時回傳(x,y)座標代表使用者所放
開的位置。

23. 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. 24
範例：
笨鳥慢飛
利用畫布與圖片精靈元件讓小鳥的圖案可以從螢幕的左邊飛到螢幕的右邊，且飛
過來飛過去的。
使用元件：Canvas, ImageSprite, Clock,
Label。
設計師元件佈置作業：
Step1:設定畫布與 ImageSprite 元件
1. 先在左側 Drawing
and
Animation 裡選擇『Canvas』拖拉放到 Viewer
中。寬度設定為 Fill
Parent。高度則設定為 300pixel。
2. 在左側 Drawing
and
Animation 裡再選擇一個『ImageSprite』。將其拖
到畫布中。其屬性設定如下：
元件名稱
Properties 屬性設定
動畫圖片（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
下方。
元件名稱
Properties 屬性設定

25. 25
顯示 Heading（label1） Text：空值
Width：Fill
Parent
2. 再在左側 User
Interface 裡選擇『Clock』拖拉放到 Viewer 中。屬性設
定如下：
元件名稱
Properties 屬性設定
Clock（clock1）設定移動的頻率 TimerAlwaysFires：打勾
TimerEnabled：打勾
TimerInterval：5000
設定好的畫面佈置：
圖表
19
笨鳥慢飛畫面佈置

26. 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. 27
字『180』代表要水平向左。再點選左側 Screen1->IspBlueBird-> set
IspBlueBird.Picture to』。右邊空格填入文字『BlueBird.png』。
7. 這樣就設定好了。設定圖片移到碰到左右邊界時的處理拼塊設定如下
圖：
圖表
21
設定圖片移到碰到左右邊界時的處理
完成所有的 Blocks 編輯作業如下圖：
圖表
22
笨鳥慢飛 Blocks 編輯作業

28. 28
模擬器上執行結果：
圖表
23
笨鳥慢飛執行結果

29. 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