第1398回-國小資訊課-有聲書-2- App Inventor 2 教學前備課

昨天第1397回,我提到文淵閣工作室黃信溢老師教我如何用 App Inventor 2 把學生的紙本繪本+旁白語音整合成一個 Android APP,如果您也想學,請觀看【教學短打】用 AppInventor開發電子繪本App - AppInventor2 - YouTube 自學。

為什麼想教學生做有聲書APP?

學生小五生小六的暑假作業是完成一本十頁左右的自創繪本,我看了內容覺得很感動,想要幫學生的作品數位化。以前曾教學生用雄哥開發的 ebook.swf 來做,但現在瀏覽器大多不支援 flash,加上家長大多用手機或平板上網,於是想把學生的自製紙本繪本,加上學生自己的旁白,做成一個有聲書 APP,家長可以掃描 Qr code 後下載安裝到手機或平板上。

如何指導學生做有聲書APP?

以下是我的備課備忘筆記,也打算印成講義讓學生邊看邊做。
重點!App Inventor 2 需要有 google 帳號才能登入使用!

1.素材準備

  1. 圖片檔:封面 cover.jpg
  2. 圖片檔:內頁 01.jpg ~ 10.jpg
  3. 圖片檔:結束有聲書的圖示 exit.jpg
  4. 旁白檔:01.mp3 ~ 10.mp3

2.素材的注意事項

  1.  超過 10 MB 就不能打包成 APK
  2.  App Inventor 2 原本就佔掉 5MB,您自己準備的素材要在 5MB 以內。 
  3. 圖片部分,我是用光影魔術手限縮到每張 100KB 以內
  4. 旁白部分,我是用 Audacity 錄音並改存成 64 kbps mp3
  5. 上傳到 App Inventor 2 的素材區,一次只能上傳一個檔案,無法批次上傳,殘念。

3.封面頁的設定

  1. Start new project 開啟一個新專案
  2. 畫面右上角設定語系為「繁體中文」
  3. 預設的螢幕(Screen),叫做 Screen1
  4. Screen1 元件屬性 => 螢幕方向 => 鎖定橫向畫面
  5. Screen1 元件屬性 => 狀態欄顯示 => 取消打勾
  6. Screen1 元件屬性 => 標題顯示 => 取消打勾
  7. 到元件面板
  8. 找到 繪圖動畫 => 畫布
  9. 把「畫布」拖曳到「工作面板」
  10. 元件屬性 => 背景圖片 cover.jpg 
  11. 寬度和高度都設為「填滿」

4.內頁的基本設定

  1. 新增螢幕(Screen),第一頁命名為 page01,以此類推
  2. page01 元件屬性 => 關閉螢幕動畫 => 水平滑動
  3. page01 元件屬性 => 開啟螢幕動畫 => 水平滑動
  4. page01 元件屬性 => 螢幕方向 => 鎖定橫向畫面
  5. page01 元件屬性 => 狀態欄顯示 => 取消打勾
  6. page01 元件屬性 => 標題顯示 => 取消打勾

5.在內頁中加入音檔

  1. 到元件面板
  2. 找到 多媒體 => 音樂播放器
  3. 把「音樂播放器」拖曳到「工作面板」
  4. 元件屬性 => 只能在前景運行,打勾 
  5. 元件屬性 => 來源: 01.mp3

6.在內頁中加入圖片

  1. 到元件面板
  2. 找到 繪圖動畫 => 畫布
  3. 把「畫布」拖曳到「工作面板」
  4. 元件屬性 => 背景圖片 01.jpg 
  5. 寬度和高度都設為「填滿」

7.在內頁中加入程式設計


8.如何關閉有聲書

  • 製作一個 exit.jpg ,我是做 150X50 像素
  • 到元件面板找到 繪圖動畫 => 圖像精靈 => 拖到畫布上 
  • 編寫程式

9. 設定 APP 的名稱和圖示

  • 回到第一個螢幕, screen1,右邊元件屬性區裡面,有 「APP名稱」和「圖示」可以設定

10.打包成 APK


11.在Android 手機或平板上安裝 APK

  • 掃 Qr code 即可下載 apk
  • 下載後您的手機或平板預設是不能安裝 Google Play 以外的 App,您要更改設定,同意安裝第三方來源的 apk

留言

這個網誌中的熱門文章

第1918回-師師有法寶-4-雄-筆順練習-南一-康軒-翰林-國小國語- QR Code 大合集

第1670回-自主學習-如何印出中英對照的 TED 演講逐字稿

第1804回- Google 文件如何一次看兩頁?