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.
Stop();
9. Test the Movie again and the animation will stop when the Stem is completely drawn on the stage.
Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
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.
Stop();
9. Test the Movie again and the animation will stop when the Stem is completely drawn on the stage.
Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Follow @ArtAnimationTut
Tweet
Content copyright © 2023 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.
