第 6 章 元件、實體與 元件庫.

Presentation on theme: "第 6 章 元件、實體與 元件庫."— Presentation transcript:

1 第 6 章 元件、實體與 元件庫

2 本章提要 6-1 認識元件與實體 6-2 認識元件庫與內建元件庫 6-3 元件的類型 6-4 建立元件 6-5 元件編輯的環境
6-6 元件庫的操作 6-7 實體屬性設定

3 6-1 認識元件與實體 在 Flash 製作動畫時, 我們可以將會重複使用到的物件, 如圖像物件、群組物件、文字物件等製作成元件 (Symbol), 存放在動畫文件的元件庫 (Library) 中, 當你需要使用該元件時, 便可自元件庫將它拉曳出來使用。此時, 被放入編輯區中進行編輯的, 便是該元件的實體 (Instance)。

4 認識元件與實體 例如你可以將花朵的圖片轉換成元件, 並重複拉曳此元件至舞台中, 用這些複製出來的實體來建立一個花園。你還可以經由改變顏色屬性、大小等, 來變化這些實體的外觀, 省卻一一繪製的功夫, 可說是方便又實用。

5 認識元件與實體

6 認識元件與實體 在編輯區中的每個實體都是獨立個體, 你可任意編輯、更改它的屬性而不會影響到相同元件的其它實體。但如果進入元件的編輯模式進行修改, 則所有的實體也會同時更新。

7 6-2 認識元件庫與內建元件庫 Flash 的元件庫分兩種, 一種是每個動畫專屬的元件庫 (Library)；另一種則是內建元件庫 (Common Libraries), 兩者皆可透過『視窗』功能表來開啟, 以下即為您說明。

8 元件庫 元件庫面板 (Library) 是存放元件、點陣圖、聲音、視訊、組件等物件的工具箱。所有元件一經建立, 就會存放在元件庫中。執行『檔案/匯入』命令, 可自外部匯入點陣圖、聲音、視訊等物件, 這些物件也會儲存在元件庫。因此, 動畫元件的新增、複製、編輯等操作, 也都是依賴元件庫來進行與管理。

9 元件庫 請開啟練習檔 fla, 然後執行『視窗/元件庫』命令, 開啟元件庫面板來看看：

10 內建元件庫 內建元件庫 (Common Libraries) 則存放了 Flash 提供的元件, 讓使用者自由使用。Flash 內建的元件庫共有 3 種, 執行『視窗/內建元件庫』命令, 可看到 Flash 提供的元件類別：

11 內建元件庫

12 內建元件庫 這 3 種內建元件庫的差異： 按鈕 (Buttons)：提供各種具有按鈕功能的元件。
類別 (Classes)：提供連接資料庫或其它 Web Services 所使用的元件。 課程互動 (Learning Interactions)：提供現成的線上互動物件, 主要用於教學方面。

13 內建元件庫 內建元件庫中元件的屬性是無法修改的, 但將其拉曳到舞台上後, 會自動在文件的元件庫中複製一份, 複製到元件庫的元件就和你自行建立的一樣, 可以自由編輯應用。

14 6-3 元件的類型 Flash 的元件包含圖像元件 (Graphic Symbol)、按鈕元件 (Button Symbol)、影片片段元件 (Movie Clip Symbol)、字體元件 (Font) 與組件 (Components) 5 種類型, 我們一一說明如下。

15 圖像元件 圖像元件 (Graphic Symbol) 可以是一般靜態的圖檔, 也可以是一段動畫。
圖像元件最大的特色, 是必須隨著動畫的主時間軸來播放。舉例來說, 若你建立了一個含有 10 格影格的圖像元件, 將其放置於 20 格影格的主動畫中, 動畫將重複播放兩次圖像元件。請開啟練習檔 fla, 並執行『檔案/元件庫』命令 (或按下 [F11] 鍵) 開啟元件庫面板：

16 圖像元件

17 圖像元件 請執行『視窗/工具列/控制器』命令開啟控制器工具列, 再按下播放鈕, 就會看到動畫播放 2 次後停止。這是因為圖像元件與主動畫共用一個時間軸, 因此當圖像元件放置在具 20 格影格的主動畫時, 將會播放 2 次圖像元件後停止。

