第 8 章 匯入圖形與 編輯物件.

Presentation on theme: "第 8 章 匯入圖形與 編輯物件."— Presentation transcript:

1 第 8 章 匯入圖形與 編輯物件

2 本章提要 8-1 點陣圖的匯入與應用 8-2 匯入向量圖 8-3 物件的群組與打散 8-4 堆疊物件的調整與設定 8-5 對齊物件
8-6 元件的轉換效果

3 8-1 點陣圖的匯入與應用 匯入點陣圖 點陣圖的應用

4 匯入點陣圖 在 Flash 檔案中匯入點陣圖, 可選擇要將檔案匯入舞台, 或是匯入元件庫中。我們以前者為例進行說明。
請開啟一個空白檔案, 再執行『檔案/匯入/匯入至舞台』命令, 在匯入交談窗中選擇要匯入的圖檔, 例如 jpg：

5 匯入點陣圖

6 匯入點陣圖

7 匯入點陣圖 所有匯入的點陣圖都會自動儲存在該動畫檔的元件庫中, 若你不想讓點陣圖直接匯入到舞台中 (例如需要一次匯入數個點陣圖時), 那麼可以執行『檔案/匯入/匯入至元件庫』命令, 只將點陣圖儲存到元件庫, 方便日後編輯使用。或者你也可以執行『檔案/匯入/開啟外部元件庫』命令, 直接開啟其它檔案的元件庫來使用。

8 點陣圖的應用 將點陣圖轉成向量圖 以點陣圖做為填色顏色 修改點陣圖的填色形狀及填色效果

9 將點陣圖轉成向量圖 如果你想要運用點陣圖, 又非常在乎檔案體積時, 你可以考慮將點陣圖轉成向量圖, 這樣不僅可以縮小檔案體積, 還可以在 Flash 中任意修改造型或進行變換顏色等操作。 我們以剛才 匯入舞台上 的 jpg 來進行說明：

10 將點陣圖轉成向量圖

11 將點陣圖轉成向量圖 轉換之後若只想保留圓球的部份, 可選取藍色的背景再按下 [Delete] 鍵, 即可輕鬆完成去背的工作。以下我們示範不同數值的效果供您參考：

12 以點陣圖做為填色顏色 在第 3 章我們介紹過筆刷工具 (Brush Tool) 的使用方法, 現在我們來看看結合筆刷工具跟點陣圖, 能創造出什麼效果。請開啟練習檔 fla, 其中我們已匯入了一張點陣圖, 您可以直接由元件庫拉曳出來使用。

13 以點陣圖做為填色顏色 我們已用繪圖工具畫出填色形狀, 並將點陣圖置入編輯區域中, 請選取點陣圖。

14 以點陣圖做為填色顏色 執行『修改/打散』命令將點陣圖打散, 按下滴管工具 (Eyedropper Tool) , 當滑鼠指標變成滴管狀 後, 在點陣圖上按一下。

15 以點陣圖做為填色顏色 滑鼠指標會變成油漆桶工具 (Paint Bucket) 的指標形狀 , 而且工具面板的填色顏色也會顯示點陣圖圖案。此時按一下填色形狀, 即可在填色形狀中填上點陣圖的花樣：

16 以點陣圖做為填色顏色

17 修改點陣圖的填色形狀及填色效果 即使是填入點陣圖的填色形狀, 也一樣可以修改造型、或執行變形效果：

18 修改點陣圖的填色形狀及填色效果 我們在第 4 章介紹過漸層填色的修改方式, 而點陣圖的填色也可以在事後修改。請按下填色變形工具 (Fill Transform Tool) , 再按一下填入點陣圖填色的形狀。

19 修改點陣圖的填色形狀及填色效果

20 修改點陣圖的填色形狀及填色效果 點陣圖在執行『修改/打散』命令之後, 會變成了一個填色形狀, 而原先的點陣圖則變成這個形狀的材質填色, 所以一樣可以進行修改造型、執行變形效果等編輯效果。

21 使用點陣圖的原則 為免動畫檔案的體積變得太大： 請不要在動畫中運用太多的點陣圖檔。 請不要在動畫中運用大尺寸的點陣圖檔。
一般在螢幕上觀看的圖片, 使用 72 dpi 即可。

