g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


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.


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

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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 features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor