解密《英雄傳奇》動態界面

　　我們先來看幾個Flash動畫效果

　　熔煉

　　英雄傳奇-輔印強化

　　英雄傳奇-寶具鑲嵌

　　英雄傳奇-組隊結算界面

　　Flash現在在互聯網行業中的應用極為廣泛，音樂、傳媒、廣告、游戲，前三項多言，我們今天的重點是解密Flash動畫在游戲中的應用。

　　上面我們看到的是《英雄傳奇》游戲中的界面動畫。看上去會覺得效果很多，很復雜，但是萬變不離其宗，華麗的外表下隱藏的其實還是簡簡單單的東西，我們來先從Flash動畫的基本實現方式來分析下。

　　Flash動畫可分解為遮罩動畫、補間動畫、逐幀動畫三個大類，其中補間動畫又分為形狀補間、傳統補間以及flash CS4以後加入的補間動畫三種，後面再實例解密過程中逐步為您說明這三種補間的區別。網頁上與游戲中的各種flash動畫效果就是這三個大類組合出來的千變萬化的效果。

　　如何把這三大類在實際工作中應用起來，結合起來，做出很酷很炫的效果?我們進一步通過這個組隊結算界面的動畫制作流程來為您解密。

　　使UI同學設計的資源生動起來，鮮活起來，就是我們要做的工作了，做好這個工作還得分幾步走。Let’s Go!

　　1、溝通階段：

　　拿到UI同學出的UI設計稿，與UI同學交流他在設計時腦海中期待的動畫效果，我也會給出我的動畫建議，達成共識後，請UI同學把需要獨立出來的部分進行切圖。再咨詢交互同學的意見，每個單元出現的先後順序應該是怎樣，如有不妥進行調整。

　　2、制作階段：

(1)

　　確認單元出現的先後順序

(2)

　　Title圖片存為元件後，運用傳統補間動畫(注)，調整第一幀的大小、Alpha值實現了淡入變大效果。

　　但是，由於Title是UI同學設計的圖片，單純這樣的出現不夠有帶入感，我們可以把該動畫圖層復制一層。

　　點選中該圖層中的元件，在屬性中進行對該元件的設置(注意：每一個關鍵幀都需要進行相應的設置)

　　不同效果的嘗試後，“增加”最接近我想要表現的效果，果斷的選擇了“增加”。

　　在元件屬性中增加了模糊的濾鏡效果，根數我想表現的效果來調整數值。(注：模糊效果只針對“影片剪輯”的元件才有該選項，“圖形”元件不具備該屬性。)

　　注：傳統補間：在時間軸上的不同時間點定好關鍵幀(每個關鍵幀都必須是同一個元件)，之後，在關鍵幀之間選擇“創建傳統補間”，動畫就形成了。傳統補間是針對簡單的點對點平移，可以根據元件屬性來調整Alpha值，來制作淡入淡出;可以添加元件濾鏡效果來制作模糊、外發光等效果;可以給該元件的補間動畫添加引導層設置引導線來改變元件的運動軌跡。

　　(以藍色圓形創建為元件制作的簡單位移傳統補間動畫)

(3)、

　　“英雄成長”單位的框體出現操作與Title類似，也是傳統補間淡入效果，為了表現速度感，在第一幀增加了“模糊”濾鏡效果。

　　但是，傳統補間動畫只是勻速位移，如果我想表現的效果是運動初始很快，越接近運動結束越慢的效果該如何達到?不斷的增加關鍵幀來調試麼?這樣很辛苦啊!

　　當你的鼠標指針點擊在時間軸的補間上時，留意下屬性欄。

　　會發現一個叫“緩動”的家伙，這個家伙就是負責解決這個問題的。最大數值為100，最小數值為-100，數值越大，運動初始的速度越快後面越來越慢，數值越小，運動初始的速度越慢後面越來越快。很上流有木有!

(4)、

　　接下來出現的是“得分”，得分出現的方式與之前的操作一樣，不詳細描述，我們詳細說下分數變化的動畫。這是一個嵌套動畫，時間軸上的淡出是一個“影片剪輯”元件，在這個元件中，其實是內有乾坤。

　　好吧，寫的誇張了些，其實就是一個簡單的逐幀動畫，0-9數字每一幀一個，上下分別做些位置上的變動，添加了“模糊”濾鏡。播放起來就是一個不斷滾動的分數變化效果。

　　如果這個分數有4位數，我又不想每一位上的數字都一個一個去調，有沒有什麼偷懶，又不影響效果的辦法?

　　首先，我們選中數字元件，在屬性欄中把屬性設置為圖形。

　　接下來我們新建三個圖層，把該原件分別復制到每一個圖層，調整好相對應位置。

　　這樣就可以了麼?太天真了!這個時候導出動畫來看發現分數是不會動的。

　　圖形元件的特性與影片剪輯不同，他需要在元件外的時間軸上插入等同於元件內動畫幀數的幀，才能完整的呈現出動畫內容。

　　就是這樣，但是這樣又會有新的問題，四個數字變化起來是一模一樣的，完全不是我想要的效果啊。

　　點選中一個元件，看屬性欄，旁邊會有一個循環選項，下面還有個數字，改改數字試試?試一試就會發現，原來這個數字是控制從哪一幀開始播放這個元件內的動畫。

　　這樣就得到一個我們還算滿意的效果。

(5)、

　　評級動畫分為了兩個部分：先是這個墨跡像被一只筆畫出來，接著“上甲”字樣落下，重重的砸在上面。結合了“遮罩動畫”與“傳統補間動畫”

　　先來看下這個墨跡是怎樣制作出來的吧。

　　由於墨跡也是UI同學設計的位圖，為了不讓效果有太大的偏差，果斷放棄了矢量逐幀繪制而選擇了用遮罩動畫來制作。(雖然不用逐幀繪制墨跡，但是依然要逐幀繪制遮罩層。苦逼啊~!)

　　這也算是一個小逐幀動畫吧，為了盡可能的表現的像墨跡，所以遮罩層相對畫的還是比較細致。

　　右鍵點擊左邊的