22 使用點陣圖的原則 可先用影像處理軟體 (如 Photoshop、PhotoImpact 等) 將點陣圖的尺寸調整到需要的大小, 以縮小圖檔的體積, 再匯入 Flash 中使用。因為即使在 Flash 中將點陣圖縮小, 也無法縮小圖檔的體積。

23 8-2 匯入向量圖 Flash 不僅可以匯入點陣圖也可以匯入向量圖, 尤其當你已經有習慣使用的向量繪圖軟體時, 就可以藉由匯入的方式, 在 Flash 使用其它向量軟體繪製好的圖片。

24 匯入向量圖 例如你可以在 Illustrator、FreeHand、CorelDRAW 等向量軟體繪製連續影格動畫的分解動作, 只要存檔時命名為連續編號的檔名, 如︰001、002、 , Flash 便可以一次匯入所有連續編號的圖檔, 並自動將圖檔插入連續的影格中 (點陣圖也可以利用此技巧進行匯入)。

25 Flash 支援的向量圖檔格式 如果想在其它向量繪圖軟體製作圖檔再匯入 Flash , 那麼必須要存成 Flash 支援的向量圖格式。
Flash 目前支援的向量圖格式包括︰emf、wmf、pdf、FreeHand 的 fh 檔、Adobe Illustrator 的 ai, 以及 AutoCAD 的 dxf ... 等等。

26 匯入向量圖 我們以匯入 Illustrator 繪製的 7 個連續動作為例, 說明匯入向量圖的操作步驟。請開啟一個空白文件檔, 跟著以下步驟進行練習。 選取要匯入連續圖檔之圖層的影格 (例如圖層 1 的影格 1), 再執行『檔案/匯入/匯入至舞台』命令開啟匯入交談窗, 選取連續圖檔的第 1 個檔案, 按下開啟鈕。接著在彈出的訊息窗中按下是鈕, 確定要匯入連續的圖檔。

27 匯入向量圖

28 匯入向量圖

29 匯入向量圖 部份圖檔格式還可以進一步選擇匯入的方式。例如我們匯入 Illustrator 的 .ai 格式, 即可在匯入選項交談窗進一步設定匯入的細項： 每個檔案視為一個頁面, 在此選擇將一個頁面轉換為一個場景或一個關鍵影格

30 匯入向量圖 設定將檔案中的圖層轉換為： 圖層：將原始檔案中的圖層, 一一轉換至 Flash 圖層中 關鍵影格：將一個圖層轉換為一個關鍵影格
平面化：將所有的圖層視為同一平面, 即不分圖層。選此項會自動以 “頁面#1” 做為影格標籤,這將使動畫匯出時產生影格標籤重複的錯誤, 請手動刪除或更改影格標籤的內容

31 匯入向量圖 設定要匯入哪些頁面, 選擇全部會自動匯入連續檔名的檔案, 或是指定要匯入的檔案範圍 是否要匯入隱藏的圖層
是否要保留文字屬性, 使文字在 Flash 中仍可編輯 將檔案點陣化, 並可於下方欄位設定解析度

32 匯入向量圖 我們要將每個 .ai 檔轉換成一個關鍵影格, 所設定轉換頁面為：關鍵影格；而每個檔案內只有一個圖層, 因此設定轉換圖層為：關鍵影格；匯入頁面則選擇全部, 取消所有的選項, 設定完成後按下確定鈕, .ai 檔就會依續匯入關鍵影格中。

33 匯入向量圖

34 匯入向量圖 在匯入檔案之後, 你可能會發現影格 2 出現了一個空白關鍵影格 (影格中有一個空心圓, 且底色為白色), 這樣會使得動畫播放不順暢。 此處請您先在影格 2 的地方按下滑鼠右鈕執行『移除影格』命令, 即可解決這個問題。有關影格的說明及操作請參考第 10 章。

35 匯入向量圖

36 匯入向量圖的好處 由於 Flash 本身是向量圖形編輯軟體, 所以匯入向量圖可以在 Flash 中修改、編輯。至於使用點陣圖, 由於受限於 Flash 無專屬的編輯功能, 所以修改的範圍有限, 而且點陣圖還會增加檔案體積, 也不適合過度使用。 如果要在其它繪圖軟體中使用 Flash 繪製的分解圖檔, 還是建議以向量圖為佳。有關在 Flash 匯出圖檔格式的說明, 請參考 節的說明。

