November 18, 2007

(1)

Flash 網頁設計與特效

November 18, 2007

(2)

Page 2 November 18, 2007

本章提要

•

9-1 物件的群組與打散

•

9-2 堆疊物件的調整與設定

•

9-3 對齊物件

•

9-4 元件的轉換效果

(3)

9-1 物件的群組與打散

•

在編輯物件時，我們可以將多個物件組成一個單一物件，形成群組物件（Group），方便進行選取、搬移、縮放等工作。

(4)

建立群組物件

•

有些時候因為繪製的方便，我們會分別繪製物件的各個部份，完成後再將這些部份群組起來，之後在搬移、複製時才不會丟三落四；或是原本安排好位置的兩個物件，也可以透過群組的方式，

固定彼此的關係，不用因為移動位置而重新調整。

•

接下來讓我們來學習將物件建立成群組物件的方式，請先將物件選取起來，再執行『修改/群組』

命令（或者按下 [Ctrl] + [G] 鍵）

(5)

建立群組物件

(6)

編輯群組物件

•

在建立群組物件之後，你可以針對這個群組物件做移動、縮放、旋轉，以及翻轉等編輯動作，但若想要編輯群組物件中的個別物件，那就必須進入群組物件的編輯狀態了。

(7)

編輯群組物件

1.

選取群組物件，然後在群組上雙按，或是執行

『編輯/編輯選取項目』命令。

(8)

編輯群組物件

2.

進入群組物件的編輯狀態後，只能編輯該群組物件所包含的物件，群組物件以外的物件則無法編輯。

(9)

編輯群組物件

•

在群組編輯模式中，若要修改物件的內容，請再雙按要修改的物件，即可進入該物件的編輯環境：

(10)

取消物件群組

•

要取消已建立的群組物件，請先選取群組物件，

然後執行『修改/解散群組』命令（或按下 [Ctrl]

+ [Shift] + [G] 鍵）來解散群組，將物件還原至原本的狀態。

(11)

打散

•

Flash 的打散（Break Apart）功能，可以將群組物件、點陣圖、文字物件，以及元件轉換成填色形狀，方便我們進行更多的編輯或變形。其操作方式是將上述的物件選取起來後，執行『修改/打散』命令（或是直接按 [Ctrl] + [B] 鍵）。

(12)

打散與解散群組

元件

物件群組實體群組

實體

物件

填色圖形

從元件庫拉進舞台

群組化

打散、解散群組

打散

打散、解散群組

修改 Æ 轉換成元件

修改 Æ 組合物件

(13)

9-4 堆疊物件的調整與設定

•

堆疊物件

•

鎖定排列

(14)

堆疊物件

•

在同一個圖層中，Flash 會根據物件製作的順序來堆疊物件，愈新製作的物件會放置在堆疊的愈上方，而物件的堆疊順序將決定物件重疊時出現的樣子。

•

如果要調整物件的順序，可以執行『修改/排列』

命令中的項目來調整：

(15)

堆疊物件

•

在此特別提醒您，圖像物件（即繪製的填色形狀及線修）並沒有堆疊的順序關係，且永遠位在編輯區域的最底層。

•

若要調整順序，只有將圖像物件建立成群組物件，

或是建立成元件才可以變更。

(16)

鎖定排列

•

若在同一圖層中有多個堆疊物件，而你只想編輯其中幾個物件，為了避免誤動到其它物件，你可以將不需要編輯的物件選取起來，再執行『修改/

排列/鎖定』命令，這樣被選取的物件順序就會被鎖定，將無法再被選取或編輯。待編輯完成，要解除物件的鎖定狀態，請執行『修改/排列/解除全部鎖定』命令。

(17)

9-5 對齊物件

•

Flash 的對齊物件功能，包括將所有的物件對齊、

等距排列以及縮放成相同的尺寸。請先選取物件

（至少 2 個物件才能進行對齊），然後執行『視窗/對齊』命令（或是按下 [Ctrl] + [K] 鍵），開啟對齊面板來做設定

(18)

對齊

•

以物件的中心為基準進行對齊，只要選取物件再按下對齊鈕即可看出效果。

•

對齊的選項包括對齊左邊緣、對齊水平中心、對齊右邊緣、對齊上邊緣、對齊垂直中心、對齊下邊緣，我們以對齊垂直中心為例：

(19)

分散

•

