Member Avatar for Member #601248

Hello, I'm working on a flip page gallery in Flash (AS3). I have this video tutorial from Cartoon Smart and one problem. How to mask a text box, is it possible in Flash using AS3?
Cheers!

Dani AI

Generated

As @rajarajan hinted, masking a TextField in AS3 is possible — but the runtime treats text, device fonts, and masks in ways that often surprise people. The usual problems come from font handling (embedded vs. device fonts), where the mask shape and the text’s rendering mode interact, and from where the mask lives in the display list (masks must be placed correctly relative to cached containers). ()

If embedding fonts is not desirable, use a clipping rectangle (scrollRect) on a container around the text. scrollRect crops the rendered region and avoids many font/mask quirks. Example pattern:

import flash.geom.Rectangle;
import flash.display.Sprite;

var holder:Sprite = new Sprite();
addChild(holder);

var tf:TextField = new TextField();
tf.width = 300; tf.height = 100; tf.wordWrap = true; tf.multiline = true;
tf.text = "Long text to reveal...";
holder.addChild(tf);

// start clipped, then animate holder.scrollRect.width
holder.scrollRect = new Rectangle(0,0,0,100);

scrollRect usage is part of the DisplayObject API and is a reliable alternative to timeline masks. (airsdk.dev)

When you need a true shape mask (including alpha-gradient masks), set cacheAsBitmap = true on both the masked object and the mask, and ensure the mask sits in the correct container (masks must be descendants of the cached container closest to the masked object). That resolves many “mask present but no effect” cases when multiple mask layers are involved:

holder.cacheAsBitmap = true;
maskShape.cacheAsBitmap = true;
holder.mask = maskShape;

This also explains why two synchronized masks on different layers can conflict — they must be applied with correct parentage and caching. (airsdk.dev)

For soft/alpha fades you can also use the ALPHA/LAYER blend-mode trick (put the masking shape in the same parent, parent.blendMode = BlendMode.LAYER; maskSprite.blendMode = BlendMode.ALPHA;) which gives an easy alpha-mask effect without embedding fonts or changing the text field. Test each approach (embed fonts, scrollRect, cacheAsBitmap mask, blend-mode) against your page-flip timeline to see which integrates cleanly with your existing masks. ()

Recommended Answers

All 5 Replies

Member Avatar for Member #334542

Place the textbox inside a movieclip and mask the movieclip thats it! if that is not your problem. please give a brief expanation of your problem and why you need the mask of textbox and where you going to be utilize?

Member Avatar for Member #601248

I have done that already but the mask doesn't work. I already have assigned a mask for page flipping, and other mask on other layer for revealing a textbox (while the page flips). Both masks are synchronised but it seems to have no effect for the text box.

I found here bigresource.com that you can't have a dynamic text behind a mask, so I'm wondering is that true?

Member Avatar for Member #334542

Its not true!! When using dynamic textbox you must embed the font to view by the user at runtime. See if you place a dynamic textbox and in the property window, select Embed button to popup the character embedding dialog box and select as it is in the screenshot attached here. Thats it, now your mask will work without the concept of movieclip.
This is the solution for dynamic textfield for masking. It works! and I tested it.

And you mentioned that you mask is overriding by another mask and there is no other option to control it without seperating your mask into two other places or create with a movieclip.

Hope this helps & also works!

Member Avatar for Member #334542

Sorry I missed the attachment, here you will find it.

Member Avatar for Member #601248

Thanks a lot rajarajan, I read on some pages that you cannot mas a YB so I almost gave up. My masks are on different layers and I hope this will work fine!
Cheers

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.