201025222 六、發明說明： 【發明所屬之技術領域】 本發明係有關於一種互動式教學介面系統及其製 作方法’尤其是指-種利用Flash的程式系統來對應 製作成符合教學過程的互動系統，以達到讓教學過程 更為流暢的創新設計者。 【先前技術】 按’現代的社會已成了 e世代，像電腦、電衆電 鲁 視、液晶電視等’尤其是電子白板，那何謂電子白板？ 電子白板一樣是白板，可以將電腦晝面呈現在其上， 而且它還有電子筆，所以可以在上面書寫，也可以將 你在白板上所寫的資料列印出來或顯視出來，甚至還 可以將書寫的過程存成影像檔重覆播放。電子白板是 人們不斷改良出來的產品，電子白板可以用在某些事 物上’例如：教學、開會等等；因此有了電子白板老 币上課就不用把单搶投影機搬來搬去了，可以有效提 ❿ 昇教師資訊融入教學的比例。 卷但是，電子白板的使用上具有些許缺點存在，如 二=電子白板書寫時，其可書寫的範圍僅為可視的白 <範圍，無法延續拉伸因此需擦拭後重新書寫，而之 =所書寫㈣容料消失，#欲在複f或重複提及的 點補充教學時’則需再寫—次或口頭說，導致讓學 者無法有深刻的記憶；而且當教學過程中，其資料 頁一頁順序的翻動下，要複習或重複先前提及的 ^點補充時，也需一頁一頁的點選跳動，來回復到先 別的資料頁；而且-般電子系統的清除功能，均使用 4 201025222 隹疊覆蓋的方式，以底色為主，產生相同的顏色覆蓋 =清除的區塊，若要再次書寫也是在底色區域再次 上去導致有數層負料重複堆疊而拖延整個系統 =的時間’因此’在使用上較為浪費時間也無法讓 教予的過程;丨頃暢。
另外，隨著網際網路的愈發盛行，網站設計者的 、、；極目的就是希望瀏覽者能夠在網站上停留多一些的 所以網頁的設計方式’漸漸地由傳統以文字為 方式轉變為以多媒體為導向的方式，才能留住 ?上網者其次’當然也希望網站能約進一步 為基礎的需求；基於這樣的原因，一套以網路 畫軟體便應運而生，有了 Flash，設計者 :可以輕易的在網站上放置具備多媒體效果的動畫 而Flash可以在不同的平台 與網頁設計整合是-大主流，飞職在網際網路上 的缺Μ · ώ丨机可以補強網頁動感不足 的缺隐，由小至按紐、選單的製作，大
影片的設計，Flash皆可塍杯丄 丨多#景動I έ ^bx-h^ 2^ ’由於Flash有極佳的 互動知’強調互動機制 ：二 動廣告、線上調查等等。 又计譬如遊戲、互 之的運用範圍，即為動畫 /lash大致上廣為人 程式系統來製作一種與教 乍，所以要使用Flash 統，為電子業界所需開發文書資料相互整合的系 緣是，發明人有趨::究:-項新課題。 豐富設計開發及實際製作找秉持多年該相關行業之 失予以研究改良，提供〜’'里驗，針對現有之技術及缺 、種互動式教學介面系統及其 5 201025222 製作方法，以期達到更佳實用價值性之目的I。 【發明内容】 本發明為達上述目的特提供一種互動式教學介面 系統及其製作方法，其主要係利用Fiash的程式系統 來對應製作成符合教學過程的互動關係，以讓教學過 程更為流暢者。 本發明一種互動式教學介面系統的目的與功效係 由以下之技術所實現：
其主要係在Flash的程式系統下設有互動式的教 學介面，其教學介面中包含有寫字功能的書寫筆、擦 栻清除書寫筆字跡的橡皮擦、小黑板、可移動畫面的 捲軸器〔拉霸〕及可隨意跳頁的選項器〔Menu〕；藉此， 讓在Flash介面下可執行上述功能的選項，以輔 教學下簡易操作介面的功效，讓教學過程更 本發明-種互動式教學介面系統進 設有-筆具選項器，以可改變書寫筆的顏色：二$ 具有不同顏色或粗細的書寫功能者。 使其可 ▲本發明二種互動式教學介面系統進一 設有一清除器，以可即時消除全部所/於介面上 字體圖樣的擦拭橡皮擦者。 胥句寫、繪製之 本發明一種互動式教學介面系 係在該教學介面系統中配合以影格方眾作方法，其 的擦拭橡皮擦，讓系統的運作不會有/製作4非堆疊 產生延遲現象者。 叠遇多資料而 本發明一種互動式教學介面系 |作方法，其 201025222 係使用FlashAS3.0與AS2.0程式語言相互編輯製作 小黑板及捲軸器，以座標、顏色、大小等設定，以完 成教學介面系統的製作。 【實施方式】 為令本發明所運用之技術内容、發明目的及其達 成之功效有更完整且清楚的揭露，茲於下詳細說明 之，並請一併參閱所揭之圖式及圖號： 首先，請參閱第一、九圖所示，為本發明一種互 動式教學介面系統之整體介面視窗示意圖，其主要係 在Flash程式系統下設有互動式的教學介面系統，其 教學介面系統中包含有諸多使用工具，如下： 一書寫筆（1)，為一可於介面上具有書寫文字、繪 圖的工具指令； 一橡皮擦（2)，為一可於介面上擦拭清除書寫筆（1) 筆跡的工具指令，且該橡皮擦（2)利用碰觸之範圍歸零 的影格（8)方式，使其被橡皮擦（2)碰觸之範圍完全清 除； 一小黑板（3)，為一可點選形成一另一視窗的工具 指令，該視窗具有可延續拉伸及縮小的功用； 一捲轴器（4)，為一可上、下移動視窗晝面的拉霸 工具指令；及 一選項器（5)〔 Menu〕，為可隨意進行資料選單跳 頁的工具指令； 藉此，讓在Flash介面下可執行上述功能的選 項，以輔助在電子白板教學下操作介面的功效。 請再一併參閱第二圖所示，為本發明一種互動式 7 201025222 教學介面系統之小黑板製作方法流程圖，而上述小黑 板（3)的製作係根據下列方式製作’其步驟： (a) 建立底板—首先，於FlashAS3 〇程式下建立一個 底板，命名為BmpDataO，再設定該底板大小、顏 色、透明度及初始座標位置為（〇，0)，並將它轉換 成影片片段再命名為_Bmp〇 ; (b) 建立遮色片—再建立一個遮色片，命名為叫， 設定該遮色片大小、顏色、透明度及初始座標位置 • 為（XI，Y1); (c) 建立底色板〜建立二塊底色板，命名為，裡面 另分為tab_w和tab一b，設定二底色板大小、顏色 及初始座標位置為（XI，YD ; (d) 建立右上角控制元件一建立右上角控制大小的元 件，命名為Tside2形狀像三角形，初始座標X的 值為tab的寬度值’y座標的值等於tab的座標γι; (e) 建立右下角控制元件—建立右下角控制大小的元 • 件，命名名Tsidel形狀像三角形，初始座標X的 值等於Tside2的X的值，y座標的值為tab的高 度值； (〇建立移動面板一建立一個移動面板，命名為 Tindex，設定大小、顏色、透明度及初始座標位置 為（X2，Y2); (g)層疊一將上述底板、遮色片、底色板、控制元件及 移動面板層疊組合起來，由上到下的圖層為 AS3. 0、square、tab、Tside〔包含 Tsidel、Tside2 〕' Tindex ; 201025222 (h) 建立按紐一建立二個按紐’命名為ta>b_W和 tab_B，tab_W的功用在於呼叫出tab_w底色板， 而tab_B的功用在於呼叫出tab_b底色板； (i) 編寫移動程式一編寫移動程式在影格（8)中’令 Tindex、Tsidel、Tside2，能夠使使用者自由拖動； (j) 編寫相對應程式一編寫相對應的程式在影格（8) 中，當底色板被呼叫出來的時候，即時運算執行。 請再一併參閱第三圖所示，為本發明一種互動式 教學介面系統之捲軸器製作方法流程圖，而上述捲軸 器（4)的製作係根據下列方式製作，其步驟如下： (A) 建立檔案一用Flash創建一個檔案，命名為”互動 式教學”； (B) 建立第一元件一創建第一個元件，命名為 "control"，大小為LxW，初始座標位置為（0，0); (C) 建立第二元件一創建第二個元件，命名為 "mydrag”，大小為LxW，初始座標位置為（0，0); (D) 建立第三元件一創建第三個元件，命名為” myscroll"，使用AS3.0程式編寫，創建一個物件 在"myscrol 1” 裡面，命名為"page_mc"，使用 AS3. 0 編寫程式，設定一個範圍，這個範圍的大小為LxW ; (E) 建立影格一在檔案"互動式教學”裡面的第一個影 格（8)，使用AS3.0編寫程式，設定一個範圍，使 ” contro 1 ”只能在這個範圍内移動這個範圍的設定 為（0,0,0，Y3)意指，左邊只能到X等於0的位 置，最高只能到y等於0的位置，右邊只能到X等 於0的位置，最底只能到y等於Y3的位置； 9 201025222 (F) 編寫與拖移一使用AS3. 0編寫程式，使”contr〇i" 可以被使用者拖移； (G) 影格編寫程式一使用AS3.0編寫程式，在影格（8) 編寫程式，使"control"可以控制"ui_conteni；s" 裡面的"geeUI Page"，主要行為是： 1. 設定一個代號名為"rect"用以代替 "UI_contents”裡面的"geeUI page"的 y 座標； 2. rect的y座標會等於"page—mc"的高度值除 以Y3再乘以"control"的y座標值； 3. "control”的y座標會等於運算後的"rect"的y 座標； 4. 當影格跳換時，將"的y座標設回原始位置 (〇,〇); 5. 發佈出執行檔，副檔名為exe，名稱為"互動式 教學"。 接續，在上述步驟完成後，係用Flash創建一個檔 案’命名為"UI_contents "，再使用AS2.〇編寫程式，在 •lULcontents”裡面’創建一個元件，命名為"咲洲page"， 於"geeUI Page"裡製作教學教材，並發佈出來，產生一個副 檔名為swf的檔案’名稱為"ULc〇ntents· swf"。爾後，當點 擊互動式教學時，程式執行，會載入名稱為 "UI—C〇ntentS. Swf'的檔案，程式會在開啟後常駐，直到檔案 關閉’捲軸器（4)〔拉Bar〕如果上下移動就會帶動 ，’UI_c〇ntentS’，裡面的”geeUI page"它就會隨之移動。 /请再-併參閱第四〜九圖所示，於使用該教學介 面系統時’係可以啟動選項器⑸〔Μ_〕以進行教學 "U1〇25222 壤度的資料選單的選取動作，可將”geeUI Page"裡所製 作的教學教材點選出來’如圖式所示為進行1_丨物質的 變化’接續再教學過程可啟動書寫筆（1)於介面上書寫 ^字、圖畫等等’以補充教學的講解資料或題目作答 等’而當補充書寫溝解資料時，亦可啟動小黑板（3) 具’使其出現另一視窗，而該視窗可延續拉伸或縮
^ ’而其小黑板（3)的製作係可根據下列的實施例來作 言是定： 係將透明度〇設為看不見，但存在，而透明度 ,為看的見’清楚狀態，首先，建立一個底板，命名為 mpDataO" ’大小為1280x2880，顏色為白，透明度〇, 初始座標位置為（0 ’ 0)，並將它轉換成影片片段再命 為〜BmpO”，續建立一個遮色片’命名為"square"， 、小為700x140 ’顏色為白，透明度〇，初始座標位置 為（40 ’ 40)，再建立二塊底色板，命名為” tab"，裡面 另分為"tab一w"和"tab_b"，大小為700x140，顏色分 別為"tab_w"(漸層 #BFBFBF + #A6A6A6) ”tab_b"(漸 層#2C2DC2 + #1C2575)初始座標位置為（4〇，40)，爾 後’建立右上角控制大小的元件，命名為"Tsi(ie2"形 狀像三角形’初始座標x的值為tab的寬度值，y座 標的值等於tab的y座標’建立右下角控制大小的元 件’命名名"Tsidel"形狀像三角形’初始座標x的值 等於Tside2的X的值’ y座標的值為tab的高度值， 最後建立一個移動面板’命名為"Tindex"，大小為730 χΠΟ，顏色為白’透明度1〇，初始座標位置為（2〇， 20)，再將上述所建立的底板、遮色片、底色板、控制 11 201025222 元件及移動面板層疊的組合起來，由上到下的圖層為 AS3·0、square、tab、Tside 裡面包含（Tsidel、 Tside2)、Tindex ;最後，再建立二個按鈕，命名為 tab—W和tab__B，而tab_W的功用在於呼叫出白色底的 黑板’ tab〜B的功用在於呼叫出藍色底的黑板，編寫 移動程式在影格（8)中，令Tindex、Tsidel、Tside2， 能夠使使用者自由拖動，編寫相對應的程式在影格（8) 中，當小黑板被呼叫出來的時候，即時運算執行者〔 在程式内所設定之命名、名稱均可作更改，僅需前後 連結一致’並非以本實施狀態所揭命名為準〕。 小黑板（3)能自由移動，以及隨意改變大小是當使 用者按下了呼叫黑板的按鈕tab_W或tab__B，小^板 (3)會出現，所有程式在此時會開始運算，主要運算比 對的是tab的高度值為Tsidel的y值-Tside2的y值， tab的寬度值為Tsidel的X值’ Tside2的X座標等於 Tsidel的X座標值，SqUare的y座標等於的 y座標值，square的高度值為Tsidel的y值—Tside 的y值square的寬度值為Tsidel的χ值，e y座標為Tside2的y座標值-15，Tindex的高产 (Tsidel 的 y 座標值+ 15)-(Tside2 的 y 座標值二·、、' Tindex的寬度值為Tsidel的x座標值加l，_ ’ 的y座標等於Tside2的y座標值。因此，移動了 角的Tside2’它的x，y座標值也會因此 同時，由於程式是常駐的，只要1行就在運算^ 以tab、square、Tindex的大小也會因為運 = 變，即時的重新運算，而改變了它侗 巧改 鬥的大小，如此來 12 201025222 5=)黑板的可視範圍而Tindex可用來移動整個小黑 ，續’當教學介面中的教材講解或使用小黑板⑶ 具，、可利用捲軸器（4)來作為快速上、下拉視窗的工 彀定而該捲轴器（4)的製作係可根據下列的實施例來作 僅先在程式内所設定之命名、名稱均可作更改， 兩則後連結一致，並非以本實施狀態所揭命名為 風"，其係利用Flash創建一個檔案，命名為”互動式教 學，再創建第一個元件，命名為”c〇ntr〇1"，大小為 jxlOO,初始座標位置為（〇, 〇)，續創建第二個元件， 命名為"mydrag”，大小為18x620,初始座標位置為（0， 〇)再創建第二個元件’命名為"myscrol 1"，使用 AS3. 〇知式編寫’創建一個物件在"myscroll"裡面， 命名為"page_mc" ’使用AS3. 0編寫程式，設定一個範 圍，這個範圍的大小為1000x1000，在檔案"互動式教 ❹ 學”裡面的第一個影格’使用AS3. 0編寫程式，設定一 個範圍，使"control"只能在這個範圍内移動，這個範 圍的設定為（0，0，〇，530)意指，左邊只能到X等於 〇的位置最高只能到y等於〇的位置右邊只能到X等 於0的位置最底只能到y等於530的位置，使用AS3. 0 編寫程式，使"control"可以被使用者拖移，使用AS3.0 編寫程式，在影格（8)編寫程式，使"control"可以控 制"UI_contents"裡面的"geeUI Page”。主要行為是： 將設定一個代號名為”rect”用以代替"UI_contents" 裡面的"geeUI Page"的y座標，而"rect"的y座標會 13 201025222 等於’’page—mc"的高度值除以530再乘以"c〇ntr〇i" 的y座標值，另外"contr〇l"的y座標會等於運算後的 "rect1'的y座標，當使用者按下選項器（5)選項跳頁， 跳至新頁面時，將"^以"的7座設回原始位置(、〇,〇)， 發佈出執行檔，副檔名為exe，名稱為，f互動式教學„ ; 如此，即元成捲軸器的設定，以讓捲軸器（4)可供快速 上、下拉伸視窗者。 請再一併參閱第九（a)〜（d)圖所示另外，在教學 _ ”面上之橡皮擦（2)為一可於介面上擦拭清除書寫筆 (1)筆跡的工具指令，其為具有第一、第二影格（8)， 該橡皮擦（2)為其一影格（8)〔可設定為第一或第二影 =(8) ’於此將橡皮擦設為第二影格（8)〕，當所書寫的 範圍在第一影格⑻時，利用第二影格⑻之橡皮擦⑵ 擦找’使其第一影格（8)所書寫的物件消除，於介面上 永遠，、有單一影格（8)存在，以橡皮擦（2)碰觸之範圍 歸零的祕⑻方式’讓書寫範圍完全清除，該教學力 M 配合以影格⑻方式製作出非堆㈣擦拭揭 皮擦（2)，讓系統的運作不會有堆疊過多資料而產生契 者。而互動式教學介面系統進一步於介面上13 -：具選項器⑻’以可改變書寫筆⑴的顏色及相 <，可具有不同顏色及粗細的筆具書寫、繪製沒 :製之;ϋ除器⑺’可即時消除全部所有書寫， 〕予體圖樣的擦拭橡皮檫者〔如第四〜五圖所示 或尺2之實施例或圖式並非限定本發明之結構樣態 、何所屬技術領域巾具有通常知識者之適當變 201025222
化或修飾，皆應視為不脫離本發明之專利範疇。 綜上所述，本發明實施例確能達到所預期之使用 功效，又其所揭露之具體構造，不僅未曾見於同類產 品中，亦未曾公開於申請前，誠已完全符合專利法之 規定與要求，爰依法提出發明專利之申請，懇請惠予 審查，並賜准專利，則實感德便。 15 201025222 【圖式簡單說明】 第一圖：本發明之整體介面視窗示意圖 第二圖：本發明之小黑板製作方法流程圖 第三圖：本發明之捲軸器製作方法流程圖 第四圖：本發明之選項器使用示意圖 第五圖：本發明之教學教材顯示示意圖 第六圖：本發明之書寫筆使用示意圖 第七圖：本發明之小黑板使用示意圖 第八圖：本發明之小黑板拉伸使用狀態示意圖 第九（a)圖：本發明之影格示意圖 第九（b)圖：本發明之有晝線的影格示意圖 第九（c)圖：本發明之有晝線的影格以書寫筆擦拭 示意圖 第九（d)圖：本發明之經橡皮擦擦拭的影格示意圖 【主要元件符號說明】 (1) 書寫筆 (2) 橡皮擦 (3) 小黑板 (4) 捲軸器 (5) 選項器 (6) 筆具選項器 (7) 清除器 (8) 影格 16