Flash教學使用 Flash CS3交通大學電子工程系劉昱賢

Department of Electronics Engineering , National Chiao Tung University

何謂 Flash

Flash是美國 Adobe公司設計出品的動畫工具軟體，他可以在不同的平台播放。在網際網路上與網頁設計整合是一大主流，可以補強網頁動感不足的缺憾。

由小至按鈕、選單的製作，大到多場景動畫影片的設計， Flash皆可勝任。由於 Flash有極佳的互動功能，強調互動機制的動畫設計，譬如遊戲、互動廣告、線上調查等等。

Department of Electronics Engineering , National Chiao Tung University

如何知道這是 Flash的動畫？用滑鼠右鍵去點選動畫，如果看到彈出選單有 [關於Flash Player … ]字樣便是了

Department of Electronics Engineering , National Chiao Tung University

動畫原理動畫的基本原理，就是將數張靜止的圖片，以很快的速度連續播放 (通常是每秒 24~30張 )，而由於人類眼睛有「視覺暫留」的特性，所以根本分辨不出上一張畫面與下一張畫面，於是連續播放的這些靜態圖片，看起來就變成連續的動畫了！

Department of Electronics Engineering , National Chiao Tung University

Flash動畫用 Flash做動畫，主要方式有兩種

-影格動畫 (Frame by Frame)

-類似傳統的卡通一格一格的製作-漸變動畫 (Tweened)

-只要製作第一格及最後一格，中間就由 flash來代勞，可以省去不少麻煩

Department of Electronics Engineering , National Chiao Tung University

Flash

Department of Electronics Engineering , National Chiao Tung University

圖層元件庫場景輸出檔案

Department of Electronics Engineering , National Chiao Tung University

軟體特色功能簡介動畫製作概念編輯環境介紹繪圖工具介紹繪圖基本要領圖形與群組關係繪圖實作元件的使用

Department of Electronics Engineering , National Chiao Tung University

軟體特色 簡單易用，容易學習 動畫檔案小 可使用 MP3壓縮檔，減少檔案體積 下載速度快，不受頻寬影響 受到充分的支援 線上教學，互相討論技術

Department of Electronics Engineering , National Chiao Tung University

功能簡介

工具

工作區

圖層時間軸

元件庫

調色盤

浮動版面

檔案

場景元件

Department of Electronics Engineering , National Chiao Tung University

工作區-就如同電影中的表演舞台，就看我們讓誰上台表演，也如同繪圖軟體中的畫紙，可見區域只有白色的地方哦。

時間軸-就好像電影中的底片數 (時間 )。電影播放時按照時間軸一格一格的放映。

Department of Electronics Engineering , National Chiao Tung University

圖層-可以說是物件的上下，但每個圖層中也都有物件的上下之分。

工具- 提供 Flash最常用的工具。

Department of Electronics Engineering , National Chiao Tung University

檔案切換區-可以在不同檔案切換，方便多了

場景元件-要修改那個場景、那個元件，或要切換到那個場景、那個元件就是在這裡

-視野的大小切換也是在這裡

Department of Electronics Engineering , National Chiao Tung University

浮動面板-所有的功能面版全部集中在這裡，可依個人的需求切換 Tab

- 修改物件屬性

調色盤-選擇填色相關參數

元件庫-元件重複使用

Department of Electronics Engineering , National Chiao Tung University

工具箱

Department of Electronics Engineering , National Chiao Tung University

工具箱繪圖工具，與一般繪圖軟體的工具差不多，有各種鉛筆、筆刷、橡皮擦工具

用『工具』列可以挑選繪圖工具用『檢視』列可以調整對物件的檢視用『顏色』列可以設定工具相關的顏色用『選項』列可以對工具做較細部的設定

Department of Electronics Engineering , National Chiao Tung University

工具箱箭頭工具：一般選取用工具貝茲選取工具：用以編輯選取元件的線條，以編輯點為中心，編輯出曲線

線段工具：直線套索工具：可以任意分割選取欲編輯的元件

Department of Electronics Engineering , National Chiao Tung University

工具箱鋼筆工具：貝茲曲線繪圖筆文字工具：加入文字的工具橢圓工具：畫圓的工具矩形工具：畫方形的工具鉛筆工具：自由畫線的工具

Department of Electronics Engineering , National Chiao Tung University

工具箱筆刷工具：自由上色的工具墨水瓶工具：線條上色工具油漆桶工具：範圍填色工具滴管工具：取得畫面顏色橡皮擦工具：清除工具

Department of Electronics Engineering , National Chiao Tung University

