Flash教學講義

講師：李燕秋信箱：hyonith@gmail.com

第一章 繪圖工具箱的應用

認識繪圖工具箱箭頭工具

細部選取工具

直線工具

套索工具

鋼筆工具

文字工具

橢圓形工具

四邊形工具

鉛筆工具筆刷工具

墨水瓶工具油漆桶工具

滴管工具 橡皮擦工具

搬移工具 檢視工具

線條顏色

填色顏色

預設顏色

沒更顏色

對調顏色

直線

縮放

平滑曲線

旋轉

貼齊格線

繪圖物件的特性

• 同顏色的物件會連接在一起，不同顏色的物件會被剪裁掉

• 若要選取不同位置的曲線,只要按著Shift鍵不放,在要選取的曲線上按一下滑鼠左鍵即可.

• 若不希望圖形被交疊成的物件分割或合併,

可使用[修改]-[結合群組],就不會被影響.

動動手－畫出一個小女孩範例：

小女孩.fla

1.先利用[橢圓形工具],畫出一個臉形(開啟筆畫面版來設定粗細及顏色)

2.利用[箭頭工具]調整一下線條的形狀.再方將臉形上方選取並刪除.

3.利用[鉛筆工具]畫出小女孩的頭髮(先選擇平滑曲線讓頭髮線條滑順)

4.再利用鉛筆及橢圓形工具將臉的五官畫出.

5.利用直線畫出小女孩身體,四邊形工具畫出裙子.

6.若太大可以用縮放工具調整.

7.畫出左腳後利用變形將左腳複製再做水平翻轉.

8.最後利用填色工具將小女孩全身著上顏色.(可利用空隙大小來調整填

入的區域)

9.著色好了後再利用筆刷工具畫上小女孩的腮紅及衣服圖樣

10.最重要的是要存檔哦..flash裡的檔案格式為 *.fla

11.大功告成

墨水瓶、油漆桶與滴管工具• 墨水瓶：修改線條的樣式。

• 油漆桶：填入顏色或修改填色的樣式。

• 滴管：擷取特定色塊中的顏色及樣式。

• 橡皮擦：擦拭物件的功能。

– 一般擦拭：全部擦除。

– 擦除填色：只刪除填色的區域，其他不會受影響。

– 擦除線段：只刪除物件線條，填色區不會受影響。

– 擦除選取的填色：只刪除被選取的填色部份。

– 擦除內部：將封閉區域內的填色擦除。

小技巧1. 如何選取物件?－套索工具

2. 如何改變物件的形狀?－箭頭工具

3. 如何自訂線段的樣式？－筆畫面版（自訂）

4. 如何設定繪畫物件的線段模式？－鉛筆模式

5. 如何在更小缺口的物件內填滿色彩?－空隙大小

6. 如何繪製圓角矩形的物件？－四邊形工具（矩形）

7. 如何選擇筆刷的繪畫模式？－筆刷模式

8. 如何對齊物件？－對齊面版

第二章 文字與圖形的編修

文字物件的編輯• 文字的輸入－標籤與區塊

• 設定文字屬性

• 鋼筆工具－直線及貝茲曲線

• 細部選取工具－選取繪圖物內的路徑控制點做物件的變形〃

• 點陣圖的處理

– 將讀入的圖片做為填色顏色打散：〔修改〕／〔打散〕 or Ctrl+B

– 去背：利用魔術棒

• 物件的縮放與旋轉－〔修改〕／〔變形〕

– 若不滿意變形，可利用〔修改〕／〔變形〕／〔移除變形〕

動動手－彩粧文字

• 用文字工具先將文字鍵入及選好字型

• 將文字打散－〔修改〕／〔打散〕

• 將要當背景的圖讀入〔檔案〕／〔讀入〕

• 再將圖打散，選擇滴管工具點選圖再至文字上點選，即可上色〃

• 再利用墨水工具選擇顏色填入外框線〃

範例：彩粧文字.fla

動動手－特效文字

• 先將文字打好後打散

• 用箭頭工具從文字中間選取一個區域分成上下二部，下半部用著填色工具填入別的顏色〃

• 再一一更改顏色，再將個別文字選取後組成群組

• 將個別文字縮放即可

範例：特效文字.fla

第三章 認識元件與動畫製作

元件、實體與圖庫的關係

