本範例為CAVEDU 2016年度的實習生歐新暘設計~ 功能說明：電子書整合聲音、動畫、圖片的特性呈現了多媒體的便利性，已成為時代的潮流，尤其在兒童讀物市場上不可或缺，本教學示範如何以Canvas和Player元件來實作一本有聲書。 元件說明:
素材名稱: 1.png、2.png、3.png、4.png boy1.wav、boy2.wav、boy3.wav、boy4.wav girl1.wav、girl2.wav、girl3.wav、girl4.wav Taiwanese1.wav、Taiwanese2.wav、Taiwanese3.wav、Taiwanese4.wav 程式碼: 1.宣告變數
宣告time，控制手指的動畫。 宣告voice_type，儲存現在聲音種類。 宣告page，儲存現在頁數。 宣告text，儲存故事內文。
進到Screen1螢幕初始化時，便執行do區塊內的動作， 可運用在一些前置性的操作上。 (1)call tellstory 是本範例建的副程式，之後會說明。 (2)設定ImageSprite1的圖片為hitfinger.png這個檔案。 (3)設定ImageSprite1的X座標。 (4)設定ImageSprite1的Y座標。 【參考】ImageSprite圖片精靈 、 Canvas畫布、 副程式
| Clock1.Timer事件： 當計時器停止作動時呼叫本事件。 本範例設定TimerInterval為100(毫秒)，也就是0.1秒觸發一次Timer事件。 (1)運用變數time來設定動畫，當此事件被呼叫一次，變數time值+1。 (2)ImageSprite1.Heading 設定ImageSprite1的運動方向， 向右為0°，向上為90°，向左為180°，向下為270°。 ImageSprite1.Picture 設定ImageSprite1的圖片。 ImageSprite1.Speed 設定ImageSprite1的運動速度。 (3)當變數time = 26時，設定圖片為hitfinger.png，最後再設定變數time為0。 會發現time變數值永遠處於0~26的狀態，運用這些狀態設置動畫。 【說明】finger.png: 想一下為什麼finger.png的手指圖案是上下顛倒的呢? 提示這跟heading有關。 因為heading是直接旋轉物件，而不是翻轉，所以換一張垂直翻轉的圖方向剛好。
3.講故事功能
tellstory方塊: tellstory 是本範例建的副程式，功用包含顯示頁數、故事內文，與設定聲音、圖片。 (1)設定當頁面是第一頁時，才會顯示聲音按鈕與ImageSprite1(手指)。 (2)顯示所在頁數，length of list 會抓取 list的清單數目，這邊沒把程式寫死。 (3)根據頁數設定圖片影像。 圖片素材名稱要照順序命名才能這樣寫。 (4)根據頁數，在先前建的text清單抓取內文。 (5)根據按鈕勾選狀態與所在頁數，設定Player播放的聲音檔。 4.翻頁功能
Canvas1.Flung方塊: 當使用者手指滑過畫布時執行此事件。 (1)當使用者手指往右滑(xvel > 0)，代表往左翻頁，當page = 1時，無法往左翻頁。 【註】xvel代表水平速度分量。 (2)相反的就是往右翻頁，這邊用length of list沒把程式寫死，不用因不同頁數的故事 而修改程式碼。 (3)當使用者有碰觸畫布時，呼叫tellstory。 5.按鈕功能
Boysound.Changed方塊: 當Boysound按鈕的值變時，換句話說就是按鈕被按時就觸發此事件。 (1)只有當Boysound按鈕是勾選的狀態，才執行下面的程式。 (2)有三組按鈕 Boysound、Girlsound、Tsound，由於App inventor 2並沒有 radio button的功能，所以要自己寫，這邊是讓當其中一個按鈕被按時，讓其他按 鈕變成沒按的狀態，並控制Enabled的狀態，其他兩個按鈕也是照這個邏輯。 素材說明: 音檔部分使用工研院文字轉語音服務。 圖檔使用Pixabay CC0圖片。 |
