logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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.

  1. 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).

  2. 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.

  3. 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.

  4. 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 →




Add Flash+Page+Transition+Effect+Copy+to+Grid to Twitter Add Flash+Page+Transition+Effect+Copy+to+Grid to Facebook Add Flash+Page+Transition+Effect+Copy+to+Grid to MySpace Add Flash+Page+Transition+Effect+Copy+to+Grid to Del.icio.us Digg Flash+Page+Transition+Effect+Copy+to+Grid Add Flash+Page+Transition+Effect+Copy+to+Grid to Yahoo My Web Add Flash+Page+Transition+Effect+Copy+to+Grid to Google Bookmarks Add Flash+Page+Transition+Effect+Copy+to+Grid to Stumbleupon Add Flash+Page+Transition+Effect+Copy+to+Grid to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Motion 5 Parallax Effect - The Graphics

Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor