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里面，然后做一些红色调的调整：