Some interesting Animate flash animation can be done with masking technique. Masking allows hiding part of text or object thus can be used to create interesting flash effects. The basic concept of a mask is that the area that being masked can be see through.
Many interesting Animate Flash animation are made with masking. In this tutorial series, we start with a most basic masking technique.
The basic Masking is shown as below.
Table of Contents
Basic Animate Masking Concept (1)
Step 1: Create Flash Layers
Masking will usually involves two layers – a masking layer and a layer that will be masked. In this example, the masking layer is the black circle while the text is the layer that will be masked.
Note:
The area behind the black circle will be shown. In other words, the part that is hiding now will be shown after masking. This is the most basic concept of masking.
Step 2: Create Mask
Right click the text layer (i.e. layer that need to be masked), and select the mask menu as shown in the diagram below:
Step 3: Mask Created
The mask has been created as shown in the diagram below. Note the interesting icon that indicating the text layer to be masked.
Look! The area behind the black circle is now showing, while other area is hiding.
Download Flash Source File:
Basic Animate Masking Concept (2)
To illustrate a bit more about how masking works. We will change the background of stage to black and using a masking with white color.
The masking effect is shown as below:
Actually the concept of masking remains the same. The area behind the masking (white circle) will be display while other area outside the masking will be hidden.
Remember that the area behind the masking (white circle) will be shown, while other area outside the masking will be hidden. Once the basic concept of masking is consolidated, interesting animation can be done.
Download Flash Source File:
Simple Animate Masking Animation (1)
Now we have some basic concept of flash masking. It is time to do some simple flash animation with masking.
The Animate masking animation effect is shown as below:
We already learned a lot about Tween animation in our other Animate flash animation tutorials. Therefore we only focus on the masking effect.
The black circle mask is simply convert to a symbol so that it can be animation from left to right, and then animation back to the left. Since only the area under the masking can be seen, thus creating this interesting animation effect.
Mask at Initial Position
Mask Move to Right
Mask Move Back to Left (Initial Position)
Since only area behind the masking can be seen, we can animate the masking to create this kind of flash animation.
Download Flash Source File:
Simple Animate Masking Animation (2)
This flash masking animation is similar to the previous example except that we use a black background. Moreover we also add a fading effect to the masking.
The Animate masking animation effect is shown as below:
Of course, we can also do more animation to the masking which in turn create more interesting animation effect. In this example we try to animate the tint color of the masking.
Mask at Initial Position
Mask Move to Right
Mask Move Back to Left (Initial Position)
Download Flash Source File:
Animate Gradient Masking Animation (1)
Let’s do more interesting effect with the masking. In this example, we use a gradient masking to create some interesting animation effect.
The Animate masking animation effect is shown as below:
Many interesting Animate flash animation can be created with gradient effect. In this flash masking example, we animate a gradient masking to create this foggy animation effect.
Download Flash Source File:
Animate Gradient Masking Animation (2)
In this Animate flash masking example, we also use a gradient masking layer. This time, the text is animate from the right side to the left side.
The Animate masking animation effect is shown as below:
This interesting flash animation effect is accomplished by animating the text across a gradient masking layer.
Download Flash Source File:
Animate Masking Animation with ActionScript 3 (1)
Actually the masking can be applied at runtime with ActionScript 3. This example shows how to use simple AS3 to accomplish the result.
The Animate masking animation effect is shown as below:
The layers and objects are created and converted to symbol as usual. Then apply masking effect at runtime with ActionScript.
ActionScript Codes:
// Use cacheAsBitmap to convert mcBall and mcCircle to bitmap at runtime
// Set cacheAsBitmap of both mcBall and mcCircle (mask) to true
// to get the transparency effect
mcBall.cacheAsBitmap = true;
mcCircle.cacheAsBitmap = true;
// Apply Mask
mcBall.mask = mcCircle;
Download Flash Source File:
Animate Masking Animation with ActionScript 3 (2)
This Animate masking with ActionScript is similar to the previous tutorial. In this tutorial, the masking can be move around with mouse pointer to create more interesting effect.
Actually the masking can be applied at runtime with Flash ActionScript 3. This example shows how to use simple AS3 to accomplish the result.
The technique is exactly the same as the previous tutorial. The layers and objects are created and converted to symbol as usual. Then apply masking effect at runtime with Flash ActionScript.
ActionScript Codes:
// Use cacheAsBitmap to convert mcMask and mcBG to bitmap at runtime
// Set cacheAsBitmap of both mcMask and mcBG to true
// to get the transparency effect
mcMask.cacheAsBitmap = true;
mcBG.cacheAsBitmap = true;
// Apply Mask
mcBG.mask = mcMask;
// Hook a function to mcMask
mcMask.addEventListener(Event.ENTER_FRAME, movingMask);
function movingMask(evt:Event):void
{
mcMask.x = mouseX;
mcMask.y = mouseY;
}
Leave a Reply