• 「元件」（Symbols）、「實體」（Instance）與「圖庫」（Library）之間更著非常密切的關係，Flash可製作出三種不同用途的〔元件〕角色如圖形、影片片段、按鈕等，當您需要時再由〔圖庫〕中拖曳至編輯區中使用〃這時編輯區即產生了另一個角色稱為〔實體〕，可視為元件的分身〃

• 〔元件〕最大的優點是可以大幅縮減檔案的大小〃尤其是當您要不斷重覆使用到圖庫中的元件項目時，更為顯著〃

• 可將經常使用到的物件建立成〔元件〕存放於〔圖庫〕，再將其插入到編輯區中製作出數個分身〔實體〕〃由元件所產生的實體再多也不會增加檔案佔用空間〃

元件（Symbols）的特質元件可區分為三種性質：

圖像（Graphic）：存放單獨的圖像檔，當影格播放結束時就

會停止動作〃

按鈕（Button）：能夠感應一般情況、滑鼠經過時

、按下時等事件，並產生您所設定效果按鈕元件〃

影片片段（Movie Clip）：自成一格的獨立〔小電影〕，本身

就是一個動畫角色亦可播放聲音，可不斷播放而不受影格的

影響，讓您的影片呈現出豐富的變化〃

建立元件的方法方法更二：

– 使用現更的物件建立成元件

– 使用元件編輯模式

使用現更的物件建立成元件

1. 在編輯區畫好一個圖形物件或文字物件，並將物件選取

2. 〔插入〕／〔轉換為元件〕，出現元件內容對話方塊

3. 輸入元件名稱以及設定性質，按下確定

使用元件編輯模式

1. 〔插入〕／〔新增元件〕，開啟元件內容對

話方塊，輸入元件名稱以及設定性質，完成

後按確定〃

2. 自動進入元件編輯視窗，元件中可以包含圖

形物件、群組物件、文字、點陣圖等，甚至

可放入其它的元件再加以編輯

3. 編輯完成後按左上角的場景1返回場景.

備註：建立元件時，若不知如何選擇性質時?

1. 將靜態的物件建立成元件時選擇：圖像

2. 需應用到時間軸來控制元件的動畫播放時：圖像

3. 元件的動畫播放時不想受限於時間軸的控制時選擇：影片片段

4. 圖像性質無法播放聲音，若要在元件中加上音效時：影片片段或按鈕

5. 元件若要與滑鼠操作互動時：按鈕

動動手－建立元件

將小女孩.fla的各部位轉成圖像元件– 頭

– 左手

– 右手

– 身體

– 裙子

– 腳（一邊就好）

用箭頭工具選取部位找〔插入〕／〔轉換成元件〕

範例：小女孩.fla

認識圖庫（Library）每個Flash都擁更一個自己的圖庫，包含七個不同性質的元件

圖示 類型 圖示 類型

圖像元件Graphic Symbols 影片元件Movie Clips

按鈕元件Buttons 點陣圖元件Bitmaps

聲音元件Sounds 電影檔Video

智慧型影片片段Smart

Clips

圖庫分成二種

•一般圖庫：Flash本身現成的圖庫

•專屬圖庫：於每一個影片檔中自行建立的

修改實體

利用效果面版來修改實體的設定

– 亮度

– 色調

– Alpha（透明度）

– 進階

修改實體對於元件本身並無影響，但若元件

修改則實體也會跟著修改

動動手－修改實體

• 新增一個圖像元件，名為圓球

• 在元件編輯區中畫一個圓球

• 返回場景，至〔修改〕／〔影片〕，將背景色設為黑色

• 拖曳數個圓球實體至場景中

• 利用效果面版／色調修改圓球顏色

• 完成

範例：漸變文字.fla

認識時間軸TimeLine相當於整個動畫的剪接師，掌握著整個動畫進行的過

程〃將不同的圖像與元件依照動件發生的前後順序，分別加入時間軸中，再安排他們出場的時間、動作…等〃Flsah即會依據時間軸的設定逐一播放，構成一部連續動畫作品〃

燈箱功能鈕

時間軸尺標

影格Frame

影格指標

每秒播放的影格數

時間軸狀態列若沒更時間軸面版，請按〔檢視〕

／〔時間軸〕，在實際播放時，播

放的時間與預估時間不盡相同，因

為本身電腦硬體配備也更關係〃目前影格指標於第20格

播放速率為12fps

播放到目前影格指標的時間長度為1.6s

•目前影格：目前影格指標所在位置

•影格播放速率：

此動畫每秒播放的速率，Flash預設的動畫每秒播放的速率為

