範例實做講義內容

範例說明

  1. 請開啟光碟檢視資料夾[questions]:
    • = music.mp3
      這是互動測驗的背景音樂,可用自己喜歡的mp3取代,但請注意版權問題。
      要換新音樂時,請務必檢查其格式是否為MP3,並命名為music後取代現有檔案。
    • = q0.fla
      這是每個測驗題組在開始製作時,所必須套用的版面格式,為測驗題組的樣板。
      開啟q0.fla,另存新檔(請以q1q2q3…依序命名)之後,再開始編輯自己的題組內容。
    • / = q1.fla / q1.swf 範例中第1題組的編輯檔與發佈檔。
      / = q2.fla / q2.swf 範例中第2題組的編輯檔與發佈檔。
      / = q3.fla / q3.swf 範例中第3題組的編輯檔與發佈檔。……依此類推。
    • / / = questions.fla / questions.swf / questions.html
      questions.fla是互動測驗主動畫的編輯檔;questions.swf是互動測驗主動畫的發佈檔。
      questions.html為網頁檔,裡面會以語法插入questions.swf的"路徑",便可用IE開啟瀏覽動畫。
    • questions.swf = 主動畫;q1.swf~qX.swf = 題組動畫。
      questions.swf主動畫中,會將q1.swf~qX.swf讀入,並使其具備測驗互動功能。
  2. 請先開啟〈測驗題組樣板〉原始檔 q0.fla ,並打開檔案觀察以下重點:
    • 元件庫【1_功能元件】:資料夾當中的所有元件是各題組的共享元件,統一由questions.swf所匯入。
      注意!若要修改這些元件的位置或樣式,是在questions.fla中統一修改的,不能在這邊修改。
    • 元件庫【2_輔助動畫】:目前是空資料夾,預備放置輔助動畫的相關素材。
    • 元件庫0_詳解_MC0_輔助動畫_MC0_選項_MC各題組主要需要修改的部分。
    • 注意!題組q1.swf~q3.swf會載入到主動畫question.swf的圖層[載入點]中,舞台(0, 0)的位置,
      所以q1.fla~q3.fla的排版與主動畫一致,但不需背景色 (因為主動畫question.swf中有);
      其實也不需白底的內容區塊、分隔線等等,但為了排版方便所以每個題組的編輯檔中都有放。

Top

準備動作

  1. 請下載壓縮檔questions.rar並解壓縮:
    • 將解壓縮後的資料夾[questions],貼到電腦桌面or自備隨身碟中,開啟當中的q0.fla
    • 之後凡指示要開啟檔案、儲存檔案等動作,都是指存取這個資料夾[questions]中的檔案。
    • 下課前,必須將資料夾[questions]所有內容,整個打包帶回家。
  2. 請先開啟 q0.fla ,修改這個"測驗題組樣板"的部分樣式:
    • 注意!q0.fla只是之後每個題組的"樣板",所以只需修改樣式,不需寫入題組內容。
    • 請盡量避免「將某元件自舞台上刪除後,又從元件庫中拖到舞台上」。
      因為幾乎所有舞台上放的影片片段,都有固定的"定義名稱",這個動作會使原先設定好的定義名稱遺失。
    • 圖層[問題]:當中的文字物件,是放"題目"的位置。可預先設定這個文字物件的顏色、字體、大小。
    • 圖層[選項]:0_選項_MC場景中,可調整文字樣式、襯底按鈕的間距,但勿刪除、編輯任一"元件"。
    • 圖層[輔助動畫]:0_輔助動畫_MC場景中,有前後兩段動畫是被主程式所控制播放的,設定如下:
      關鍵影格ending之前的時間,是"測驗畫面",也就是進入該題組之後,到受測者尚未選擇答案之前;
      關鍵影格ending之後的時間,是"解答畫面",也就是受測者選擇答案之後,到跳至下一題組之前。
      所以從第1格播放到第10格時,要設stop();,避免輔助動畫直接從"測驗畫面"繼續播放到"解答畫面";
      所以從第11格播放到第20格時,要設stop();,避免輔助動畫播放完"解答畫面"後又跳回"測驗畫面"。
    • 圖層[詳解]:0_詳解_MC場景中,可調整詳解的文字樣式、顏色。
      注意!範例主動畫背景色為深藍,若學員決定自己的主動畫背景是淺色底,0_詳解_MC的文字就要改深色。
    • 圖層[排版]:內容區塊_MC分隔線_G不得編輯,只是用以對照主動畫的排版,因此鎖定圖層。
      提示:內容區塊_MC分隔線_G,以及0_選項_MC中的襯底按鈕,是以主動畫為來源的"共享元件",
      之後想修改,從主動畫一改就會將所有題組同步調整,目前請勿修改。
  3. 課後請務必將電腦桌面上的[questions]存好帶回家。
    • 有帶隨身碟的人,可以把桌面上的[questions] 複製到隨身碟中帶回家。
    • 沒有隨身碟的人,請務必將桌面上的[questions]壓縮夾檔寄給自己,或整個上傳到自己的網站空間中。

