第1398回-國小資訊課-有聲書-2- App Inventor 2 教學前備課
昨天第1397回，我提到文淵閣工作室的黃信溢老師教我如何用 App Inventor 2 把學生的紙本繪本+旁白語音整合成一個 Android APP，如果您也想學，請觀看【教學短打】用 AppInventor開發電子繪本App - AppInventor2 - YouTube 自學。
為什麼想教學生做有聲書APP？
學生小五生小六的暑假作業是完成一本十頁左右的自創繪本，我看了內容覺得很感動，想要幫學生的作品數位化。以前曾教學生用雄哥開發的 ebook.swf 來做，但現在瀏覽器大多不支援 flash，加上家長大多用手機或平板上網，於是想把學生的自製紙本繪本，加上學生自己的旁白，做成一個有聲書 APP，家長可以掃描 Qr code 後下載安裝到手機或平板上。如何指導學生做有聲書APP？
1.素材準備
- 圖片檔：封面 cover.jpg
- 圖片檔：內頁 01.jpg ~ 10.jpg
- 圖片檔：結束有聲書的圖示 exit.jpg
- 旁白檔：01.mp3 ~ 10.mp3
2.素材的注意事項
- 超過 10 MB 就不能打包成 APK
- App Inventor 2 原本就佔掉 5MB，您自己準備的素材要在 5MB 以內。
- 圖片部分，我是用光影魔術手限縮到每張 100KB 以內
- 旁白部分，我是用 Audacity 錄音並改存成 64 kbps mp3
- 上傳到 App Inventor 2 的素材區，一次只能上傳一個檔案，無法批次上傳，殘念。
3.封面頁的設定
- Start new project 開啟一個新專案
- 畫面右上角設定語系為「繁體中文」
- 預設的螢幕(Screen)，叫做 Screen1
- Screen1 元件屬性 => 螢幕方向 => 鎖定橫向畫面
- Screen1 元件屬性 => 狀態欄顯示 => 取消打勾
- Screen1 元件屬性 => 標題顯示 => 取消打勾
- 到元件面板
- 找到 繪圖動畫 => 畫布
- 把「畫布」拖曳到「工作面板」
- 元件屬性 => 背景圖片 cover.jpg
- 寬度和高度都設為「填滿」
4.內頁的基本設定
- 新增螢幕(Screen)，第一頁命名為 page01，以此類推
- page01 元件屬性 => 關閉螢幕動畫 => 水平滑動
- page01 元件屬性 => 開啟螢幕動畫 => 水平滑動
- page01 元件屬性 => 螢幕方向 => 鎖定橫向畫面
- page01 元件屬性 => 狀態欄顯示 => 取消打勾
- page01 元件屬性 => 標題顯示 => 取消打勾
5.在內頁中加入音檔
- 到元件面板
- 找到 多媒體 => 音樂播放器
- 把「音樂播放器」拖曳到「工作面板」
- 元件屬性 => 只能在前景運行，打勾
- 元件屬性 => 來源: 01.mp3
6.在內頁中加入圖片
- 到元件面板
- 找到 繪圖動畫 => 畫布
- 把「畫布」拖曳到「工作面板」
- 元件屬性 => 背景圖片 01.jpg
- 寬度和高度都設為「填滿」
7.在內頁中加入程式設計
- 畫面最右邊有一個「程式設計」按鈕，按下去
- 組裝程式
- 把會重複用到的程式存放到背包中，做下一頁時就可以重複取用，但要記得更改頁數
- 程式設計的部分有很多眉角，請務必觀看【教學短打】用 AppInventor開發電子繪本App - AppInventor2 - YouTube 自學。
8.如何關閉有聲書
- 製作一個 exit.jpg ，我是做 150X50 像素
- 到元件面板找到 繪圖動畫 => 圖像精靈 => 拖到畫布上
- 編寫程式
9. 設定 APP 的名稱和圖示
- 回到第一個螢幕， screen1，右邊元件屬性區裡面，有 「APP名稱」和「圖示」可以設定
10.打包成 APK
11.在Android 手機或平板上安裝 APK
- 掃 Qr code 即可下載 apk
- 下載後您的手機或平板預設是不能安裝 Google Play 以外的 App，您要更改設定，同意安裝第三方來源的 apk
留言