MacroMedia Flash MX MacroMedia Flash MX 講義講義

MacroMedia Flash MX MacroMedia Flash MX 講義講義

講師：陳致仰講師：陳致仰

Outline• Flash 介紹• Flash MX 新特色• 介面介紹• 繪圖工具箱說明• 基礎動畫• 元件、實體與元件庫• 圖層與時間軸• 聲音處理• 儲存格式及匯出• 綜合應用• 參考資料

Flash 介紹• Flash 是 Macromedia 所發行的一套商業軟體，可

以用來製做網頁動畫、遊戲、多媒體及光碟等‧• 因為是向量格式，所以檔案空間小‧• 畫質清晰不模糊‧• Stream 資料流，即時播放‧• 互動性佳‧• 聲光效果俱佳‧• 獨立出版，用途多元化‧• 跨平台演出‧

FLASH MX 新特色• 比 Flash5 更方便找出某一視窗 , 安排視窗 , 比 Flash5 更易於整理 • 繪圖工具 箱多了兩新工具 : 填色變形工具和自由變形工具 , 使製

作動畫更方便 , 效果更多 • 新增功能 :“ 從範本新增檔案”、 “儲存為範本”及 " 匯入檔案

至圖庫 " • 超強的”混色器” 調整方法比 Flash5 更簡單更直接 , 功能也強大

了不少 • Action 視窗改變比 Flash5 改進了不少 , 更顯示出現正編輯動作的

影格及元件• 圖層管理 新增圖層資料夾 , 可以將多個圖層放在圖層資料夾內 ,

需要時再打開 , 編輯多個圖層時更方便 • 文字連結 比 Flash5 更方便 , 不用設 Action, 直接把文字轉為 html

和連結

介面介紹• 屬性視窗

介面介紹

• 顏色 / 色票視窗

介面介紹• 混色器視窗

介面介紹• 動作視窗

介面介紹• 混色器視窗

介面介紹• 資訊視窗

介面介紹• 對齊視窗

介面介紹• 對齊視窗

介面介紹• 工作區視窗

介面介紹• 時間軸及圖層視窗

圖層說明 快顯功能表 時間軸

介面介紹• 繪圖工具箱視窗

繪圖工具箱說明• 箭頭工具：移動工作區上的物件或線段時使用• 選取細部工具：同上，但會出現控點，可以做

更細部的修改• 線段工具：可以繪出直線，按下 Shift 不放，可

以繪出水平、垂直或 45 度的直線• 套索工具：可以利用滑鼠選取一圖形的某部分 ,

可說是十分方便 ! 而且打散後的圖片也可以 套索工具選取

• 鋼筆工具：可以用貝茲曲線來畫線段• 文字工具：在畫面上輸入文字時使用• 橢圓形工具：可以繪出撱圓形，按下 Shift 不放，

可以繪出正圓形• 矩形工具：可以繪出矩形，按下 Shift 不放，可

以繪出正方形

繪圖工具箱說明• 鉛筆工具：鉛筆工具與直線工具一樣都可以直接畫

出線條，而線條的變化設定則一樣從 Properties 面板來改變線條樣式， 所不同的是鉛筆工具有三種模式可供選擇

• 筆刷工具：和鉛筆工具一樣 , 可讓你自由繪畫一些線條 , 但線條的樣式較多

• 自由變型工具：不單包括了基本的調整大小功能，還有旋轉 ,扭曲和物件外層調整

• 填色變形工具：可以把一些漸變色作方向及位置上的修改

• 墨水瓶工具：主要用來修改已經在場景上的圖形的線條 / 顏色

• 油漆桶工具：作區塊填色時使用• 滴管工具：用來選取場中一圖形的顏色 • 橡皮擦工具：可把工作中的圖形 (一般物件 ) 擦拭

基礎動畫• 在 Flash 中有兩種建立連續動畫的方法：

– 補間動畫：您首先建立開始和結束的影格，並讓 Flash 建立其間的影格內容。 Flash 會在開始和結束影格之間平均變更物件大小、旋轉、顏色或其他屬性，來建立移動的外觀。