12fps，數值越大播放的速度越快、數值越小播放的速度越慢，

若速率太低則會明顯感受到播放的畫面會停頓一下

•經過時間：由第一影格到目前影格指標所在影格播放所需秒數

基礎動畫製作－形狀漸變1. 先在編輯區中畫一個圓形

2. 指標到第20個影格中點一下，按右鍵找插入關鍵影格

3. 將圓形刪除，再畫上一個方形

4. 到第一個影格中點一下，找影格面版／補間動畫（形狀）

5. 會出現綠色長條箭頭表示成功

6. 按下Ctrl+Enter即可預覽播放

參考形狀漸變.fla

基礎動畫製作－移動漸變1. 先在編輯區中輸入一個文字

2. 指標到第20個影格中點一下，按右鍵找插入關鍵影格

3. 將文字搬移開到另一個新的位置

4. 到第一個影格中點一下，找影格面版／補間動畫（移動）

5. 會出現

6. 灰色長條箭頭表示成功

7. 按下Ctrl+Enter即可預覽播放

參考移動漸變.fla

動動手－圓球漸變字

• 開啟之前做過的漸變文字.fla

• 先將圓形打散，再到第25格影格插入關鍵影格

• 到第25格，將圓形刪除，輸入新年快樂，並將文字打散

• 到第1格影格找影格面板設定形狀漸變

• 預覽即可

範例：漸變文字.fla

動動手－新年快樂

• 開啟原始檔中的新年快樂原始檔.fla

• 建立四個圖層，分別為新、年、快、樂

• 將四個元件拉到各自的圖層中並對齊

• 在新圖層影格5，新增關鍵影格，再選擇影格1，按〔視窗〕／〔面版〕／〔變形〕放大，並將透明度(Alpha)設成20%

• 將新物件拉到編輯區中心點，再做移動漸變

• 其他三個字照以上步驟完成

範例：新年快樂.fla

第四章 動作指令超入門

ActionScript的基礎介紹

• 為了提昇動畫與使用者

之間的互動性，Flash5

提供了200多種語法，

讓使用者來製作〃

• 動作面板的組成：指令

區、編輯區及參數區〃

動動手－ActionScript練習

• 開啟原始檔／章魚原始檔.fla

• 在第1及20個影格中快按加入stop()

• 在第1個影格中點選小章魚，在物件動件中加入play()

• 在第20個影格中點選小章魚，在物件動件中加入play()

• Ctrl+Enter預覽

• 成功

範例：章魚.fla

第五章 導引線製作

動動手－導引線製作• 開啟Love原始檔.fla

• 圖層1命名為邊框並將邊框.jpg移到編輯區中，在影格20新增影格

• 新增一圖層為聖誕卡，亦將聖誕卡元件擺好• 新增一圖層為花群，將花元件移出並複製數個，更改大小

及顏色• 新增一圖層為標題，將心心相印元件擺好，再複製多個改

變大小及旋轉，並輸入文字• 新增一圖庫為boy，將boy.jpg擺好並打散，到影格20新增

關鍵影格，打上文字，刪除boy，製作形狀漸變，並加上stop()

• 新增一圖層為蝴蝶，將蝴蝶擺好，按一下增加導引線圖層後用鉛筆繪製蝴蝶飛的路徑並將蝴蝶移玉導引線左端點

• 在蝴蝶圖層影格20設為關鍵影格，將蝴蝶移到右端點並產生移動漸變

• 再新增一圖層為音樂，在聲音面版選擇FB060.WAV，重複為3

範例：Love.fla

動動手-製作隱形按鈕• 開啟雪花飛舞原始檔.fla.背景色設為深藍色

• 圖層1更名為按鈕

• 新增按鈕元件,名為雪花按鈕

• 在反應區插入空白關鍵影格,利用繪圖工具畫出一個矩形或是圓形

• 新增影片片元件,名為雪花影片片段,圖層改為雪花,在影格2設為關鍵影格,拖曳雪花到圖層內,並於影格20插入影格.

• 選取雪花圖層按增加導引線圖層,在影格2設成關鍵影格,並用鉛筆工具繪製雪花飄落路徑.

• 在雪花圖層影格20設為關鍵影格,設定2到20產生移動漸變

• 新增圖層為隱藏按鈕,在影格1拖曳雪花按鈕至編輯區中擺放,並設定stop()

• 按一下雪花按鈕實體設定rollover(滑過)後play

