Flash Page Transition Effect Copy to Grid

In this Flash tutorial, we will create a very popular page transition effect using the Flash Copy to Grid assistant. This Copy to Grid assistant has been around for several versions of Flash as part of the Timeline Effects. However, because it is such a useful and time saving feature, I feel it should be part of every Flash designer's toolbox.

Here is the transition we will be building. As you can see, eleven vertical rectangles expand over the stage and work as a mask to reveal the background image. With the help of the Copy to Grid assistant, we only need to create one rectangle movie clip and then assign a Motion Tween animation to it. The rest of the work to create the page transition animation is done for us by Flash.

Let's start a new 550 x 400 pixel movie and we will use ActionScript 2.0. The empty movie should have only one frame and one "Layer 1" layer in the Timeline. Rename this layer to "Transition". For our example, I have imported a background image to the stage. This gave me a new layer in the Timeline. I renamed this layer to "Background" and dragged it down to make it the bottom layer in the Timeline. We will be working on the Transition layer.

Click on Frame 1 of the Transition layer. Using the Rectangle tool, draw a small rectangle anywhere on the stage (Stroke to null, Fill to black or any color of your choice).
With the Selection tool, select the rectangle. In the Property Inspector, set the rectangle's Width to 50 pixels, Height to 400 pixels and the X and Y positions to 0.0. If you are using a stage of a different size, you will want the height of your rectangle to be the height of the stage. Then divide the width of the stage by any number to get the width of your rectangle.
With the rectangle still selected, go to the Menu bar and click Insert – Timeline Effects – Assistants – Copy to Grid. This will open the Copy to Grid dialog box. It will take eleven of our rectangles to cover the entire stage. For the Grid Size options, set the number of Rows to 1 and the Columns to 11. (If you are using a different number of rectangles, replace the 11 with your number of rectangles.) Also, set both of the Rows and Columns for the Grid Space options to zero. Click the Update Preview button and wait a few sections for Flash to finish. Then click OK to close the dialog box. You should now see black over the entire stage.
Go to the Library. There you will find a graphic named "Copy to Grid 1" and another graphic named "effectSymbol" (inside the Effects Folder). Right-click on the effectSymbol graphic and choose Properties from the menu. In the Properties dialog box, change the Type from Graphic to Movie Clip. Repeat this for the Copy to Grid 1 graphic.

Now we are ready to attach the Motion Tween to the effectSymbol movie clip. From the Library, double-click on the effectSymbol movie clip and you will be taken to the movie clip's Timeline.

Next →