18 圖像元件

19 圖像元件 如果將 10 格影格的元件放置在只有 1 格影格的主動畫中, 主動畫將會在播放圖像元件的第 1 格影格後結束, 我們利用練習檔 fla 來試看看。請選取圖層 1 的影格 1, 再由元件庫將圖像元件動畫拉曳至舞台上, 你會發現動畫只顯示圖像元件的第 1 格畫面, 且控制器的按鈕無法作用。

20 圖像元件

21 按鈕元件 按鈕元件 (Button Symbol) 可製作按鈕功能的動畫, 並透過 ActionScript 或行為指令 (Behavior), 與瀏覽者的滑鼠或鍵盤事件產生互動。每個按鈕元件都是由 4 格影格組成, 分別代表按鈕的 4 種狀態 (後述)。此外, 按鈕元件內可以包含影片片段元件和圖像元件。 請開啟練習檔 fla：

22 按鈕元件

23 按鈕元件

24 按鈕元件 我們在場景 1 看到的按鈕呈現立體及光暈效果, 在按鈕元件的編輯模式卻只看到平面圖形, 這是因為我們在主動畫的按鈕上套用了濾鏡效果, 關於套用濾鏡的說明, 請參考第 14 章。

25 影片片段元件 影片片段元件 (Movie Clip Symbol) 本身即是一段獨立的動畫, 我們可以利用 ActionScript 和行為指令 (Behavior) 來控制影片片段元件, 且影片片段元件擁有自己獨立的時間軸, 不受主動畫影格數的影響, 甚至當你透過控制器停止主動畫的播放後, 影片片段元件仍可繼續播放。

26 影片片段元件 要預覽影片片段元件, 必須先將動畫發佈成 .swf 檔 (按下 [Ctrl] + [Enter] 鍵) 才看得到。
此外, 影片片段元件可以包含圖片、聲音或另一個元件, 甚至可以設定滑鼠的動作事件, 或當做按鈕來使用, 可說是應用範圍最廣的一種元件。

27 影片片段元件

28 字體元件 字體元件 (Font) 可以單純做靜態的文字顯示, 也可以成為與瀏覽者溝通用的輸入欄位, 或做為動態顯示之用。

29 組件 組件 (Components) 是另一種影片片段元件, 你可以使用 Flash 內建的組件, 或直接下載別人做好的組件, 甚至是自已開發組件來使用。使用組件最大的好處是可以透過組件參數的設定, 將組件直接應用在動畫中, 而不需自行撰寫ActionScript。

30 6-4 建立元件 建立元件 (Symbol) 的方式有 2 種, 你可以從無到有的建立一個新元件；或是選取現成的圖像物件、群組物件、點陣圖或文字物件, 再按下 [F8] 鍵將其轉換成元件。使用這兩種方式建立元件的不同點在於, 將現成的物件轉換成元件時, 該元件不僅會儲存在元件庫中, 還會自動將舞台上的原物件變成實體；若是建立一個全新的元件, 此元件不會出現在舞台上, 而是直接儲存在元件庫內。

31 建立元件 建立元件的大致步驟如下：

32 建立一個新元件 請開啟一個空白文件, 再執行『插入/新增元件』命令 (或按 [Ctrl] + [F8] 鍵), 在建立新元件交談窗中替元件命名後, 決定元件的類型, 然後進入元件編輯模式, 編輯這個新增的空白元件。

33 建立一個新元件

34 建立一個新元件

35 將現成物件轉換成元件 你可以將既有的圖像、群組、文字、視訊或匯入的圖片建立成元件, 請選取要轉換成元件的物件, 然後執行『視窗/元件庫』命令開啟元件庫面板：

36 將現成物件轉換成元件

37 將現成物件轉換成元件

38 將現成物件轉換成元件

39 將現成物件轉換成元件 使用現成物件所建立的元件, 通常是只有 1 格影格的靜態元件, 你可以雙按舞台上的實體進入元件編輯模式進行其它編輯。當你編輯元件時, 所有在舞台上的實體也會隨著改變。

