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
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Flash Page Transition Effect Copy to Grid - 2


  1. First we need to set the number of frames for our transition. Let's use 20 frames. In the Timeline, rename the Layer 1 to "Motion Tween". Click on Frame 20 and add a Keyframe (Insert Timeline Keyframe). Right-click anywhere between frame 1 and 20 and choose Create Motion Tween.

At this point, all twenty frames have our rectangle at the finished size and position for the end of the transition. We need to set our rectangle to the size and position for the beginning of the animation.

  1. Click on Frame 1. With the rectangle selected, go to the Property Inspector and set the Width to 1 pixel, the Height to 400 pixels. Do not change the X and Y positions. If you are using a different stage size or number of rectangles, make to not of the X and Y positions. You will need this information later.

    If you test your movie now, the animation will not run. We have more work to do. But you can get an idea of the transition effect by scrubbing along the Timeline.

  2. Go back to Scene 1. At this point, we no longer need our original grid, so let's remove it from the Transition layer. Did you notice that the Transition layer was automatically renamed to "Copy to Grid 1" by the assistant? Click on the Copy to Grid 1 layer and click Edit Cut to remove the grid. Let's go back to the Library. Notice that Flash has added a Tween 1 and Tween 2 graphic to the Effects Folder.

We are ready to work on the Copy to Grid movie clip. From the Library, double-click on this movie clip to open the movie clip's Timeline. You will get an Effects Setting Warning. Just click OK to continue. Take a look at the Timeline. We have two layers named "Layer 1" and "Layer 1 Copies". Both layers have one frame each. This is why our animation did not run when we tested it. We need our animation to be 20 frames long.

  1. Holding down the Shift key, click on Frame 20 for both layers and insert a frame (Insert Timeline Frame). Now you should see the black grid appear. Test the transition effect by scrubbing along the Timeline.

    At this point, our transition animation will loop continuously. But, we want this to be a page transition. Once the new page is revealed, we want the animation to stop. So we need to add a stop code.

  2. Click on Frame 20 in Layer 1. Then, click Insert Timeline Keyframe. Open the Actions panel and the Toolbox. From the Toolbox, select Global Functions Timeline Control. Double-click on stop to add the stop(); code.

  3. Go back to Scene 1. Drag an instance of the Copy to Grid 1 movie clip from the Library onto the stage. In the Property Inspector, set the X position to 25 and the Y position to 200. If you have different X and Y position from the previou step, use them here instead of 25 and 200.

  4. Now it's time to convert the Copy to Grid 1 layer to a Mask. Right-click on the layer and choose Mask from the menu. You will see that the Background layer has been placed within the Mask layer and the stage has turned white.

Test the movie and you will see our page transition. This same technique can be used for any shape besides a rectangle. Try recreating the transition with circles.

← Back




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



 



RSS | 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