繪圖技巧：基本工具的使用方式當圖形物件重疊時

-不同顏色有分割效果-相同顏色有黏合的效果

Department of Electronics Engineering , National Chiao Tung University

為避免產生分割和黏合的現象-可以利用

- 建立群組物件- 轉成元件- 利用圖層

Department of Electronics Engineering , National Chiao Tung University

Flash 物件的種類有三種-一般物件-群組物件-元件物件

-影片片段-按鈕-圖像

Department of Electronics Engineering , National Chiao Tung University

動畫動態補間 (Motion Tweening)

形變動畫 (Shape Tweening)

影格動畫 (frame by frame)

導引動畫 (Guide Motion)

遮罩動畫 (Mask Motion)

Alpha_動畫

Department of Electronics Engineering , National Chiao Tung University

動態補間 (Motion Tweening)

Layer1 ： (f1)r 畫出一個實心圓Layer1 ： (f30)1

- 插入關鍵影格-將該圓移至適當處

Layer1 ： (f1)r 按右鍵 建立移動補間動畫Ctrl + Enter 測試影片

Department of Electronics Engineering , National Chiao Tung University

Department of Electronics Engineering , National Chiao Tung University

Department of Electronics Engineering , National Chiao Tung University

形變動畫 (Shape Tweening)

Layer1 ： (f1)r 畫出一個實心圓Layer1 ： (f30)1

- 插入關鍵影格-將該圓刪掉

插入方形Layer1 ： (f1)r 按右鍵 建立形狀補間動畫Ctrl + Enter 測試影片

Department of Electronics Engineering , National Chiao Tung University

形變動畫 (Shape Tweening)

Department of Electronics Engineering , National Chiao Tung University

形變動畫 (Shape Tweening)

Department of Electronics Engineering , National Chiao Tung University

導引動畫 (Guide Motion)

Layer1 ： (f1)- 從元件庫拿出元件

Department of Electronics Engineering , National Chiao Tung University

導引動畫 (Guide Motion)

Add Guide Layer 新增一個導引圖層 在導引圖層畫出要導引的線段

Department of Electronics Engineering , National Chiao Tung University

導引動畫 (Guide Motion)

Layer1及 Guide Layer1-同步在 (f30) 插入關鍵影格

Layer1 ：- (f1)將圓球移至線段的起點- (f30)將圓球移至線段的終點

Department of Electronics Engineering , National Chiao Tung University

導引動畫 (Guide Motion)

Department of Electronics Engineering , National Chiao Tung University

遮罩動畫 (Mask Motion)

Layer1 ： (f1)r 輸入 FLASH，大小 100以上Layer2 ： (f1)

-在 FLASH 左邊繪製一圓，（探照燈作用）， Group

Department of Electronics Engineering , National Chiao Tung University

Layer1、 2同步 (f30) 插入關鍵影格

Department of Electronics Engineering , National Chiao Tung University

Layer2 ： (f30)-將該圓移至 FLASH字的右邊- (f1) 建立移動補間動畫

Department of Electronics Engineering , National Chiao Tung University

在 Layer2上按右鍵，選 Mask，變成 Layer1的遮罩(Mask)

Department of Electronics Engineering , National Chiao Tung University

Group群組 (1/3)

當我們製作一個圓時，該圓包含二個物件，- 外框線- 填色區塊

Department of Electronics Engineering , National Chiao Tung University

Group群組 (2/3)

如果沒有將此圓作「群組」的話，此二個物件可能因搬移而變形或分離

若要移動一個完整的圓時，必先要先將此圓作「群組」。

實際上，群組最大的作用再將零散的圖形或物件，組成一個群組物件，可以維持彼此間的相對關係，而且做變形處理的時候也比較方便。

Department of Electronics Engineering , National Chiao Tung University

Group群組 (3/3)

拖曳出一個圓形。使用選取工具，將剛剛所畫的圓框住。[群組 ] 或 Ctrl + G 即可。[ 解除群組 ] 或 Ctrl + shift + G 即可

Department of Electronics Engineering , National Chiao Tung University

Scale縮放先點選欲縮放的物件，再選擇工具下方的縮放鈕，接著物件四周會出現控制點，只要調整控制點即可對物件縮放。

Department of Electronics Engineering , National Chiao Tung University

Break Apart 打散 (1/2)

打散的功能與解除群組有點類似解除群組是將群組化的物件還原成原來的圖形或物件。而打散的功能除了也能執行解除群組外，還可以將物件、點陣圖、文字等轉成向量圖形的性質，即可執行繪圖功能的填色區域或線條等。

Department of Electronics Engineering , National Chiao Tung University

Break Apart 打散 (2/2)

全選欲打散的物件。打散元件打散文字（填色、變形）

Department of Electronics Engineering , National Chiao Tung University

排列順序選擇欲移動的物件，然後再執行 Modify / Arrang 即可調整物件前後排列的順序- Bring to front 移至最前- Bring forward 置前- Send backward 置後- Send to back 移至最後

Department of Electronics Engineering , National Chiao Tung University

元件庫元件庫概念製作 Symbol元件簡介元件特色新增元件匯入元件

Department of Electronics Engineering , National Chiao Tung University

元件庫概念在 flash中，可以將重複使用的物件

-如圖形物件、群組物件、文字物件…等等

製作成元件 (symbol)，製作好的元件存放在元件庫(library)中，當你需要使用時，就從元件庫取出，放在編輯區中編輯，這時被放入編輯區的就是元件的分身：實體 (Instance)

Department of Electronics Engineering , National Chiao Tung University

製作 Symbol元件簡介相同的元件可能在影片中出現數次，因此，將重複使用的物件轉化為元件（ Symbol ），存至元件庫中（ Library ），不只可以節省檔案大小，亦可以加快檔案執行的速度

Department of Electronics Engineering , National Chiao Tung University

元件特色可讀入其他檔案的元件來使用。圖形轉成元件，才能做動畫。一個元件可以有許多實體。實體刪除，元件還在。元件刪除，實體也被刪除。實體改變整體的顏色、大小，形狀，不會影響元件。實體改變填色、線條顏色，元件及其他實體會跟著改變。

Department of Electronics Engineering , National Chiao Tung University

製作 Symbol元件簡介

Department of Electronics Engineering , National Chiao Tung University

製作 Symbol元件簡介使用元件庫

Department of Electronics Engineering , National Chiao Tung University

新增元件選擇右下角 > 新增元件

Department of Electronics Engineering , National Chiao Tung University

文字工具（ Text Tool ）輸入文字，點選工具列中的文字工具 A 即可輸入文字

Department of Electronics Engineering , National Chiao Tung University

文字工具（ Text Tool ）直接點選視窗又下方之快捷列 A 即可開啟字元屬性控制面版，利用此面版即可編輯文字的屬性。功能表中的 Text / Character 或 Windows / Panels / Character 亦可叫出此控制面版。

Department of Electronics Engineering , National Chiao Tung University

字幕顯示

Department of Electronics Engineering , National Chiao Tung University

文字工具（ Text Tool ）A Character ：設定文字的各項設定

-字型字體大小、文字間距、顏色、樣式、上下標

Paragraph ：段落對齊方式及縮排設定A Text Options ：選擇文字框的型態，及是否使用裝置字型

變更文字大小、字體、顏色

Department of Electronics Engineering , National Chiao Tung University

場景 (Scene)

一連續時間段落的動畫呈現，就如同一影片的某一段鏡頭。場景舞台是主畫面中央白色方塊區域，是Flash可見的動畫區域，即動畫播放的範圍。場景舞台的四周是工作區，可以編輯物件，但播放時並不會顯示。

Department of Electronics Engineering , National Chiao Tung University

舞台的尺寸點選主功能表的 [ 修改（ Modify ） ]→[影片 ]，出現[影片內容 ] 對話框，調整 [寬度 ]及 [ 高度 ]。

Department of Electronics Engineering , National Chiao Tung University

場景簡介電影或舞台劇需配合劇情有不同的幕來轉換，同樣的，一部 Flash動畫（ Movie ），也需有不同的幕來構成劇情，在一部 Flash動畫中的每一幕戲，可以就是一個場景（ Scene ）

Department of Electronics Engineering , National Chiao Tung University

場景簡介初學者剛開始時，可能整部動畫就只有一個場景，若是較長的影片，可能有好幾個場景

Flash 會從第一個場景依序往下撥放至下一個場景，一直播放到最後一個場景，便停止動畫，但是，播放的方式也可依設定，直接有某一個場景跳至另一個場景，以增加影片的互動性。

Department of Electronics Engineering , National Chiao Tung University

場景舞台的顯示比例點選主功能表的 [ 檢視 (View)]，再選擇 [放大顯示 ]、 [縮小顯示 ] 或 [放大鏡 ]的細部設定。

Department of Electronics Engineering , National Chiao Tung University

新增場景場景的新增插入 >場景。

Department of Electronics Engineering , National Chiao Tung University

場景的更名視窗 > 其他面板 >場景名稱上點兩下即可重新命名

Department of Electronics Engineering , National Chiao Tung University

