著作權所有 © 旗標出版股份有限公司 著作權所有 © 旗標出版股份有限公司 著作權所有 © 旗標出版股份有限公司著作權所有 © 旗標出版股份有限公司
FrontPage & Flash 動態網頁設計入門
元件、實體與元件庫
講師:陳昭源
October 21, 2007
Page 2 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
本章提要
7-1 認識元件與實體
7-2 認識元件庫與內建元件庫
7-3 元件的類型
7-4 建立元件
7-5 元件編輯的環境
7-6 元件庫的操作
7-7 實體屬性設定Page 3 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
7-1 認識元件與實體
在 Flash 製作動畫時,我們可以將會重複使 用到的物件,如圖像物件、群組物件、文字 物件等製作成元件(Symbol),存放在動畫 文件的元件庫(Library)中,當你需要使用 該元件時,便可自元件庫將它拉曳出來使用。此時,被放入編輯區中進行編輯的,便是該 元件的實體(Instance)。
Page 4 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
認識元件與實體
例如你可以將花朵的圖片轉換成元件,並重複拉曳 此元件至舞台中,用這些複製出來的實體來建立一 個花園。你還可以經由改變顏色屬性、大小等,來 變化這些實體的外觀,省卻一一繪製的功夫,可說 是方便又實用。Page 5 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
認識元件與實體
在編輯區中的每個實體 是獨立個體,你可 任意編輯、更改它的屬性而不會影響到相同 元件的其它實體。但如果進入元件的編輯模 式進行修改,則所有的實體也會同時更新。Page 6 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
7-2 認識元件庫與內建元件庫
Flash 的元件庫分兩種,一種是每個動畫專屬 的元件庫(Library);另一種則是內建元件 庫(Common Libraries),兩者皆可透過『視窗』功能表來開啟,以下即為您說明。
Page 7 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
元件庫
元件庫面板(Library)是存放元件、點陣圖、聲音、視訊、組件等物件的工具箱。所有元 件一經建立,就會存放在元件庫中。執行
『檔案/匯入』命令,可自外部匯入點陣圖、
聲音、視訊等物件,這些物件也會儲存在元 件庫。因此,動畫元件的新增、複製、編輯 等操作,也 是依賴元件庫來進行與管理。
Page 8 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
內建元件庫
內建元件庫(Common Libraries)則存放了 Flash 提供的元件,讓使用者自由使用。Flash 內建的元件 庫共有 3 種,執行『視窗/內建元件庫』命令,可看 到 Flash 提供的元件類別:Page 9 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
內建元件庫
這 3 種內建元件庫的差異:
按鈕(Buttons):提供各種具有按鈕功能的 元件。
類別(Classes):提供連接資料庫或其它 Web Services 所使用的元件。
課程互動(Learning Interactions):提供現 成的線上互動物件,主要用於教學方面。Page 10 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
內建元件庫
內建元件庫中元件的屬性是無法修改的,但 將其拉曳到舞台上後,會自動在文件的元件 庫中複製一份,複製到元件庫的元件就和你 自行建立的一樣,可以自由編輯應用。Page 11 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
7-3 元件的類型
Flash 的元件包含圖像元件(GraphicSymbol)、按鈕元件(Button Symbol)、
影片片段元件(Movie Clip Symbol)、字體 元件(Font)與組件(Components)5 種類 型,我們一一說明如下。
Page 12 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
圖像元件
圖像元件(Graphic Symbol)可以是一般靜 態的圖檔,也可以是一段動畫。
圖像元件最大的特色,是必須隨著動畫的主 時間軸來播放。
舉例來說,若你建立了一個含有 10 格影格的圖 像元件,將其放置於 20 格影格的主動畫中,動 畫將重複播放兩次圖像元件;
如果將 10 格影格的元件放置在只有 1 格影格的 主動畫中,主動畫將會在播放圖像元件的第 1 格 影格後結束。Page 13 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
圖像元件
Page 14 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
按鈕元件
按鈕元件(Button Symbol)可製作按鈕功能 的動畫,並透過 ActionScript 或行為指令(Behavior),與瀏覽者的滑鼠或鍵盤事件 產生互動。每個按鈕元件 是由 4 格影格組 成,分別代表按鈕的 4 種狀態(後述)。此 外,按鈕元件內可以包含影片片段元件和圖 像元件。
Page 15 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
按鈕元件
我們在場景 1 看到按鈕呈現 立體及光暈效果,在按鈕元 件的編輯模式卻只看到平面 圖形,這是因為我們在主動 畫按鈕上套用了濾鏡效果。Page 16 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
影片片段元件
影片片段元件(Movie Clip Symbol)本身即 是一段獨立的動畫,我們可以利用ActionScript 和行為指令(Behavior)來控 制影片片段元件,且影片片段元件擁有自己 獨立的時間軸,不受主動畫影格數的影響,
甚至當你透過控制器停止主動畫的播放後,
影片片段元件仍可繼續播放。
Page 17 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
影片片段元件
要預覽影片片段元件,必須先將動畫發佈成 .swf 檔(按下 [Ctrl] + [Enter] 鍵)才看得到。
此外,影片片段元件可以包含圖片、聲音或另一個 元件,甚至可以設定滑鼠的動作事件,或當做按鈕 來使用,可說是應用範圍最廣的一種元件。Page 18 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
字體元件
字體元件(Font)可以單純做靜態的文字顯 示,也可以成為與瀏覽者溝通用的輸入欄位,或做為動態顯示之用。
Page 19 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
組件
組件(Components)是另一種影片片段元件,你可以使用 Flash 內建的組件,或直接下載 別人做好的組件,甚至是自已開發組件來使 用。使用組件最大的好處是可以透過組件參 數的設定,將組件直接應用在動畫中,而不 需自行撰寫 ActionScript。
Page 20 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
7-4 建立元件
建立元件(Symbol)的方式有 2 種,你可以從無到 有的建立一個新元件;或是選取現成的圖像物件、群組物件、點陣圖或文字物件,再按下 [F8] 鍵將其 轉換成元件。
使用這兩種方式建立元件的不同點在於,將現成的 物件轉換成元件時,該元件不僅會儲存在元件庫中,還會自動將舞台上的原物件變成實體;若是建立一 個全新的元件,此元件不會出現在舞台上,而是直 接儲存在元件庫內。
建立元件的大致步驟如下:Page 21 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
建立一個新元件
請開啟一個空白文件,再執行『插入/新增元 件』命令(或按 [Ctrl] + [F8] 鍵),在建立 新元件交談窗中替元件命名後,決定元件的 類型,然後進入元件編輯模式,編輯這個新 增的空白元件。Page 22 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
建立一個新元件
Page 23 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
將現成物件轉換成元件
你可以將既有的圖像、群組、文字、視訊或匯入的 圖片建立成元件,請選取要轉換成元件的物件,然 後執行『視窗/元件庫』命令開啟元件庫面板:Page 24 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
將現成物件轉換成元件
Page 25 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
將現成物件轉換成元件
使用現成物件所建立的元件,通常是只有 1 格影格的靜態元件,你可以雙按舞台上的實 體進入元件編輯模式進行其它編輯。當你編 輯元件時,所有在舞台上的實體也會隨著改 變。Page 26 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
元件的註冊點
當我們將圖形轉換成元件時,可設定元件的註冊點,註冊點是以十字準線 “+" 來表示,
其代表的意義就是元件的原點(x,y = 0,
0),作用則是讓我們使用 ActioinScript 來 控制該元件時,能正確找到元件的座標;若 要製作導引線動畫,啟動貼齊功能後,也必 須使註冊點吸附到移動路徑上,元件才能隨 著導引線移動。
Page 27 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
元件的註冊點
Page 28 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
元件的註冊點
在一般的情況下,如果是執行『插入/新增元件』命 令,從無到有繪製一個新元件,我們會以註冊點為 中心來繪製元件,因此元件的註冊點常與圖形的中 心點重疊,呈 狀;若是將繪製好的圖形轉換成元 件,在轉換成元件交談窗中預設的註冊點會在左上 角,因此轉換後的元件註冊點會顯示在左上角,也 可以自行設定於中央。
無論是用哪一種方式建立元件,我們 可以在建立 成元件後,再切換至元件的編輯模式下視需要來調 整註冊點的位置。Page 29 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
檢視實體在舞台上的座標位置
利用資訊面板可得知目前實體在舞台中的座 標位置,這對於日後製作精確的動畫效果,或是想以 ActionScript 控制實體時非常有幫 助。
Page 30 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
元件的中心點
利用選取工具點選舞台上的實體,會看到實 體中央有一個空心圓 ,這就是中心點。在變 形、旋轉物件時,預設會以元件的中心點為 基準來進行變形或旋轉,此時中心點亦稱為 變形點。
若要更改變形點的位置,可先按下自由變形 工具,當指標移至中心點附近呈 狀,將變 形點拉曳至目的位置,即可改變圖形旋轉的 基準點。Page 31 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
元件的中心點
若要將實體的中心點(變形點)與註冊點設 定在一起,請先按下自由變形工具,將指標 移至中心點(變形點)上,當指標呈 狀時 雙按中心點(變形點),實體的中心點(變 形點)就會移至註冊點上,並顯示為 (註 冊點 + 中心點)。Page 32 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
正確選擇元件類型
為了讓你明確判斷在建立元件時,該選擇什 麼元件類型,我們將元件的性質表列如下,供你做個參考:
Page 33 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
正確選擇元件類型
由於影片片段元件的支援度較圖像元件高,而按鈕元件大多只能應用在按鈕類功能上,
故一般 建議使用影片片段類型,以增加動 畫修改的彈性。
如果建立時選擇了不適用的元件類型,可在 元件庫內該元件的名稱上按右鈕執行『類型』命令,從中選取適當的元件類型。
Page 34 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
實做練習
元件製作與使用
練習一
開啟 sample04.fla
將「小熊走路」製作成元件
利用此元件製作小熊走過舞臺動畫
練習二
開啟 sample06_ex.fla
製作蹦跳老爺車Page 35 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
7-5 元件編輯的環境
將圖形轉換為元件後,想要編輯元件的內容,必須切換到該元件的編輯模式下才能進行,
元件的編輯模式有下列 3 種,以下分別為您 介紹。
Page 36 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
開啟元件編輯環境的方法
依便利性高低依序排列:
雙按元件庫面板中元件名稱的圖示;或選取 該元件,再雙按預覽窗格。
直接按下動畫文件視窗右上角的編輯元件鈕 , 由其中選擇要編輯的元件。Page 37 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
開啟元件編輯環境的方法
在編輯區中的實體上按右鈕,執行的『編輯』命令。
選取編輯區中的實體,執行『編輯/編輯元件』命令(或按 [Ctrl] + [E] 鍵)。
Page 38 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
修改註冊點的位置
在元件的編輯環境下會顯示十字準線的註冊點,預 設在畫面的中央位置。若是想要改變元件註冊點的 位置,請選取全部的圖形,再以註冊點為中心,將 圖形拉曳至目的位置,例如將圖形拉曳至註冊點的 右下角,表示該元件的註冊點將移至左上角:Page 39 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
在實體位置上編輯
若想直接在舞台中編輯該元件,可選擇在實體位置 上編輯,以便和舞台中其它物件進行比對。請直接 在舞台上雙按實體,或按右鈕執行『在原地編輯』命令,進入此編輯狀態:
Page 40 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
在新視窗編輯
如果想開啟另一個獨立的文件視窗來編輯元件,省 去在場景和元件間切換的手續,請在實體上按滑鼠 右鈕,執行『在新視窗中編輯』命令,開啟一個新 視窗來編輯元件。Page 41 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
繪圖物件與元件的差異
我們曾介紹過繪圖的技巧,為了使繪製的圖 形不受其它物件的影響,在繪製時可以啟動 繪圖物件功能,或是將圖形群組在一起。你 可能也注意到了,繪圖物件與元件有些許相 似之處,例如選取時 會顯示藍色框線,雙 按可進入編輯狀態...等,為了讓您的觀念更 清楚,我們再做個詳細的比較。Page 42 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
繪圖物件與元件的差異
最大的差異在於元件將儲存在元件庫中,繪 圖物件則不會出現在元件庫內,且繪圖物件 只是靜態的圖片,非動態效果。
元件和繪圖物件在選取時雖 會顯示藍色選 取框線,但元件會顯示註冊點,繪圖物件則 沒有註冊點。Page 43 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
繪圖物件與元件的差異
若是在繪圖物件或元件上雙按,皆可進入編 輯環境,此時可由圖示來辨別目前物件的型 態。
繪圖物件的圖示為 ;元件會顯示成(影片片段)、 (圖像元件)、
(按鈕)。
Page 44 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
繪圖物件與元件的差異
想要編輯繪圖物件時,只要選取舞台上的物 件(不需雙按進入編輯狀態),即可變更物 件的填色、框線、外形...等;編輯元件時則 一定要進入元件的編輯狀態,其編輯的動作 才會有作用。
以上我們只是列出幾個方便您區分兩者的技 巧,在使用的原則上,若是動畫中經常要出 現的物件、需要設定為動畫(或按鈕)、想 設定 ActionScript ...等,還是將其轉換成元 件會比較方便。Page 45 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
7-6 元件庫的操作
每個 Flash 動畫檔 有一個專屬的元件庫(Library),元件庫 的目的在於讓我們檢視、儲存動畫中的項目(元件、聲音、影 片、圖檔...等),並進行管理的工作。
要在動畫中使用元件庫內的元件,相信您已經相當熟悉了,只 要開啟元件庫面板,將其中的項目拉曳到編輯區,即可使用該 元件。Page 46 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
共用元件庫
若是想在 A 動畫中使用 B 動畫元件庫中的元件,可 同時開啟 A、B 兩個動畫檔案,再由元件庫面板切換 至要使用的檔案元件庫,例如目前在 B 動畫檔案,要使用 A 檔案元件庫中的元件:
Page 47 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
共用元件庫
使用其它檔案元件庫中的元件後,亦會自動 複製一份在目前使用中的檔案元件庫。你也 可以利用『複製』和『貼上』命令,將其它 檔案元件庫中的元件複製到目前檔案的元件 庫中。
除了與目前已開啟的檔案共用元件庫外,也 可以僅開啟檔案的元件庫來利用,而不須開 啟動畫檔案。請執行『檔案/匯入/共用元件 庫』命令,選取要使用的檔案元件庫後,即 可使用該檔案元件庫內的元件。Page 48 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
「元件庫」面板的基本操作
除了上述功能外,元件庫面板還有很多功能,我們一一說明如下︰
Page 49 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
「元件庫」面板的基本操作
鎖定目前的元件庫鈕:在與其它檔案共用元 件庫時,按下此鈕可固定要選用的檔案元件 庫。
新元件庫面板鈕:按下此鈕,可將目前的檔 案元件庫獨立開啟成另一個元件庫面板,讓 您方便在不同的元件庫面板中複製要使用的 元件。
項目列示窗︰列出元件庫面板內所有的項目,每個項目前方均有其代表圖示。
Page 50 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
「元件庫」面板的基本操作
新增元件鈕:按此鈕可建立新的元件,功能 與執行『插入/新增元件』命令相同。
新增資料夾鈕︰按此鈕可在元件庫面板中建 立資料夾。你可以建立各類資料夾,然後把 同類的項目拉曳置入同一資料夾中,讓項目 的管理更有條不紊。Page 51 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
「元件庫」面板的基本操作
Page 52 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
「元件庫」面板的基本操作
替換排列順序鈕︰按此鈕可切換遞增或遞減 排列,代表目前排列方式是遞增排列,則是 遞減排列。
屬性鈕︰更改選取項目的屬性。選取元件後 按下此鈕,可開啟元件屬性交談窗,讓您重 新選擇元件的類型。
刪除鈕:刪除目前選取的項目或資料夾(資 料夾內的項目亦會一併刪除)。
寬/窄元件庫檢視鈕:切換元件庫的顯示模式,預設為窄元件庫檢視模式。
Page 53 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
7-7 實體屬性設定
介紹過元件以及元件庫面板的操作之後,接 著我們再來討論元件的分身-實體的相關事 項。Page 54 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
屬性變更
所有實體的屬性 可以在屬性面板中調整,屬性面板會依實體的類型而顯示對應的設定 項目。
Page 55 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
圖像元件的實體屬性
請先在編輯區中選取要調整屬性的實體,再 執行『視窗/屬性』命令(也可以按 [Ctrl] + [F3] 鍵)開啟屬性面板︰Page 56 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
按鈕元件的實體屬性
Page 57 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
影片片段元件的實體屬性
Page 58 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
各類元件的共同實體屬性
替換︰把目前選取的實體換成另一個元件的 實體。Page 59 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
各類元件的共同實體屬性
寬、高:設定實體的寬/高度。
X 、Y:設定實體的X 、Y 軸位置。X 軸是距 離舞台左邊框的距離;Y 軸是距離舞台上邊 框的距離。
顏色:可用來設定實體的色彩、亮度、透明 度...等。Page 60 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
各類元件的共同實體屬性
我們以一個實際的應 用來說明。請開啟練 習檔 Sample01.fla,並執行『視窗/元件庫』
命令(或按 [F11] 鍵)
開啟元件庫面板,其 中我們儲存了一個花 朵的圖像元件,請將 它拉曳到舞台中適當 的位置,可多拉曳幾 個實體,營造出花園 的畫面:
Page 61 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
各類元件的共同實體屬性
接著我們要改變舞台中花朵實體的顏色,請 選取舞台中的任一花朵實體,再開啟屬性面 板,如下圖進行設定:Page 62 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
各類元件的共同實體屬性
在屬性面板調整色調時,會呈現原來顏色加 上目前填色的結果。當著色量的數值愈低,愈能顯現原來的色彩(此例為紅色);著色 量高,表示將偏重色調所設定的顏色;若設 定 100%,將完全捨棄元件原來的顏色,顯示 目前色調所選擇的色彩。
若要回復原來的顏色,請將顏色欄位設定為 無。Page 63 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
各類元件的共同實體屬性
要能更自由地改變舞台上實體顏色或外觀線 條,可以選取舞台上的實體,再執行『修改/打散』命令(或按 [Ctrl] + [B] 鍵),將實體 轉換為一般圖像,既能自由填色、編輯,又 不影響其它實體及元件。
被打散的實體將不再是實體,也不具有元件 的特性,例如無法設定 ActionScript 來控制、修改元件庫面板中的元件時,亦無法修改已 打散的實體。
Page 64 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
各類元件的共同實體屬性
Page 65 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
各類元件的共同實體屬性
因此,建議您在確定該實體不需要保有元件 的特性,再進行打散的步驟,萬一後悔將實 體打散了,也不用太擔心,別忘了元件庫面 板裡,還儲存了一份可以隨時取用的元件本 尊哦!著作權所有 © 旗標出版股份有限公司 著作權所有 © 旗標出版股份有限公司 著作權所有 © 旗標出版股份有限公司著作權所有 © 旗標出版股份有限公司
FrontPage & Flash 動態網頁設計入門
時間軸、圖層與影格
講師:陳昭源
October 21, 2007
Page 67 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
本章提要
8-1 認識時間軸面板、圖層與影格
8-2 圖層的操作與管理
8-3 影格的類型及相關操作
8-4 複製、搬移與反轉影格
8-5 影格速率與時間軸刻度比例
8-6 描圖紙功能Page 68 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
8-1 認識時間軸、圖層與影格
何謂時間軸
何謂圖層
何謂影格Page 69 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
何謂時間軸
動畫檔案視窗中的時間軸面板(Timeline,以下簡稱 時間軸),主要顯示出圖層(Layer,以下簡稱圖層)以及影格(Frame,以下簡稱影格)中的所有內容。
時間軸面板的各項元件說明如下:Page 70 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
何謂時間軸
時間軸中若有未能顯示的圖層,可用滑鼠拉 曳右側的捲軸來顯示其它圖層。Page 71 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
何謂圖層
製作傳統動畫的時候,為了製作上的方便,常會將畫面中的背景與角色分別製作,例如 將人物、背景分別繪製在不同的透明賽璐璐 片上,當背景與人物交疊時便成為完整的畫 面;若要呈現人物原地跳躍的動作時,只要 更換人物的賽璐璐片即可。此觀念運用在 Flash 動畫中,就是圖層。
Page 72 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
何謂圖層
Flash 動畫可以將背景、物件分別放置在不同 的圖層上:Page 73 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
何謂影格
我們利用傳統動畫與 Flash 動畫的製作過程,來對照說明影格的觀念,可以比較容易了解 影格的作用。
傳統動畫是先在賽璐璐片上繪製圖形,然後 將其掃描成單格畫面,剪輯成為具有連貫性 的影片。Flash 時間軸上一格格的影格,就如 同動畫影片的單格畫面一樣,而影格順序則 代表 Flash 動畫行進的程序,我們必須根據 演出順序製作影格內容。不過,影格內容並 非放置在時間軸內,而是顯示在舞台之中。Page 74 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
何謂影格
一般我們觀賞的卡通影片就是將多個連貫的單格畫 面連續播放,而連續播放Flash 時間軸上的影格,即 形成 Flash 動畫。一部 Flash 動畫的演出全看如何在 時間軸上設計與安排影格。Page 75 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
在 Flash 製作動畫的注意事項
多運用補間動畫(Tweened)來設計動畫效果,並 減少動畫中關鍵影格的數量。
多利用元件(Symbol),少用匯入點陣圖的方式來 製作動畫。
動畫中的靜態、動態部分,及 ActionScript 程式、聲音、視訊,儘量 分開在不同圖層中製作較好。
匯出含有聲音的 Flash 影片時,利用 MP3 格式來壓 縮聲音可有效降低檔案大小。
注意使用的字型。使用裝置字體可有效降低檔案大 小,若是不想使用裝置字型,則不要使用太多種字 型以免增加檔案體積。Page 76 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
8-2 圖層的操作與管理
圖層的作用就如同一張張透明的賽璐璐片,你可以將動畫中的每項物件,放置在不同圖 層中,圖層交疊就形成完整的畫面。在各圖 層中的物件,做任何的移動或變化, 不會 相互干擾,所以當你編輯一個物件時,只要 在物件所在的圖層進行操作,將可大幅降低 製作過程的複雜度與難度。
Page 77 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
新增與刪除圖層
新增圖層
開啟一份新的動畫檔時預設只有一個圖層,新增 圖層的方式如下:
刪除圖層
若是有不需要使用的圖層,可先按一下圖層名稱,再按下刪除圖層鈕或是該圖層拉曳至刪除圖層鈕 上,皆可刪除圖層。
Page 78 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
將圖層重新命名
Flash 會自動將圖層依序命名為圖層*(*為 1 、2 、3... 等依序編號),為了方便日後的 編輯工作,建議您為圖層重新更改為容易辨 識的名稱。為圖層重新命名時,請雙按圖層 名稱,即可輸入新的圖層名稱。Page 79 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
選取圖層
當你想要對圖層進行任何編輯動作時,必須先選取 圖層,而選取的方式有如右 2 種:
此外,想要選取多個圖層時,可按住 [Shift] 鍵不放,再接續按下其它圖層名稱。
Page 80 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
改變圖層順序
圖層的上下位置代表圖層中物件在編輯區域的前後 關係。在愈上方的圖層,就位於編輯區域愈上層,而背景則是放置在最底層的圖層。想要變更圖層的 順序,請如下進行:
Page 81 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
實做練習
圖層的使用
開啟 sample06_ex.fla
製作飛機與汽車同時橫越舞臺之動畫
飛機與汽車之速度不同Page 82 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
使用圖層資料夾管理圖層
在製作大型動畫的時候,圖層太多可能造成 操作、尋找上的不方便,這時候就可以利用 圖層資料夾(Layer Folder ),將相關的圖 層放在同一圖層資料夾下,管理起來就會方 便許多。圖層資料夾的使用方法如下:Page 83 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
使用圖層資料夾管理圖層
Page 84 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
使用圖層資料夾管理圖層
Page 85 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
使用圖層資料夾管理圖層
圖層資料夾關閉時會隱藏其下的所有圖層,以精簡時間軸的空間,再按一下圖層資料夾 前方小三角形,可再次開啟圖層資料夾:
Page 86 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
圖層的 4 種狀態
在圖層名稱右方有圖層狀態欄,以圖示來顯 示該圖層的圖層狀態,一共有 4 種圖層狀態,其代表的意義如下:
Page 87 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
圖層的 4 種狀態
作用中的圖層:目前正在進行編輯的圖層。
不論有幾個圖層, 只會有 1 個作用圖層。
作用中圖層除了圖層名稱右方會顯示 圖 示外,圖層也會呈現被選取的狀態。
當你要在圖層中繪製新的圖形、插入實體或 是執行『貼上』命令時,該圖層 必須是在 作用狀態下才行。Page 88 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
圖層的 4 種狀態
隱藏的圖層:表示該圖層的物件不會顯示出 來,也不能進行編輯的工作。當你正在編輯 某一個圖層時,可以將其它圖層設定為隱藏,以便在不受干擾的環境下順利進行編輯動作。
鎖定的圖層:表示該圖層無法執行任何編輯 動作,但圖層中的物件仍可正常顯示。當你 正在編輯某一圖層時,可以將其它圖層設為 鎖定,避免不小心更動到其它圖層的內容。Page 89 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
圖層的 4 種狀態
將圖層中的物件顯示成外框:表示該圖層中 的所有物件 會以外框線條來顯示。當動畫 的內容複雜,需要隨時參考其它圖層的內容,可將圖層設定為此狀態,就不用擔心編輯的 物件會被上面圖層遮住,並可了解各圖層物 件的相對位置,兼顧編輯時的方便性。
Page 90 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
圖層的 4 種狀態
Page 91 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
切換圖層狀態
若要將圖層切換成作用中的圖層,只要選取 該圖層即可。
接下來為您說明其餘圖層狀態的切換方法,我們以切換成隱藏的圖層來做示範,而鎖定、
顯示成外框的操作也 相同。
Page 92 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
切換圖層狀態
隱藏單一圖層:按一下圖層名稱右方的隱藏 圖層狀態欄,可以切換圖層的隱藏或顯示狀 態:Page 93 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
切換圖層狀態
隱藏或顯示所有圖層:按下圖層狀態欄的 圖 示,可同時隱藏或顯示所有的圖層。Page 94 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
切換圖層狀態
隱藏或顯示其它圖層:按住 [Alt] 鍵,再按一 下圖層名稱右方的隱藏圖層狀態欄,可以切 換其他圖層的隱藏或顯示狀態:Page 95 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
8-3 影格的類型及相關操作
新增影格
播放磁頭與影格的關係
選取影格
移除影格
影格的類型
設定關鍵影格
設定空白關鍵影格
清除關鍵影格Page 96 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
新增影格
在 Flash 中開啟一個新檔案時,其時間軸刻 度表上只有 1 格影格,我們可透過以下的方 法來新增影格,假設我們要新增影格至影格 15 的位置:Page 97 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
新增影格
新增的影格會延續前一關鍵影格(影格類型 將在稍後說明)的內容,以本例而言,就是 影格 1 與影格 2 ~ 14 中的內容 一樣。
往後若是新增圖層,將會自動建立好相同數 目的影格,但在新增的圖層中,影格內容是 空白的,並不會加入任何內容:Page 98 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
在現有影格範圍內插入影格
若要在現有影格範圍內插入新影格,只要先選取想 要插入的影格數量,再按下 [F5] 鍵即可新增影格。Page 99 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
播放磁頭與影格的關係
在時間軸上方有時間軸刻度表,其刻度數就代表影 格編號,而播放磁頭會指出目前編輯區顯示的是哪 一格影格的內容。播放動畫時,播放磁頭會在時間 軸刻度表上由左向右移動,讓我們檢視動畫的播放 效果:Page 100 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
播放磁頭與影格的關係
亦可直接拉曳播放磁頭到想要顯示的影格,編輯區會顯示該影格內容(或者直接按下時 間軸刻度表上的影格刻度)。此外,播放磁 頭只限在動畫長度的範圍內移動。
Page 101 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
選取影格
在編輯影格之前,首先要學會如何選取影格,下面我們示範幾種常用的選取方法:
在既有的影格中用滑鼠拉曳選取,指標經過 的影格 會被選取,此方式只能選取相鄰且 連續的影格。Page 102 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
選取影格
按住 [Shift] 鍵,然後再分別按下欲選取影格的頭尾 影格,即使不同圖層也可以一併選取:
按一下圖層名稱選取圖層,可將圖層中所有的影格 一次選取:Page 103 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
選取影格
選取物件時,所有包含該物件的影格 會自 動選取:
移除影格
選取要移除的影格,按右鈕執行『移除影格』命 令可移除影格。Page 104 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
影格的類型
Flash 一共有3 種影格類型,分別為關鍵影格(key frame)、空白關鍵影格(Blank key frame)與影格(Frame )。
Page 105 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
關鍵影格
當我們對動畫中的影格進行編輯,會發現這 些影格在時間軸上的圖示將顯示成 ,這類 的影格我們稱之為關鍵影格(key frame)。
一般而言,關鍵影格多用在動畫過程中產生 變化的影格,可說是動畫的重心。我們可以 在關鍵影格加入物件(包括聲音檔)或特效、編輯圖像、
編輯元件,或是加入 ActionScript 。
Page 106 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
空白關鍵影格
空白關鍵影格(Blank key frame)是一種特 殊的關鍵影格,表示此關鍵影格中沒有任何 物件,其作用是清空前一關鍵影格中的物件,所以多半用在關鍵影格之後;或使用在影格 中沒有物件,但必須加入 ActionScript 或聲 音檔的情況中。
Page 107 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
影格
關鍵影格和空白關鍵影格之外的影格, 屬 於一般的影格(Frame),一般影格的作用 在於延續前一個關鍵影格或空白關鍵影格的 內容。
當影格之前有個關鍵影格時,影格會呈現灰 色,表示延續前面關鍵影格的內容;若影格 之前有個空白關鍵影格,影格呈現白色,表 示延續前面空白關鍵影格的內容,也就是一 片空白。Page 108 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
影格
結束影格是關鍵影格與關鍵影格(或空白關 鍵影格)間動畫的最後一格,影格上會標示 空心小方格,目的是做為標記,讓設計者在 製作動畫時容易辨識。Page 109 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
補間動畫影格
當關鍵影格之間設有補間動畫時,則關鍵影格至下 一個關鍵影格之間的影格稱為補間動畫影格,而隨 著補間動畫的類型,又可分為以綠色顯示的形狀影 格,與以紫色顯示的移動影格。在補間動畫影格上 會顯示箭頭,你可以輕易地分辨出來。
補間動畫可由下方屬性面板進行設定。線段或方塊 的形狀變化較適合於角度型變化,因其在變化過程 中較明顯的角和直線。Page 110 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
設定關鍵影格
設定關鍵影格表示該影格在動畫中具有關鍵性內容。當我們執行『插入關鍵影格』命令時,除了可以在 未使用的影格上新增關鍵影格外,也可以將原有的 影格轉換為關鍵影格。
若在關鍵影格之後新增關鍵影格,則新的關鍵影格 將會自動把前一個關鍵影格的內容複製過來。Page 111 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
設定空白關鍵影格
執行『插入空白關鍵影格』命令,編輯區會 變成空白,因此當動畫進行到必須將全部的 內容更換時,可設定 1 格空白關鍵影格,將 影格內容清空,再接著安排新的動畫內容。Page 112 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
設定空白關鍵影格
我們也可以選取一般的影格,再按滑鼠右鈕 執行『轉換成關鍵影格』或『轉換成空白關 鍵影格』命令,一次將一個或多個影格轉換 成關鍵影格或空白關鍵影格。
若是在沒有建立影格的部份插入關鍵影格,或是插入空白關鍵影格,等於是同時進行新 增影格與設定關鍵影格(或空白關鍵影格)
的動作。
Page 113 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
清除關鍵影格
『清除關鍵影格』命令的作用並不是刪除影 格,而是將關鍵影格(或空白關鍵影格)轉 變成一般影格。因此影格的內容將會轉變成 前 1 格關鍵影格(或空白關鍵影格)的內容。Page 114 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
8-4 複製、搬移與反轉影格
複製影格
搬移影格
反轉影格Page 115 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
複製影格
複製影格(Copy Frame)有兩種方式,最方 便的就是用滑鼠拉曳來進行複製,此方式可 在同一個動畫檔中複製影格。若要在不同的 檔案之間複製影格,就要使用『複製影格』與『貼上影格』命令。
使用滑鼠拉曳的方式來複製影格時,請先將 欲複製的影格選取起來,然後按住 [Alt] 鍵,拉曳選取區到要貼上的位置。
Page 116 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
複製影格
使用功能表命令複製影格時,同樣請先選取 欲複製的影格,在選取區中按下滑鼠右鈕執 行『複製影格』命令,再將指標移至欲貼上 影格的地方,然後按下滑鼠右鈕執行『貼上 影格』命令即可。Page 117 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
搬移影格
用滑鼠拉曳的方式來搬移影格(Move Frame)是再簡單不過的了,只要將欲搬移的影格選 取起來,然後拉曳選取區到適當的位置即可。
你也可以按下滑鼠右鈕,利用快顯功能表中 的『剪下影格』、『貼上影格』命令來搬移 影格。Page 118 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
移動關鍵影格
若需要在影格中移動關鍵影格位置,只要先 點選關鍵影格,再拉曳關鍵影格到適當位置 即可。Page 119 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
反轉影格
反轉影格(Reverse Frame)是把動畫的頭尾 順序顛倒,反過來播放的意思。
我們來看看這個範例(Sample08):Page 120 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
反轉影格
Page 121 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
反轉影格
雖然這只是一個簡單的例子,但是在動畫內 容很複雜的時候,只要執行『反轉影格』命 令,就可以輕鬆地將動畫反轉,相當好用。
必須完整選取一段動畫的開始至結束之間的 所有影格,才能執行反轉影格的操作,單一 影格則無法執行此命令。Page 122 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
8-5 影格速率與時間軸刻度比例
接著我們再來看看時間軸面板上其它的功能。在時間軸面板下方會顯示目前動畫所設定的 影格速率(Frame Rate )等資訊:
Page 123 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
影格速率
影格速率(Frame Rate )是指 Flash 動畫每 秒鐘播放的影格數,預設是 12 fps(frame per second),也就是每秒播放 12 格影格的 意思。影格速率會影響動畫的流暢性,若速 率太低,會明顯感受到播放畫面停格現象。
依照人類視覺暫留的特性,若要動畫流暢自 然,12 fps 是最起碼的速率要求;24 fps 則 適合製作分解動作精細的動畫,像是電影動 畫。一般來說預設的 12 fps 就很足夠了。Page 124 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
影格速率
如果要為動畫設定其它的影格速率,請執行『修改/文件』命令(或是雙按時間軸面板的 影格速率欄 ),開啟文件屬性交談窗:
Page 125 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
時間軸刻度
時間軸刻度表上一個刻度即代表一個影格,刻度大小的檢視比例是可以調整的。
Page 126 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
時間軸刻度
Page 127 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
影格預覽功能
影格預覽(Frame Preview )功能可以將關鍵影格 中的內容顯示在時間軸面板中,就好像在看電影或 是連續照片的膠捲底片一樣。
請按下時間軸面板的 鈕,選擇『預覽』或『預覽 內容』這兩個命令,即可在時間軸預覽影格內容:Page 128 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
8-6 描圖紙功能
在預設的情況下,舞台中只會顯示單 1 影格 的內容。為了方便掌握前後影格內容的位置,Flash 提供了描圖紙(Onion Skin)功能,讓 你可以在舞台上同時檢視 2 格以上的影格內 容。
Page 129 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
描圖紙模式
描圖紙(Onion Skin)鈕,可在編輯區域同 時顯示以播放磁頭為中心的前後數個影格內 容,並以逐漸淡出的色彩表現影格順序,順 序愈前面顏色愈淺。
若播放磁頭所在的 影格為關鍵影格,則會以原色表現。
Page 130 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
描圖紙外框
描圖紙外框(Onion Skin Outlines)鈕 ,會 以播放磁頭所在位置為中心,將前後數個影 格的內容,以逐漸淡出的框線顯示出來。Page 131 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
編輯多個影格
編輯多個影格(Edit Multiple Frames)鈕 , 會以播放磁頭所在位置為中心,以原來的色 彩呈現前後數個影格中含有關鍵影格的內容,但不會顯示關鍵影格之間的變化。
此外,所有顯示出來 的關鍵影格內容 可 以選取進行編輯。Page 132 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
編輯多個影格
編輯多個影格鈕若配合描圖紙鈕或描圖紙外 框鈕使用的話,既可以看見動畫的變化,又 可以編輯關鍵影格的內容。Page 133 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
調整描圖紙標記範圍
利用描圖紙功能檢視影格內容時,可用滑鼠 拉曳時間軸刻度上的 ,調整顯示的開始影 格;拉曳 調整顯示的結束影格。若是藉由 修改描圖紙標記鈕來調整,則可透過命令的 方式來調整標記範圍,以下為您一一說明。Page 134 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
調整描圖紙標記範圍
永久顯示標記(Always Show Makers):選 擇此項,即使不執行描圖紙功能,也會在時 間軸刻度表上顯示描圖紙標記範圍。Page 135 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007
調整描圖紙標記範圍
鎖定描圖紙(Anchor Onion):選擇此項,會將時間軸刻度表上的描圖紙標記範圍鎖定。
原本描圖紙標記範圍會跟著播放磁頭移動,
鎖定之後即使移動播放磁頭,描圖紙標記範 圍也不會移動。
Page 136 Dept. of Computer Science & Information Engineering
National Taiwan University October 21, 2007