有聲故事書 (工研院文字轉語音服務)

本範例為CAVEDU 2016年度的實習生歐新暘設計~

功能說明:電子書整合聲音、動畫、圖片的特性呈現了多媒體的便利性,已成為時代的潮流,尤其在兒童讀物市場上不可或缺,本教學示範如何以Canvas和Player元件來實作一本有聲書。

 


YouTube 影片




元件說明:

元件說明

元件類別名稱用途
Labeltitle    顯示頁數
Label    content顯示故事內文
CanvasCanvas1顯示圖片
ImageSpriteImageSprite1用來做動畫,提示使用者翻頁以閱讀
CheckBox   Boysound換成男聲音檔
CheckBoxGirlsound換成女聲音檔
CheckBoxTsound換成台語音檔
PlayerPlayer1播放聲音檔
ClockClock1計時功能


素材名稱:

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.宣告變數

程式碼1

       宣告time,控制手指的動畫。

       宣告voice_type,儲存現在聲音種類。

       宣告page,儲存現在頁數。

       宣告text,儲存故事內文。
2.初始化頁面

2

Screen1.Initialize方塊 :

進到Screen1螢幕初始化時,便執行do區塊內的動作,

可運用在一些前置性的操作上。

 (1)call tellstory 是本範例建的副程式,之後會說明。

 (2)設定ImageSprite1的圖片為hitfinger.png這個檔案。

 (3)設定ImageSprite1的X座標。

 (4)設定ImageSprite1的Y座標。

【參考】ImageSprite圖片精靈  、 Canvas畫布、 副程式

3



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        hitfinger.png:hitfinger

想一下為什麼finger.png的手指圖案是上下顛倒的呢?

提示這跟heading有關。

因為heading是直接旋轉物件,而不是翻轉,所以換一張垂直翻轉的圖方向剛好。

8

3.講故事功能

4_N

tellstory方塊:

tellstory 是本範例建的副程式,功用包含顯示頁數、故事內文,與設定聲音、圖片。

 (1)設定當頁面是第一頁時,才會顯示聲音按鈕與ImageSprite1(手指)。

 (2)顯示所在頁數,length of list 會抓取 list的清單數目,這邊沒把程式寫死。

 (3)根據頁數設定圖片影像。

      圖片素材名稱要照順序命名才能這樣寫。

 (4)根據頁數,在先前建的text清單抓取內文。

 (5)根據按鈕勾選狀態與所在頁數,設定Player播放的聲音檔。


4.翻頁功能

6

Canvas1.Flung方塊:

當使用者手指滑過畫布時執行此事件。

 (1)當使用者手指往右滑(xvel > 0),代表往左翻頁,當page = 1時,無法往左翻頁。

    【註】xvel代表水平速度分量。

 (2)相反的就是往右翻頁,這邊用length of list沒把程式寫死,不用因不同頁數的故事

      而修改程式碼。

 (3)當使用者有碰觸畫布時,呼叫tellstory。


5.按鈕功能

7

Boysound.Changed方塊:

當Boysound按鈕的值變時,換句話說就是按鈕被按時就觸發此事件。

 (1)只有當Boysound按鈕是勾選的狀態,才執行下面的程式。

 (2)有三組按鈕 Boysound、Girlsound、Tsound,由於App inventor 2並沒有

    radio button的功能,所以要自己寫,這邊是讓當其中一個按鈕被按時,讓其他按

     鈕變成沒按的狀態,並控制Enabled的狀態,其他兩個按鈕也是照這個邏輯。


素材說明:

音檔部分使用工研院文字轉語音服務

圖檔使用Pixabay CC0圖片。

ċ
SoundBook.aia
(1938k)
曾吉弘,
2016年7月9日 上午5:52
Comments