分散可使物件等距排列，分散選項包括平均分散在上邊緣、

以垂直中心平均分散、平均分散在下邊緣、平均分散在左邊緣、以水平中心平均分散、平均分散在右邊緣。例如選擇平均分散在左邊緣，表示每個物件左邊緣至其它物件左邊緣的距離將會相等：

(20)

符合大小

•

若要將物件縮放成相同的大小，則可利用符合大小的功能來達成。選項包括符合寬度、符合高度、

符合寬度和高度，以符合高度為例，選取 3 個物件再按下此鈕時，蛋糕的高度將會與果汁一樣高。

(21)

間距

•

設定間距也是在排列物件時經常要使用的功能，

選項包括均分垂直間距、均分水平間距，以後者為例，選取物件後按下均分水平間距鈕，3 個物件的間距即可均等。

(22)

對齊舞台

•

按下對齊舞台鈕再進行對齊時，會以舞台的大小做為物件排列、調整的範圍；未按下此鈕，則表示要以全部物件的整體範圍做為對齊的基準。

(23)

9-6 元件的轉換效果

•

常使用影像處理軟體的人，一定都知道將兩張圖片重疊在一起時，可透過軟體提供的混合（或稱為合併）模式，變化出特殊的色彩效果。

•

現在 Flash 8（Professional 版）也提供這樣的功能，只要將兩個元件重疊，即可透過轉換效果

（Blend modes）的設定，套用出以兩個元件顏色為基準的混合效果。接下來我們就為您說明

Flash Professional 8 新增的轉換效果功能。

(24)

認識轉換效果

•

轉換效果是 Flash Professional 8 版本（Basic 版本無此功能）提供的新功能，其效果將決定上層元件如何與下層元件（或背景）中的色彩進行混合，在設定時請先選擇上層元件，再設定混合方式，即可轉換出不同的色彩效果。

(25)

認識轉換效果

1.

我們已將元件庫中的彩虹方塊元件拉曳至舞台上，再把花朵元件拉曳至彩虹方塊上方。為了看到上、下物件的轉換效果，及花朵與白色背景的轉換效果，我們將兩個物件錯開放置。

(26)

認識轉換效果

2.

選取舞台上的花朵，再由屬性面板中的轉換效果設定要套用的模式，即可由舞台上看出效果。

(27)

認識轉換效果

•

若要恢復到尚未套用轉換效果的狀態，請選取上層元件再由屬性面板將轉換效果設定為一般。

•

如果想要套用其它轉換效果，請直接選取其它轉換效果，Flash 將會自動移除上一個效果，直接套用新的轉換效果。

(28)

轉換效果的使用限制

•

轉換效果除了只出現在 Professional 版本外，其使用的對象也有些限制。此功能只能套用在影片片段元件及按鈕上，因此要進行轉換前必須先將圖像轉換為影片片段元件或按鈕，否則此功能將無法選用。

•

此外，一般來說點陣圖或是向量圖都適用，但由於點陣圖的色彩通常較豐富，效果會比向量圖好。

(29)

Flash 提供的轉換效果

•

大致了解轉換效果的作用及使用限制後，我們再

來看看 Flash 提供的 14 種轉換效果，分別是一般、

圖層、變暗、相乘、變亮、螢幕、重疊、強光、

增加、相減、差異化、負片效果、Alpha 及擦除，

預設為一般表示不套用任何轉換效果。

(30)

Flash 提供的轉換效果

•

圖層（Layer）：使上、下元件的顏色互不影響，

與一般效果類似。

(31)

Flash 提供的轉換效果

•

變暗（Darken）：當下層顏色比上層暗時，就保留；反之，若下層比上層亮，將會被取代成暗的顏色。

(32)

Flash 提供的轉換效果

•

相乘（Multiply）：使上、下層元件的色彩產生加深作用，顏色會變暗。

(33)

Flash 提供的轉換效果

•

變亮（Lighten）：與變暗效果相反。比較之後亮的顏色會被保留，暗的顏色將被亮的顏色取代。

(34)

Flash 提供的轉換效果

•

螢幕（Screen）：與相乘效果相反。使上、下層元件的色彩產生加亮作用，顏色會變亮。

(35)

Flash 提供的轉換效果

•

重疊（Overlay）：將上、下層元件的色彩做混合，使暗部更暗，亮部更亮。

(36)

