重點講解 講義內容

匯入模式

  1. 何謂匯入?
    • Flash是一個很好的多媒體媒介。
      可匯入點陣圖、向量圖、音效、GIF動畫、影片、SWF檔等元素,使其互動表現更加多元、更加活潑美觀。
    • 現在網路上什麼都有分享、什麼都不奇怪。
      所以即使不會畫圖的人,只要找到好素材,仍然可以做出好動畫。
    • 素材資源打包下載:Resource.rar 內含各類可匯入的檔案格式,提供練習時使用。
  2. 匯入模式:
    • 匯入至舞台:建議僅適用於單張圖片的匯入。
      若是GIF動畫匯入至舞台,則會出現一個畫面置入一個影格當中的情況。
    • 匯入至元件庫:這是我們最常建議的使用方式。
      尤其是SWiSH這類軟體所製作出來的swf發佈檔,要匯入Flash中時,建議採用"匯入至元件庫",
      並且新增一個元件資料夾,將匯入後的所有圖像元件全部丟進去即可,不必特意一個個重新命名。
    • 開啟外部元件庫:開啟其他檔案的元件庫,進行匯入動作。
      本課素材資源下載後解壓縮,當中的[Resource_fla]資料夾中的各檔案,
      皆可用開啟外部元件庫來匯入使用。但使用完畢之後請切記!要關掉這個外部元件庫。
    • 匯入視訊:匯入視訊時可以節錄段落,編輯畫質與視小以縮小檔案,並可調整亮度對比等數值。
      建議匯入時,把尺寸縮小或裁切畫面以縮減檔案大小。不建議匯入太長的影片。
  3. 操作方法:
    • 正確方式:【功能列】 檔案>匯入> 選擇其中一種模式匯入 (建議"匯入至元件庫")。
    • 複製貼上:在其他編輯軟體中複製,在Flash場景中直接貼上。僅限於靜態圖片使用。
    • 複製元件庫:在Flash當中開啟其他.fla檔,直接複製元件,貼入目標元件庫中。僅限於.fla檔之間。
    • 使用正確匯入的方式,可以提供元件庫獲得正確的原始檔案位置路徑。
      之後原始檔案若有更新,直接在元件庫設定該資源的屬性時,可以按"更新"來重新匯入

Top

範例實做 講義內容

