App Inventor2教學:熟悉圖形方塊,設計按鈕音效程式

App Inventor設計程式跟組合樂高一樣簡單,本文介紹進入程式編輯器,工作面板選擇元件事件,拖曳手機圖片按鈕,設置被點選即發出音效,並且複製程式方塊。

上一節已經大致設計好了這款簡單手機APP的介面,包括一個標籤和兩個按鈕,不過使用手機APP,當然是期待在按下按鈕時會執行某些動作,這個之前所提到英文語法裡另一個基本句型:主詞+動詞。這一節便要繼續完善這個APP,讓它在按下小貓小狗的照片之後,手機就會發出相對應動物的叫聲。

一、設置音效元件

元件面板由12個可摺疊的抽屜所組成的,之前章節是取出「操作使用者介面」中的按鈕和標籤,這裡則是要用到「多媒體」中的「音效」。雖然是不同類型的元件,設計流程完全相同:將「音效」元件拖曳到「工作面板」上,然後於「元件清單」中選取這個元件,在屬性「來源」裡上傳一個多媒體聲音檔案(zanzancat1)。只要先前實際動手設計過按鈕圖像,這裡的操作應該不會是太大困難。

雖然設計流程相同,但其實音效和先前的按鈕和標籤在本質上有所區別。仔細看工作面板,音效會放置在最下面「非可視元件」的區域裡面,這表示在最後手機APP呈現的時候,可以看到按鈕和標籤,但不會看到音效,非可視原件是作為非視覺化的多媒體內容、或者是輔助APP運作的物件。

二、程式方塊設計

到現在這款APP的所有元件都設置好了,接下來讓這些元件動起來。由此要進入APP inventor另外一個介面,為了使讀者更加清楚,先把語言切換到英文,可以注意到在右上角有兩個選項,其中英文分別為:畫面編排(Designer)及程式設計(Blocks)。

設計元件都是在「畫面編排」界面,現在要點擊進入「程式設計」,特別把中英文列出來,是因為「畫面編排」中英文表達的意思差不多,「程式設計」的話,中文表達的是操作效果,英文「Blacks」則表達其如何被操作的,亦即以方塊進行程式設計,也就是本節接下來的步驟。

三、程式工作面板

程式設計介面主要分成三大區域:方塊、素材、工作面板。方塊區域又分成幾個部分,在這裡我們會用到先前設計好的「screen1」各個元件,至於方塊區域裡其他部分,留待以後的章節再作介紹。第二區域為素材區,其內容作用和前面畫面編排是相同的,在此不多作介紹。

工作面板區域像一塊大白板,在這裡結合方塊、以圖像化方式編輯程式。例如在方塊區域裡點一下「按鈕1」,工作面板即會出現該按鈕可以設計執行的操作,其中第一個為「當按鈕1被點選執行」。將一隻手的游標圖示移到此方塊,浮窗顯示一行英文的輔助說明:「User tapped and release the button」,相當清楚地描述該事件程序。

四、新增按鈕方塊

按一下「被點選」方塊,這個方塊即被放置在工作面板的白板上。

五、音效播放方塊

同樣方式,將方塊區域中「音效1」的「呼叫音效1播放」方塊,放置到工作面板上。

六、按鈕播放音效

目前工作面板中有兩個程式方塊:「當按鈕1被點選執行」、「呼叫音效1播放」,直接拖曳讓這兩個方塊結合起來。如圖所示,有點像是拼圖一樣,這兩個方塊在上方部位有個一凸一凹的卡扣,當它們緊扣在一起,電腦會有一個扣住了的聲響。這是APP inventor的設計,拼圖組合和卡扣結合的方式,確保程式設計沒有問題。

「呼叫音效1播放」方塊下面還有一個突出來的地方,這是因為「當按鈕1被點選」,可能希望不止執行一項操作如果有第2項第3項的話,同樣方法可以增加其他的操作。

不僅編寫程式語句簡單,複製程序語句同樣相當簡單,只要在已經組合好的程式方塊上,直覺地滑鼠右鍵,有非常多的快捷選項,其中一項就是「複製程式方塊」。

七、三個程式積木

成功為三個按鈕設計了執行音效播放的程式。注意到按鈕和音效皆可下拉選擇,任何一個方塊很方便可以設置改為其他按鈕或者其他音效。

為寶貝女兒設計App

這一節最後設計成的APP專案以介面而言,一個名稱標籤、三個小動物布偶的照片,以APP程式而言,按下去分別有預錄製好的小朋友聲音,這款簡單的手機APP是我設計給自己家寶貝女兒贊贊玩的,贊贊的玩偶照片、錄製贊贊的聲音。

讀者當然在實際嘗試的時候,當然會用自己所拍的照片、自己所錄製的聲音,這便是自己設計手機APP程式的樂趣所在,全然的客製化、全然的自己動手DIY。這款APP雖然簡單,不過延伸擴大,只要將界面照片換成是音樂專輯的封面,程式設計按下封面開始播放音樂,或者是親朋好友的照片,只要點選照片,撥打電話給對方,諸如此類的APP以目前功力來說,已經非常接近了。接下來章節便會繼續擴充APP的結構,設計更為複雜靈活的手機APP。

本文內容取自《人人都學得會的App Inventor 2初學入門》,書本仍然是最好的學習方法,省下一張電影票的錢,今天就買本書吧!

相關文章