flash入門基礎引導路徑動畫

1、第9課 引導路徑動畫在前面幾課里，我們已經(jīng)給大家介紹了一些動畫效果，如跳動的小球、輝光掠過文字等等，不知你注意到?jīng)]有，這些動畫的運動軌跡都是直線的，可是在生活中，有很多運動是弧線或不規(guī)則的，如月亮圍繞地球旋轉(zhuǎn)、魚兒在大海里遨游等，在Flash中能不能做出這種效果呢？答案是肯定的，這就是“引導路徑動畫”。將一個或多個層鏈接到一個運動引導層，使一個或多個對象沿同一條路徑運動的動畫形式被稱為“引導路徑動畫”。這種動畫可以使一個或多個元件完成曲線或不規(guī)則運動。學習目的u       創(chuàng)建多層引導路徑動畫u   &

2、#160;   用文字做路徑 u       創(chuàng)建光芒四射的星星 課前熱身滬上老康是個Flash“老玩童”，他的古道熱腸為人所稱道，老康藍屋（）是他的個人網(wǎng)站，這個網(wǎng)站在閃客中也是大名鼎鼎。下面來研究一下網(wǎng)站上“老康藍屋”這幾個字的動畫效果，它是一個多圖層路徑引導動畫，其運行效果如下。以下是本范例的制作步驟：（1）創(chuàng)建影片文檔 步驟1 設置影片文檔屬性 執(zhí)行【文件】|【新建】命令，新建一個影片文檔，設置舞臺尺寸為515×152像素，背景色為黑色（在教程中，我們?yōu)榱烁玫仫@示場景中的內(nèi)容，背景色設為了深藍色

3、），如圖3-6-6所示。 圖3-6-6 文檔屬性 步驟2 創(chuàng)建背景圖層 執(zhí)行【文件】|【導入】|【導入到舞臺】命令，將配套光盤中的名為“老康藍屋背景.bmp”的圖片導入到場景中（“老康藍屋.bmp”圖片位置：光盤examplepart3*圖片老康藍屋.bmp）。 （2）創(chuàng)建元件 步驟1 創(chuàng)建“老康藍屋”元件 執(zhí)行【插入】|【新建元件】命令，新建一個圖形元件，名稱為“老康藍屋”，如圖3-6-7所示。 圖3-6-7 創(chuàng)建“老康藍屋”元件 選擇【文本工具】，在場景中輸入“老康藍屋”四個字，在【屬性】面板中，設置文本類型【靜態(tài)文本】，字體【華文彩云】，字體大小為80，顏色為白色，如

4、圖3-6-8所示。圖3-6-8 “老康藍屋”文字【屬性】面板 建“星星”元件 執(zhí)行【插入】|【新建元件】命令，新建一個圖形元件，名稱為“星星”，如圖3-6-9所示。 圖3-6-9 創(chuàng)建“星星”元件 在這個新元件中，我們將用一個圓形構(gòu)成星星的主體，另用三條直線構(gòu)成星星四射的光芒。 將【圖層1】名稱重新命名為“中心”，選擇【橢圓工具】，設置【筆觸顏色】為無，在場景中畫一個圓形，大小為“13×13”像素。在【混色器】面板中，選擇【填充樣式】為【放射狀】，將兩個色標的顏色均設置為白色，其中左邊的【Alpha】值為100%，右邊的為0%，用【顏料桶工具】填充圓形，設置顏料桶

5、屬性和填充后的效果如圖3-6-10所示。 圖3-6-10 畫星星的中心 新建一個圖層，重新命名為“光芒”，選擇工具欄上的【矩形工具】，設置【筆觸顏色】為無，在場景中繪制一個細長的矩形。在【混色器】面板中，選擇【填充樣式】為【線性】，將四個色標的顏色均設置為白色。其中，中間兩個色標【Alpha】值為100%，左右兩邊的兩個色標【Alpha】值為0%，用【顏料桶工具】填充矩形，設置顏料桶屬性如圖3-6-11所示。 圖3-6-11 【混色器】面板接著，我們復制幾條光芒，單擊【窗口】|【設計面板】|【變形】，打開【變形】面板，設置【旋轉(zhuǎn)】為45度，連續(xù)單擊三次【復制并應用變形】按鈕，星星的光