– 連續影格動畫：在連續影格動畫中，您必須自行在每個影格中建立影像。

基礎動畫 - 補間動畫• 補間動畫是一種建立經過一段時間的移動，和改

變後的有效方法，並且能減低檔案的大小。在補間動畫中， Flash 只儲存影格之間更改的值。 – 在移動補間動畫中，您在某一個時間點定義如實體、群組或文字區塊的位置、大小和旋轉等屬性，然後在其他的時間點更改這些屬性。您也可以沿著路徑套用移動補間動畫。

– 在形狀補間動畫中，您先在某一個時間點繪製形狀，然後在另一個時間點更改該形狀或繪製另一個形狀。 Flash 會逐漸改變其間的影格值或形狀，藉以建立動畫。

基礎動畫 - 補間動畫 -實作 (移動 )

移動補間動畫：1. 在工作區畫出圖形2. 在影格的第一個關鍵影格上點滑鼠右鍵3. 選”建立移動補間動畫”4. 到預定停止動畫的影格按右鍵5. 選”插入關鍵影格”6. 將圖形移動到欲停止的位置7. 看成果

基礎動畫 - 補間動畫 -實作 (形狀 )

形狀補間動畫1. 在工作區畫出圖形2. 在影格的第一個關鍵影格上點選3. 在”屬性視窗”上”補間動畫”的選項中選”形狀

”4. 到預定停止動畫的影格按右鍵5. 選”插入關鍵影格”6. 將原來的圖形修改或刪除重建第二個影像7. 看成果

基礎動畫 -連續影格動畫• 連續影格動畫會更改舞台上的每個影格

內容，最適合用於在每個影格中影像都會更改的複雜動畫，而不是單單橫越舞台移動的動畫。連續影格動畫比起補間動畫更容易增加檔案大小。因為在連續影格動畫中， Flash 會儲存每個完整影格的值。

基礎動畫 -連續影格動畫 -實作

1. 在工作區畫出第一個圖形2. 在右一個影格上點選3. 選”插入關鍵影格”4. 小幅的改變圖形5. 重複步驟二至步驟四直到完成6. 看成果

元件、實體與元件庫• Flash 動畫檔體積小的秘密除了向量格式的的

圖檔外，可重複被使用的”元件” (Symbol)也是關鍵因素

• 所有在動畫中會被重覆使用的物件，都可以製做成元件，存放在”元件庫” (Library)中

•當需要該元件時，便可以自元件庫中將元件拉出來使用，此時被拉出來編輯的就是元件的分身 -”實體” (Instance)

圖層與場景• 圖層是用以將圖案放在不同的層次，可

以讓圖的本身不互相干擾•場景是用來作鏡頭切換用，每一個新的場景就是一面空白的舞台，

聲音處理• Flash支援的音效格式有：wav、 mp3、 mpg、

mpeg、 asf 、wmv等• 音效的來源有：

– 內建元件庫– 外部匯入

• 同部模式有四種– 事件模式 ( 預設 )– 串流模式– 停止模式– 開始模式

儲存格式及匯出•測試速度

– 可以瞭解在各種傳輸速度下影片的播放情形• 匯出

– Flash 可以匯出成多種格式，其中以放在網頁上的*.SWF最為常用

• 發佈– 可以自動產生放在 HTML 網頁上的 Flash 檔案

•產生自動放映檔

注意事項• 多利用補間動畫來設計動畫效果，並減少動畫中的關鍵影格數量

• 多利用元件 (Symbol)，少利用匯入點陣圖的方式來製做動畫

• 動畫中的靜、態部份，以及 ActionScript程式、聲音、視訊，儘量都分開在不同圖層製作較好

• 匯出含有聲音的 Flash 影片時，利用 MP3來壓縮聲音可以有效降低檔案大小

• 注意字形的使用，儘量使用裝置字體，且不要用用太多種字型以免增加檔案體積

與我聯絡• 陳 致 仰• E-mail: cychen@ms3.url.com.tw• MSN: josephcychen@hotmail.com• GSM: 0938-022105

