我的出氣筒
1.1 專題介紹:我的出氣筒
1.2 專題重點
※學習使用按鈕元件
※能夠利用Photo
Impact X3做簡單修圖
※會使用變數來更換按鈕圖片
◎需求元件:數張接續變化的圖片
2. 專題實作:我的出氣筒
2.1專題總覽
執行程式後,不斷點擊畫面,使畫面上的主角產生變化,當最後一張圖片出現時遊戲結束,此時會播放遊戲結束之聲音,之後按下按鈕"再來一次"可再重新進行遊戲。
2.2數張接續變化的圖片製作(以Photo Impact X3繪製)
◎需求元件:魔術師原始圖
製作出氣筒前,需先利用Photo Impact X3進行影像處理,完成程式的所需元件。本範例一共需要五張不同階段的圖片並且要有連續性,第一張為原始圖,接下來每完成一個階段要記得存一次檔。為方便繪製,建議所找的圖片背景為無色或白色。
步驟一:讓角色的臉腫起來
(1) 功能表列中的特效,按下扭曲中的創意扭曲。
(2)選取範本中的第四個往外擴張,在想要腫起來的地方點選或按住滑鼠往外推。
(3)若需要還原,可點取範本中的第一個,在想要還原的地方點選或按住滑鼠即可。
※注意:可以先選好不要變形的區域,適時調整筆刷大小把不想變形的地方選出來 (紅色為不想變形處),要先把筆刷的+和-取消再套用範本效果。
步驟二:扭曲
(1) 點選上方功能表列中的特效,按下扭曲中的以格線變形。
(2) 格線大小越小控制點越多,能拉扯的越細微,請選取適合的格線大小。
(3) 滑鼠拖曳移動控制點,再選取測試,即可在下方預覽其效果。
步驟三:流血和瘀青
(1)點選左邊工具箱中的筆刷,在上方的屬性工具列調整其屬性。由左到右依序是顏色、形狀、大小、透明度、柔邊。
※ 找不到喜歡的顏色嗎?
找一張有你想要顏色的圖片,點選左邊工具箱中的色彩選擇工具,在你想要的顏色上按左鍵,你想要的顏色就會被吸出來了!
步驟四:存檔
製作完各種可怕表情的圖片後,記得點選上方功能表列中的檔案,選取另存新檔,將檔名依序設為1、2、3、4、5,存檔類型設為JPG,按下存檔,完成五張或數張的出氣筒圖片。這樣就可以開始寫程式了喔!
2.3 專題建置
1. 新增專案:MyPunchingBag
按下Start
new projects,新增「專題名稱:MyPunchingBag」的專案。
進入App
Inventor的Designer視窗
(註:專案名稱開頭不能是數字;專案名稱中可用底線,但是不能使用空格或其他特殊字元)
2. 匯入圖片和音效
點選視窗右側的Components下方的Media,按下Upload File上傳圖片及音效。
將1.jpg、2.jpg、3.jpg、4.jpg、5.jpg、waaa.mp3依序上傳,注意:每一次選擇檔案只能選取一個檔案,選取好一個檔案後就按OK,重複上述動作完成上傳。
上傳檔案:Media/Upload File
2.4 介面配置
本專題只有一個頁面,非五個頁面。
3.調整版面屬性
點選視窗右側的元件屬性(Properties)中,將允許捲動(Scrollable)取消勾選。並把水平對齊(AlignHorizontal)和垂直對齊(AlignVertical)都設定為Center。
所有元件水平方向置中:Properties/AlignHorizontal/ Center
所有元件垂直方向置中:Properties/ AlignVertical/ Center
取消捲軸:Properties/Scrollable/取消勾選
4.新增按鈕(為了感應使用者點擊圖片)
在視窗左側的組件面板(Palette)中,點選用戶介面(User Interface)中的按鈕(Button),將其拖曳至中間的工作面板(Viewer)視窗中。接著點選Components下方的Rename,將其名字改為image(請先確定Button1為反白狀態,代表現在正修改Button1)。
新增按鈕:Palette/User Interface/Button
重新命名:Components/ Screen1/ Button1/ Rename: image
5.把圖片放到按鈕上,並修改屬性
在視窗右側的元件屬性(Properties)中,點選圖像(image)選取第一張圖片(1.jpg),將圖片放到按鈕上。在視窗右側的元件屬性(Properties)中,將文字(Text)屬性中的文字清空,按鈕寬度(Width)屬性改成270 pixels,高度(Height)屬性設定為 300pixels。
放入圖片:Properties/ image/ 1.jpg
更改屬性:Properties/Text:
Width: 270 pixels
Height: 300 pixels
6.新增按鈕(再來一次),並更改屬性
在視窗左側的組件面板(Palette)中,點選用戶介面(User Interface)中的按鈕(Button)元件,將其拖曳至中間的工作面板(Viewer)視窗中按鈕(image)的下方。接著在視窗右側的Components中,點選Button1,確認正在編輯此按鈕,點選下方的Rename,將其名字改為again。在視窗右側的元件面板(Properties)中,將文字(Text)中輸入"再來一次",並將它預設不顯示(Visible) 取消勾選。
新增按鈕:Palette/ User Interface/ Button(放置在按鈕(image)的下方)
重新命名:Components/Screen1/Button1/Rename: again
修改屬性:Properties/ Text: 再來一次
Properties/ Visible/取消勾選
7.音效設置
在視窗左側的組件面板(Palette)中,點選Media中的聲音(Sound)元件,將其拖曳至中間的工作面板(Viewer)視窗中,它會自動跑到最下方。在視窗右側的元件屬性(Properties)中,點選來源文件(Source)選取音效(waaa.mp3),將音效設定成waaa.mp3。
音效設置:Palette/Media/ Sound(拖曳至畫面預覽(Viewer)視窗中)
Properties/ Source/ waaa.mp3
使用元件及其重要屬性
名稱
|
屬性
|
說明
|
Screen1
|
Properties/
Scrollable/ 取消勾選
Properties/AlignHorizontal/
Center
Properties/
AlignVertical/ Center
|
|
image
|
Properties/
image/ 1.jpg
Properties/
Text:
Width: 273 pixels
Height: 273 pixels
|
點擊按鈕
|
again
|
Properties/
Text: 再來一次
Properties/
Visible/取消勾選
|
到最後一張圖時按鈕再出現
|
Sound1
|
Properties/
Source/ waaa.mp3
|
音效
|
2.5 專題分析和程式拼塊說明
請先從視窗右上角的 Designer 視窗切換至 Blocks 視窗。
8. 設一個變數 i (表示第幾張圖,1是由於一開始是第一張圖)
在左側的Blocks中,點選Built-in中的Variables,在彈出的拼圖式程式區塊中選取 initialize global name to,置於預覽視窗中。並且將name改為i。在左側的Blocks中,點選Built-in中的Math,在彈出的拼圖式程式區塊中選取0,並且放置在initialize global i to的後面。並且將0改成1。
拉出方塊:Blocks/ Built-in/ Variables/ initialize global name to
將name改成i
Blocks/ Built-in/
Math/ 0
將0改成1
9.設一個變數click,表示記錄點擊的算術運算值,初始值為0
在左側的Blocks中,點選Built-in中的Variables,在彈出的拼圖式程式區塊中選取initialize global name to,置於預覽視窗中。並且把name改成click。在左側的Blocks中,點選Built-in中的Math,在彈出的拼圖式程式區塊中選取0,並且放置在initialize global click to的後面。
拉出方塊:
Blocks/
Built-in/ Variables/ initialize global name to
將name改成click
Blocks/
Built-in/ Math/ 0
10. 做一個當點擊畫面(圖片)時
在左側的Blocks中,點選Screen1中的image,在彈出的拼圖式程式區塊中選取when image. Click do,置於預覽視窗中。
拉出方塊:
Blocks/ Screen1/
image/ when image. Click do
11. 讓點擊一次畫面(圖片)時,變數click會記錄
在左側的Blocks中,點選Built-in中的Variables,在彈出的拼圖式程式區塊中選取set to,放在when image. Click do的裡面。並且把空格設為global click。在左側的Blocks中,點選Built-in中的Math,在彈出的拼圖式程式區塊中選取+,放置在set global click to的右邊。在左側的Blocks中,點選Built-in中的Variables,在彈出的拼圖式程式區塊中選取get ,放在 +的左邊。並且把空格設為global click。在左側的Blocks中,點選Built-in中的Math,在彈出的拼圖式程式區塊中選取0,放置在 +的右邊。並且把 0 改成
1 。
拉出方塊:Blocks/ Built-in/ Variables/ set global click to
Blocks/ Built-in/ Math/
+
Blocks/ Built-in/
Variables/ get global click
Blocks/ Built-in/
Math/ 0
將0 改成 1
12.當畫面(圖片)點擊3下時
在左側的Blocks中,點選Built-in中的Control,在彈出的拼圖式程式區塊中選取if then,放置在set global click to的下方。在左側的Blocks中,點選Built-in中的Math,在彈出的拼圖式程式區塊中選取=,放置在 if的右邊。在左側的Blocks中,點選Built-in中的Variables,在彈出的拼圖式程式區塊中選取 get ,放在 =的左邊。並且把空格設為global click。在左側的Blocks中,點選Built-in中的Math,在彈出的拼圖式程式區塊中選取0,放置在 =的右邊。並且把0改成3。
拉出方塊:Blocks/ Built-in/ Control/ if then
Blocks/ Built-in/
Math/ =
Blocks/ Built-in/ Variables/
get global click
Blocks/ Built-in/
Math/ 0
將0改成3
13.將換下一張圖
在左側的Blocks中,點選Built-in中的Variables,在彈出的拼圖式程式區塊中選取set to,放在if then的裡面。並且把空格設為i。在左側的Blocks中,點選Built-in中的Math,在彈出的拼圖式程式區塊中選取+,放置在set global i to的右邊。在左側的Blocks中,點選Built-in中的Variables,在彈出的拼圖式程式區塊中選取 get ,放在 +的左邊。並且把空格設為global i。在左側的Blocks中,點選Built-in中的Math,在彈出的拼圖式程式區塊中選取0,放置在 +的右邊。並且把0改成1。
拉出方塊:Blocks/ Built-in/ Variables/ set global i to
Blocks/ Built-in/ Math/
+
Blocks/ Built-in/ Variables/
get global i
Blocks/ Built-in/
Math/ 0
將0改成1
14. 每當換一張圖片時,點擊計算值回歸至0,重新計算
在左側的Blocks中,點選Built-in中的Variables,在彈出的拼圖式程式區塊中選取 set to,放在if then的裡面。並且把空格設為global click。在左側的Blocks中,點選Built-in中的Math,在彈出的拼圖式程式區塊中選取0,放置在 set global click to的右邊。
拉出方塊:Blocks/ Built-in/ Variables/ set global click to
Blocks/ Built-in/
Math/ 0
15.當變數i(計算顯示圖片的張數)為2時
在左側的Blocks中,點選Built-in中的Control,在彈出的拼圖式程式區塊中選取if/then,放在if/then的下方,即為 when image. Click do中的第二個 if/then。在左側的Blocks中,點選Built-in中的Math,在彈出的拼圖式程式區塊中選取 =,放置在 if的右邊。在左側的Blocks中,點選Built-in中的Variables,在彈出的拼圖式程式區塊中選取 get ,放在 =的左邊。並且把空格設為global i。在左側的Blocks中,點選Built-in中的Math,在彈出的拼圖式程式區塊中選取0,放置在 =的右邊。並且把0改成2。
拉出方塊:Blocks/ Built-in/ Control/ if then
Blocks/ Built-in/ Math/
=
Blocks/ Built-in/ Variables/
get global i
Blocks/ Built-in/
Math/ 0
將0改成2
16.此時,圖片出現第二張
在左側的Blocks中,點選Screen1中的image,在彈出的拼圖式程式區塊中選取set image. Image to,放入第二個if/then,也就是get global i = 2的下方。在左側的Blocks中,點選Built-in中的Text,在彈出的拼圖式程式區塊中選取" ",放在 set image. Image to的右邊。並且將空格中填入2.jpg。
拉出方塊:Blocks/ Screen1/ image/ set image. Image to
Blocks/ Built-in/ Text/
" "
將空格改成" 2.jpg"
重複此步驟5次,完成圖片更換為2.jpg~5.jpg,共4個,如下圖所示。
17.當圖片到第五張時,即使使用者繼續點擊也不再進行更換圖片的動作,使圖片停留在最後一張
在左側的Blocks中,點選Screen1中的image,在彈出的拼圖式程式區塊中選取set image. Enabled to,放入set image. Image to
"5.jpg"的下面。在左側的Blocks中,點選Built-in中的Logic,在彈出的拼圖式程式區塊中選取 false,放在 set image. Enabled to的右邊。
拉出方塊:Blocks/ Screen1/ image/ set image. Enabled to
Blocks/ Built-in/
Logic/ false
18.在圖片更換成第五張時要撥放音效
在左側的Blocks中,點選Screen1中的Sound1,在彈出的拼圖式程式區塊中選取call Sound1. Play,放在set image. Enabled to
false的下方。
拉出方塊:Blocks/ Screen1/ Sound/ call Sound1. Play
19.點選按鈕(again)時
在左側的Blocks中,點選Screen1中的again,在彈出的拼圖式程式區塊中選取when again. Click do,置於預覽畫面中。
拉出方塊:Blocks/ Screen1/ again/ when again. Click do
20. 當按鈕按下時,變數i(顯示圖片的變數)會重新從1計算
在左側的Blocks中,點選Built-in中的Variables,在彈出的拼圖式程式區塊中選取set to,放在when again. Click do的裡面。並且把空格設為global i。在左側的Blocks中,點選Built-in中的Math,在彈出的拼圖式程式區塊中選取 0,放置在set global i to的右邊。並且將0改成1。
拉出方塊:Blocks/ Built-in/ Variables/ set global i to
Blocks/ Built-in/ Math/
0
將0改成1
21.畫面(圖片)更換回第一張
在左側的Blocks中,點選Screen1中的image,在彈出的拼圖式程式區塊中選取set image. Image to,放在set global to 1的下方。
在左側的Blocks中,點選Built-in中的Text,在彈出的拼圖式程式區塊中選取" ",放在 set image. Image to的右邊。並且將空格中填入1.jpg。
拉出方塊:Blocks/ Screen1/ image/ set image. Image to
Blocks/ Built-in/ Text/
" "
將空格改成"1.jpg"
22.使圖片可以再因為點擊而更換
在左側的Blocks中,點選Screen1中的image,在彈出的拼圖式程式區塊中選取set image. Enabled to,放入set image. Image to
"1.jpg"的下面。在左側的Blocks中,點選Built-in中的Logic,在彈出的拼圖式程式區塊中選取true,放在 set image. Enabled to的右邊。
拉出方塊:Blocks/ Screen1/ image/ set image. Enabled to
Blocks/ Built-in/
Logic/ true
3.其他應用
1. 簡單:簡易電子相簿。
2. 普通:增加可撥放的音效,使不同頁面都有不同音效。
3. 進階:參考清單元件,製作頁數更大之電子相簿,並搭配背景音效。
※完整程式:
程式專案檔QRcode:
手機執行檔QRcode:
影音解說在此:
回覆刪除Part1 https://www.youtube.com/watch?v=hhCSJYHUywA
Part2 https://www.youtube.com/watch?v=kpH8z4KP9DM
原始碼(.aia)下載連結:https://drive.google.com/file/d/0Bz_3MvZ2YjRnWkVDWW9WU3VxUmM/view?usp=sharing
Ted Lee
老師,一定要修圖嗎?
刪除泰布布上已放修好的圖了喔!
刪除修正程式:
回覆刪除https://drive.google.com/file/d/0B_9NUWwOyRGIWVBCSWNSMGZpTzg/view?usp=sharing