本文要結合先前說明過的導引線與遮色片功能, 來製作網頁開頭動畫, 讓您學習整合應用 Flash 的不同功能, 讓動畫更出色！

本範例要整合導引線動畫和濾鏡特效這 2 種功能製作一個網頁開頭動畫。我們會將背景圖加上不停轉動的遮色片動畫, 再利用導引線功能, 製作一個圍繞遮色片移動的物件, 讓網頁開頭動畫更生動有趣, 吸引眾人的目光。

動畫元件與流程說明

元件介紹

元件庫中已準備了一個小星星元件, 在稍後的操作中我們要製作一個星形遮色片, 然後利用導引線功能, 讓小星星圍繞著星形導引線移動。在製作的過程中, 我們會將小星星加上旋轉的效果, 然後再一步步建立遮色片、導引線與文字。我們先來看看整個動畫是由哪些元件所組成：

動畫製作流程

在開始動手前, 我們先來看一下本文動畫的製作流程：

重點說明

本範例的背景元件, 我們將從外部匯入已經製作好的點陣圖檔來使用。

我們要讓小星星繞著導引線移動, 而為了讓動畫的效果更好, 製作時先將小星星物件設定為逆時針旋轉的影片片段動畫, 然後再隨導引線移動。

範例中的遮色片圖層及導引線圖層都是使用同樣的星形圖形來做設定。我們使用多邊星型工具 繪製一個星形圖形, 然後將筆畫的部份用來做為導引線；填色區域則用來做遮色片。

遮色片圖層的星形會使用移動補間動畫來建立動畫, 並且設定不同的縮放效果。此處也會加上旋轉效果, 讓遮色片在播放時有順時針及逆時針方向旋轉的效果。

範例中的動畫設定, 是讓小星星繞著星形的導引線移動。在製作時, 我們必須將原本封閉的導引線路徑, 設定一個缺口, 再將小星星開始與結束的關鍵影格位置, 設定在缺口兩端, 如此才會繞著路徑移動。

設定文件屬性與圖層安排

設定文件屬性

本範例共使用了 80 個影格, 以 12fps 的播放速度, 總播放長度為 5.9 秒。文件屬性設定如圖所示, 我們將背景顏色設定為深灰色 (#333333), 其它採用預設值：

圖層的配置

本範例共有 5 個圖層, 先建立好第一個背景圖層。 在製作的過程中, 我們會再一一新增各圖層。

建立影片片段元件並匯入背景圖

在開始製作動畫前, 我們先將小星星設定為可自行旋轉的動畫, 然後匯入點陣圖做為本範例的背景。

建立小星星元件的旋轉動畫

請雙按元件庫的小星星元件, 進入元件編輯環境：

如此, 就設定好小星星的旋轉動畫了, 請結束元件編輯環境回到舞台。

匯入點陣圖做為背景

設定好小星星的旋轉動畫之後, 我們接著要把點陣圖匯入 Flash 做為背景。

TIP：Flash 目前支援的點陣圖格式包括︰bmp、jpeg、gif、png 等。

Step 1 請執行 『檔案/匯入/匯入至元件庫』 命令( 『File / Import /Import to Library』 ),選擇要匯入的檔案。

Step 2 執行『 視窗/元件庫』 命令 (『 Window/Library』 ) 開啟元件庫, 再把匯入的背景拉曳至舞台, 並對齊舞台左上角。

建立遮色片圖層及導引線圖層

我們接著要建立 2 個新圖層, 一個是遮色片圖層, 一個是導引線圖層, 然後繪製星形圖形, 將填色區域建立在遮色片圖層、筆畫部份建立在導引線圖層中。

Step 1 首先在背景圖層上新增 2 個圖層, 分別命名為遮色片圖層及導引線圖層。

Step 2 請選取多邊星型工具 , 然後在屬性面板按下選項鈕, 在工具設定交談窗中將樣式設為星形：

Step 3 點選導引線圖層的影格 1, 然後在舞台上繪製 1 個星形, 讓星形可大致遮住背景中女孩子的臉部。

Step 4 繪製好星形後, 其中的筆畫部份要做為導引線、填色區域則要做為遮色片, 所以我們要將填色區域移至遮色片圖層, 讓筆畫部份留在導引線圖層。

到目前為止, 要製作動畫的元件就都準備好了, 我們繼續往下進行, 讓動畫動起來吧！