Download
1 / 93
930 likes | 1.11k Views
第 6 章. 元件、實體與 元件庫. 本章提要. 6-1 認識元件與實體 6-2 認識元件庫與內建元件庫 6-3 元件的類型 6-4 建立元件 6-5 元件編輯的環境 6-6 元件庫的操作 6-7 實體屬性設定. 6-1 認識元件與實體.
E N D
第 6 章 元件、實體與元件庫
本章提要 • 6-1 認識元件與實體 • 6-2 認識元件庫與內建元件庫 • 6-3 元件的類型 • 6-4 建立元件 • 6-5 元件編輯的環境 • 6-6 元件庫的操作 • 6-7 實體屬性設定
6-1 認識元件與實體 • 在 Flash 製作動畫時, 我們可以將會重複使用到的物件, 如圖像物件、群組物件、文字物件等製作成元件(Symbol), 存放在動畫文件的元件庫(Library) 中, 當你需要使用該元件時, 便可自元件庫將它拉曳出來使用。此時, 被放入編輯區中進行編輯的, 便是該元件的實體(Instance)。
認識元件與實體 • 例如你可以將花朵的圖片轉換成元件, 並重複拉曳此元件至舞台中, 用這些複製出來的實體來建立一個花園。你還可以經由改變顏色屬性、大小等, 來變化這些實體的外觀, 省卻一一繪製的功夫, 可說是方便又實用。
認識元件與實體 • 在編輯區中的每個實體都是獨立個體, 你可任意編輯、更改它的屬性而不會影響到相同元件的其它實體。但如果進入元件的編輯模式進行修改, 則所有的實體也會同時更新。
6-2 認識元件庫與內建元件庫 • Flash 的元件庫分兩種, 一種是每個動畫專屬的元件庫(Library)；另一種則是內建元件庫(Common Libraries), 兩者皆可透過『視窗』功能表來開啟, 以下即為您說明。
元件庫 • 元件庫面板 (Library) 是存放元件、點陣圖、聲音、視訊、組件等物件的工具箱。所有元件一經建立, 就會存放在元件庫中。執行『檔案/匯入』命令, 可自外部匯入點陣圖、聲音、視訊等物件, 這些物件也會儲存在元件庫。因此, 動畫元件的新增、複製、編輯等操作, 也都是依賴元件庫來進行與管理。
元件庫 • 請開啟練習檔 06-01.fla, 然後執行『視窗/元件庫』命令, 開啟元件庫面板來看看：
內建元件庫 • 內建元件庫(Common Libraries) 則存放了 Flash 提供的元件, 讓使用者自由使用。Flash 內建的元件庫共有 3 種, 執行『視窗/內建元件庫』命令, 可看到 Flash 提供的元件類別：
內建元件庫 這 3 種內建元件庫的差異： • 按鈕(Buttons)：提供各種具有按鈕功能的元件。 • 類別(Classes)：提供連接資料庫或其它 Web Services 所使用的元件。 • 課程互動(Learning Interactions)：提供現成的線上互動物件, 主要用於教學方面。
內建元件庫 • 內建元件庫中元件的屬性是無法修改的, 但將其拉曳到舞台上後, 會自動在文件的元件庫中複製一份, 複製到元件庫的元件就和你自行建立的一樣, 可以自由編輯應用。
6-3 元件的類型 • Flash 的元件包含圖像元件(Graphic Symbol)、按鈕元件(Button Symbol)、影片片段元件(Movie Clip Symbol)、字體元件(Font) 與組件(Components) 5 種類型, 我們一一說明如下。
圖像元件 • 圖像元件(Graphic Symbol) 可以是一般靜態的圖檔, 也可以是一段動畫。 • 圖像元件最大的特色, 是必須隨著動畫的主時間軸來播放。舉例來說, 若你建立了一個含有 10 格影格的圖像元件, 將其放置於 20 格影格的主動畫中, 動畫將重複播放兩次圖像元件。請開啟練習檔 06-02.fla, 並執行『檔案/元件庫』命令 (或按下 [F11] 鍵) 開啟元件庫面板：
圖像元件 • 請執行『視窗/工具列/控制器』命令開啟控制器工具列, 再按下播放鈕, 就會看到動畫播放 2 次後停止。這是因為圖像元件與主動畫共用一個時間軸, 因此當圖像元件放置在具 20 格影格的主動畫時, 將會播放 2 次圖像元件後停止。
圖像元件 • 如果將 10 格影格的元件放置在只有 1 格影格的主動畫中, 主動畫將會在播放圖像元件的第 1 格影格後結束, 我們利用練習檔 06-03.fla 來試看看。請選取圖層 1 的影格 1, 再由元件庫將圖像元件動畫拉曳至舞台上, 你會發現動畫只顯示圖像元件的第 1 格畫面, 且控制器的按鈕無法作用。
按鈕元件 • 按鈕元件(Button Symbol) 可製作按鈕功能的動畫, 並透過 ActionScript 或行為指令(Behavior), 與瀏覽者的滑鼠或鍵盤事件產生互動。每個按鈕元件都是由 4 格影格組成, 分別代表按鈕的 4 種狀態 (後述)。此外, 按鈕元件內可以包含影片片段元件和圖像元件。 • 請開啟練習檔 06-04.fla：
按鈕元件 • 我們在場景 1 看到的按鈕呈現立體及光暈效果, 在按鈕元件的編輯模式卻只看到平面圖形, 這是因為我們在主動畫的按鈕上套用了濾鏡效果, 關於套用濾鏡的說明, 請參考第 14 章。
影片片段元件 • 影片片段元件(Movie Clip Symbol) 本身即是一段獨立的動畫, 我們可以利用 ActionScript和行為指令(Behavior) 來控制影片片段元件, 且影片片段元件擁有自己獨立的時間軸, 不受主動畫影格數的影響, 甚至當你透過控制器停止主動畫的播放後, 影片片段元件仍可繼續播放。
影片片段元件 • 要預覽影片片段元件, 必須先將動畫發佈成 .swf 檔 (按下 [Ctrl] + [Enter] 鍵) 才看得到。 • 此外, 影片片段元件可以包含圖片、聲音或另一個元件, 甚至可以設定滑鼠的動作事件, 或當做按鈕來使用, 可說是應用範圍最廣的一種元件。
字體元件 • 字體元件(Font) 可以單純做靜態的文字顯示, 也可以成為與瀏覽者溝通用的輸入欄位, 或做為動態顯示之用。
組件 • 組件(Components) 是另一種影片片段元件, 你可以使用 Flash 內建的組件, 或直接下載別人做好的組件, 甚至是自已開發組件來使用。使用組件最大的好處是可以透過組件參數的設定, 將組件直接應用在動畫中, 而不需自行撰寫ActionScript。
6-4 建立元件 • 建立元件 (Symbol) 的方式有 2 種, 你可以從無到有的建立一個新元件；或是選取現成的圖像物件、群組物件、點陣圖或文字物件, 再按下 [F8] 鍵將其轉換成元件。使用這兩種方式建立元件的不同點在於, 將現成的物件轉換成元件時, 該元件不僅會儲存在元件庫中, 還會自動將舞台上的原物件變成實體；若是建立一個全新的元件, 此元件不會出現在舞台上, 而是直接儲存在元件庫內。
建立元件 • 建立元件的大致步驟如下：
建立一個新元件 • 請開啟一個空白文件, 再執行『插入/新增元件』命令 (或按 [Ctrl] + [F8] 鍵), 在建立新元件交談窗中替元件命名後, 決定元件的類型, 然後進入元件編輯模式, 編輯這個新增的空白元件。
將現成物件轉換成元件 • 你可以將既有的圖像、群組、文字、視訊或匯入的圖片建立成元件, 請選取要轉換成元件的物件, 然後執行『視窗/元件庫』命令開啟元件庫面板：
將現成物件轉換成元件 • 使用現成物件所建立的元件, 通常是只有 1 格影格的靜態元件, 你可以雙按舞台上的實體進入元件編輯模式進行其它編輯。當你編輯元件時, 所有在舞台上的實體也會隨著改變。
元件的註冊點 • 當我們將圖形轉換成元件時, 可設定元件的註冊點, 註冊點是以十字準線 “ ” 來表示, 其代表的意義就是元件的原點 (x,y=0,0), 作用則是讓我們使用 ActioinScript 來控制該元件時, 能正確找到元件的座標；若要製作導引線動畫, 啟動貼齊功能後, 也必須使註冊點吸附到移動路徑上, 元件才能隨著導引線移動。
元件的註冊點 • 在一般的情況下, 如果是執行『插入/新增元件』命令, 從無到有繪製一個新元件, 我們會以註冊點為中心來繪製元件, 因此元件的註冊點常與圖形的中心點重疊,呈 狀；若是將繪製好的圖形轉換成元件, 在轉換成元件交談窗中預設的註冊點會在左上角, 因此轉換後的元件註冊點會顯示在左上角,也可以自行設定於中央。
元件的註冊點 • 無論是用哪一種方式建立元件, 我們都可以在建立成元件後, 再切換至元件的編輯模式下視需要來調整註冊點的位置。編輯元件的相關操作, 請參考 6-5 節。
檢視實體在舞台上的座標位置 • 利用資訊面板可得知目前實體在舞台中的座標位置, 這對於日後製作精確的動畫效果, 或是想以 ActionScript 控制實體時非常有幫助。請執行『檔案/資訊』命令, 再點選舞台中要檢視的實體：
檢視實體在舞台上的座標位置 • 如果點按左上角, 再於 X、Y 欄中分別輸入 0、0, 那麼實體將會自動移至舞台的原點 (左上角, 即 X,Y= 0,0)。或許目前您還不能體會資訊面板的作用為何, 在此您只要先有個概念, 待日後需要取得這些資訊時, 再來翻閱此處, 就能有所體會囉！
元件的中心點 • 利用選取工具點選舞台上的實體, 會看到實體中央有一個空心圓 , 這就是中心點。在變形、旋轉物件時, 預設會以元件的中心點為基準來進行變形或旋轉, 此時中心點亦稱為變形點。 • 若要更改變形點的位置, 可先按下自由變形工具, 當指標移至中心點附近呈 狀, 將變形點拉曳至目的位置, 即可改變圖形旋轉的基準點。
