QQ空间如何制作会喷火的龙彩蛋,会喷火的龙彩蛋制作方法分享

QQ空间如何制作会喷火的龙彩蛋,会喷火的龙彩蛋制作方法分享

下面说说制作方法:

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的用户名称是一张金黄色的图片,当然要把它也一起烧红:

8、感觉如果可以加一些拜年的文字会不会更喜庆一些?而且刚好lv8黄钻条上面有位置,所以我在上面加了一个textField,用来随机显示一些拜年语句和跟龙有关的文字:

9、火焰是找了龙的设计师xiaoerhu同学打黑工特地额外给我画了几帧图片来做成逐帧动画:

10、对齐问题比较麻烦,因为龙flash是浮在原来的静态图片上面的,所以对不同浏览器要做绝对定位的微调,e6/ie7/ie8/ie9/safari/firefox/chrome都单独处理了一遍……(苦逼的前端开发)而且对ie6还要在flash里面对文字和龙的图片之间的位置做特殊调整,特别恶心。
11、名字的背景需要跟进名字的的长度动态调整,这里我采取的方式是当鼠标以上静态图片的时候动态计算这个静态图片距离左边头像的距离来判断这个宽度应该是多少,然后传给flash去动态调整背景宽度:

12、由于龙的flash是漂浮在原来的图片上面的,如果发生任何会让原来这条feeds位置发生变化的事情都会导致出现两条龙的窘境,所以在本次做彩

蛋的时候我也地毯式地把能想到的会导致feeds位置发生变化的地方加了一个“IC_FEEDS_POSITION_CHANGE”自定义事件,然后在JS里面监听这个事件,当触发这个事件的时候重新调整一下龙flash的位置,避免出现这个bug。
13、当两条龙之间距离很近的时候,鼠标可以快速在它们之间切换,这个时候我发现需要将触发显隐的按钮调整得略小于flash舞台的大小,才能保证

每次mouseout都会触发,不然会导致第一条龙显示在第二个位置的bug:所以才特意将这个触发显隐的按钮调小一些。
14、这条龙从诞生到2月2号喷火的次数从统计数据显示日均已经达到千万级。

QQ空间:http://i.qq.com/

分类:默认分类 时间:2012-01-05 人气:2
本文关键词:
分享到:

相关文章

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.036 (s). 9 q(s)