6、芒就畫好了，變形面板及星星效果分別如圖3-6-12(a)和3-6-12(b)所示。       3-6-12(a) 制作完成的星星效果                   圖3-6-12(b) 變形面板注意，畫好的星星中心要對準場景中的十字星(為了顯示清楚，圖3-6-12中星星放大300%)。步驟3 創(chuàng)建“旋轉(zhuǎn)的星星”元件 執(zhí)行【插入】|【新建元件】命令，新

7、建一個影片剪輯，名稱為“旋轉(zhuǎn)的星星”。從庫中將名為“星星”的元件拖到第1幀中，在第20幀添加關鍵幀，再在第1幀建立動作補間動畫，在【屬性】面板上設置順時針旋轉(zhuǎn)一周，如圖3-6-13所示。 圖3-6-13 設置動作補間動畫的旋轉(zhuǎn) 步驟4 創(chuàng)建“填充顏色”元件 執(zhí)行【插入】|【新建元件】命令，新建一個影片剪輯，名稱為“填充顏色”。先從庫里把圖形元件“老康藍層”拖到場景中，然后執(zhí)行【修改】|【分離】命令三次，把文字打散為圖形，其中第一次是將圖形元件實例分離成文字，第二次是將文字分離成單個的字塊，第三次是將文字塊分離成圖形。選擇【選擇工具】，在場景的空白處單擊，取消對文字的選擇，再選擇【顏料

8、桶工具】，把每個字中間的空隙都填充上藍色，如圖3-6-14所示。 圖3-6-14 填充好的文字 （3）創(chuàng)建動畫 單擊時間軸右上方的【編輯場景】按鈕，選擇【場景1】切換到主場景中。 本實例場景中共有八個圖層，最下面的圖層是圖片背景，在前面已經(jīng)先建好了，現(xiàn)在我們從最后第二層開始向上一層一層地敘述，在敘述過程中，請隨時參考圖3-6-16。 步驟1創(chuàng)建【填充藍色的文字】層 根據(jù)需要，我們先將背景圖層的幀延伸到第60幀，再插入一個新圖層并命名為“填充藍色的文字”?，F(xiàn)在我們在【填充藍色的文字】圖層中，把庫里的名為“填充顏色”的元件拖到場景中間，在【屬面】板中設置【X】為9，【Y】為65。 注意，

9、以后的操作中，上面各圖層中的文字都要和本圖層中的文字對齊。 在第30、60幀插入關鍵幀，在第1、30幀間建立動作補間動畫，接著編輯第1、第60幀中的元件實例。 分別選擇第1幀與第60幀中的“填充顏色”元件實例，在【屬性】面板上設置【Alpha】值為0%，如圖3-6-15所示。如此設置的作用是讓文字的底色有明暗漸變的效果，讓畫面更生動一些。 圖3-6-15 在【屬性】面板中設置元件實例透明度 步驟2 創(chuàng)建【文字】層 新建名為“文字”的圖層，把庫里名為“老康藍屋”的元件拖到場景中，文字的邊緣要和下面的“填充藍色的文字”圖層文字邊緣對齊，必要時可把對象放大。步驟3 創(chuàng)建引導層和被引導層 新

10、建一圖層并命名為“星星一”，再單擊時間軸上的【添加引導層】按鈕，創(chuàng)建引導層，此時剛剛新建的圖層會自動縮進到引導層下面，單擊縮進了的這一層，在時間軸上連續(xù)單擊【添加圖層】按鈕，共三次，就會在引導層下面創(chuàng)建好四個縮進的被引導層，其它三個圖層分別命名為 “星星二”、“星星三”和“星星四”，在這些被引導圖層中，用來放置旋轉(zhuǎn)的星星。 完成后的時間軸如圖3-6-16所示。 圖3-6-16 時間軸面板 步驟4 設置引導層 選中引導圖層，從庫里把名為“老康藍屋”的元件拖出來，其邊緣要和下面的“文字”圖層中的對象邊緣對齊，執(zhí)行【修改】|【分離】命令三次，把文字打散成形狀，注意，這時“老康藍屋”元件已經(jīng)

11、被“打散”，原文字的邊緣已經(jīng)成為“線段”，它將被我們用作“引導線”。 這時候的場景效果如圖3-6-17所示。 圖3-6-17 打散文字，作為引導線 步驟5 設置被引導層 在步驟3里面，我們已經(jīng)創(chuàng)建了四個“被引導層”，現(xiàn)在我們來設置這四個“被引導層”里的內(nèi)容，每個圖層里放一個“星星”元件，并分別沿著“老康藍屋”4字的邊緣運動。 首先設置第一個“老”字： 為了防止對引導層進行誤操作，我們先鎖住該層，圖層結(jié)構(gòu)如圖3-6-18所示。 圖3-6-18 鎖定引導層選中【星星一】圖層，單擊工具欄上的【對齊對象】按鈕，從庫里把名為“旋轉(zhuǎn)的星星”的元件拖出來，放在“老”字邊緣的某一點，這是星星運動的起

12、始點，在第60幀添加關鍵幀，移動星星到文字邊緣的另一處，這是星星運動的結(jié)束點。在第1幀建立動作補間動畫。切記：元件的中心點一定要位于文字邊緣的線上，如圖3-6-19所示。圖3-6-19 星星在第1、60幀中的位置 從左向右拉動播放頭，觀察星星是否沿文字的邊緣運動，如果從起始點直接運動到結(jié)束點，表示引導失敗，檢查元件的中心是不是位于文字邊緣的線上，或者改變運動的起始點和結(jié)束點，二者之間的路徑不能太遠，太復雜。 另外3個被引導層的設置同上述一樣，只是分別對準“康”、“藍”、“屋”3個文字對象，這里不再贅述。 課堂講解1創(chuàng)建引導路徑動畫的方法（1）創(chuàng)建引導層和被引導層 一個最基本“引導路徑

13、動畫”由兩個圖層組成，上面一層是“引導層”，它的圖層圖標為，下面一層是“被引導層”，圖標為，同普通圖層一樣。 在普通圖層上單擊時間軸面板中的【添加運動引導層】按鈕，該層的上面就會添加一個引導層，同時該普通層縮進成為“被引導層”，如圖3-6-1所示。 圖3-6-1 引導路徑動畫 （2）引導層和被引導層中的對象 引導層是用來指示元件運行路徑的，所以“引導層”中的內(nèi)容可以是用鋼筆、鉛筆、線條、橢圓工具、矩形工具或畫筆工具等繪制出的線段。 而“被引導層”中的對象是跟著引導線走的，可以使用影片剪輯、圖形元件、按鈕、文字等，但不能應用形狀。 由于引導線是一種運動軌跡，不難想象，“被引導”層中最常

14、用的動畫形式是動作補間動畫，當播放動畫時，一個或數(shù)個元件將沿著運動路徑移動。 （3）向被引導層中添加元件 “引導動畫”最基本的操作就是使一個運動動畫“附著”在“引導線”上。所以操作時特別得注意“引導線”的兩端，被引導的對象起始、終點的2個“中心點”一定要對準“引導線”的2個端頭，如圖3-6-2所示。圖3-6-2 元件中心十字星對準引導線 在圖3-6-2中，我們特地把“元件”的透明度設為50%，使你可以透過元件看到下面的引導線，“元件”中心的十字星正好對著線段的端頭，這一點非常重要，是引導線動畫順利運行的前提。2應用引導路徑動畫的技巧（1）“被引導層”中的對象在被引導運動時，還可作更細

15、致的設置，比如運動方向，在【屬性】面板上，選中【路徑調(diào)整】復選框，對象的基線就會調(diào)整到運動路徑。而如果選中【對齊】復選框，元件的注冊點就會與運動路徑對齊，如圖3-6-3所示。圖3-6-3 路徑調(diào)整和對齊（2）引導層中的內(nèi)容在播放時是看不見的，利用這一特點，可以單獨定義一個不含“被引導層”的“引導層”，該引導層中可以放置一些文字說明、元件位置參考等，此時，引導層的圖標為。（3）在做引導路徑動畫時，按下工具箱中的【對齊對象】按鈕，可以使“對象附著于引導線”的操作更容易成功，拖動對象時，對象的中心會自動吸附到路徑端點上。（4）過于陡峭的引導線可能使引導動畫失敗，而平滑圓潤的線段有利于引導動畫成功制作。（5）向被引導層中放入元件時，在動畫開始和結(jié)束的關鍵幀上，一定要讓元件的注冊點對準線段的開始和結(jié)束的端點，否則無法引導，如果元件為不規(guī)則形，可以點擊工具箱中的【任意變形工具】，調(diào)整