The mosaic effect in the scene conversion in Flash

Transformation

Powrepoint inside very commonly used effect, I can't say name, let's call "mosaic gradient" effect. Is the image of the grid receded, showing another picture. Another picture, after a while, was squared away, showing the next one. This loop. You can look at my source file first. It uses three pictures. This effect is very practical, you can use in logo or enterprise product promotion, simple and beautiful.

Well, the gossip does not say, introduce the idea first.

Our thinking is: There are four MC in the scene. The bottom layer is used as a frame, not used, we set the depth of 0, the middle two layer is really to display the picture, respectively, set depth of 1, 2, we use "upper", "lower" to represent. The top layer is the mask and the key to the square effect. We set it to 3.

Since the mask layer is the key, let's say it first.
This is a mask for the MC is built with as an empty MC, the name son for Mcmask, in the mcmask copied 10*10 side square without Gap, (of course, in the actual code can be seen, I have the width and length of the separate, so in fact can be rectangular, here just for the sake of narrative convenience).

Our aim is to let these small squares be randomly cleared until all are cleared away, because the mcmask is the upper layer of the picture mask, so the figure is "square" to disappear, the lower level, such as long width (we set the figure as long as the width, these convenient, but also beautiful a bit) of the picture is "square" to appear. When all the squares are cleared, we raise the lower layers to the top, then copy another picture to the lower level, and do a loop. This will achieve a cycle of effect.

The idea is this, if you still have some doubts, don't worry, first look at the effect.

Let me tell you about the code, and you'll see.

There are three frame codes in the main scene. The first frame is initialized for some objects and variables:

_GLOBAL.K = 2;//Determines the reproduction of the picture. _global.xpos = 135;//determines the horizontal axis of the drawing. _global.ypos = 135;//determines the horizontal axis of the drawing. Attachmovie ("MC" +3, "MC" +3, 2); Copy the picture at the top of the initial state. (I hope the word "upper" will not cause ambiguity) with (eval ("MC" +3)) { _x = xpos; _y = ypos;} Attachmovie ("border", "border", 0);//Copy photo frame. On the ground floor. With (border) { _x = xpos; _y = ypos;} _root.createemptymovieclip ("Mcmask", 3);//Generate mask layer, next frame we will copy small squares inside. With (mcmask) { _x = xpos; _y = ypos;} Eval ("MC3"). Setmask (Mcmask);//The initial state of the set mask, attention to the masked object. _global.xw = (eval ("MC" +3). _width)/10;//Determine the length of the small square. _global.yh = ( Eval ("MC" +3). _height)/10;//determines the height of the small square. The global total on the surface is described in more detail in the next frame.

As you can see, we have declared some global variables and MC. If you have questions about their use, don't worry, we'll talk about it later.
Second Frame code:

Attachmovie ("MC" +k, "MC" +k, 1)//Copy Lower Mc.with (eval ("MC" +k)) {_x = xpos; _y = ypos;} For (i=0 i<100; i++) {//Copy small squares in Mcmask, which is the mask layer. Mcmask.attachmovie ("MCM", "MCM" +i, I); With (mcmask["McM" +i]) {_width = XW; _height = YH; _x = (i%10-4.5) *xw;//The coordinate value so decided, the geometric center of the small square set is the center point of the Mcmask. _y = (Math.floor (I/10) -4.5) *yh;　　}}_global.randomkdiffer = function (n, m, k) {//random functions, which are designed to generate K-XOR numbers between n~m and put them into the array arrayk. Arrayk = [];var i = 0;while (i<k) { A = random (m-n+1) +n; for (var j = 0; j<i; j + +) {if (a = = Arrayk[j]) {break; } } if (j = = i) {Arrayk[i] = A; i++; } } return Arrayk; function Maskt () {//main functions. In the third frame it will be called with setinterval. var a = [];a = Randomkdiffer (0, 99, 10);//Find 10 random numbers in order to clear the corresponding small squares next. for ( var i = 0; i<10; i++) {//clear 10 random squares at once, mcmask["McM" +a[i]].removemovieclip ();} For (j=0 j<100; j + +) {//judge whether the small squares are all cleared. if (_root.mcmask["McM" +j]!= undefined) {break;}} if (j>=100) {//If all is cleared, redefine the object and variable values. Clearinterval (_ROOT.MASKMC),//clears the interval variable (in the next frame). _root["MC" +k].swapdepths (2);//re-refer the lower MC depth to the upper level. k--;//Control MC Copy of the K value reduced by 1, which means that once again replicated in the back of a MC. if (k<1) {//If the K value is less than 1, the loop starts at 3. and the lower MC (raised to the top) is redefined as a masked layer. K = 3; Eval ("MC" + 1). Setmask (Mcmask); else {eval ("MC" + (K+1)). Setmask (Mcmask); } _root.gotoandplay (2);//skip to second frame to execute again.}

This frame is primarily defined as the lower-level MC, because the previous level of the MC in the previous cycle has been defined (initialization by the first frame code), and in the end (when the small square is all gone, the original upper layer is not visible, when the lower layer to ascend to the top, the appearance can not see out) Elevated to the top and defined as masked. The mask layer's small squares can be seen and regenerated, so what I'm seeing is still the lower picture of the previous cycle. After another cycle, using the K-value of the cycle of decline, we can continue to reproduce the lower layers of the picture, to achieve a cycle of effect. As long as you understand the role of K, The others are understood. Note that the second frame of our replication depth is 1, representing the lower level. When the small square is cleared, it is raised to 2. The third frame is to let the time head stop, interval 0.2 seconds to perform the Maskt function. Because it eliminates 10 MC at a time (there is no need to worry about duplication).

So it looks like the square disappears and disappears and then returns to the second frame to start a new round. This frame is the guarantee of circulation. Several other global variables are designed to better control the position and size of the picture. We can change the size of the picture without needing to change the code. But one thing to note is that the pictures are best sized. However, in terms of the characteristics of the code, we can also set the picture to a different size, as long as a slight change on the line. Here is left for everyone to think about. If you want to add more pictures, just name the link names "MC" +i (i= 1,2,3 ...) on the line, modify the value of K's cyclic judgement accordingly.

If you do not understand, please download the source file .