場景的切換由下拉式選單，選擇所要編輯的場景名稱即可切換場景。

Department of Electronics Engineering , National Chiao Tung University

Modify / Scence 開啟 Scence面版，選取所要複製的場景名稱，接著按下 Scene面版的複製扭即可複製場景。（＋鈕是新增一個場景）

Department of Electronics Engineering , National Chiao Tung University

場景的調整影片的播放會先播放 [場景 5] ，接著再播放 [場景5] ，如果要調整播放的順序，可以直接由 Scene面版上，直接按滑鼠左鍵拖曳場景名稱，調整其上下的位置，即可改變場景播放的順序。

Department of Electronics Engineering , National Chiao Tung University

場景的刪除在 Scene面版，點選要刪除的場景名稱，再按刪除鈕即可。

Department of Electronics Engineering , National Chiao Tung University

圖層（ Layer ）圖層原理就像是一張張的透明塑膠片，我們將物件個別繪製在不同圖層中，因為疊在一起，所以看起來和繪製在同一平面上沒有什麼不同。

Department of Electronics Engineering , National Chiao Tung University

圖層（ Layer ）的使用新增與刪除圖層

Department of Electronics Engineering , National Chiao Tung University

圖層（ Layer ）的使用圖層的更名

-在圖層名稱上快按兩下即可更改圖層名稱。

Department of Electronics Engineering , National Chiao Tung University

圖層的設定-在圖層編輯區右上方有三個關於圖層顯示的控制按鈕。-可善用 [鎖定 / 解除鎖定 ]

- 避免編輯其他圖層-可善用 [ 顯示 /隱藏 ]

-去除背景或遮蔽物-可善用 [ 外框顯示 ]

-只顯示輪廓

顯示 /隱藏

鎖定 / 解除鎖定

外框顯示

Department of Electronics Engineering , National Chiao Tung University

調整圖層順序- 直接在圖層編輯區將圖層名稱拖曳調整上下位置，即可調整圖層順序，圖層的順序會改變物件顯示的方式，圖層在上的會遮住圖層在下的物件。

Department of Electronics Engineering , National Chiao Tung University

影格（ Frame ）設定關鍵影格（ Keyframe ） (F6)

-影格按右鍵 / Insert Keyframe

編修影格內容設定空白關鍵影格 (F7)

-影格按右鍵 / Insert Blank Keyframe

Department of Electronics Engineering , National Chiao Tung University

影格（ Frame ）

Department of Electronics Engineering , National Chiao Tung University

影格影格即是元件所呈現的地方，影格又可分為

-空白關鍵影格-關鍵影格-形狀漸變影格- 移動漸變影格-動畫失敗影格

Department of Electronics Engineering , National Chiao Tung University

空白關鍵影格影格中有空心圓圈空白關鍵影格其作用可清除前面關鍵影格中的畫面如果使用者在空白關鍵影格中加入元件，則將會自動改變性質為關鍵影格

Department of Electronics Engineering , National Chiao Tung University

關鍵影格影格中有實心圓在關鍵影格中用來放置動畫起始影像與結束影像。

Department of Electronics Engineering , National Chiao Tung University

形狀漸變影格前後必須為關鍵影格當中的元件必須要打散才行 (Ctrl+B)

以綠色箭頭代表形狀漸變動畫

Department of Electronics Engineering , National Chiao Tung University

移動漸變影格前後必須為關鍵影格當中的元件其位置有所移動以紫色箭頭代表移動漸變動畫

Department of Electronics Engineering , National Chiao Tung University

設定一般影格- Ctrl + 影格 (單選一個影格 )

刪除影格- Cut Frames vs. Remove Frames

清除關鍵影格- Clear Keyframes

複製與貼上影格- Copy / Paste Keyframes

Department of Electronics Engineering , National Chiao Tung University

在窗格中進行設計

Department of Electronics Engineering , National Chiao Tung University

音效處理flash可輸入的聲音格式

- 包含了 wav、 mp3等，-「有聲無影」的影片檔，包含了

avi、 mov、 asf、 wmv、 mpeg、 dv、 flv等。

Department of Electronics Engineering , National Chiao Tung University

聲音同步設定 特定

- 它會獨自播放音樂，與時間軸無關，即使動畫停止，聲音會繼續播完。當動畫播完，聲音尚未播完，影片會回到影格 1中，而聲音再次被啟動，你會聽到兩個相同聲音在播放。

開始- 與特定類似，但它會把聲音播完，才重新開始。但若是

啟動不同聲音，仍會聽到兩個不同聲音在播放。

Department of Electronics Engineering , National Chiao Tung University

聲音同步設定 停止

- 停止播放目前的聲音。

資料流- 聲音和動畫同步，聲音會隨著動畫的停止而停止。

Department of Electronics Engineering , National Chiao Tung University

存檔類型.fla—單純的 flash工作檔.swf—電影檔.exe—windows放映檔.html—網頁檔

Department of Electronics Engineering , National Chiao Tung University

輸出檔案檔案 >發佈設定

Department of Electronics Engineering , National Chiao Tung University

網頁整合出版方法一

-檔案 >發佈設定 >HTML頁面 >變更設定。- 切換至格式頁次。-勾選 HTML(.html)>發佈。

方法二-檔案 >發佈設定 >格式頁面 >勾選 Flash(.swf)－發佈。-進入網頁編輯軟體。-將檔案插入。

Department of Electronics Engineering , National Chiao Tung University

圖庫資源ZCOOL

- http://www.zcool.com.cn/

Department of Electronics Engineering , National Chiao Tung University

網站資源提供 Example 加上簡單的解說

- http://www.gazbming.com/

Department of Electronics Engineering , National Chiao Tung University

Case study:廣告製作

Department of Electronics Engineering , National Chiao Tung University

Step 1收集資源從 ZCOOL把圖檔載下來http://www.zcool.com.cn/gfx/ZMjQwODA=.html

Department of Electronics Engineering , National Chiao Tung University

Step 2 匯入使用 Adobe Illustrator CS3 開啟圖檔複製到 Flash CS3

做成元件

Department of Electronics Engineering , National Chiao Tung University

插入兩個圖層文字與底圖底圖放入圖片產生移動補間動畫

Department of Electronics Engineering , National Chiao Tung University

在文字中輸入想要的文字例如 Advertisement

配置濾鏡 >光暈即可產生高科技的效果

Department of Electronics Engineering , National Chiao Tung University

Case Study:MP3介面

Department of Electronics Engineering , National Chiao Tung University

Step1 蒐集元件先放入 MP3的基本按鈕

- fwd.png …

匯入上排 Tab的圖樣

Department of Electronics Engineering , National Chiao Tung University

Step 2 建立 Tab

選擇 > 矩形工具選擇圓角矩形之角度 Ex 42度

Department of Electronics Engineering , National Chiao Tung University

Step3漸層填色

Department of Electronics Engineering , National Chiao Tung University

Step4去除下半部框選下緣Delete選取區

Department of Electronics Engineering , National Chiao Tung University

Step5補齊下半部使用線條工具補齊下半部並改變邊框顏色與粗細

Department of Electronics Engineering , National Chiao Tung University

Step6 排列元件建議使用不同圖層放置不同元件

Department of Electronics Engineering , National Chiao Tung University

Step7 建立漸變動畫

Department of Electronics Engineering , National Chiao Tung University

完成圖

Department of Electronics Engineering , National Chiao Tung University

Case Study: 產品 Demo影片

Department of Electronics Engineering , National Chiao Tung University

滑鼠點擊動畫加入關鍵影格移動 游標建立移動補間加入 CLICK音效繪製圓形的點擊區域半透明圓圈

Department of Electronics Engineering , National Chiao Tung University

加入音樂加入音樂從元件庫放入時間軸

Department of Electronics Engineering , National Chiao Tung University

輸入產品介紹使用文字工具輸入產品介紹

Department of Electronics Engineering , National Chiao Tung University

Case Study 摩天輪

Department of Electronics Engineering , National Chiao Tung University

放入元件新增圖層放入 12 個球與摩天輪基座

Department of Electronics Engineering , National Chiao Tung University

將摩天輪的輪盤群組化

Department of Electronics Engineering , National Chiao Tung University

旋轉建立關鍵影個設定旋轉特效

Department of Electronics Engineering , National Chiao Tung University

Case Study 標語製作開啟 Swishmax V3

Department of Electronics Engineering , National Chiao Tung University

建立文字動化

Department of Electronics Engineering , National Chiao Tung University

新增文字新增文字

Department of Electronics Engineering , National Chiao Tung University

輸入文字

Department of Electronics Engineering , National Chiao Tung University

在時間軸上插入影格

Department of Electronics Engineering , National Chiao Tung University

選定特效

Department of Electronics Engineering , National Chiao Tung University

匯出 SWF

匯出 SWF可供 Flash CS3 匯入使用

Department of Electronics Engineering , National Chiao Tung University

結果預覽

Department of Electronics Engineering , National Chiao Tung University

把它拖曳到元件庫中

Department of Electronics Engineering , National Chiao Tung University

匯入元件庫