Flash 提供的轉換效果

•

強光（Hard light）：將上、下層色彩做混合，

當上層顏色的灰色超過 50% 會變暗；反之會使顏色變亮。

(37)

Flash 提供的轉換效果

•

增加（Add）：依上層元件來增加亮度，愈接近白色會愈亮。

(38)

Flash 提供的轉換效果

•

相減（Subtract）：與增加效果相反。上層元件愈接近黑色，顏色會愈暗。

(39)

Flash 提供的轉換效果

•

差異化（Difference）：將上、下層元件的色彩做混合，轉換的顏色將根據不同程度做反相處理。

(40)

Flash 提供的轉換效果

•

負片效果（Invert）：反轉下層元件的基本顏色。

(41)

Flash 提供的轉換效果

•

Alpha、擦除（Erase）：套用 Alpha 上層元件 會變透明；套用擦除則會移除上層元件所有顏色。

(42)

著作權所有 © 旗標出版股份有限公司

Flash 網頁設計與特效

November 18, 2007

(43)

本章提要

•

10-1 Flash 濾鏡

•

10-2 濾鏡應用－飛碟

•

10-3 製作由遠到近的移動效果

•

10-4 左右迅速移動

•

10-5 實做練習－忽明忽暗的光線

(44)

10-1 Flash 濾鏡

•

Flash 8 Professional 版讓人趨之若騖的一大主因，

就是新增了濾鏡 (Filters) 功能，此功能可以透過現成的運算方式，將特效套用在我們繪製好的元件 (或文字) 上，只要改變設定值就可以呈現截然不同的效果。

•

若是配合移動補間動畫，此濾鏡即可變身為動畫；

更進階的應用，則是透過 ActionScript 來控制或產生套用濾鏡的範圍，亦或將濾鏡應用在視訊影片中。

(45)

濾鏡的使用限制

•

濾鏡功能除了出現在 Flash 8 的 Professional 版本之後，套用的對象也有所限制，只有以下 3 種物件可套用濾鏡功能：

▫

影片片段元件

▫

按鈕元件

▫

文字物件 (包含靜態文字、動態文字及輸入文字)

•

此外，套用了濾鏡的動畫，發佈時必須指定 Flash Player 8 (或以上)的版本，用來播放的

(46)

濾鏡的使用限制

(47)

濾鏡綜覽

•

Flash 8 提供了 7 種不同的濾鏡特效，分別是投影 (Drop Shadow)、模糊 (Blur)、光暈 (Glow)、

斜角 (Bevel)、漸層光暈 (Gradient Glow)、漸層斜角 (Gradient Bevel)、調整顏色 (Adjust Color)。

(48)

濾鏡綜覽

1.

請先切換至濾鏡面板 (或執行

『視窗/屬性/濾鏡』命令，開啟濾鏡面板)，再按下編輯區中要套用濾鏡的元件，此例我們選擇橘色圓球。

(49)

濾鏡綜覽

2.

按下濾鏡面板的鈕，由彈出的選單設定想

要套用的效果，例如選擇斜角，設定完數值後，

即會套用在選取的元件上。

(50)

濾鏡綜覽

•

以下分別以文字呈現各種濾鏡的效果

(51)

濾鏡綜覽

(52)

套用、移除濾鏡的相關操作

•

套用及調整多個濾鏡：套用濾鏡之後，若再選擇其它濾鏡，效果將會累加在選取的元件上。若有套用多個濾鏡，還可以直接拉曳濾鏡名稱來調整順序。

(53)

套用、移除濾鏡的相關操作

•

停用濾鏡：如果因為套用了濾鏡，導致看不清楚元件的狀態，你可以按下濾鏡名稱前的圖示，

顯示成圖示時，表示停用該濾鏡 (並沒有移除哦！)，再按一下會顯示成即可重新啟用濾鏡效果。

(54)

套用、移除濾鏡的相關操作

•

移除濾鏡：選擇已套用的濾鏡名稱再按下鈕，

可移除套用的濾鏡。如果想要移除全部的濾鏡再重新設定，可按下鈕選擇『全部移除』命令：

(55)

套用、移除濾鏡的相關操作

•

自訂濾鏡：當你設定出滿意的濾鏡效果，還想套用在其它元件上時，可按下鈕執行『預設效果/另存新檔』命令，將濾鏡效果儲存起來，再迅速套用在其它元件上