37 8-3 物件的群組與打散 在編輯物件時, 我們可以將多個物件組成一個單一物件, 形成群組物件 (Group), 方便進行選取、搬移、縮放等工作。

38 建立群組物件 有些時候因為繪製的方便, 我們會分別繪製物件的各個部份, 完成後再將這些部份群組起來, 之後在搬移、複製時才不會丟三落四；或是原本安排好位置的兩個物件, 也可以透過群組的方式, 固定彼此的關係, 不用因為移動位置而重新調整。接下來讓我們來學習將物件建立成群組物件的方式, 請先將物件選取起來, 再執行『修改/群組』命令 (或者按下 [Ctrl] + [G] 鍵)：

39 建立群組物件

40 建立群組物件

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

42 編輯群組物件 選取群組物件, 然後在群組上雙按, 或是執行『編輯/編輯選取項目』命令。

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

44 編輯群組物件 在此例中由於我們已將填色形狀群組起來, 因此若要修改物件的內容, 請再雙按要修改的物件, 即可進入該物件的編輯環境：

45 編輯群組物件

46 取消物件群組 要取消已建立的群組物件, 請先選取群組物件, 然後執行『修改/解散群組』命令 (或按下 [Ctrl] + [Shift] + [G] 鍵) 來解散群組, 將物件還原至原本的狀態。

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

48 打散 以下我們再詳細為您說明打散的意義, 並與取消群組做個簡單的比較。 『打散』命令與取消群組一樣, 都可以取消群組物件的群組狀態。
『打散』命令可以將點陣圖轉換成填色形狀的填色內容, 取消群組則否。 『打散』命令可以切斷元件與實體的連結關係, 並與元件庫分離, 還原成建立元件前的物件, 取消群組則無此功能。

49 8-4 堆疊物件的調整與設定 堆疊物件 鎖定排列

50 堆疊物件 在同一個圖層中, Flash 會根據物件製作的順序來堆疊物件, 愈新製作的物件會放置在堆疊的愈上方, 而物件的堆疊順序將決定物件重疊時出現的樣子。 如果要調整物件的順序, 可以執行『修改/排列』命令中的項目來調整：

51 堆疊物件

52 堆疊物件 在此特別提醒您, 圖像物件 (即繪製的填色形狀及線修) 並沒有堆疊的順序關係, 且永遠位在編輯區域的最底層。
若要調整順序, 只有將圖像物件建立成群組物件, 或是建立成元件才可以變更。

53 鎖定排列 若在同一圖層中有多個堆疊物件, 而你只想編輯其中幾個物件, 為了避免誤動到其它物件, 你可以將不需要編輯的物件選取起來, 再執行『修改/排列/鎖定』命令, 這樣被選取的物件順序就會被鎖定, 將無法再被選取或編輯。待編輯完成, 要解除物件的鎖定狀態, 請執行『修改/排列/解除全部鎖定』命令。

54 8-5 對齊物件 Flash 的對齊物件功能, 包括將所有的物件對齊、等距排列以及縮放成相同的尺寸。請先選取物件 (至少 2 個物件才能進行對齊), 然後執行『視窗/對齊』命令 (或是按下 [Ctrl] + [K] 鍵) , 開啟對齊面板來做設定：

55 對齊物件 接下來請開啟練習檔 fla, 我們實際來練習看看。

56 對齊 以物件的中心為基準進行對齊, 只要選取物件再按下對齊鈕即可看出效果。
對齊的選項包括對齊左邊緣、對齊水平中心、對齊右邊緣、對齊上邊緣、對齊垂直中心、對齊下邊緣 , 我們以對齊垂直中心為例：

57 對齊

58 分散 分散可使物件等距排列, 分散選項包括平均分散在上邊緣、以垂直中心平均分散、平均分散在下邊緣、平均分散在左邊緣、以水平中心平均分散、平均分散在右邊緣。例如選擇平均分散在左邊緣 , 表示每個物件左邊緣至其它物件左邊緣的距離將會相等：

59 分散

60 符合大小 若要將物件縮放成相同的大小, 則可利用符合大小的功能來達成。選項包括符合寬度、符合高度、符合寬度和高度, 以符合高度為例, 選取 3 個物件再按下此鈕時, 蛋糕的高度將會與果汁一樣高。

61 符合大小

62 間距 設定間距也是在排列物件時經常要使用的功能, 選項包括均分垂直間距、均分水平間距, 以後者為例, 選取物件後按下均分水平間距鈕, 3 個物件的間距即可均等。