• 回到場景1拖曳雪花影片片段至編輯區中並複製多個擺滿編輯區後即可

範例：雪花飛舞.fla

第六章 Mask遮罩特效

動動手-遮罩的使用

• 開啟照片播放原始檔.fla

• 開啟合照元件進入編輯區

• 在影格20插入關鍵影格

• 新增一圖層名為播放路徑,並在影格1畫一小塊方塊

• 在影格20插入關鍵影格並利用繪圖工具的矩形將照片畫個黑框整個覆蓋,並製作形狀漸變

• 點選播放路徑圖層按右鍵遮色片

• 返回場景1將合照元件拖曳擺放即可

範例：照片播放.fla

動動手-自我介紹• 開啟about原始檔.fla

• 將背景設為淡藍色,中間畫一個深藍色矩形

• 在上方用較淡的顏色再畫一條

製作動態標題字

• 輸入自我介紹文字並打散,線條設白色後轉換為影片片段元件

• 逐字設成群組

• 在影格15及30各設為關鍵影格,在影格15處將文字放大或是旋轉

• 預覽

範例：about.fla

放大鏡特效製作• 新增影片片段元件命名為放大鏡

• 從圖庫中的小女孩資料夾的女孩影片片段拖至編輯區中,圖層更名為小女孩,於影格15設為關鍵影格,利用資訊面版設定x=320,y=40,寬=130,

高=170

• 於影格60設為關鍵影格, x=-900,y=40,並於影格15設定移動漸變

• 新增一圖層名鏡,並於影格1拖曳鏡元件至編輯區x=0,y=0,於影格15設為關鍵影格

• 到影格1將透明度設為0,並產生移動漸變

• 新增一圖層命名為大女孩,於影格15設為關鍵影格並將女孩拖曳至此x=320,y=75,寬=270,高=350

• 於影格60設為關鍵影格x=-900,y=75,並於影格15設定移動漸變

• 新增一圖層命名為遮罩,於影格15設為關鍵影格,用橢圓工具在鏡面上畫一個圓(大小相同)

• 在遮罩圖層上按右鍵找遮色片

• 預覽

自我介紹選項• 新增一圖層命名為自我介紹,並將圖庫中的

內容成份、製造過程、製造日期及保存期限四個圖檔拖曳到編輯區中.

• 分別選取各個圖檔,排列好並單個轉換成按鈕元件

• 於轉換的按鈕元件上快按進入編輯,至反應區設成關鍵影格,滑鼠經過也設成關鍵影格,

並將介紹1拖曳至適當位置

• 其他三個按鈕元件照上述步驟進行.

• Ctrl+Enter預覽

第七章 文字捲動面板與聲音處理

影音合一的面板

• 開啟生活小品原始檔.fla

• 影片設定800*400.背景為藍色

• 將圖層1更名為背景,擺放葉元件並調整大小

及透明度(Alpha),並將標題字擺好.

• 利用複製將葉複製三個重疊擺放並在中間

畫一個矩形刷淡,預備放文字的區域

• 開啟聲音面版選擇聲音及重複2

範例：生活小品.fla

隨時更新的動態文字• 設定純文字檔,在每個文字檔的開頭打入

readme=(所更要放入的文字檔都要打)

• 新增一圖層,更名為動態文字框,用文字工具在矩形左上角按一下,將文字選項面版設定為動態文字,類型為多行,變數為readme，並核選html及 文字換行.

• 按著此動態文字框右下角的圓形控制點不放,拖曳至適合大小再放開

• 按動態文字框圖層影格1,設定動作,內容為loadVariables在url中輸入top.txt再按stop

全自動捲軸按鈕設定• 新增一圖層名為控制按鈕,由圖庫拖曳Downscroll

及Upscroll元件擺在動態文字框的右方

• 新增一圖層名為右側介面,由圖庫拖曳黑白1.黑白

2.黑白3.黑白4,四個按鈕元件擺於編輯區右側

• 設定讀入文字檔.先選取黑白1,叫出動作面版,輸入

loadVaribable,url輸入A.txt,即可把此文字檔讀入.

接著在第一行on(release)中核選按下項目,取消核

選之前的放開項目

• 其他三個依此類推各設定.

• 預覽即可

如何編修聲音效果

• 在聲音面版中的編輯即可以進入編輯封裝中編修聲音

• 利用六種特效方法可以做聲音特效處理

• 直接在音波上點選出現控點,即可讓聲音變大或變小