範例實做 講義內容

範例說明

  1. 請先開啟個人的資料夾[questions]中的 questions.fla ,觀察以下重點:
    • 圖層[AS]的各個時間點關鍵影格上,都有寫入"影格定義名稱",跟該影格所執行的動作有關:
    • Load = 載入:動畫第1格必然要顯示載入進度(針對主動畫questions.swf本身)。
      圖層[Loading_bar]在此時間點中,放置預載動畫loading_MC(預載AS設定寫在影片片段上)。
    • Set = 設定:這格除了可設定變數(增減題組/亂數抽題)之外,還要給一些其他變數下一個初始值。
      圖層[入場動畫]在此時間點中,放置入場動畫0_入場_MC,可快點兩下進入編輯,或從元件庫中編輯。
    • Test = 測試:設定載入測驗題組動畫,並顯示載入進入(針對被載入的測驗題組動畫qX.swf)。
      圖層[Loading_bar]在此時間點中,放置預載動畫loading_MC(預載AS設定寫在影片片段上);
      在此時間點中,也會有一些物件必須開始出現,這些有置入元件的關鍵影格,千萬不可任意搬移。
    • Go = 播放:從影格Go播放到第35格關鍵影格停止,這是一整組。影格Go沒設定AS,是設在34、35格。
      在此時間點中,會把已載入完整,並設定妥善(選項總數/正解排序)的測驗題組動畫show出來。
      在影格Go寫入AS:設定受測者選擇答案後,會判斷對錯、累計分數、播放對應小動畫。
      按鈕元件跳頁_Btn寫入AS:設定點選它時,先判斷是否已該跳到終場動畫?不是則換下一題。
    • Count = 結算:此影格只有設stop();,是因為真正在結算的AS是設在0_終場_MC圖層[AS]第20關鍵影格中。
      圖層[終場動畫]在此時間點中,放置終場動畫0_終場_MC,可快點兩下進入編輯,或從元件庫中編輯。

Top

設定變數

  1. 請開啟自己存檔的資料夾[questions],檢視以下重點:
    • 裡面有自己在上一堂課做好的q1~q4編輯檔(.fla)與發佈檔(.swf),以及課後作業所完成的q5
    • 用IE開啟questions.html,試做測驗,檢查自己做的內容是否有錯誤,或是功能出不來?
    • 都沒有的話,最後還會發現一個問題:q5沒有被載入到主動畫。這也是我們現在要學習如何修改的。
  2. 增減題組 / 亂數抽題:
    • 圖層[AS]的關鍵影格Set上,可設定變數,控制增減題組、亂數抽題。
    • isRandom代表是否亂數抽題。
      註:等號後面填true表示有亂數抽題;等號後面填false表示無亂數抽題。
    • Question_total代表題庫中有多少個題組。
      註:寫入的數字請等同於真正製作的題組數。
    • Question_get代表想從題庫中抽取幾個題組。
      注意!Question_get寫入的數字,一定要比Question_total少!!!
      註:建議Question_get盡可能用100可以除得盡的漂亮的數字。

Top

