Swami Charan's Blog My personal blog…

Alpha-Channel Masking in Flash

In this post, we are going to see how we can implement masking in both Flash using  AS2 and AS3. In extension to this, we will talk about Alpha Masking as well.

Mask in Flash is something like a window through which we can see any other Display Object. In Flash, the Display object that we see through the mask is termed as a Maskee.

First we will see how to create a mask. Create a new flash Document for AS3 with ur desired Stage Size. We need to create 2 movieclips, one as Maskee and another as mask.

For creating our maskee, we will import an image on to the stage File->Import->Import to Stage. Once the image is imported onto the stage, Select the Image and convert it to a movieClip using Modify->Convert to Symbol (or Pressing F8 will work).  Give its name as 'maskee_mc'. Provide the Instance name for this movieClip as 'maskee_mc' under Properties Menu.

 

 Similarly we have to create a movieClip 'mask_mc'. In this i chose a Circle.

Make sure that both movieclips are placed in differnet layer to remove the confusion. And Mask should be above Maskee. Something like this:

 

Once this is done. Most of our task is done. We just need to apply mask on our maskee. This can be done as follows:

AS3

maskee_mc.mask = mask_mc;

AS2

maskee_mc.setMask(mask_mc);

Thats all. We are done with masking and the output will be something like this:

 

Thats all your done with masking...

 

Alpha Masking

As you can see by the name, we can apply Alpha to the mask. Previously, the mask we have applied is with 100% Alpha. By using this alpha masking, we can apply differnt Alpha levels to the mask.

For this alpha masking to work, we need to apply 'cacheAsBitmap' property to both mask and maskee. This can be done both from Flash Authoring as well as using ActionScript.

 In Flash Authoring, select the movieClip and Goto Properties Panel. In Properties, under DISPLAY tag, there will be a checkbox with label 'Cache As Bitmap'. Check it.

 

Do the same for 'mask_mc' as well.

We can also achieve this through ActionScript by assigning 'cacheAsBitmap' property of the movieClip to  'true'.

 

maskee_mc.cacheAsBitmap = true;

mask_mc.cacheAsBitmap = true;

 

This should be done before applying mask. Publish the swf and check the difference.

There wont be any difference as of now, as we dint change the Alpha of the mask_mc. Change the fill of the mask_mc to something like 30% Alpha.

 

Now publish the swf and you can see the difference now.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

As you can see, the second mask is not completely visible. We have applied only 30% alpha. In order for this to work, you have to make sure that cacheAsBitmap is enabled for both mask and maskee. Applying cacheAsBitmap  to only one of them won't result in Alpha-Masking.

To make it more attractive, we can apply a radial Gradient fill with alpha varying from 100 to 0 to the mask. The result will be something like this:

 

 

Hope you liked this post.... write in for any more queries....