網頁

2017年11月19日 星期日

手機 App 程式設計- AppInventor2 -小鋼琴

題目:
小鋼琴有7個按鍵,分別發出 do re mi fa so la si do 聲音。

素材:
可自製或網路搜尋,我是用相機拍鋼琴的琴鍵,使用PhotoImpact 切割成7個按鍵圖。用手機錄製鋼琴的聲音,使用 Audacity分割成7個聲音。

步驟:
在 Projects , 選 「Start  new project」。專案名稱輸入 : piano。
Screen1 元件屬性設定如下:
  •  title: 小鋼琴
  • ScreenOrientation :Landscape (讓手機螢幕變成橫的)

上傳7張圖片檔: do-s.jpg  re-s.jpg mi-s.jpg fa-s.jpg so-s.jpg la-s.jpg si.jpg。
上傳7個聲音檔 :do.mp3 re.mp3 mi.mp3 fa.mp3 so.mp3 la.mp3 si.mp3  。


在  Layout 選單下面 選 「HorizontalArrangement」元件,拖曳到介面設計區,此元件名稱預設為 HorizontalArrangement1, 屬性設定如下:
  • AlignHorizontal:Center
  • Width: Fill parent
  • Height:Automatic
按 User Interface 選單中的Button物件,拖曳到元件設計區,預設名稱為Button1,屬性設定如下:
  • Width: 40 pixels
  • Height:240 pixels
  • Text:無
  • Image:do-s.jpg

其它6個Button  仿照上述的方法設定,但image要改。
Button2 : re-s.jpg,Button3 : mi-s.jpg,Button4 : fa-s.jpg,Button5 : so-s.jpg,Button6 : la-s.jpg,Button7 : si-s.jpg。

選 Media/Sound  此元件,拖曳 Sound元件到 元件設計區, ,自動會掉到下面的Non-visible components區,更改名稱 為 Sound_do。

仿照上述方法,產生  Sound_re、Sound_mi、Sound_fa、Sound_so、Sound_la、Sound_si 元件。
把 Button1 改名為 Button_so,…,Button7 改名為 Button_si。這樣比較清楚每個按鈕的功能。
Designer最後的畫面如下:
 Blocks 模式
按螢幕 右上方的 Blocks, 切換到 Blocks 模式。
按 Screen1,選 「when Screen1.Initialize do」block。
按 Sound_do元件,選 「set Sound_do.Source to 」block。
按 Built-in 內的 Text,選 「text string」block,輸入 "do.mp3",插入到 「set Sound_do.Source to 」block的後面 。
其它6個 Sound依此類推。
也可直接 按 「set Sound_do.Source to 」block,按右鍵,選 Duplicate,複製。

按向下三角形,改選 Sound_re。do.mp3 改為 re.mp3。
結果如下:

按 Button_do,選 「when  Button_do.Click do 」 block。
按 Sound_do,選 「call   Sound_do.Play」 block和 「call   Sound_do.Vibrate」(按鍵加上震動效果) 。
按 Built-in 內的 Math,選 「number 」block,輸入300,插入到 millisecs的後面。縮短琴鍵聲音點擊的間隔時間,300ms =0.3秒。

利用Duplicate 和按下拉式方塊選其它 Sound元件的方式,可快速建立其它 按鈕的click程式。
Block最後的畫面如下:

執行時,要先按 Ctrl+ F12,變成橫的。畫面如下:
手機執行結果:

沒有留言 :

張貼留言