(56)

套用、移除濾鏡的相關操作

•

儲存之後濾鏡效果會顯示在選單中，可立即套用在其它物件。

(57)

10-2 濾鏡應用－飛碟

•

畫面上的飛碟迅速移動，且行徑變化莫測，就像我們所知的不明飛行物體一樣。

•

本練習主要是利用移動補間動畫，並套用模糊濾鏡來模擬飛碟的快速飛行。

(58)

重點說明

•

開新檔案時，動畫預設的影格速率為 12 fps，

但在此練習中 12 fps 的速度感覺太慢，所以我們要加快動畫的播放速度至 30 fps。

•

動畫中我們將改變元件的大小來製造飛碟向前、

向後飛行的效果。

•

當飛碟移動位置時，將應用模糊濾鏡來模擬快速移動的感覺，為了使飛碟的移動感覺順暢，在套用濾鏡的關鍵影格中，亦會加上移動補間動畫。

(59)

重點說明

•

飛碟的飛行路徑

(60)

10-3 製作由遠到近的移動效果

1.

選取飛碟圖層的影格 1，再將元件庫中的飛碟元件拉曳到舞台中央，並開啟變形面板，我們要將飛碟縮小至 20% 的大小。

(61)

製作由遠到近的移動效果

2.

接著切換至濾鏡面板，然後點選舞台中的飛碟，

再按下鈕選擇模糊濾鏡

(62)

濾鏡品質的差異

•

每個濾鏡都可以設定品質選項，選項共有高、中、

低可選擇，請依自己對動畫的品質要求來進行設定。以模糊為例，若仔細觀察邊緣漸層，品質高的顏色會比品質低的平滑，但若不是播放速度很慢或非常精緻的動畫，其實播放中並不容易看出差異。

•

無論選擇何種品質，請把握一個原則，如果濾鏡套用在補間動畫上，兩個關鍵影格最好設定相同的品質，否則播放時容易產生不流暢的現象。

(63)

製作由遠到近的移動效果

3.

在飛碟圖層的影格 3 新增一個關鍵影格，並選取舞台上的飛碟，同樣設定模糊濾鏡

(64)

製作由遠到近的移動效果

4.

在飛碟圖層的影格 1 上按右鈕，執行『建立移動補間動畫』命令，使濾鏡效果由影格 1 的幾乎完全隱形，到影格 3 的模糊程度。

5.

請在飛碟圖層的影格 7 建立關鍵影格，由變形面板將飛碟調至 150%，設定完成後在影格 3 上按右鈕，執行『建立移動畫間動畫』命令，

即可營造出飛碟由遠方飛近的感覺。

(65)

製作由遠到近的移動效果

(66)

10-4 左右迅速移動

1.

請在飛碟圖層的影格 15 新增關鍵影格，其內容會延續影格 7 的內容，此處我們不做任何的變化，

這是因為整個動畫的節奏很快，

如果全都設定移動效果，反而容易讓人眼花撩亂。

(67)

左右迅速移動

•

在影格 17 新增關鍵影格，並將飛碟移至 x：143、

y：132 位置，接著由變形面板設定影格 17 的飛碟大小為 115%。

(68)

左右迅速移動

3.

切換至濾鏡面板，再選取舞台上的飛碟

(69)

左右迅速移動

•

接下來在影格 19 新增關鍵影格，此影格的飛碟位置在 x：54、y：92，大小則設定為 60%，但不套用任何濾鏡。

(70)

左右迅速移動

5.

請分別在影格 15 及 17 上按右鈕，執行『建立移動補間動畫』命令，就可以看出飛碟由舞台中央迅速移動至左後方的效果了。

•

進行到此我們完成了飛碟從遠到近，及由左至右的移動效果，接下來您可以自己安排飛碟的行徑路線。

(71)

左右迅速移動

•

範例中關鍵影格的設定值列於下表

(72)

左右迅速移動

(73)

左右迅速移動

•

再提醒您一個小技巧，由於在播放動畫時，預設會不停的重複播放，為了讓飛碟在畫面上消失一會兒，我們在影格 55 的位置加入一個空白關鍵影格，並持續到影格 65，如此一來在重複播放時，才會感覺飛碟忽隱忽現

(74)

10-5 實做練習－忽明忽暗的光線

•

忽明忽暗的光線（exercise/light.fla）