63 間距

64 對齊舞台 按下對齊舞台鈕再進行對齊時, 會以舞台的大小做為物件排列、調整的範圍；未按下此鈕, 則表示要以全部物件的整體範圍做為對齊的基準。
我們以對齊上邊緣為例, 來看看按下此鈕的差異, 其它對齊、分散及間距的效果, 就請您自行試試看！

65 對齊舞台

66 8-6 元件的轉換效果 常使用影像處理軟體的人, 一定都知道將兩張圖片重疊在一起時, 可透過軟體提供的混合 (或稱為合併) 模式, 變化出特殊的色彩效果。 現在 Flash 8 (Professional 版) 也提供這樣的功能, 只要將兩個元件重疊, 即可透過轉換效果 (Blend modes) 的設定, 套用出以兩個元件顏色為基準的混合效果。接下來我們就為您說明 Flash Professional 8 新增的轉換效果功能。

67 認識轉換效果 轉換效果是 Flash Professional 8 版本 (Basic 版本無此功能) 提供的新功能, 其效果將決定上層元件如何與下層元件 (或背景) 中的色彩進行混合, 在設定時請先選擇上層元件, 再設定混合方式, 即可轉換出不同的色彩效果。我們以練習檔案 fla 來實際操作看看：

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

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

70 認識轉換效果

71 認識轉換效果 若要恢復到尚未套用轉換效果的狀態, 請選取上層元件再由屬性面板將轉換效果設定為一般。
如果想要套用其它轉換效果, 請直接選取其它轉換效果, Flash 將會自動移除上一個效果, 直接套用新的轉換效果。

72 轉換效果的使用限制 轉換效果除了只出現在 Professional 版本外, 其使用的對象也有些限制。此功能只能套用在影片片段元件及按鈕上, 因此要進行轉換前必須先將圖像轉換為影片片段元件或按鈕, 否則此功能將無法選用。 此外, 一般來說點陣圖或是向量圖都適用, 但由於點陣圖的色彩通常較豐富, 效果會比向量圖好。

73 Flash 提供的轉換效果 大致了解轉換效果的作用及使用限制後, 我們再來看看 Flash 提供的 14 種轉換效果, 分別是一般、圖層、變暗、相乘、變亮、螢幕、重疊、強光、增加、相減、差異化、負片效果、Alpha 及擦除, 預設為一般表示不套用任何轉換效果。 你可以開啟練習檔 fla, 再參考以下的說明, 試試其它各種轉換效果。

74 Flash 提供的轉換效果 圖層 (Layer)：使上、下元件的顏色互不影響, 與一般效果類似。

75 Flash 提供的轉換效果 變暗 (Darken)：當下層顏色比上層暗時, 就保留；反之, 若下層比上層亮, 將會被取代成暗的顏色。

76 Flash 提供的轉換效果 相乘 (Multiply)：使上、下層元件的色彩產生加深作用, 顏色會變暗。

77 Flash 提供的轉換效果 變亮 (Lighten)：與變暗效果相反。比較之後亮的顏色會被保留, 暗的顏色將被亮的顏色取代。

78 Flash 提供的轉換效果 螢幕 (Screen)：與相乘效果相反。使上、下層元件的色彩產生加亮作用, 顏色會變亮。

79 Flash 提供的轉換效果 重疊 (Overlay)：將上、下層元件的色彩做混合, 使暗部更暗, 亮部更亮。

80 Flash 提供的轉換效果 強光 (Hard light)：將上、下層色彩做混合, 當上層顏色的灰色超過 50% 會變暗；反之會使顏色變亮。

81 Flash 提供的轉換效果 增加 (Add)：依上層元件來增加亮度, 愈接近白色會愈亮。

82 Flash 提供的轉換效果 相減 (Subtract)：與增加效果相反。上層元件愈接近黑色, 顏色會愈暗。

83 Flash 提供的轉換效果 差異化 (Difference)：將上、下層元件的色彩做混合, 轉換的顏色將根據不同程度做反相處理。

84 Flash 提供的轉換效果 負片效果 (Invert)：反轉下層元件的基本顏色。

85 Flash 提供的轉換效果 Alpha、擦除 (Erase)：套用 Alpha 上層元件會變透明；套用擦除則會移除上層元件所有顏色。