參考資料• Flash MX - 說明 / 使用 Flash/目錄 (F1)• Flash學堂 - http://gba0124.uhome.net/• Flash MX 動畫與程式設計 /千展研發中心 張瑞立 /松崗 /957-466-690-5

• Flash MX 躍動的網頁 /施威銘研究室 /旗標 /957-717-904-5

• Flash 5 網頁得來速 /鄧文淵 /松崗 /957-22-3548-6• Flash 網上動畫教程 /王鐘 周京豔 /松崗 /957-22-327

5-X• Flash 4 十全大補 /胭脂虎 天才國 /學貫 /957-0321-06-7

圖層說明命名 在圖層上按兩下，便可以輸入新的圖層名稱

寫好圖層名稱有助你在大量圖層時找出一圖層

新增 在圖層上按右鍵，然後選取快顯示功能表中的『插入圖層 (Insert Layer)』新的圖層會出現在原有圖層的上方

刪除 在圖層上按右鍵，點選『刪除圖層』 ，該圖層所有的內容會被刪除

順序 可直接拖曳圖層上下移動來調整圖層位置

顯示 /隱藏 可顯示或隱藏該圖層中的物件，易於編輯其他圖層

鎖定 當某一圖層被鎖定時，我們無法再編輯該圖層的元件或圖形，再按一下便可解除該圖層的鎖定狀態易於編輯其他圖層

外框顯示 如果我們點選這項功能，則該圖層的元件只顯示外框線，不會顯示內部顏色易於編輯其他圖層

快顯功能表插入影格 一 般 的 影 格， 這 種 影 格 內 容 是 空 的 ， 只 會 顯 示 出 上 一 個 關 鍵 影 格

中 的 內 容 ， 它 的 作 用 是 用 來 延 長 動 畫 的 時間， 或 是 配 合 著 漸 變 動 畫 使 用。 插 入 影 格 和移 除 影 格 都 可 使 動 畫 播 放 時 間 延 長 或 減 少

移除影格 如題

插入關鍵影格 例 如 要 出 現 一 個 球 ， 便 要 把 球 放 在 關 鍵 影 格 中 ， 當 球 跑 到 左邊 時 ， 必須 再 利 用 另一 個 關 鍵 影 格 ， 將 球 放 到 左 邊 才 會 有 效 果 。 我 們 可 以 將 關 鍵 影 格 處 視 為 某 一 段 動 畫 播 放 的 起 點 ( 終 點 ) 。 時 間 軸 中有 黑 點 的 就 是關 鍵 影 格

插入空白關鍵影格

空白關鍵影格 : 關 鍵 影 格 的 一 種 ， 但 它 的 內 容 是 空 的 。 即 把 之 前 的 影 格 內 容 都 清 空 了 ，空 白 關 鍵 影 格 多 用 來清 除 畫 面 內 容 。 時 間 軸 中 有 空 心 圓 的 影 格 就 是 空 白 關 鍵 影 格

清除關鍵影格 將關鍵影格變為一般影格

產生移動漸變 設定補間動畫的重要步驟， 如果要執行這項功能，該影格必須是關鍵影格，而且在該關鍵影格之後仍有一個關鍵影格才可以

時間軸中的動畫表示Flash 將時間軸中的補間動畫和連續影格動畫區分成底下幾點：

移動補間動畫由開始關鍵影格上的黑點表示；中間的補間動畫影格則有黑箭頭和淡藍色背景。

形狀補間動畫由開始關鍵影格上的黑點表示；中間的影格則有黑箭頭和淡綠色背景。

虛線表示補間動畫被破壞或不完整，比如遺失最後的關鍵影格。

單一關鍵影格由黑點表示。單一關鍵影格後面的淡灰色影格包含相同的內容，沒有被更改，而且在跨距的最後一個影格中包含黑線和空心矩形。

小 a 表示已經用「動作」面板指定給影格一個影格動作。

紅色旗幟表示影格包含標籤或註解。

金色錨點表示影格為命名錨點。