素材下載(在連結上按滑鼠右鍵,另存連結為...): 貓咪照片 貓叫聲
進入 App Inventor 服務。 您會需要先擁有一個 gmail 信箱或者 google app 信箱。 因為目前沒有任何 Project 因此看起來沒有東西
![](https://sites.google.com/a/stu.nknush.kh.edu.tw/appinventor/_/rsrc/1334327460870/shi-zuo-fan-li----jiben/fan-li-shi-zuo---pet-kitty/projects.png?height=211&width=400)
按 New 新增一個 Project 取名叫 HelloKitty
![](https://sites.google.com/a/stu.nknush.kh.edu.tw/appinventor/_/rsrc/1334327460870/shi-zuo-fan-li----jiben/fan-li-shi-zuo---pet-kitty/%E5%85%A8%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%202011511%20%E4%B8%8B%E5%8D%88%20030131.bmp.jpg)
即可進入一個 Project 畫面
![](https://sites.google.com/a/stu.nknush.kh.edu.tw/appinventor/_/rsrc/1334327460870/shi-zuo-fan-li----jiben/fan-li-shi-zuo---pet-kitty/%E5%85%A8%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%202011511%20%E4%B8%8B%E5%8D%88%20030223.bmp.jpg?height=175&width=400)
最左側一欄為各式各樣的元件。第二欄為手機畫面。第三欄為所有元件的樹狀圖。第四欄為元件的屬性。
在左側元件欄當中將一個 Button 拉至手機欄。 這時會在手機欄當中看到一個按鈕,在元件樹狀圖會看到多了一個名叫 "Button1" 的 Button 元件。 Button1 這個名稱可以隨時用 rename 來修改為更有意義的名稱。為了簡化範例我們這裡暫不修改。
如下圖:
![](https://sites.google.com/a/stu.nknush.kh.edu.tw/appinventor/_/rsrc/1334327460870/shi-zuo-fan-li----jiben/fan-li-shi-zuo---pet-kitty/%E5%85%A8%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%202011511%20%E4%B8%8B%E5%8D%88%20030440.bmp.jpg?height=106&width=400)
準備將圖片放入 Button1 ![](https://sites.google.com/a/stu.nknush.kh.edu.tw/appinventor/_/rsrc/1334327460871/shi-zuo-fan-li----jiben/fan-li-shi-zuo---pet-kitty/%E5%85%A8%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%202011511%20%E4%B8%8B%E5%8D%88%20030928.bmp.jpg?height=204&width=400) 選擇 Button1 並且最右欄 image 的地方增加 Kitty 圖片。 並且將 Text 欄位清空。因為我們這個按鈕已經不需要文字顯示了。 ![](https://sites.google.com/a/stu.nknush.kh.edu.tw/appinventor/_/rsrc/1334327460871/shi-zuo-fan-li----jiben/fan-li-shi-zuo---pet-kitty/%E5%85%A8%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%202011511%20%E4%B8%8B%E5%8D%88%20031614.bmp.jpg?height=179&width=400) 至此基本界面已經完成。 接下來我們必須設計這個按鈕的動作,它才會依照我們的想法進行動作。 這些動作都必須在 "Blocks Editor"當中進行。請點選右上角 "Open the Blocks Editor" 如果電腦的 java 設定沒有問題的話,就會跳出一個新視窗。 右上角有一個 Connect to Device 如果您的手機設定正確,並且電腦也已經安裝好手機驅動程式,就可以看到您的手機代號。進行連接。在您的手機畫面就會出現 Kitty 畫面。如下圖:
畫面順利顯示出來之後,我們就要開始加入點選的動作了。在 Blocks Editor 左側欄選擇 My Blocks,就是我這一個應用程式所用到的所有元件。內有一個元件叫做 Button1 就是我們畫面中這個唯一的按鈕的名稱。點擊 Button1 就可以看到這個按鈕有許多個 block 可以使用。![](https://sites.google.com/a/stu.nknush.kh.edu.tw/appinventor/_/rsrc/1334327460870/shi-zuo-fan-li----jiben/fan-li-shi-zuo---pet-kitty/App%20Inventor%20for%20Android%20Blocks%20Editor%20HelloKitty%202011511%20%E4%B8%8B%E5%8D%88%20040533.bmp.jpg)
我們希望在我們點擊這個按鈕的時候可以讓 Kitty 喵喵叫。因此我們使用 when Button1.Click do 這個 block 將 拖拉進入中間的編輯欄。如下:![](https://sites.google.com/a/stu.nknush.kh.edu.tw/appinventor/_/rsrc/1334327460870/shi-zuo-fan-li----jiben/fan-li-shi-zuo---pet-kitty/App%20Inventor%20for%20Android%20Blocks%20Editor%20HelloKitty%202011511%20%E4%B8%8B%E5%8D%88%20044054.bmp.jpg)
然後我們需要為我們的畫面增加一個聲音元件。回到 Designer 畫面。左側 Palette 裡面有一個 Media 裡面有一個元件 Sound 將它拖拉至 中間手機畫面因為 Sound 是一個不可見元件,因此會出現在畫面最下方。它的名稱被定為 Sound1 。![](https://sites.google.com/a/stu.nknush.kh.edu.tw/appinventor/_/rsrc/1334327460871/shi-zuo-fan-li----jiben/fan-li-shi-zuo---pet-kitty/%E5%85%A8%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%202011511%20%E4%B8%8B%E5%8D%88%20041219.bmp.jpg)
然後更改 Sound1 的屬性。將 source 改到貓叫聲的 mp3 檔案。
|