Top

扇形拼半圓

  1. q0.fla 另存新檔為 q1.fla後發佈,並開啟question.html查看發佈結果:
    • 請發佈q1.fla後直接關閉發佈畫面,因為我們要看的不是q1.swf而是當它載入主動畫時的表現。
    • 從桌面資料夾[questions]中開啟question.html查看發佈結果,會發現原先的第1題組已被取代了。
      提示:這時可以點選看看,體驗關鍵影格ending前後的差異。
    • question.html請一直開著。當題組動畫(q1.swf~q3.swf)或主動畫(questions.swf)修改並發佈後,
      隨時在IE上按"重新整理"更新網頁,即可查看最新的發佈結果 (按F5為IE"重新整理"的快捷鍵)。
      注意!IE重新整理的動作,勿與發佈的動作同時進行。
  2. 編輯0_輔助動畫_MC當中的"測驗畫面":
    • 請先開啟自備的扇形拼半圓動畫原始檔fan_Name.fla > 複製扇形_MC場景中所有圖層與影格。
    • 回到q1.fla0_輔助動畫_MC場景中 > 全選2個圖層的第1~10格 > 按右鍵: 貼上影格。
      提示:貼上後,圖層[內容]這個命名,不會自動換成[Btn1],要自己重新把圖層命名為[Btn1]。
    • 整理元件庫,將扇形_MC的相關元件,搬進元件資料夾【2_輔助動畫】中。
    • 發佈q1.fla後,查看question.html網頁發佈結果 > 跳過"作者的話"進入第一題,查看被讀入的q1.swf
      會看到第1題的輔助動畫已由扇形_MC的動畫取代;任意點選一個答案後,會看到解答畫面。
  3. 編輯0_輔助動畫_MC當中的"解答畫面":
    A. 再多做一段動畫作為"解答畫面"(最麻煩);B. 乾脆不要"解答畫面"(最簡單);C. 兩者擇中的方法:
    不要放Play鈕,讓"測驗畫面"是靜態的,再把"測驗畫面"原本的移動補間動畫,挪給"解答畫面"使用。
    • 刪除圖層[Btn1]、[Btn2],使互動點選按鈕消失。
    • 搬移移動補間動畫的相關圖層與影格,與關鍵影格ending對齊(第41格)。
    • 將圖層[AS]的最後1個關鍵影格(有設AS: stop();的那格),拉到整段動畫的結束時間點上。
    • 因為要讓"測驗畫面"是靜態的,只需要保留第1關鍵影格,所以要全選起多餘的影格"移除影格";
      最後把3個扇形_G的初始位置,原地貼上到各自圖層的第1關鍵影格上,即可發佈並查看結果。
  4. 編輯問題、詳解;設定選項總數、正解排序:
    • 圖層[AS]:影格中要設定變數值:_root.Choice為選項總數、_root.RightAns為正解排序。
    • 圖層[問題]:只有放一個文字物件。可輸入該題組的問題,可換行。
    • 圖層[選項]:放置0_選項_MC。只需修改、增減0_選項_MC中圖層[選項文字]中的"文字物件"。
      注意!不用也不可去改變圖層[襯底按鈕]中的按鈕數量,因為那是用變數去控制多少個顯示。
      提示:可以先編輯好圖層[選項文字],再回頭修改圖層[AS]中的變數,來設定選項總數與正解排序。
    • 圖層[詳解]:放置0_詳解_MC主動畫的AS設計中,詳解內容會在受測者選擇答案後才顯示。
    • 發佈q1.fla後,查看question.html網頁發佈結果 > 即可看到完整的第一測驗題組。
  5. 完成第一測驗題組q1.fla

Top

計算立方體

  1. q0.fla 另存新檔為 q2.fla
  2. 編輯0_輔助動畫_MC當中的"測驗畫面":
    • 請先開啟自備的計算立方體動畫原始檔cube_Name.fla > 複製cube_MC場景中所有圖層與影格。
    • 回到q2.fla0_輔助動畫_MC場景中 > 全選圖層[AS]、[內容]的第1~10格 > 按右鍵: 貼上影格。
      提示:圖層[內容]這個命名,不會自動換成[shape1],要自己重新把圖層命名為[shape1]。
      注意!cube_MC中只有一個時間點所以沒寫: stop();,這邊要補寫在圖層[AS]第1關鍵影格上(最後一行)。
    • 整理元件庫,將cube_MC的相關元件,搬進元件資料夾【2_輔助動畫】中。
    • 發佈q2.fla後,查看question.html網頁發佈結果。
  3. 編輯0_輔助動畫_MC當中的"解答畫面":
    • 現在需要再多做一段動畫作為"解答畫面":做動畫讓3組立方體分散開來 。
    • 全選圖層[shape1]~[shape3]的第1格 > 按右鍵: 複製影格 > 清除原先放置的"解答畫面" >
      新增圖層在[量杯_G]之下 > 點選新增圖層的第2格時間點 > 按右鍵: 貼上影格。
      註:因為針對各立方體組的"滑鼠點選互動效果"的AS語法,會與移動補間動畫相衝,
      所以若要將圖層[shape1]~[shape3]中的立方體組製作移動補間動畫,則必須另做3個圖層來擺放。
    • 全選新圖層[shape1]~[shape3]的第11格"插入關鍵影格",並在第2~第11關鍵影格間製作移動補間動畫
    • 在新圖層[shape1]~[shape3]的第11關鍵影格中,把3組立方體分散開來。
    • 全選新圖層[shape1]~[shape3]的第2關鍵影格,打開屬性面板設定加速100。
    • 可再調整動畫長度,但務必記住將圖層[AS]的最後1個關鍵影格,拖放到整段動畫結尾處。
    • 預設的結尾AS為 stop();,但也可以改寫為: gotoAndStop(1);,使"解答畫面"播放完再跳回"測驗畫面"。
      提示:假如覺得"解答畫面"的動畫太倉促,建議可讓3組立方體散開後隔一陣子再聚攏,再跳回"測驗畫面"。
  4. 編輯問題、詳解;設定選項總數、正解排序:
    • 圖層[問題]:寫完問題,請順便附註說明該輔助動畫的操作方式,以免受測者不曉得。
  5. 完成第二測驗題組q2.fla

Top

水位容積

  1. q0.fla 另存新檔為 q3.fla
  2. 編輯0_輔助動畫_MC當中的"測驗畫面":
    • 請先開啟自備的水位容積動畫原始檔volume_Name.fla> 複製volume_MC場景中所有圖層與影格。
    • 回到q3.fla0_輔助動畫_MC場景中 > 全選圖層[AS]、[內容]第1~10格 > 按右鍵: 貼上影格。
      提示:圖層[內容]這個命名,不會自動換成[量杯_G],要自己重新把圖層命名為[量杯_G]。
    • 整理元件庫,將volume_MC的相關元件,搬進元件資料夾【2_輔助動畫】中。
    • 發佈q2.fla後,查看question.html網頁發佈結果 > 應該會發現"導引線"設定失效,要恢復一下。
      提示: 拖拉被導引圖層的"圖層名稱",稍微向上沾黏到導引圖層之下 (有縮排表示成功)。
  3. 編輯0_輔助動畫_MC當中的"解答畫面":
    • 現在可以決定偷懶一下,不要做"解答畫面":把ending時間點之後都"移除影格"。
    • 完成!YA~
  4. 編輯問題、詳解;設定選項總數、正解排序:
    • 圖層[問題]:寫完問題,請順便附註說明該輔助動畫的操作方式,以免受測者不曉得。
  5. 完成第三測驗題組q3.fla

