5.5.1 使用者介面設計
使用者介面設計以圖 20 之，分別說明如下：
（1） 樣板選擇介面
提供使用者在選擇樣板庫時選擇畫面，畫面會依據所選取出來的樣板型式，
再自動產生一個識別代碼而生成一個試題的預覽畫面。
（2） 新增自定範本介面
提供使用者在系統所提供的樣板外，需以自訂方式加入樣板時的操作介面。
圖 20 使用者介面設計
提供使用者在編輯期間可以以直覺化的方式呈現所做的編輯動作，如對元件 進行置換來源時，系統將所提供置換的元件的內容，如聲音的立即播放、影 片的內容試播、文字的字型外觀的改變立即呈現出來，調整後的狀態可於編 輯介面中馬上反應出效果。
5.5.2 多媒體元件類別設計（CText、CGraphic、CSound、CMmovie Class）
系統中提供四種多媒體元件：文字、圖片、聲音、影片元件，每一個元 件設計成一個類別（Class），以 CText 代表文字元件、CGraphic 代表圖片元件、
CSound 代表聲音元件、CMovie 代表影片元件，都繼承於容器（Container）
的 CtntContainer 類別與原始類別（Base Class） CBase。
CBase 中定義每一個元件的基本屬性與滑鼠按下（MouseDown）事件、
雙擊（MouseDBClick）事件、選取（MouseSelect）等基本事件（event）以及 元件的類型、前後順序（Z-Index）、是否在場景上出現等屬性。
CtntContainer 類別為一個放置多媒體元件裝置類別，繼承自 CBase 類別，
在此 CtntContainer 類別中定義了元件的大小與彈出式選單（Popup Menu）的 函數，以這一個 CtntContainer 類別作為文字元件、圖片元件、聲音元件與影 片元件的繼承類別，其設計的主要目的在於提供元件容器的置換彈性。
CBase
CtntContainer
CText CGraphic CSound CMovie
圖 21 元件類別設計
(1) CText：文字元件類別，繼承自 CtntContainer 類別，當多媒體元件以文字 表示時，以此類別呈現文字於編輯場景上，元件的屬性包括文字呈現的內 容、文字的顏色、大小、字型等，提供的函數包括 ReDrawCText（重繪文 字外觀）、GetActorAttributes（取得元件屬性） 、SetActorProperties（設定 屬性）等。
表 5 CText 類別函數
函數 說明
ReDrawCText（CBase* pObject） 重繪文字外觀 GetActorAttributes（）; 取得元件屬性 SetActorProperties（ char* PropName,const char*
iValue）
設定元件屬性 GetPropertiesValue（char* PropName） 取得元件特定屬性 ChangeTXTColor（TObject* Sender） 改變文字顏色 ChangeTXTApperance（CBase *Sender） 改變文字外觀 ChangeFontPreviewApperance（TObject *Sender） 預覽文字調整效果 ActorSelected（TObject* Sender） 判斷文字是否被選取 ActorTextMouseDbClick（TObject* Sender） 判斷文字是否被雙擊 (2) CGraphic：圖片元件類別，繼承自 CtntContainer 類別，用以呈現圖片元件
於編輯場景上，元件的屬性包括圖片呈現的來源、圖片的、大小、位置、
透明度、圖片是否出現於試題中，提供的函數包括 ReDrawCGraphic（重繪 文字外觀）、GetActorAttributes（取得元件屬性） 、SetActorProperties（設 定屬性）。
表 6 CGraphic 類別函數
函數 說明
getImageSize（） 取得圖片大小
SetActorProperties（ char* PropName,const char*
iValue）
設定元件屬性 GetPropertiesValue（ char* PropName） 取得元件特定屬性 ReDrawCGraphic（CBase* pObject） 重會文字外觀
getImagePath（） 取得圖片路徑
ActorGraphicAttChange（TObject*Sender,
TMouseButton Button,Classes::TShiftState Shift, int X, int Y）
更改圖片元件屬性
ActorSelected（TObject* Sender） 判斷圖片是否被選取 ActorGraphicMouseDbClick（TObject* Sender） 判斷圖片是否被雙擊 (3) CSound：聲音元件類別，繼承自 CtntContainer 類別，以一個圖片代替聲音
元件顯示於編輯場景上，元件的屬性包括聲音播放的來源、聲音圖示的位 置、圖示是否出現於試題中，提供的函數包括 StartRecording （錄音）、
PlaySound （聲音播放） 、ReplaceSoundSrc （更換聲音來源）。
表 7 CSound 類別函數
函數 說明
StartRecording （CBase* pObject） 播放聲音元件內容 PlaySound（CBase* pObject） 播放聲音元件內容 RecordSnd（TObject* pObject） 錄音
StopSaveSnd（TObject* pObject） 停止錄音並儲存檔案 ReplaceSoundSrc（CScenceManager* pObject） 置換聲音元件 ReDrawCSound（CBase* pObject） 重繪聲音元件圖示 GetPropertiesValue（ char* PropName） 取得元件單一屬性 ActorSelected（TObject* Sender） 判斷聲音是否被選取 ActorSoundMouseDbClick（TObject* Sender） 判斷聲音是否被雙擊 (4) CMovie：聲音元件類別，繼承自 CtntContainer 類別，在編輯期間設計成以
一個圖片圖示代替影片元件顯示於編輯場景上，元件的屬性包括影片播放 的來源、影片圖示的位置、圖示是否出現於試題中，提供的函數包括 GetVideoStream （影片預覽縮圖）、ReDrawCMovie （重繪影片元件） 、 PlayMovie （預覽影片）。
表 8 CMovie 類別函數
函數 說明
ReDrawCMovie（CBase* pObject） 重繪文字外觀 GetActorAttributes（）; 取得元件屬性 SetActorProperties（ char* PropName,const char*
iValue）
設定元件屬性 GetPropertiesValue（ char* PropName） 取得元件特定屬性 ChangeMovieSrc（ Cbase* Sender） 改變影片來源 GetVideoStream（char*szFile,PAVISTREAM
*gapavi,AVISTREAMINFO *avis）
影片預覽縮圖產生器 PlayMovie（CBase* pObject） 播放影片內容 ActorSelected（TObject* Sender） 判斷影片是否被選取 ActorMovieMouseDbClick （TObject* Sender） 判斷影片是否被雙擊
5.5.3 多媒體編輯動作類別設計（CMAction Class）
為了實現視覺化編輯環境的功能，設計編輯動作類別（CMAction Class） 點的 CGreateGrids 類別的設計函數：
表 9 CMAction 類別函數的設計
函數 說明
CMAction（） Constructor
CPopupMenu（TWinControl* scence,CBase*& pcb）滑鼠右鍵彈出式視窗 CMdeleteCBase（CBase*& pBase） 刪除元件
CMCopyCBase（CBase*& pBase） 複製元件
CMBringToFrontCBase（CBase*& pBase） 將元件推到頂層 CMSendToBackCBase（CBase*& pBase） 將元件推到後層 CBaseMouseDownEvent（CBase* Sender） 定義滑鼠按下事件 CBaseMouseDbClick（CBase* Sender,int iType） 定義滑鼠雙擊事件 CBasePropertyChange（CBase* Sender） 改變元件屬性值
Set8Grips（CBase* pObject） 設定元件被選取時控點 AddActorList（CBase* pcb,bool duplicatemode） 將元件加入元件清單 DeleteActorList（CBase* pcb） 從元件清單刪除
表 10 CCreateGrids 類別函數的設計
函數 說明
FSetMoveResize（bool value） 設定控點是否允許拖放 FSetShowGrids（bool value） 設定控點是否出現 FGetMoveResize（） 讀出控點是否允許拖放 GripsOnMouseDown（TObject* Sender,
TMouseButton Button,TShiftState Shift, int X, int Y）
當控點被按下的動作
5.5.4 多媒體編輯器類別設計（CPlayer Class）
編輯試題時，必須先將題目的描述語言載入到編輯畫面，將一些紀錄描述 的元件轉成可見的多媒體元件，此一將描述語言轉譯到編輯畫面的功能設計 由 CPlayer 類別完成，繼著載入完成的多媒體元件，所進行的編輯動作就由 CMAction 類別的設計函數完成之。
表 11 CPlayer 類別函數的設計
函數 說明
SaveAsScriptClick（） 儲存描述語言
SaveAsScriptToHTMLClick（） 轉存描述語言為 HTML 檔
PopNewGraphic（TObject *Sender） 滑鼠右鍵彈出式新增圖片元件命令 PopNewText（TObject *Sender） 滑鼠右鍵彈出式新增文字元件命令 PopNewSound（TObject *Sender） 滑鼠右鍵彈出式新增聲音元件命令 PopNewMovie（TObject *Sender） 滑鼠右鍵彈出式新增影片元件命令 PopNewRadioBtn（TObject *Sender） 滑鼠右鍵彈出式新增選取鈕元件命令 PopNewChkBXBtn（TObject *Sender）滑鼠右鍵彈出式新增核取鈕元件命令 PopNewTextBtn（TObject *Sender） 滑鼠右鍵彈出式新增單行文字欄元件
命令
iX,DWORD iY）
更改解析度函數 TraverseTree （ CTreeNode* ptr,const
string NodeType,const int iScriptType）
尋找特定媒體元件節點（NODE）
LoadNode（CTreeNode* NodeStart, const string sNodeType,const int iType ,TWinControl* wctlScence）
載入特定媒體元件的相關屬性值
LoadScriptToScence（const string sFileName, TWinControl* wctlScence）
將 LoadNode 函數所執行的結果載入 到場景上
5.5.5 多媒體編輯器工具按鈕類別設計（CSceneManager Class）
（1） 系統提供多媒體的試題樣板，可以在試題所使用的元件上置換所呈現 的內容，因此 CSceneManager 類別針對所提供的置換資源，加以組織 管理，在編輯期間，只要系統得知所要置換的元件型態，就能將所提 供的資源以視覺化的方式呈現提供使用者選取使用。
（2）工具按鈕：系統提供工具按鈕於編輯器的環境中，以不同圖示代表不 同的工具用途，在 CSceneManager 類別中依據不同的工具按鈕被按下 觸發之後，會切換不同的場景與對話框畫面，因此工具按鈕在放置於 編輯器之前，每一個按鈕都會產生屬於這一個按鈕事件所對應的獨立 識別代號（ID），如果在編輯試題期間，有任何的工具按鈕被按下，根 據所對應的獨立識別代號就能正確的判斷應該切換到哪一個場景。
圖 22 編輯器工具按鈕