http://www.flag.com.tw/book/cento-5105.asp?bokno=FS420&id=353
快速套用移動補間動畫－淡藍色氣泡水
建立好移動補間動畫之後, 如果想要套用在其它元件上, 怎麼做才好呢？若採用土法煉鋼一個一個的設定導引線、移動補間, 那就太沒有效率了。本文我們要教您一個快又好用的方法, 將建立好的移動補間動畫一次套用到其它元件上。
Flash CS3 可以將我們辛苦建立的移動補間動畫, 轉換成 ActionScript 3.0 的語法並複製下來, 只要指定欲套用的元件名稱, 再將程式碼貼入正確的位置, 元件就會依語法的設定進行移動及變化, 快速又方便。 如果你是 Flash 的初學者, 倒也不用看到 ActionScript 就害怕, 因為實際做一遍之後, 你會發現, 本文的範例不用知道語法的結構、函式, 一樣可以輕鬆做出令人眼睛為之一亮的動畫。
動畫元件與流程說明
在本文的操作, 我們就以做好的氣球動畫為例, 教您如何將移動補間動畫及導引線設定套用到氣泡上。
元件介紹
首先針對氣球動畫的設定做一個簡要說明。只用到一個氣球圖像元件。
在圖層的安排上, 我們製作了導引線在導引路徑圖層, 使氣球能隨著導引線的方向移動。影格設定方面, 影格 20 的地方, 設定了氣球的 Alpha 程度 (透明度), 使氣球在往上飄移之後, 會慢慢消失不見：
動畫製作流程
我們先來看一下本章動畫的製作流程, 讓您先有個整體的概念：
重點說明
要套用移動補間動畫程式碼的元件, 必須是影片片段或按鈕類型, 才能夠在屬性面板上設定實體名稱。設定實體名稱的作用, 就是便於利用 ActionScript 來控制, 若是圖像元件, 將無法設定實體名稱。
本文動畫將在已設定移動補間動畫的元件上, 以 『將移動複製為 ActionScript3.0』 命令 ( 『Copy Motion as ActionScript 3.0』 ) 來建立程式碼, 並貼入另一個動畫的影片片段元件上。此命令亦可在同一個動畫中使用, 其操作方法完全相同。
『將移動複製為 ActionScript 3.0』 命令不僅可以將移動補間動畫建立成程式碼,諸如縮放大小、旋轉、屬性面板上的顏色設定、混合模式、導引線…等, 都可以建立成程式碼, 並迅速套用至其它元件上, 增加動畫的製作效率。
設定文件屬性與圖層安排
在著手製作動畫之前, 先來看看本章動畫的屬性設定, 以及圖層安排。
設定文件屬性
本動畫共有 20 格影格, 以 12 fps 的速度播放可播放 1.6 秒, 連續播放可營造出氣泡不停冒上來的感覺。動畫的文件屬性設定如下：
圖層安排
動畫會用到 5 個圖層, 另外兩個圖層, 我們將在稍後帶領您建立, 並設定內容。圖層安排如下：
製作氣泡影片片段元件
剛才說過, 若要使用 ActionScript 來控制舞台上的元件, 元件類型就必須是影片片段或是按鈕才行。但元件庫中的氣泡圖只是圖像元件, 這裡我們就先來製作能套用ActionScript 的氣泡影片片段元件。
Step 1 請執行 『插入/新增元件』 命令 ( 『Insert/NewSymbol』), 建立一個名為 "氣泡" 的影片片段元件：
Step 2 按下建立新元件交談窗的確定鈕之後, 會進入氣泡影片片段元件的編輯模式,請由元件庫面板中將我們製作好的氣泡圖拉曳至舞台上。
Step 3 接著我們要設定氣泡的實體名稱, 請選取舞台上的氣泡實體, 然後開啟屬性面板, 如圖設定元件類型及實體名稱：
稍後複製補間動畫時, 將以此實體名稱來建立程式碼。
複製移動補間動畫的程式碼
接下來我們要開始複製設定好的程式碼了。
複製程式碼
Step 1 選取氣球圖層影格 1 到影格 20 的範圍, 然後在選取範圍上按右鈕, 執行 『將移動複製為 ActionScript 3.0』 命令( 『CopyMotion as ActionScript 3.0』 )：
Step 2 此時會詢問你要將程式碼複製給哪一個元件使用, 還記得我們在上一節將氣泡的實體名稱設定為 "bubble_mc" 嗎？將它輸入空白欄位中吧！Flash 將以此實體名稱來建立程式碼：
將程式碼貼入影片片段元件
複製好之後, 我們暫時看不到任何變化, 因為 Flash 只是暫時將程式碼複製到系統的剪貼簿中。請按下檔案的頁次標籤, 切換至 13-ex02.fla, 我們要將複製的程式碼貼到氣泡元件上。
Step 1 由檔案頁次標籤切換至 13-ex02.fla：
TIP：除了在不同檔案間複製/貼上外, 亦可複製到相同檔案中的不同元件。
Step 2 雙按 13-ex02.fla 元件庫面板中的氣泡元件圖示, 進入氣泡元件的編輯模式,選取圖層 1 再按下
鈕, 在圖層 1 之上加入一個新圖層, 並命名為"Actions"：
Step 3 選取 Actions 圖層的影格 1, 執行 『視窗/動作』 命令 ( 『Window/Action』 )或按下 F9 鍵, 開啟動作面板, 然後在窗格內按右鈕, 執行『 貼上』 命令, 將剛才複製的程式碼貼到此處。
TIP：『將移動複製為 ActionScript 3.0』 命令是將影格的變化, 以 ActionScript 3.0 語法轉換成程式碼,你可以瀏覽一下所有的內容。
Step 4 按下場景 1 鈕, 結束氣泡元件的編輯狀態, 動畫的元件就都準備好了, 接下來就準備將氣泡安排在舞台上囉！
安排氣泡的位置
這一節我們要開始將氣泡安置在舞台上, 請如下繼續進行動畫的設定。
設定舞台上的氣泡位置
Step 1 請先選取水圖層, 再按下 鈕在水圖層上新增一個圖層, 並重新命名為 "氣泡 1"。
Step 2 選取氣泡 1 圖層的影格 1, 然後將氣泡影片片段由元件庫面板拉曳至舞台上, 參考下圖安排共 5 個氣泡：
Step 3 接著我們要增加整個動畫的影格長度。請選取氣泡 1 的影格 20, 按住滑鼠左鈕不放直接再向下拉曳, 一口氣選取氣泡 1、水、冰塊及背景圖層的影格 20, 然後在選取範圍上按右鈕, 執行『 插入影格』 命令, 即可一次增加所有圖層的影格。
Step 4 我們希望氣泡 1 的氣泡向上移動後不久, 能再產生第二波氣泡, 因此接著在氣泡 1 圖層上新增一個新圖層, 並命名為 "氣泡 2"。
Step 5 在氣泡 2 圖層影格 5 的位置按下 F6 鍵, 新增關鍵影格, 接著如下圖安排第 2波氣泡的位置, 你可以讓氣泡 2 的位置與氣泡 1 的交錯, 使動畫的畫面更豐富。
到這裡整個動畫就完成了, 你可以按下 Ctrl + Enter 鍵發佈動畫, 看看設定的結果。
修改播放不完整的問題
仔細觀察氣泡的移動動畫, 你會發現第 1 波的氣泡動畫只有第一次會播放, 再重複播放時, 就只會播放第 2 波的氣泡。這裡告訴你一個解決的方法, 那就是將氣泡 1 的影格 1 向後面拉一格影格, 使影格 1 轉換為空白關鍵影格,就能使動畫正常播放了。
留言列表