Top

水位容積2

  1. 請開啟範例 q4.fla,這是一個直接由q3.fla另存新檔後,所修改的變化範例。
  2. 將"量杯"修改為"水箱":
    可利用cube_Name.fla當中的立方體cube_G,用以組構的方式,製作出長寬高不等的:
    水箱_G的立體"線條"(原量杯_G);水位_MC的立體"填色",以及遮色片的"填色"的範圍。
  3. 修改AS:
    • start_volume = 160,為目前被定名為water_volume水位_MC,在舞台上擺放的Y座標。
    • cube_G立方體高為30px,範例中長寬高是5*4*3個立方體,所以設定尺規為:15cm*12cm*9cm。
      所以要修改AS中的比例尺scale =10 ( 實際的px 比 設定的cm = 30 : 3 ) ;r1~r3也要修改到合理數值。
    • 因為需要求出一個石塊投入後,水位上升的高度,所以必須再設一個變數facet,輸入水面面積(15*12)。
      使:水位上升體積(石塊體積) / 水面面積 = 水面上升的高度。計算程式可對照AS語法19行:
      this["r"+n] = this["r"+n]*scale/facet; //重設石塊體積數值,使其變成上升多少px的數值
  4. 編輯問題、詳解;設定選項總數、正解排序。
  5. 完成第四測驗題組q4.fla

Top

課後作業 講義內容

拼圖算面積

  1. 拼圖小遊戲:
    • 這是一個只需要修改元件、修改變數值、定義元件名稱,便可快速套用的功能介面。
    • 按住色塊可拖放該色塊;點選色塊再輸入角度可旋轉該色塊。
    • 可廣泛運用到各種幾何圖形,產生多種測驗題組。
    • 相關修改方式,都有寫在影片片段jigsaw_MC場景的圖層[AS],第1關鍵影格上的AS註解當中。
  2. q0.fla 另存新檔為 q5.fla。
  3. 儲存拼圖小遊戲原始檔jigsaw.fla到自己的資料夾[questions]當中。
  4. 編輯0_輔助動畫_MC當中的"測驗畫面":
    • 請先開啟自備的拼圖小遊戲原始檔jigsaw.fla > 複製jigsaw_MC場景中所有圖層與影格。
    • 回到q5.fla0_輔助動畫_MC場景中 > 全選圖層[AS]、[內容]第1~10格 > 按右鍵: 貼上影格。
      提示:圖層[內容]這個命名,不會自動換成[控制器],要自己重新把圖層命名為[控制器]。
    • 整理元件庫,將jigsaw_MC的相關元件,搬進元件資料夾【2_輔助動畫】中。
    • 發佈q5.fla後,查看question.html網頁發佈結果。
    • 標示尺規:原拼圖色塊的情境設定是草坪與道路。草坪範圍 = 300px*150px;路口寬度皆為30px。
      提示:若要標示尺規的話,1px就可以當1公尺;問題就可以問草坪面積。
      註:也可完全製作不同的拼圖色塊,設計新命題。
  5. 編輯0_輔助動畫_MC當中的"解答畫面":
    • 不要做"解答畫面",所以把ending時間點之後都"移除影格"。
  6. 編輯問題、詳解;設定選項總數、正解排序:
    • 圖層[問題]:寫完問題,請順便附註說明該輔助動畫的操作方式,以免受測者不曉得。
  7. 完成第五測驗題組q5.fla

Top

完成題組

  1. 利用以下幾個我們練習過的技巧,自行再設計2個動畫,至少完成5個題組。
  2. 最後一次上課,主要將說明如何設定增減題組、亂數抽題。
    • 所以學員可以多做幾個測驗題組,fla檔請接續q1, q2, q3, q4之後命名 q5, q6…,下次上課帶來。
    • 學員所自行準備的題組,5個比較適合,10個更好…這不是妄想,這是理想。

Top

本教材講義網頁與範例皆由Unas 製作,歡迎連結分享或當作授課講義。
本網頁將會依學員每一日學習的進度,陸續進行教材的補充。講義若有錯誤,請不吝指正,謝謝。

2008/04/25 Upload.