2014年12月25日 星期四

第四章 我的第一支手機程式-Hello Purr

我的第一支程式(Hello Purr)
1.1 專題介紹:Hello Purr
在建置本專題前,首先須確認您已經學會App Inventor 2當中環境之建置與基礎的操作。Hello Purr為一支簡單上手又具玩樂性質的APP,一般來說,初學者可以在幾分鐘內寫完這支APP程式,並且體驗將自己一手開發的APP遊戲安裝到手機中操作的樂趣。


1.2 專題重點
※明白按鈕使用
※理解程式拼塊的基本元件操作
※能將圖片、音效匯入、增加震動功能

2. 專題實作:我的第一支程式
2.1專題總覽
  在製作好HelloPurr之後,開啟這APP時便會顯示一張貓咪圖片,在點擊圖案時,會伴隨聲音(貓叫聲)產出。而後段進階挑戰則是點擊圖案後,聲音的產出同時會伴隨所操作數位設備的震動。


2.2 專題建置
需求元件:
1.貓咪圖片
2.喵叫聲

1.新增專案:HelloPurr
按下Start new projects,新增「專題名稱:HelloPurr」的專案。
進入App InventorDesigner視窗
(註:專案名稱開頭不能是數字;專案名稱中可用底線,但是不能使用空格或其他特殊字元)

2.3 介面配置

2.增加元件Button1
點選視窗左側組件面板(Palette)裡面的用戶介面(User Interface),選取按鈕(Button)按住滑鼠不放將其拖曳至中間的工作面板(Viewer)視窗中。

新增按鈕:Palette / User Interface / Button


3.新增按鈕的背景圖片
點選剛剛拖曳到工作面板(Viewer)按鈕(Button1)接著請在視窗右側的屬性(Properties)面板中,點選Image,選取Upload File,上傳圖片


新增按鈕背景圖片:Properties/ Image/ Upload File 



4.消除按鈕上的文字
上傳圖片後,圖片上會顯示Text for Button1 的文字,為按鈕上附加的提示語,若覺得不美觀,可在視窗右側的屬性(Properties)面板中的Text屬性,將方框中預設的文字清除,便能顯示完整的貓咪圖片囉!

消除文字:Properties/ Text:


5.新增音效
在視窗左側的組件面板(Palette)中,點選多媒體(Media)選單中的聲音(Sound)元件,按住滑鼠鍵不放將其拖曳至中間的畫面預覽(Viewer)視窗,新增一個聲音元件,並按下Upload File,上傳聲音元件。

  解釋:
由於聲音元件並不會顯示在APP畫面視窗中,因此App Inventor將其置於視窗的底部。

新增音效:Palette/ Media/ Sound
          Properties/ Source/ Upload File

使用元件及其重要屬性
名稱
屬性
說明
Button1
Image: kitty.png
Text:
可選擇想要的動物圖片來上傳。
Sound1
Source: 喵叫聲
選擇搭配圖片的聲音即可。

2.4 專題分析和程式拚塊說明
請先從視窗右上角的 Designer 視窗切換至 Blocks 視窗。
6.播放聲音
在左側Blocks選單中點選Screen1中的Button1,在彈出的拼圖式程式區塊中選取when Button1 Click do的事件區塊,置於預覽視窗中。接著在點選Screen1下的Sound1,在彈出的拼圖式程式區塊中選取call Sound1 Play的命令區塊(command block),然後將其卡入when Button1 Click do的事件區塊中。


播放聲音:Blocks/ Screen1/ Button1/ when Button1 Click do
Blocks/ Screen1/ Sound1

  解釋:
目前合併的程式區塊集合像下圖這樣,它的意思是「當Button1按鈕被按下後,呼叫播放Sound1的副程式」。when Button1 Click do是一種事件區塊(event handler),而 call Sound1 Play 則是一種命令區塊(command block)。我們可將event handler想像成我們要程式採取什麼動作的種類,而command block則是這種動作實際要做的任務細節。




3. 其他應用
3.1加入震動
  如果我們希望按下貓咪圖案時,不僅會發出一聲喵叫聲,手機還會震動半秒鐘,該如何做呢?



在左側Blocks選單中點選Screen1下的Sound1,在彈出的拼圖式程式區塊中選取call Sound1 Vibrate,然後將其卡入 when Button1 Click do事件區塊中的 call Sound1 Play下。

在左側Blocks選單中點選內建Built-in下的數學指令Math,在彈出的拼圖式程式區塊中選取第一個未含任何運算符號的常數,然後將其卡入call Sound1 Virbate右下的millisecs缺口,並將原本的常數0改為500,因單位是毫秒,所以500毫秒即為半秒鐘,這樣就完成了。


加入震動:Blocks/ Screen1/ Sound1/ call Sound1 Vibrate
          Blocks/ Built-in/ Math
3.2增加按鈕與音訊
  現在你已經學會製作基礎的程式了,很簡單吧!為了能和使用者有著更多的互動,就讓我們來為程式做點小改變,新增一些功能吧!

1.      新增一個的文字(Label)在貓咪按鈕下方,在視窗右側的屬性(Properties)面板中的Text 屬性中,輸入:「下列哪一個是貓咪的叫聲?」,字體大小(FontSize)設為30

2.      新增三個的按鈕(Button) 在文字(Label)下方,並在視窗右側的屬性(Properties)面板中的Text 屬性中,分別輸入:叫聲1、叫聲2、叫聲3


3.      自行匯入其他2種的動物叫聲,並重複2.3節第五步驟新增音效以及2.4節第六步驟播放音效的程式流程,將三種動物的叫聲任意與下方的叫聲1(Button2)、叫聲2(Button3)、叫聲3(Button4)做連結。

4.      Butto1是原本的那張貓咪圖片按鈕,播放的當然是Sound1的貓叫聲,至於其他的叫聲1(Button2)、叫聲2(Button3)、叫聲3(Button4),就任意放置不同的聲音,這樣就完成了最基本的猜猜看APP囉。

程式專案檔QRcode:


手機執行檔QRcode:

6 則留言:

  1. 影音解說在此:https://www.youtube.com/watch?v=b5NgT4v_53Y

    Ted Lee

    回覆刪除
  2. 原始碼(.aia)下載連結:http://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/helloPurr/HelloPurr.aia

    Ted Lee

    回覆刪除
  3. .apk
    https://drive.google.com/file/d/0Bz_3MvZ2YjRnbjE0dEpLOExVQ2M/view

    回覆刪除
  4. 1111111111111111111111111111111111111111111111

    回覆刪除
  5. 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111


    回覆刪除