Flash Practical tips: Dynamic star mask

Dynamic | The effect of this example is relatively simple, we only need to do is to put two pictures on different layers, and then, the image above to do a mask layer, mask layer can eventually cover the entire picture, the image switch completed.

The following are specific practices:

1. Create a new flash document that creates three layers.

2. Import two pictures (the best size), respectively, placed in the following two layers, so that the above picture just can cover the following picture.

3. In the third layer, draw a small square, converted to component MC, named Maskfield, the same as the instance name.

4. Double-click the Maskfield, enter the editing state, so that the origin of the component and the square of the upper left vertex coincide.

5. Turn the square to MC, named Mask, the same as the instance name.

6. Double-click the Mask, enter the editing state, so that the origin of the component and the square of the upper left vertex coincide.

7. Insert a key frame at the 15th frame of the layer on which the square is located (the number of frames can be grasped) then, the first frame of the square to do some deformation (this can play your creativity and imagination, but for beginners, it is recommended that the frame of the graphics do not completely cover the original square, or you may not see the effect.)

8. Create a shape tween between the first frame and frame 15th and add as:stop () to frame 15th;

9. Go back to the main scene and set the Maskfield layer as the mask layer.

10. To test the film, you can now see that some of the images below have been cut into the image above. So, the next step is to replicate multiple mask to achieve the end result of the entire image being switched.

11. Close the Test window and continue to do it.

12. We see that the sequence of squares appears to be irregular, because the author uses a random function. So, then insert a layer and write the code that defines the random variable. And because it's a two-dimensional space, it's best to define a two-dimensional array.

13. If the edges of the square is 25 and the image is 400*300, add the code:

var maxhor=400/25
var maxver=300/25
The variable is not used here to prevent the deformation process from affecting the width and height.
var order=new Array ();
for (Var hor=0;hor<=maxhor-1;hor++) {
Order[hor]=new Array ();
for (Var ver =0;ver<=maxver-1;ver++) {
Order[hor][ver]=maxver*hor+ver
}
}//first sets an index on each square to control the order of appearances.
But the order of appearances is ordered from top to bottom, from left to right, so we have to define a random array.
for (Var hor=0;hor<=maxhor-1;hor++) {
for (Var ver=0;ver<=maxver-1;ver++) {
Tempvalue=order[hor][ver]
Randhor=random (Maxhor)
Randver=random (MaxVer)
Order[hor][ver]=order[randhor][randver]
Order[randhor][randver]=tempvalue
}
}
This is a commonly used algorithm for generating random arrays, and is a set of relatively fixed patterns. As for the principle of how to disrupt the order, you can realize it by testing it yourself.
The following defines the final array index, which controls the appearance, and is generated using the preceding random array.
var index=new Array ()
for (Var hor=0;hor<=maxhor-1;hor++) {
for (Var ver=0;ver<=maxver-1;ver++) {
Index[order[hor][ver]]=hor+ "_" +ver

}
}