Qzone Year of the Dragon Spring Festival easter Egg "will fire the Dragon" Production secrets

I. BACKGROUND

This spring Festival Qzone do the Spring Festival activity is lets the user Xu three New Year wishes (publish space to say the way), then to pull friends to "praise" their own hair wishes, when each desire to accumulate "praise" more than 5 times when you can light the dragon's body One-third, When all 3 desires are accumulated, a complete dragon can be lighted.

The dragon can eventually be taken in the feeds of the Qzone Personal Center:

The first time I saw the design of the dragon, I thought, "What would it be like if this dragon could move?" What if it still sprays fire? What if it could burn the front name red? What if it lights up the yellow diamond Bar? If it can give everyone a?...... "

So the idea of making an egg is sprouting ... And then it got out of hand ...

Ii. Specific steps

The premise, in order to take care of performance problems, take the "Default display dragon static picture, when the mouse moves on the picture when covering a dragon's fire flash, when the mouse moves to another dragon's picture and then dynamically modifies the flash coordinates" such a scheme to achieve a flash so that all static dragons move up the effect.

1, the first thing to do is to put this static picture

Big unloading eight pieces, in the flash inside do some stitching, flip and so on animation let it move up

Basically I split into: head, mouth, claws, waist, tail and other components, and then do the animation, playing like a flying dragon stood up:

From

Change to

2, by default is after the user's name followed by a picture, to this picture bound MouseOver event, when the mouse moved on this picture when the trigger shows the action of the Dragon Fire:

3, when the mouse moved on the picture of the dragon, triggered the display event, this time will be the Dragon Flash display, floating in the original dragon above, as far as possible to fine-tune the coordinates of the alignment coverage:

4, in order to let Flash completely block the original picture, need to space background color to the inside of Flash (because the background color of the space can be changed by the user dress up):

5, in order to make the experience smoother, to "mouse Move up the dragon when the dragon spray fire, when the mouse left the Dragon Stop" effect, in the top layer of dragon Flash put a transparent button, plus events: the mouse moved up when the Dragon play spray effect, the mouse to remove the time to hide all the visible elements, At the same time, Flash notice JS can be over 3 seconds after the flash from the visual range to remove:

* I handled this special, so that the transparency button size slightly smaller than the size of the flash stage, is to solve the two Dragon Direct mouse fast switch will cause the bug (later)

6, in order to let the Dragon fire when the name can be burned red (meaning is booming), need to be the name into the flash inside, in the flash to create a TextField instance to display the name, and need to have a space-like background color blocking the original name

Text Format is "Arial, 14th, right, red"

and to TextField with yellow-orange filter, to similar to the effect of burning red, the final control of the entire text mov dynamic hidden so that the fire slowly burning red:

7, yellow diamond LV8 user name is a golden picture, of course, it also burns red:

Since this picture is already downloaded when Flash is displayed, I can load it into flash again and make some red-tone adjustments:

Add a filter and it becomes

The actual effect is as follows:

Then the dynamic control of the hidden it fade out, superimposed the original picture, it looks like a fire slowly burning red.

8, feel if you can add some of the text will be more festive some? And just lv8 yellow drill bar has a position, so I added a textfield, used to randomly show some of the words and the Dragon-related text:

Of course, in order to emphasize the meaning I want to express, into the space for the first time mouseover to lv8 users of the dragon above will appear "dragon auspicious, booming" this line of words, after the random.

There are about more than 20 different kinds of words.

9, the flame is to find the Dragon's designer xiaoerhu classmate dozen black workers specially to draw me a few frames of pictures to be made by frame animation:

It will have the effect of spraying fire:

10, the problem is more trouble, because the Dragon Flash is floating in the original static picture above, so the different browsers to do the absolute positioning of the fine-tuning, Ie6/ie7/ie8/ie9/safari/firefox/chrome have dealt with a separate ... (Hard-pressed front-end development) and to IE6 also in the flash inside the text and the location between the pictures and make special adjustments, particularly disgusting.

11, the name of the background need to follow the name of the dynamic adjustment of the length, here I take the way is when the static picture of the mouse dynamic calculation of this static picture distance from the left head to determine how much this width should be, and then to flash to dynamically adjust the background width:

12, because the Dragon's flash is floating in the original picture above, if anything will make the original feeds position changes will lead to the plight of two dragons, so in this time of making eggs I also carpet to think of will lead to feeds position changes place added an "IC _feeds_position_change "Custom event, and then listen to the event in JS, when the event is triggered to readjust the location of the Dragon Flash, to avoid this bug."

13, when the distance between the two dragons is very close, the mouse can quickly switch between them, this time I found that the trigger will need to adjust the hidden button slightly smaller than the size of the flash stage, to ensure that each mouseout will trigger, otherwise it will cause the first dragon to appear in the second location of the bug:

That's why the button that triggered the trigger is deliberately lowered slightly.

14, this dragon from the birth to February 2 The number of fires from the statistics show that the daily average has reached tens.

Third, summary

Here are some of the core values that are quoted in Facebook's prospectus-"daring to take risks":

Dare to take risks

Developing a good product means taking risks. This may be worrying, making most companies afraid to take courageous measures. However, in a world that is changing so fast, if you dare not take risks, you are doomed to fail. We have another view: "The most dangerous thing is not to take risks." "We encourage everyone to make bold decisions, even if it means mistakes."

Because this is a new attempt to make this egg, from a static picture of inspiration to the next step of implementation and debugging will find the need to solve the details of a lot of things, a seemingly small thing to do it also needs to pay a lot of thought and energy, but the whole process let people also enjoy, Because the enjoyment is very intoxicated, the whole process of my self-test efficiency is also very high, basically the development process covers more than 98% possible bugs, including 2 Dragon fast Switch between the limit test and so on.

The last quote product classmate words:

"Interest is the best motivation", and I hope that you can combine the interests and products to create more interesting things.

If a classmate has not experienced this dragon, please rush the Dragon line to come to our qzone inside look at it ~

Author: xiaoer

Article source: Tencent Big Lecture Hall