Printer Friendly Version

BellaOnline's Flash and Animation Editor

Growing Flower Masking Technique

In the previous tutorial, we drew a flower in FlashR CS4 with the Brush tool. Now we will learn how to use a masking technique to make it appear that the flower grows onto the stage. Open your working fla file into Flash.

We have already separated sections of the flower on different layers in the Timeline. We have the Stem on the Stem layer, the green leaves are on the Leaves layer, the flower pedals are on the Flower layer and the purple leaves are on the Leaves2 layer. This will help us to animate the separate parts of the flower at slightly different intervals. Let’s start with the Stem layer. It may help to turn off the visibility of the other layers as we work.

1. Our first step is to convert the stem on the stage to a symbol. Right-click on the stem and choose Convert to Symbol. Name the symbol "Stem" and set the Type to Movie Clip. In the Properties panel, set the Instance Name to "Stem".

Now we are ready to work within the Movie Clip itself. Double-click on the Stem Movie Clip icon in the Library panel to enter the edit mode for the Stem movie clip.

2. The new Timeline has only one layer. Rename the layer from "Layer1" to "Stem".

3. Create a new layer. Rename this new layer (above the Stem layer) "Mask". Right-click on the Mask layer and choose Mask from the pop-up menu. Unlock the Mask layer.

4. Click on the Brush tool and set the color to a different color from the Stem. In the Tools panel you will need to set the Brush Shape to Oval and the Brush Size to the largest setting.

5. On Frame 1 of the Mask layer, paint over a small section of the Stem (at the bottom) with the Brush tool. A Keyframe will automatically be added to Frame 1.

6. Move on to Frame 2 of the Mask layer and add a Keyframe. Paint over a little more of the Stem. Repeat this step until you have painted over the entire Stem.

7. Click Control – Test Movie to preview the animation for your Stem.

You will see it grow onto the stage but the animation repeats indefinitely. We need to tell Flash to play the animation only once.

8. Add a new layer above the Mask layer and name it "Actions". Insert a Keyframe on the last frame of this animation. Open the Actions panel (Window – Actions) and add the stop code.


9. Test the Movie again and the animation will stop when the Stem is completely drawn on the stage.

Join us in the Flash forum.

Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

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.

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

BellaOnline Editor