Explosion:
3D Flip:
Parabola Pie chart:
In FLASH7 and the following versions, as is not a direct cutting of the image, and in these effects, without cutting, is not allowed to split the picture into multiple units to move independently. So, how does this work out?
First look at the following two map:
You can see that the same image, with the same mask, and then change the position of the mask, you can get different regions of the image, to achieve the effect of image cutting.
In order to ensure that each area can be displayed at the end, with the Duplicatemovieclip method to copy more than a mask and pictures of the MC, with as control mask position, you can "cut" the image into N MC, and then control their movement, it can be.
The following is a parabola pie chart, for example, to say the specific operation:
1 Create the MC that contains the mask and the picture first.
1.1 A new Component MC, named Pic_part.
1.2 This time adopt Attachmovie method, so want to set Link: Menu "window"-"library", find Pic_part component, right Key-"link", tick "export for action script" and "Export in first frame", point "OK"
1.3 Double-click the symbol to enter the edit state.
1.4 Import a picture, set it to a width of 400, high 300
1.5 Convert the picture to the component MC, the registration point is in the upper left corner, the name is graphic, the instance name is the same.
1.6 Insert a new layer, draw a 25*25 square, convert to MC, registration point is also the upper left corner. The name is mask, the same as the instance name.
1.7 Because the special effect is a parabolic pie chart, and is random, so, in the MC set random parabola motion code, than at home scene with a for statement convenience.
Create an MC First, named Piccontrol, with the instance named control.
Using the idea of three-frame MC: First frame initialization, second frame periodic code execution, third frame: gotoAndPlay (2) to implement periodic code.
Here we first discuss the generation of random parabola (involving junior maths problems, if you forget, read the book first)
First, the end of the parabola motion is fixed so that the image slices just make up the original image.
Then, since the equation of the parabola is Y=a*x*x+b*x+c, that is to say, three points to determine the shape of the parabola, we define two random points to determine a random parabola. One of these is the starting point of the image, and then the other point should have the horizontal line between the other two points, Then the ordinate is above both, in order to have a feeling of upward throw.
Suppose that now defines three points (x1,y1), (X2,y2), (x3,y3), then substituting the parabolic equation, solving
A= (-X1*Y2-X3*Y1+X3*Y2+X1*Y3+X2*Y1-X2*Y3)/(X1-X2)/(X2-X3)/(X1-X3)
B= ((y1-y2)-a* (X1*X1-X2*X2))/(X1-X2)
C=y1-a*x1*x1-b*x1 This code to the first frame of the Piccontrol, as for the specific value of the point coordinates, is related to the position of the mask slice, so it is not assigned here.
Now put (X1,Y1) as the starting point, so the first frame has to be added
_parent.mask._x=x1
_parent.mask._y=y1 in addition, (X2,Y2) is the middle point, (X3,Y3) is the endpoint, see the following figure:
Second frame: Let the picture continue to move along the parabola until the end point (x3,y3).
The code is as follows:
x = _parent.mask._x; A copy is saved for the horizontal axis to be used to calculate the Y value.
_parent.mask._x + = (x3-x1)/math.abs (x3-x1) *math.abs ((x-x3)/(X3-X1)) *20;//let the horizontal axis of the image close to the horizontal axis of the endpoint.
x = _parent.mask._x;//Saves a copy of the horizontal axis again.
_parent.mask._y = a*x*x+b*x+c;//calculates the corresponding y position with the parabolic equation.
Check that when the horizontal axis moves over, the instructions have been moved in place. Position the shape on the final coordinate (X3,Y3).
This is divided into two kinds of situations, of course, the algorithm here can be further optimized.
if (x3>x1) {
if (x-x3>-1) {
x = x3;
_parent.mask._x = x;
_parent.mask._y = A*x*x+b*x+c;
Stop ();
}
}
if (x3<=x1) {
if (x-x3<1) {
x = x3;
_parent.mask._x = x;
_parent.mask._y = A*x*x+b*x+c;
Stop ();
}
}
//-------------
_parent.graphic._x = _parent.mask._x-x3;//determines the image horizontal axis according to the mask horizontal axis.
_parent.graphic._y = _parent.mask._y-y3;//Determines the ordinate of the image based on the mask ordinate. Third frame:
gotoAndPlay (2); 1.8 Return to the main scene.
2 Create an empty MC in the home scene named Paofield, the same as the instance name. The MC is a container for small pictures being cut.
3 Creating initialization code
At home scene first frame input code:
var maxhor = 16;
var maxver = 12;
var unitx=25
var unity=25
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;
}
}
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
}
The explanation of the code, as mentioned earlier, is not discussed here.
4 Create a live update code.
Here again the idea of using control three frame MC.
4.1 First frame:
NUM=0;//has replicated the MC to 0
step=2;//copies two MC 4.2 second frames per cycle:
for (var i = num; i<=num+step; i++) {
_parent.paofield.attachmovie ("Pic_part", "part" +i, I);//Get an instance of the MC from the Library
_parent.paofield["part" +i].mask._width = _parent.unitx;//Sets the width of each image slice
_parent.paofield["part" +i].mask._height = _parent.unity;//Sets the height of each image slice
_parent.paofield["part" +i].control.x1 = random (400) -200;//let the start point x randomly locate (there is a certain limit to not be able to move to the end of the time)
_parent.paofield["part" +I].CONTROL.Y1 = random (300) -150;//let the start point y randomly locate
_parent.paofield["part" +i].control.x3 = _parent.index[i].split ("_") [0]*_parent.paofield[' part ' +i].mask._width;// Determines the location of the endpoint based on the position index x of the image
_parent.paofield["part" +i].control.y3 = number (_parent.index[i].split ("_") [1]) *_parent.paofield[' part ' +i].mask._ height;//determines the location of the endpoint according to the position index y of the image
_parent.paofield["part" +i].control.x2 = (_parent.paofield["part", +i].control.x3+_parent.paofield["part" +i]. CONTROL.X1)/2;//For simplicity, the middle-point coordinate here is the midpoint of the starting and ending lines.
_parent.paofield["part" +i].control.y2 = random (300) -150;//take random Y2 Point
_parent.paofield["part" +i].ball.contents = _parent.index[i];
if (i>=_parent.maxhor*_parent.maxver-1) {
break;//condition is set up, meaning copy complete, so exit cycle
}
} 4.3 third frame
gotoAndPlay (2) test the film, you can see the effect.
Summary:
The main point of this special effect is: The copied component contains a mask layer and a masked image layer, and the change in the masking layer position controls the area of the slice. When the effect is complete, all pictures are in the same place, and then the total mask of each picture is exactly equal to the masked image.
