Qzone龍年春節彩蛋“會噴火的龍”制作揭秘

　　一、背景

　　今年春節Qzone做的春節活動是讓用戶許三個新年願望(發表空間說說的方式)，然後自己去拉好友來“贊”自己發的願望，當每一個願望積累“贊”的次數超過5次的時候就可以點亮龍身體的三分之一，當3個願望都積累到的時候就可以全部點亮一條完整的龍，

　　最終在Qzone個人中心的Feeds裡面可以帶上這條龍：

　　當時我第一眼看見這條龍的設計稿腦中就浮現各種想法：“如果這條龍可以動起來將會是什麼樣子?如果它還會噴火?如果它可以把前面的名字燒紅?如果它可以把黃鑽的條點亮?如果它可以給大伙拜年?……”

　　於是萌發出做一個彩蛋的念頭……然後就一發不可收拾了……

　　二、具體步驟

　　大前提，為了照顧性能問題，采取的“默認顯示龍靜態圖片，當鼠標移上圖片的時候覆蓋一個龍的噴火flash，當鼠標移到其他的龍的圖片再動態修改flash坐標”這樣的方案來實現一個flash讓所有的靜態龍都動起來的效果。

1、最開始要做的就是將這張靜態圖片

　　大卸八塊，在flash裡面做一些拼接、翻轉等動畫讓它動起來

　　基本上被我拆分成了：頭、嘴巴、爪子、腰、尾巴等幾個部件，然後做了動畫，播放起來就像飛著的龍站了起來：

從

變化到

　　2、 默認情況下是在用戶的名字後面跟著一張圖片，給這個圖片綁定了mouseover事件，當鼠標移上這張圖片的時候觸發顯示龍噴火的動作：

　　3、當鼠標移上這個龍的圖片的時候，觸發了顯示事件，這個時候將龍的flash顯示出來，浮在原來的龍上面，盡量地微調坐標進行對齊覆蓋：

　　4、為了可以讓flash完全擋住原來的圖片，需要將空間的背景色傳到flash裡面(因為空間的背景色可以因用戶裝扮而變)：

　　5、為了讓體驗更加順暢，達到“鼠標移上龍的時候龍噴火，鼠標離開龍的時候停止”的效果，在龍flash的最頂層放了一個透明的按鈕，加上事件：鼠標移上去的時候龍播放噴火效果，鼠標移除去的時候隱藏所有可見元素，同時flash通知js可以過3秒之後將這個flash從可視范圍內移去：

　　*我這裡特別處理了一下，讓透明按鈕的尺寸略小於flash舞台的尺寸，是為了解決在兩個龍直接鼠標快速切換會引發的bug(後面有講到)

　　6、為了讓龍噴火的時候可以將名字燒紅(寓意是紅紅火火)，需要將名字傳進flash裡面，在flash創建一個textField實例來顯示名字，同時需要有一個跟空間一樣的背景色擋住原來的名字

　　文字格式為“宋體，14號，右對齊，紅色”

　　並給textField的加上發橙黃的濾鏡，達到類似被火燒紅的效果，最後控制整個文字mov的動態顯隱使到被火慢慢燒紅：

　　7、黃鑽lv8的用戶名稱是一張金黃色的圖片，當然要把它也一起燒紅：

　　由於在顯示flash的時候這張圖片就已經下載完畢了，所以我可以再一次將它加載進flash裡面，然後做一些紅色調的調整：

加了濾鏡就變成

　　實際效果如下：

　　然後再動態控制顯隱它漸顯出來，疊加了原來的圖片，看起來就像是被火慢慢地燒紅。

　　8、感覺如果可以加一些拜年的文字會不會更喜慶一些?而且剛好lv8黃鑽條上面有位置，所以我在上面加了一個textField，用來隨機顯示一些拜年語句和跟龍有關的文字：

　　當然，為了強調我要表達的寓意，進空間第一次mouseover到lv8用戶的龍上面都會出現“龍年吉祥，紅紅火火”這一行字，之後的就隨機了。

　　大概有二十幾種不同的文字吧。

　　9、火焰是找了龍的設計師xiaoerhu同學打黑工特地額外給我畫了幾幀圖片來做成逐幀動畫：

　　套上去就有噴火的效果了：

　　10、對齊問題比較麻煩，因為龍flash是浮在原來的靜態圖片上面的，所以對不同浏覽器要做絕對定位的微調，ie6/ie7/ie8/ie9 /safari/firefox/chrome都單獨處理了一遍……(苦逼的前端開發)而且對ie6還要在flash裡面對文字和龍的圖片之間的位置做特殊調整，特別惡心。

　　11、名字的背景需要跟進名字的的長度動態調整，這裡我采取的方式是當鼠標