40 元件的註冊點 當我們將圖形轉換成元件時, 可設定元件的註冊點, 註冊點是以十字準線 “ ” 來表示, 其代表的意義就是元件的原點 (x,y=0,0), 作用則是讓我們使用 ActioinScript 來控制該元件時, 能正確找到元件的座標；若要製作導引線動畫, 啟動貼齊功能後, 也必須使註冊點吸附到移動路徑上, 元件才能隨著導引線移動。

41 元件的註冊點

42 元件的註冊點

43 元件的註冊點 在一般的情況下, 如果是執行『插入/新增元件』命令, 從無到有繪製一個新元件, 我們會以註冊點為中心來繪製元件, 因此元件的註冊點常與圖形的中心點重疊,呈 狀；若是將繪製好的圖形轉換成元件, 在轉換成元件交談窗中預設的註冊點會在左上角, 因此轉換後的元件註冊點會顯示在左上角,也可以自行設定於中央。

44 元件的註冊點 無論是用哪一種方式建立元件, 我們都可以在建立成元件後, 再切換至元件的編輯模式下視需要來調整註冊點的位置。編輯元件的相關操作, 請參考 6-5 節。

45 檢視實體在舞台上的座標位置 利用資訊面板可得知目前實體在舞台中的座標位置, 這對於日後製作精確的動畫效果, 或是想以 ActionScript 控制實體時非常有幫助。請執行『檔案/資訊』命令, 再點選舞台中要檢視的實體：

46 檢視實體在舞台上的座標位置

47 檢視實體在舞台上的座標位置

48 檢視實體在舞台上的座標位置 如果點按左上角, 再於 X、Y 欄中分別輸入 0、0, 那麼實體將會自動移至舞台的原點 (左上角, 即 X,Y= 0,0)。或許目前您還不能體會資訊面板的作用為何, 在此您只要先有個概念, 待日後需要取得這些資訊時, 再來翻閱此處, 就能有所體會囉！

49 元件的中心點 利用選取工具點選舞台上的實體, 會看到實體中央有一個空心圓 , 這就是中心點。在變形、旋轉物件時, 預設會以元件的中心點為基準來進行變形或旋轉, 此時中心點亦稱為變形點。 若要更改變形點的位置, 可先按下自由變形工具, 當指標移至中心點附近呈 狀, 將變形點拉曳至目的位置, 即可改變圖形旋轉的基準點。

50 元件的中心點

51 元件的中心點 若要將實體的中心點 (變形點) 與註冊點設定在一起, 請先按下自由變形工具, 將指標移至中心點 (變形點) 上, 當指標呈 狀時雙按中心點 (變形點), 實體的中心點 (變形點) 就會移至註冊點上, 並顯示為 (註冊點 + 中心點)。

52 正確選擇元件類型 為了讓你明確判斷在建立元件時, 該選擇什麼元件類型, 我們將元件的性質表列如下, 供你做個參考：

53 正確選擇元件類型 由於影片片段元件的支援度較圖像元件高, 而按鈕元件大多只能應用在按鈕類功能上, 故一般都建議使用影片片段類型, 以增加動畫修改的彈性。如果建立時選擇了不適用的元件類型, 可在元件庫內該元件的名稱上按右鈕執行『類型』命令, 從中選取適當的元件類型。

54 6-5 元件編輯的環境 將圖形轉換為元件後, 想要編輯元件的內容, 必須切換到該元件的編輯模式下才能進行, 元件的編輯模式有下列 3 種, 以下分別為您介紹。

55 開啟元件編輯環境的方法 依便利性高低依序排列： 雙按元件庫面板中元件名稱的圖示；或選取該元件, 再雙按預覽窗格。
直接按下動畫文件視窗右上角的編輯元件鈕 , 由其中選擇要編輯的元件。

56 開啟元件編輯環境的方法 在編輯區中的實體上按右鈕, 執行的『編輯』命令。
選取編輯區中的實體, 執行『編輯/編輯元件』命令 (或按 [Ctrl] + [E] 鍵)。

57 開啟元件編輯環境的方法

58 修改註冊點的位置 在元件的編輯環境下會顯示十字準線的註冊點, 預設在畫面的中央位置。若是想要改變元件註冊點的位置, 請選取全部的圖形, 再以註冊點為中心, 將圖形拉曳至目的位置, 例如將圖形拉曳至註冊點的右下角, 表示該元件的註冊點將移至左上角：

59 修改註冊點的位置

60 在實體位置上編輯 若想直接在舞台中編輯該元件, 可選擇在實體位置上編輯, 以便和舞台中其它物件進行比對。請直接在舞台上雙按實體, 或按右鈕執行『在原地編輯』命令, 進入此編輯狀態：

61 在實體位置上編輯 在此編輯環境下, 按下場景 1 或在舞台的空白處雙按, 可回到場景編輯模式。

62 在新視窗編輯 如果想開啟另一個獨立的文件視窗來編輯元件, 省去在場景和元件間切換的手續, 請在實體上按滑鼠右鈕, 執行『在新視窗中編輯』命令, 開啟一個新視窗來編輯元件。由於此編輯模式是以元件的註冊點做為編輯區域的原點 (最左上角), 您可能需要利用手掌工具來拉曳畫面, 才能看到完整的元件。

63 在新視窗編輯

64 繪圖物件與元件的差異 我們在第 3 章曾介紹過繪圖的技巧, 為了使繪製的圖形不受其它物件的影響, 在繪製時可以啟動繪圖物件功能, 或是將圖形群組在一起。你可能也注意到了, 繪圖物件與元件有些許相似之處, 例如選取時都會顯示藍色框線, 雙按可進入編輯狀態...等, 為了讓您的觀念更清楚, 我們再做個詳細的比較。

65 繪圖物件與元件的差異 最大的差異在於元件將儲存在元件庫中, 繪圖物件則不會出現在元件庫內, 且繪圖物件只是靜態的圖片, 非動態效果。
元件和繪圖物件在選取時雖都會顯示藍色選取框線, 但元件會顯示註冊點, 繪圖物件則沒有註冊點。

66 繪圖物件與元件的差異 若是在繪圖物件或元件上雙按, 皆可進入編輯環境, 此時可由圖示來辨別目前物件的型態。
繪圖物件的圖示為 ；元件會顯示成 (影片片段)、 (圖像元件) 、 (按鈕)。

67 繪圖物件與元件的差異 想要編輯繪圖物件時, 只要選取舞台上的物件 (不需雙按進入編輯狀態), 即可變更物件的填色、框線、外形...等；編輯元件時則一定要進入元件的編輯狀態, 其編輯的動作才會有作用。 以上我們只是列出幾個方便您區分兩者的技巧, 在使用的原則上, 若是動畫中經常要出現的物件、需要設定為動畫 (或按鈕)、想設定 ActionScript ...等, 還是將其轉換成元件會比較方便。

68 6-6 元件庫的操作 每個 Flash 動畫檔都有一個專屬的元件庫 (Library), 元件庫的目的在於讓我們檢視、儲存動畫中的項目 (元件、聲音、影片、圖檔...等), 並進行管理的工作。

69 使用元件庫製作動畫 要在動畫中使用元件庫內的元件, 相信您已經相當熟悉了, 只要開啟元件庫面板, 將其中的項目拉曳到編輯區, 即可使用該元件：

70 使用元件庫製作動畫

71 共用元件庫 若是想在 A 動畫 (06-10.fla) 中使用 B 動畫 (06-11.fla) 元件庫中的元件, 可同時開啟 A、B 兩個動畫檔案, 再由元件庫面板切換至要使用的檔案元件庫, 例如目前在 B 動畫檔案, 要使用 A 檔案元件庫中的元件：

72 共用元件庫

73 共用元件庫 使用其它檔案元件庫中的元件後, 亦會自動複製一份在目前使用中的檔案元件庫。你也可以利用『複製』和『貼上』命令, 將其它檔案元件庫中的元件複製到目前檔案的元件庫中。 除了與目前已開啟的檔案共用元件庫外, 也可以僅開啟檔案的元件庫來利用, 而不須開啟動畫檔案。請執行『檔案/匯入/共用元件庫』命令, 選取要使用的檔案元件庫後, 即可使用該檔案元件庫內的元件。

74 「元件庫」面板的基本操作 除了上述功能外, 元件庫面板還有很多功能, 我們一一說明如下︰

