多媒體&網路瀏覽器
2016/01/12 謝碧景(c)編製更新
學習目標
學會Media多媒體類別中【Camera(照相機)】結合【ImagePicker(圖像選擇器)】元件的設計與應用。
學會Media多媒體類別中【TextToSpeech文字語音轉換器】及【SpeechRecognizer語音辨識】元件的設計與應用。
學會User Interface使用者介面類別中【WebViewer(網路瀏覽器)】元件嵌入網頁的設計與應用。
◆ MIT App Inventor 官方網站 http://appinventor.mit.edu/ → Create apps! (繁體中文)
一、多媒體元件
(一)照相機 Camera
Camera(照相機)元件位於左側元件面板(Palette)之『多媒體(Media)』類別中，為非視覺元件(即不會顯示在行動裝置上)，程式中以按鈕啟動照相功能。
無屬性僅方法與事件：
例：利用相片路徑取得相片，或從相簿取一張相片當作 Canvas畫布的背景圖。
(二)圖像選擇器 ImagePicker
ImagePicker(圖像選擇器)元件位於左側元件面板(Palette)之『多媒體(Media)』類別中，可讓使用者從行動裝置之『相簿』中選取一張相片。
方法與事件：
常用屬性
啟動ImagePicker(圖像選擇器)元件有兩種方式：
直接點選ImagePicker(圖像選擇器)元件，系統會開啟行動裝置的相簿，讓使用者選取。
透過程式方塊中以『打開選框』方法啟動ImagePicker(圖像選擇器)元件。該作用相同於使用者點選ImagePicker(圖像選擇器)元件。
例：從相簿中選取相片當作 Canvas畫布的背景圖。
練習9：請運用『多媒體』類別中Camra(照相機)元件及ImagePicker(圖像選擇器)元件建立寵物、插畫或繪圖等相簿集錦。【重點：學會『Media(多媒體)類別中元件的設計與應用】。(檔名：camera.aia)
1.畫面編排(Designer)頁面：即版面配置頁面，如下圖。※本範例的照相功能，需在行動裝置上執行，建議使用實機測試。
設定元件屬性：
2.程式設計(Blocks)頁面：
語系→繁體中文：
語系→English：
練習10：畫布塗鴉：請利用照相機元件拍照，或從相簿取一張相片當作畫布的背景圖，使用者可在畫布上塗鴉後存檔或清除。【重點：學會『Camera(照相機)、ImagePicker(圖像選擇器)及Canvas畫布元件的設計與應用】。(檔名：Canvas.aia)
1.畫面編排(Designer)頁面：即版面配置頁面，如下圖。※本範例的照相功能，需在行動裝置上執行，建議使用實機測試。
2.程式設計(Blocks)頁面：
(1)設定畫筆顏色與粗細。(語系→繁體中文)
(2)啟動照相機，拍照後拍攝完成事件會以參數(圖像位址)設定相片為背景圖，或從相簿中選取相片為背景圖。
(3)在畫布上拖曳會觸發被拖曳事件，產生如同塗鴉效果。
＊註：Canvas1.畫線會自 (前點x座標,前點y座標)-(當前x座標,當前y座標) 繪製一條直線。
參數 (起點x座標,起點y座標) 代表第一次觸碰的點。
參數 (前點x座標,前點y座標) 代表上一次的觸碰點。
參數 (當前x座標,當前y座標) 代表目前的觸碰點。
參數 任意被拖曳的精靈 會判斷是否觸碰到畫布中的動畫元件。
(4)分別按下按鈕『儲存、另存新檔、清除』。
＊註：按鈕『儲存』及『另存新檔』在LabelFileName元件位置顯示如下：因行動設備不同，儲存位置會有不同，且儲存的圖片無法以圖像選擇器立即讀取，但已儲存，可在相簿中檢視。
ButtonSave
ButtonSaveAs
語系→English：
3.延伸思考
創意塗鴉：呈上題，請增加Slider滑桿元件以拖曳方式設定畫筆粗細(3-15)，並可選擇不同畫筆顏色塗鴉。【重點：學會『Camera(照相機)、ImagePicker(圖像選擇器)、Slider滑桿及Canvas畫布等元件的設計與應用】。(檔名：Canvas_ex10.aia)
測試程式：以模擬器(emulator)測試執行，如下圖。
例：以畫筆書寫。
例：相簿圖檔塗鴉。
二、聲音類元件
App Inventor 2 有2個播放聲音的相關元件(音效元件、音訊播放器元件)，及1個錄音元件，簡述如下：
(一)Sound音效元件
Sound(音效)元件位於左側元件面板(Palette)之『多媒體(Media)』類別中，為非可視元件，可播放較短的音效檔，亦可讓手機產生震動，及設定震動時間。
屬性與方法：
方法：
1.包含：從頭播放、暫停播放、繼續播放、及停止播放。
2.震動：震動時間由參數傳入，時間單位為毫秒(1秒=1000毫秒)。
例如：讓手機震動1秒。
＊註：參閱內建指令說明：Media→Sound 音效元件 《摘自： AppInventor中文學習網→指令中文化》
練習11：簡易鋼琴：當按下琴鍵，分別彈奏Do、Re、Mi、Fa、So、La、Si 音效。【重點：學會Media(多媒體)類別中Sound(音效)元件的設計與應用】。 琴鍵圖檔及7個音效檔。(檔名：SoundPiano.aia)
1.畫面編排(Designer)頁面：即版面配置頁面，如下圖。
2.程式設計(Blocks)頁面：
語系→繁體中文：
語系→English：
註1：音樂播放器元件較音效元件少了從頭播放，若需音樂播放器元件從頭播放聲音檔，可先停止方法停止播放聲音，再用開始方法播放，如下。
註2：例如 播放素材庫中Twinkle.mp3 聲音檔(請先上傳音樂檔)，如下圖【播放音樂(ButtonPlay)】及【停止播放(ButtonStop)】按鈕。
＊註3：例如 播放SD卡中 media 資料夾的 Twinkle.mp3 聲音檔，如下圖【播放音樂】按鈕。
※建議採實機執行，因行動設備不同，SD卡儲存位置會有不同。內建指令說明：Media→Player 播放器 《摘自： AppInventor中文學習網→指令中文化》
玩家設定遊戲時間(秒)→Play
遊戲中，隨機出現1~3隻地鼠。
◆延伸思考3：拉霸。【重點：學會以行動電話尺寸預覽設計版、元件及按鈕的隱藏與顯示、以計時器控制另一個計時器、隨機選取圖片】，請增加『文字輸入盒』讓玩家輸入金額。(檔名：slot.aia)。
遊戲開始→按下『拉霸』鈕
花色：相同2個+2，
(三)嵌入網頁：WebViewer網路瀏覽器元件
網路瀏覽器：該元件在使用者介面(User Interface)類別中，功能為顯示指定的網頁內容，會嵌入一個小瀏覽器，除網頁顯示外，亦顯示文字、圖片、Google地圖等。
1.常用屬性：※程式方塊：土黃色代表事件，紫色是方法，深綠色是設定屬性值，淺綠色是取得屬性值。
＊註：僅需在首頁地址屬性填入網址，即可在該元件區嵌入指定的網頁。
2.常用方法
例：請以Player 音樂播放器元件及WebViewer網路瀏覽器元件，以【播放音樂、停止播放、瀏覽音樂網】三個按鈕設計閱聽音樂，如下。
＊註2： 媒體轉檔或下載：線上將 YouTube 影片錄音、下載為 MP3 或 MP4 等格式。
◆延伸思考4：音樂點播站，請展示音樂曲目，以利點播、暫停、停止。【重點：學會 ListPicker清單選擇器、Button按鈕、Player音樂播放器等元件的設計與應用】。(檔案：Player_ex11_2.aia)
三、語音辨識相關元件
語音元件屬多媒體類別元件，若要將使用者所說的語音轉文字可用 SpeechRecognizer語音辨識 元件，而要將文字轉語音說出可用 TextToSpeech文字語音轉換器 元件。
(一)TextToSpeech文字語音轉換器元件
屬性、方法及事件：
支援的語言及國家，如下：
範例參閱： 專題1_英文單字集。【重點：學會資料庫結合『TextToSpeech文字語音轉換器』、『File檔案管理』及『Web網路』元件的設計與應用】。(檔名：vocabulary.aia)
(二)SpeechRecognizer語音辨識元件
例：開啟語音輸入視窗，說一句話後，顯示辨識文字。(檔名：SpeechRecognizer.aia)
1.畫面編排(Designer)頁面：即版面配置。
2.程式設計(Blocks)頁面：
語系→繁體中文：
語系→English：
3.實機執行畫面：
(1)請按下『語音輸入』鈕
(2)請說話。
(3)顯示辨識後文字。
