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
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Flash Circle Reveal Animation


Recently, one of my readers requested a FlashR tutorial about how to create an animation that starts with a solid colored stage and gradually reveals the background underneath. One way to do this is to use solid colored circles, or any other shape. Starting with the stage completely covered and as the circles are removed, the background is revealed.

Your first thought might be to draw many individual circles on the stage and convert them all to movie clips. However, we only need one circle movie clip and then, we will use several instances of that movie clip.

The reason that we use only one movie clip instead of several is because it is less CPU intensive for Flash to draw several instances of the same movie clip on the stage than it is to draw several individual movie clips.

As you would expect, we start with a new ActionScript 3 project. Our first step is to import the background image onto the first layer of the Flash timeline. Then we will create the circle movie clip and build the animation.

  1. From the Menubar, click File - Import - Import to Stage to import the background design png onto Layer 1. Rename Layer 1 to "bg". Lock the bg layer.

  2. Add a new layer above the bg layer and name it "circles".

  3. From the Menubar, click Insert - New Symbol. Set the Type to Movie Clip and name the movie clip "circle".

    Flash will automatically display the movie clip's timeline.

  4. Rename the Layer 1 layer to "circle".

  5. With the Fill Color of your choice and the Stroke set to null, draw a circle on the stage with the Oval Tool. We will use this movie clip in several sizes, so draw it about 2 inches in diameter.

    Go back to the main timeline by clicking the Scene 1 link at the top of the workspace. We will begin with no circles on the stage on Frame 1. With each new keyframe along the timeline, we will add a circle to the stage until the background image is completely covered. Let's place the keyframes on every fifth frame.

  6. Add a keyframe to Frame 5 of the circles layer.

  7. From the Library, drag an instance of the circle movie clip onto the stage.

    As we continue to add keyframes and instances of the circle movie clip at every fifth frame, we will use the Free Transform tool to vary the size of the circle movie clips. Overlap some of the circles to fill in the small spaces between circles. Once the stage is completely covered, we need to extend the bg layer to match the length of the circles layer.

  8. Right-click on the last frame of the bg layer and choose Insert Frame from the menu.

    Now that the entire stage is covered, we need to reverse the animation. As it is now, we are adding circles to the stage until it is completely covered. But the animation we want is to gradually uncover the stage.

  9. Click on the layer name to select all the frames of the circles layer. Right-click on any frame and choose Reverse Frames.

    Our last step is to use a stop code to prevent the animation from repeating.

  10. Add a new layer at the top of the timeline and name it "actions".

  11. Add a keyframe to the last frame of the animation on the actions layer.

  12. In the Actions panel, add the stop code.

    stop();

Click Control - Test Movie - In Flash Professional to view the animation.

Join us in the Flash forum. | Join us in the Digital Art and Design forum.

|


Add Flash+Circle+Reveal+Animation to Twitter Add Flash+Circle+Reveal+Animation to Facebook Add Flash+Circle+Reveal+Animation to MySpace Add Flash+Circle+Reveal+Animation to Del.icio.us Digg Flash+Circle+Reveal+Animation Add Flash+Circle+Reveal+Animation to Yahoo My Web Add Flash+Circle+Reveal+Animation to Google Bookmarks Add Flash+Circle+Reveal+Animation to Stumbleupon Add Flash+Circle+Reveal+Animation 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 © 2013 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
Ken Burns Effect In Motion - Record Keyframes

Ken Burns Effect In Motion 5 - Set Up

Animated Title in Motion

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 © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor