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:        hitfinger.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圖片。