Masking Test & Input Fields in Flash (Example)

This is the solution (with example demonstration) to Flash Text / Font masking problem. If you came to this page directly, then I suggest you read my Previous Post, which speaks about the problem. Otherwise follow the Tutorial.

The wrong Approach: The fields with brown background are actually masked using layered mask. So only the embedded static text is visible. The static text field with device font and the dynamic text field is not visible at all. For TextInput, only outline is visible. If you type inside it, the typed characters will not be shown.

The Correct Approach: All the fields and texts are visible behind mask. Texts typed inside TextInput field also occurs correctly.

How it works:

After downloading the source, in wrong_mask.fla file, you'll see that there is a layer named "mask", and it is set as the layered mask of the "masked field" layer. Where as, in correct_mask.fla file, the "mask" layer still exists, but it is not set as a layered mask of the "masked field" layer.

As opposed to the masked layer, in CorrectMask.as file (which is the document class of correct_mask.fla), there is one extra line, just after the constructor declaration:

maskedMc.mask = msk;

This line actually sets the MovieClip named msk, as the mask of the MovieClip named maskedMc. The MovieClip msk will be found in the layer named "mask" and the MovieClip maskedMc will be found in the layer named "masked fields" (in both wrong_mask.fla and correct_mask.fla files). maskedMc MovieClip contains all the fields that is masked.

Update: The above solution is for ActionScript 3.0, for ActionScript 2.0 do the following:

msakedMc.setMask(msk);

In the source file below, as2 example file named correct_mask_as2.fla is also included. The above code will be found in the action layer in case of as2.

At a Glance:

1. Don't use masked layers. You can add the MovieClip that will be used as a mask in a separate layer, but don't make it as the mask layer (which is normally done by right clicking on the layer and then selecting the mask option)
2. Create a MovieClip named maskedMc (choose any name you like) in the stage and add everything you want to mask, inside this movie clip.
3. Create a MovieClip named msk (choose any name you like) in the stage or in the same parent of maskedMc MovieClip.
4. Then, in case of ActionScript 3, add this code to set the mask: maskedMc.mask = msk;
5. Or, in case of ActionScript 2, add this code to set the mask: msakedMc.setMask(msk);

Download the source files to see the difference in implementation: Masking Flash Text Tutorial – Example Demonstration source files.