Flash in the use of masking to achieve a picture transition

In fact, the focus of this example is not how to use the mask to complete a set of pictures of the transition, such a lot of examples ....

This example focuses on the application of the----"alignment panel".

A few days ago, I met a flash friend in the Flash zone. Q: How to quickly form an inter-graph matrix by copying---paste operation. Then apply the alignment panel in Flash. I don't know what this friend is doing. But gave me a thought ... Oh, look at this special effect ~ ~ ~

http://www.flash8.net/bbs/UploadFile/2005-1/200511031913585.swf

Does it look good ...? The as code is not used inside. So it is very suitable for beginners to learn.

Flash Version: FLASHMX

Related content:. Align panel mask timeline arrangement, etc.

Scope of application: Primary

1. Open Flash, press Ctrl+f8 to create a new symbol. Named box. In the newly opened window, draw a square above the registration point. All borders are available, and the padding is gradient. (Here the fill color is not complex, such as the soft, it will affect our effect.) as shown in figure:

　　

Each side is a white block. The transparency of the white block on the left is 0.

2. Press the CTRL+F8, create a new movie clip named: "Block animation," and then open a new window. Press Ctrl+l to open the library panel, drag the "square" component to this window, and then use the Align panel to place it in the upper-left corner of the registration point. (the "Relative vs. stage" in the alignment panel is pressed, then right and bottom aligned) as shown:

　　

Then we'll create the animation of this square. This animation you can define yourself. The following is the animation process in this example. (The square rotation appears, again spins disappears ... Then rotate and then rotate and disappear ... The last spin appears, enlarge ... Spin disappears ... Such a process)

Select Frame 20th, press F6, and insert a keyframe. Then press ctrl+alt+s, turn the zoom and rotate panel and rotate it 45 degrees. Figure:

Select the Chinese block to center it with the alignment panel:

Inserts A keyframe at a frame .

Inserts a keyframe at 55 frames. Press Ctrl+alt+s to turn the zoom on and rotate the panel to rotate it 45 degrees, and align it to the top right corner of the registration point as shown:

Inserts a keyframe at 65 frames.

Inserts a keyframe at 85 frames. Align it to the center with the alignment panel.

Inserts a keyframe at 95 frames.

Insert KeyFrames at 105 frames, and zoom in using the "freeform tool" in the toolbox (this size is modified to the appropriate size after we finish the effect ...). As shown:

Inserts a keyframe at 120 frames

Inserts a keyframe at 135 frames

Insert a blank key frame at 136 frames and extend the timeline to 145 frames, as shown in figure:

OK, now that we've created the keyframe, let's create the tween animation ...
Select Frame 1th, open the Properties panel to set the motion tween, and set it to rotate clockwise for 1 weeks. Then press Crlt+alt+s to open the zoom and Rotate panel and zoom the square on the 1th frame to 0 as shown:

Select Frame 35th, open the Properties panel to set the "action" tween, and set to rotate clockwise for 1 weeks.

Select Frame 55th, and then press Crlt+alt+s to open the zoom and rotate panel, scaling the square on frame 55th to 0.

Select Frame 65th, open the Properties panel to set the action tween, and set it to rotate clockwise for 1 weeks. Then press Crlt+alt+s to open the zoom and Rotate panel and zoom the square on the 65th frame to 0:
Select frame 95th to open the Properties panel to set up the action tween.

Select Frame 120th, open the Properties panel to set the "action" tween, and set to rotate counterclockwise for 1 weeks.

Select Frame 135th, press Crlt+alt+s to open the zoom and Rotate panel, and zoom the square on the 135th frame to 0:

The last timeline screenshot:

To facilitate the operation below, we create a new layer 2, drag a block element in, and align it with the alignment panel (this layer to the end we will delete, just to facilitate the operation below) as shown:

　　

3. Press Ctrl+f8 to create a new movie clip ~ named "square column", after determining in the open window to drag a "box animation" MC, select this MC press ALT with the mouse to drag out five of its replication (appropriate point not too much). As shown in figure:

The next step is to have them spaced evenly across the horizon. Select all of them. Open the Alignment panel and, if the relative to stage is pressed, bounce it. That is, make sure it is unchecked. Then click the Alignment option shown in the figure. Six small squares are spaced evenly across the same horizontal line.

When all of them are selected, press Ctrl+shift+d to spread them across the layers. Figure:

Starting with the penultimate layer, select the keyframe on each layer, drag backward one frame, two frames ... And so on, and finally extend the timeline to 6 frames, the last timeline as shown

Then select the keyframe in the second layer above. Press F9 to add a stop () to the action panel;

Supplementary Note:Small squares between the space between the most left and the right block between the moment apart, so the moment on both sides of the box determines the size of the interval. You can be as big as I pictured above to determine a position ....
If you want to keep their spacing accurate to the value you want, you do the calculation, for example: Want to let their interval is 10 pixels, the small square width is 35, that the left square and the right square is the distance is 5*10+5*35=225. You can set the X axis position of the left box to 0, Set the X axis position of the right square to 225. Then select them all, by aligning the panel, and performing the actions shown in the figure, six small squares are the same 10 pixels apart. Make sure that "relative to stage" is not pressed before performing the operation. Figure:

4. Create a new movie clip, called "Square Matrix", after the determination, from the library to drag a "box column" MC, to the window. Select this MC to press ALT to drag out five copies of it (or more, when appropriate, not too many) with the mouse. Figure:

The next step is to distribute them evenly across a vertical line. Select all of them after the selection. Open the Alignment panel, and then click the Alignment option shown in the figure. Six small squares are spaced evenly across the same vertical line.

5. Go back to the main scene. Import a picture into the main scene. Create a new Layer 2, drag the "square matrix" MC onto this layer and release the position. Create a new layer 3, copy the 1th frame on Layer 2, and paste it on the 1th frame of the diagram level. This sets layer 2 to mask layer. Layer 1 is masked layer, It works,

But don't forget to delete the layer that we added at the end of the second step before testing. Go to the edit window of the box animation, remove Layer 2. Or right-click to set it as the boot layer

But to achieve a picture transition display just like this example that's going to be on layer 1 's 145 frame, insert a blank frame Then import another picture to the frame extend the timeline of each layer to the 290 frame . Why insert a blank frame 145, and then import a picture to that frame Why extend the main timeline to the 290 frame Leave the beginner to think

By modifying the animation in the " box animation " MC , and the shape of the square ( but remember , the shape or fill can't be too complicated , the CPU can not stand ... oh ), can have other effects .