修改內容

  1. 元件資料夾[2_入場動畫]:
    • 0_入場_MC:可修改入場動畫。最好從舞台上快點進入,比較好觀察到與舞台之間的相對位置。
    • 1_主標題_MC:可修改互動測驗的"主標題"文字與樣式。
    • 2_副標題_MC:可修改互動測驗的"副標題"文字與樣式。
    • 3_作者的話_MC:可修改作者的話。
  2. 元件資料夾[3_終場動畫]:
    • 0_終場_MC:可修改終場動畫。最好從舞台上快點進入,比較好觀察到與舞台之間的相對位置。
      提示:可在圖層[AS]第20關鍵影格上,修改語法,改變成績區間,以及對應的評語、小動畫。
    • grade.swf:是用動畫小軟體SwishMax所製作的文字動畫效果,發佈swf檔後,可匯入Flash中使用。
    • grade_G影片片段grade.swf場景動畫中,所運用到的圖像元件素材。
    • icons_MC從第2~第6關鍵影格開始,一個影格中插入一個影片片段小動畫,可自製小動畫。
      註:不同成績區間,會於文字欄位comment_txt呈現不同評語,並使pics跳到相對影格顯示對應小動畫。
      提示:小動畫的相關素材,都塞在元件資料夾[icons]:叉叉_MC / 大拇指_MC / 勾勾_MC / 星星_MC
  3. 元件資料夾[4_輔助動畫]:
    • loading_MC:場景內部僅是一段利用遮色片仿畫線效果的移動補間動畫
      真正設定預載進度的AS語法,是寫在主場景舞台上所放置的loading_MC影片片段上面。
    • 音樂播放器_MC:會外部載入音樂music.mp3的檔案並進行播放。
      假如抓不到檔案,會顯示"No Sound!"後,移除舞台上這個音樂播放器_MC
      提示:音樂播放器的相關素材,都塞在元件資料夾[音樂播放器]當中。
    • 對錯小動畫_MC:當受測者答對時,會播放影格Right;當受測者答錯時,會播放影格Wrong
      提示:對錯小動畫的相關素材,都塞在元件資料夾[對錯小動畫]當中。
      注意!這邊有寫入AS。第一階段AS: 使被載入的測驗題組動畫,show出正解(是選項的第幾排序);
      第二階段AS: show出詳解,並開始播放測驗題組中輔助動畫的ending影格。
  4. 元件資料夾[5_基本元素] :
    • 所有元件都與版面的視覺元素相關,都可以修改。
    • 修改時請自行注意它在舞台上的相對位置,以及呈現出來的排版效果。
    • 這裡不是必要修改,但改了這些元素後,就更加符合個人化的風格了。
  5. 建議修改項目:
    • 背景圖製作: 可使用素材資源中[resource_pic]的圖檔,以點陣圖填色色塊,取代深藍色的向量漸層填色。
    • 置換背景樂: 可使用素材資源中[resource_loops]的迴繞背景樂,替換資料夾中的music.mp3。
    • 自製評分小動畫:可使用素材資源中[resource_pic]的小圖示,自製終場的評分小動畫。

Top

課後說明 講義內容

網路分享

  1. 成品更新重傳:
    • 學員若對自己放在本頁(線上版)的成品不滿意,而想要重新提供一份成品。
      歡迎將您後來製作的檔案,發佈成swf後,來信寄至: unas@unas.com.tw
    • 請務必註明您的姓名,也請務必附上發佈檔。我將為您重新上傳您的作品,連結於此頁當中。
  2. 在自己的網站或網誌發佈:
    • 語法:<embed src="http://yourURL/yourFile.swf" width="600" height="400">
      註:src的上引號內放入Flash發佈檔的網址,width是Flash小動畫的寬度,height是小動畫的高度。
    • 更詳細的上傳教學,請參見:http://elesson.tceb.edu.tw/~yunol/flash_code/flash_code.htm

Top

相關資源

  1. 逛逛這幾個線上教學網站吧!
    • 軟體大學:Step by Step的詳細教學,不過版本比較舊,也沒有更新了的樣子。
    • 糖糖OEC:利用簡潔的範例做教學,或者分享網頁製作時可用的套件(但不開放fla檔)。
    • Flash神魂顛倒論壇:有相當多的資源,也可以在線上向高手詢問。
    • Flash Kit:國外資源分享網站,可下載fla原始檔、mp3背景音樂等多樣素材。
  2. 教學書籍:
    請注意版本!目前通行Flash8,不過更新版的出現了,Flash8的教學書可能會打折。
    • 入門教學書:
      凡是書中前三章在講解如何操作Flash,並有畫面抓圖、Step by Step的教學,皆屬入門書。
      建議直接上網學習即可,不用買書。
    • 進階教學:
      與ActionScript相關的書名,並且會用範例做教學者,屬於進階教學書。
      此階段的學習者,建議買一本ActionScript辭典搭配學習,效果加倍。
    • 高階教學書:
      凡涉及後端程式皆屬高階教學。ex: PHP for Flash的教學書。
      若會寫程式的人,請注意教學書是以哪種程式來做教學的。

Top

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

2008/04/25 Upload.