75 「元件庫」面板的基本操作 鎖定目前的元件庫鈕：在與其它檔案共用元件庫時, 按下此鈕可固定要選用的檔案元件庫。
新元件庫面板鈕：按下此鈕, 可將目前的檔案元件庫獨立開啟成另一個元件庫面板, 讓您方便在不同的元件庫面板中複製要使用的元件。 項目列示窗︰列出元件庫面板內所有的項目, 每個項目前方均有其代表圖示。

76 「元件庫」面板的基本操作 新增元件鈕：按此鈕可建立新的元件, 功能與執行『插入/新增元件』命令相同。
新增資料夾鈕︰按此鈕可在元件庫面板中建立資料夾。你可以建立各類資料夾, 然後把同類的項目拉曳置入同一資料夾中, 讓項目的管理更有條不紊。

77 「元件庫」面板的基本操作

78 「元件庫」面板的基本操作 替換排列順序鈕︰按此鈕可切換遞增或遞減排列, 代表目前排列方式是遞增排列, 則是遞減排列。
屬性鈕︰更改選取項目的屬性。選取元件後按下此鈕, 可開啟元件屬性交談窗, 讓您重新選擇元件的類型。 刪除鈕：刪除目前選取的項目或資料夾 (資料夾內的項目亦會一併刪除)。 寬/窄元件庫檢視鈕：切換元件庫的顯示模式, 預設為窄元件庫檢視模式。

79 6-7 實體屬性設定 介紹過元件以及元件庫面板的操作之後, 接著我們再來討論元件的分身－實體的相關事項。

80 屬性變更 所有實體的屬性都可以在屬性面板中調整, 屬性面板會依實體的類型而顯示對應的設定項目。

81 圖像元件的實體屬性 請先在編輯區中選取要調整屬性的實體, 再執行『視窗/屬性』命令 (也可以按 [Ctrl] + [F3] 鍵) 開啟屬性面板︰

82 圖像元件的實體屬性

83 按鈕元件的實體屬性

84 影片片段元件的實體屬性

85 各類元件的共同實體屬性 替換︰把目前選取的實體換成另一個元件的實體。

86 各類元件的共同實體屬性 寬、高：設定實體的寬/高度。
X 、Y：設定實體的X 、Y 軸位置。X 軸是距離舞台左邊框的距離；Y 軸是距離舞台上邊框的距離。 顏色：可用來設定實體的色彩、亮度、透明度...等。

87 各類元件的共同實體屬性 我們以一個實際的應用來說明。請開啟練習檔 fla, 並執行『視窗/元件庫』命令 (或按 [F11] 鍵) 開啟元件庫面板, 其中我們儲存了一個花朵的圖像元件, 請將它拉曳到舞台中適當的位置, 可多拉曳幾個實體, 營造出花園的畫面：

88 各類元件的共同實體屬性

89 各類元件的共同實體屬性 接著我們要改變舞台中花朵實體的顏色, 請選取舞台中的任一花朵實體, 再開啟屬性面板, 如下圖進行設定：

90 各類元件的共同實體屬性 在屬性面板調整色調時, 會呈現原來顏色加上目前填色的結果。當著色量的數值愈低, 愈能顯現原來的色彩 (此例為紅色)；著色量高, 表示將偏重色調所設定的顏色；若設定 100%, 將完全捨棄元件原來的顏色, 顯示目前色調所選擇的色彩。 若要回復原來的顏色, 請將顏色欄位設定為無。

91 各類元件的共同實體屬性 要能更自由地改變舞台上實體顏色或外觀線條, 可以選取舞台上的實體, 再執行『修改/打散』命令 (或按 [Ctrl] + [B] 鍵), 將實體轉換為一般圖像, 既能自由填色、編輯, 又不影響其它實體及元件。 被打散的實體將不再是實體, 也不具有元件的特性, 例如無法設定 ActionScript 來控制、修改元件庫面板中的元件時, 亦無法修改已打散的實體。

92 各類元件的共同實體屬性

93 各類元件的共同實體屬性 因此, 建議您在確定該實體不需要保有元件的特性, 再進行打散的步驟, 萬一後悔將實體打散了, 也不用太擔心, 別忘了元件庫面板裡, 還儲存了一份可以隨時取用的元件本尊哦！