Flash Circle Reveal Animation - Flash and Animation

Recently, one of my readers requested a Flash^R 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.

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.
Add a new layer above the bg layer and name it "circles".
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.
Rename the Layer 1 layer to "circle".
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.
Add a keyframe to Frame 5 of the circles layer.
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.
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.
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.
Add a new layer at the top of the timeline and name it "actions".
Add a keyframe to the last frame of the animation on the actions layer.
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.

|