圖檔應用

  1. 可匯入的圖檔格式:
    • 點陣圖:諸如.gif、.jpg、.bmp等格式的圖檔,都屬於點陣圖。
      我們一般網路上抓到的一些小圖資源,都是點陣圖。
    • 向量圖:有許多專業的繪圖軟體,它們都會有其獨特的檔案格式來儲存向量圖。
      ex: 副檔名為 .ai 的檔案格式,就是向量圖檔。
      AI檔是Adobe Illustrator專用的,無法預覽,只能以這個軟體開啟,或直接匯入flash使用。
    • 匯入點陣圖:元件庫中會出現一個像是風景照一般的小圖示,就是點陣圖物件
      可在元件庫中查看其"屬性",修改壓縮品質來源檔案,以及是否允許平滑化
      不過若要匯入大張照片,仍強烈建議先在一般影像編輯軟體上修改好像素大小、調整色調。
    • 匯入向量圖:元件庫中會自動新增一個圖像元件,並將匯入的形狀置入其中。
      如果怕自己畫出來質感不佳,又只是想讓一個精美的影像略有動態ex:白雲飄過、人物微笑眨眼etc…
      建議去抓韓國風的向量圖庫,匯入Flash後直接修改細部、製作微量動畫。
    • 點陣圖的取得相當容易,在網路上抓圖即可;向量圖要在一些專門提供設計師交流的資源分享站才會有。
  2. 向量圖補充說明:
    • 現在很多繪圖軟體,畫好後都有發佈成Flash的選項,這些圖複製貼上Flash後大多仍可維持向量。
      ex: Adobe Illustrator、Coreldraw、Fireworks...etc.
    • 目前最主流的向量影像編輯軟體是Illustrator,因此大多的網站資源分享也是 .ai的檔案格式。
      建議自行安裝這套軟體,方便開啟檔案,複製向量圖。
    • Flash相關系列軟體,除了我們熟知的Dreamweaver外,還有Fireworks,三者相容度很高。
      Fireworks繪製形狀的能力比Flash強很多,因此可繪製後複製貼上Flash並維持向量狀態。
    • AI檔匯入時,會自己建立起一個圖像元件。不過因為它有些濾鏡特效是Flash當中所沒有的,
      因此有時候匯入Flash之後會有部份轉換成點陣圖,或者某些形狀的塊面,變成空下來一塊。
    • Flash所屬Macromedia公司,目前已經被Adobe併購,所以最近要出的最新中文版本,
      就是Adobe整合後的版本,因此在與Adobe原有的系列軟體的相容性來講,會大大提升。
  3. 製作背景:利用到的是顏色面板的填色工具,類型:點陣圖。
    • 步驟:先匯入要當背景的小圖到元件庫中 >>
      新增元件 類型: 圖像 > 畫出一個跟舞台寬高一致的填色 >
      對齊於場景中(0,0)的位置 > 再選取起這個填色色塊 >>
      開啟顏色面板 ,選擇類型: 點陣圖 > 在顏色面板上會出現所有元件庫中的點陣圖可選 >
      找到並選取剛剛匯入的小圖,填色色塊即刻被小圖所填滿 >>
      回到主場景中,新增一個圖層在所有圖層之下,將這個剛做好的圖像物件拉到場景中對齊好,完成。
    • 方法1(同上):使用選取工具>選取填色>開啟顏色面板,選擇類型:點陣圖,點陣圖填色會維持原尺寸;
    • 方法2:使用油漆桶>開啟顏色面板,選擇類型:點陣圖>填填色,點陣圖填色會依填色尺寸縮放 (範例下載) 。
    • 注意!填色寬高縮放,所填之點陣圖也會隨之縮放,若要使點陣圖填色恢復原尺寸,請重複一次方法1。
  4. 點陣圖轉換為向量圖:利用到的是【功能列】修改>點陣圖>轉換為向量圖。
    • 建議使用顏色區塊分明、線條明確的圖樣,當它需要自由縮放而不想模糊掉時就可轉向量。
      複雜的大畫面不建議使用,反而會令整個檔案大小爆增、編輯檔案時造成遲滯現象。
    • 步驟:點陣圖物件拖到場景中並選取 > 【功能列】修改 > 點陣圖 > 轉換成向量圖 > 數值請自行設定。
    • 請觀察怎樣的數值轉出的畫質比較接近於原圖,且發佈測試後,檔案大小增量最少。
  5. 點陣圖去背或部分擷取:
    • 步驟:Ctrl+B打散點陣圖後,利用【工具】套索工具>魔術棒,可自動圈選起相近色再去背。
      也可以用橡皮擦工具擦除部分,或用選取工具選取部分點陣畫面。
    • 注意!若元件庫中的該點陣圖被刪除,則舞台上所有有用到該點陣圖的地方都會變成紅色填色;
      雖在舞台上將點陣圖打散並擷取部分畫面,但實際上發佈檔仍會輸出整張圖,檔案不會因此變小。
  6. 修改互動測驗的舞台背景,改為自己喜好的點陣圖填色:
    • 請先開啟自己的資料夾[questions]當中的questions.fla,這個「Flash互動測驗」主動畫的原始檔。
    • 直接開啟元件庫資料夾【1_功能元件】 > 影片片段主場景BG_MC 來編輯。
    • 可從素材資源【Resource】 > [resource_pic] 找尋適合的點陣圖資源匯入。
    • 編輯完畢請存檔。學員的「Flash互動測驗」就有自己獨特的背景了。
    • 其他建議修改項目:
      元件庫資料夾【1_功能元件】> 影片片段分隔線_G ,將藍色分隔線改為搭配背景的顏色。
      元件庫資料夾【4_輔助動畫】> 影片片段音樂播放器_MC中,元件的濾鏡效果: 色調。

Top

視訊應用

  1. 可匯入的視訊格式:
    • .avi / . mpg / .mpeg / .mov / .dv / .wmv / .flv
  2. 視訊素材匯入方法:視訊的匯入操作步驟共有5步,就目前所需,建議匯入步驟為:
    • 步驟一:選擇檔並開啟後 > 下一步。
    • 步驟二:選擇「在SWF中內嵌視訊並在時間軸中播放」 > 下一步。
    • 步驟三:不改 > 下一步。
    • 步驟四:編碼,按「顯示進階設定」 > 修改種種設定,使視訊檔案大小縮減 > 下一步。
    • 步驟五:按「完成」,正式進行匯入。
    • 以上步驟完成後,可在元件庫中看到一個像攝錄影機的小圖示的檔案,就是視訊檔。
      點選"屬性"按鈕,查看匯入的檔案資訊,若檔案太大,可在屬性面板上,直接重新匯入一遍。
    • [視訊屬性]不像圖檔素材的[點陣圖屬性],可以直接在屬性面板設定壓縮品質,改變輸出後的檔案大小,
      而是檔案如果壓縮不夠小,就得在重新再匯入一遍。畢竟視訊檔的壓縮處理比較複雜,無法做即時修改。
  3. 將測驗題相關的視訊檔,製作成題組的輔助動畫:
    • 以下操作步驟,請先以素材資源中的jesus_lizard.mpg做練習,回家後再尋找與測驗相關的視訊替代。
    • 請先開啟新檔 > 設定文件寬高380*260 / 影格速率24fps > 存檔為video_Name.fla
    • 新增一空白影片片段video_MC > 放置在主場景舞台座標 (0, 0)的位置 > 快點兩下進入該元件場景編輯。
    • 【功能列】檔案: 匯入: 匯入視訊 > 五步驟將視訊會入影片片段video_MC當中 > 座標對齊 (0, 0)的位置。
    • 製作按鈕 > 在放置視訊的圖層之上,開新圖層,放置Play、Stop鈕;另在最後一影格上,放置Restart鈕。
    • 設定各個按鈕on (relesse) {}的感應動作,完成簡易的播放互動效果。

Top

音樂應用

  1. 基本概念:音效從元件庫拖入場景時,只存在於影格當中,在場景中並無任何物件。
    • 音效可匯入的格式有:wav、mp3、aif。
      匯入Flash後,可從"屬性"設定它的壓縮品質,建議壓縮到不影響音效品質且檔案較小的程度。
    • 與放置AS的影格一樣,請養成開啟一個空白圖層,單獨放置的好習慣。
    • 音效插入影格後,影格中會出現聲波的紋路,如此可判定音效何時開始何時結束。
    • 點選插入音效的關鍵影格,可從屬性面板修改設定。
    • 音效可置入按鈕滑過或按下時的影格,用以提示使用者滑鼠已移過按鈕,或已按下按鈕。
      不建議使用太長的音效置入按鈕中。
  2. 屬性面板上,關於音效的同步選項有:事件、開始、停止、串流。
    • 事件:跳到該影格便立即播放。同一個音效可重疊出現。
      適合製作同時間多個元件的音效ex: 大珠小珠落玉盤,叮叮噹噹響不停。
    • 開始:跳到該影格會開始播放,但前提是同一個音效不可重疊出現。
      適合做成按鈕音效ex: 總不能使用者按鈕連點,就回聲不斷餘音嫋嫋吧?
      反之,前一個例子若選擇"開始",音效就會與珠子落下的時機不契合,一聲完畢才會接著第二聲。
    • 停止:沒甚麼用處。
    • 串流:使音樂與動畫同步。隨插入音效的關鍵影格起迄,同時也完全跟著影格播放。
      通常太吃資源的動畫,音效會與動畫不同步,使得音效雖是在它插入的那一個時間點開始播放,
      但動畫播放有Lag、音效卻沒有Lag的情形下,音效就會跑在動畫前面了。
      此時音效的同步可用串流,適合劇情動畫,文字對白與講話聲音要對好的時候。

      使用串流的音效,務必是整個動畫當中僅出現"唯一一次"的音效。
  3. 音效可製作loops迴繞背景樂:
    • 以一個前後旋律相銜接的短週期旋律,重複播放。
    • 檔案較小,同時達到背景音樂的效果。
    • 步驟:新增一個影片片段元件 > 當中不要放任何物件,僅將loops的音效拖入其影格中 >>
      在關鍵影格中,可設定屬性面板: 事件 > 重複播放 >>
      最後在主場景中新增一個圖層,專門放置這個影片片段元件,完成。
      注意!這個置入音效的影片片段,要貫通於整個主場景,所以影格格數 = 整個場景的影格格數,
      且只有第1格是關鍵影格,從第2格開始到最後都只是虛像的投影。

Top

元件應用

  1. 匯入其他flash當中的元件,來源有:
    • Flash內建元件庫:【功能列】> 視窗>內建元件庫,就有許多Flash內建的元件可利用。
    • 其他fla檔的元件庫:【功能列】也檔案>匯入>開啟外部元件庫;
      也可以直接開啟其他fla檔案找到、複製該元件後,貼回自己正在編輯的檔案。
    • 網路上有許多別人已經做好的元件,除了可以插入自己的動畫當中,增加動畫的視覺豐富度,
      同時也可以研究別人做的元件,進而加深自己的功力囉~
  2. Music Player 音樂播放器:
    • 請先下載:〈音樂播放控制器範例〉,儲存到與questions_姓名.fla同一個資料夾當中。
    • 將壓縮檔解壓,會出現一個資料夾【Flash_load_MP3】,開啟當中的music_btn.fla的元件庫。
    • 影片片段音樂播放器_MC內有AS設定,可讀入外部MP3,而不必匯入到fla,增加主動畫檔案大小。
      音樂採外部讀入的方式,不會影響到主動畫載入進度。因此不需使用loops,可放入一首歌當背景樂。
      之後若要換音樂也不必再編輯.fla檔案,只需改換MP3檔 (music.mp3)即可。
    • 請注意!music.mp3是Flash編輯檔當中AS預設的檔名:
      若要使用到的mp3檔案不是這個檔名,務必更改名稱為music.mp3,取代原先的music.mp3
      否則就是要自己更改原始檔AS設定,改變[音樂播放控制器_MC]場景內AS設定的檔案路徑。
    • 將發佈檔music_btn.swf直接插入網頁:使網頁中有一個活潑簡單的音樂播放器,增添美觀效果。
      注意!要將music_btn.swf、music.mp3這兩個檔案,與music.mp3所插入的網頁放在相同的資料夾當中
    • 影片片段音樂播放控制器_MC,匯入自己編輯的Flash中使用:
      AS外部載入語法寫"資料夾路徑"時,不是依據swf檔位置,而是依據swf檔置入的網頁的位置而定。
      建議初學者將自己編輯的Flash與其發佈檔所置入的網頁,全部放在資料夾【Flash_load_MP3】當中。
  3. Loading Bar 預載動畫:
    • 範例下載:Loading_Bar.rar
    • AS主要設定在影片片段上,請自行下載研究。
    • 直接複製元件,貼上要加入Loading Bar的主動畫當中。僅置入於主場景第一格,影格上設定stop。
    • 三個範例的AS大同小異,只是呈現Loading動畫效果不同。
    • questions.fla當中,已有Loading的預載動畫,可觀察其放置位置、AS設定。
  4. 以上元件皆已匯入主動畫questions.fla當中:
    • 相關元件,收納於元件庫資料夾【4_輔助動畫】當中。舞台上:
      Music Player 位於圖層[背景樂]第2關鍵影格中,延續"虛像"到結算的影格Count終止。
      Loading Bar 位於圖層[Loading_bar]第1關鍵影格中,第2關鍵影格開始為空白 (不延續"虛像")。
    • 這兩個元件不僅可以運用在本範例中,更可運用在任何動畫當中。有興趣的人可以自行了解相關語法。
    • 將自己喜歡的MP3音樂,取代掉資料夾[questions]當中的music.mp3,即可換置背景樂。

Top

課後作業 講義內容

完成題組

  1. 製作相關視覺元素:
    最後一次上課,將會修改動畫當中所有的視覺元素,完成成品。
    諸如換場按鈕、背景樂按鈕、答對答錯的小動畫與音效…都可以事先做好帶來。
  2. 可運用本課所學的匯入,自行再設計3個題組。
    • 假如不想自製輔助動畫,可以匯入點陣圖 (ex:數學題目的圖檔) ,來取代自製的輔助動畫。
    • 假如想要達到多元化的多媒體應用,可以匯入視訊並加入簡易播放按鈕,呈現極佳的效果。
    • 運用網路上分享的.fla檔案,可以將該檔案中的元件匯入至元件庫,再加以利用。
  3. 最後一次上課,主要將說明如何設定增減題組、亂數抽題。
    • 所以學員可以多做幾個測驗題組,fla檔請接續q1, q2, q3, q4之後命名 q5, q6…,下次上課帶來。
    • 學員所自行準備的題組,5個比較適合,10個更好…這不是妄想,這是理想。

Top

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

2008/04/25 Upload.