I'm trying to get the effect of a gradient fill for text. I figured - draw a gradient rect, then mask it w/ text.

I'm having a difficult time masking a UIComponent (could be anything really) with a Text component. The following works great in Flash (provided you embed the font of course).

var tf:TextField = new TextField();
tf.text = "GRADIENT TEXT";
tf.embedFonts = true;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.setTextFormat( new TextFormat( "Arial", 20, 0x000000 ) );
 
var rect:Sprite = new Sprite();
var matrix:Matrix = new Matrix();
matrix.createGradientBox( 100, 20, Math.PI / 2 );
rect.graphics.beginGradientFill( GradientType.LINEAR, [ 0x000000, 0xffffff, 0x000000 ], [1,1,1], [0, 130, 255], matrix );
rect.graphics.drawRect( 0, 0, tf.width, tf.height );
rect.graphics.endFill();
 
rect.mask = tf;
 
addChild( rect );
addChild( tf ); 

Here is what I was trying to do in Flex - w/ no success:

var textMask:Text = new Text();
textMask.text = "GRADIENT TEXT";
textMask.setStyle( "color", 0x000000 );
textMask.setStyle( "fontFamily", "Arial" );
textMask.setStyle( "fontWeight", "Bold" );
textMask.setStyle( "fontSize", 15 );
textMask.selectable = false;
 
var gradientRect:UIComponent = new UIComponent();
gradientRect.cacheAsBitmap = true;
 
var g:Graphics = gradientRect.graphics;
var matrix:Matrix = new Matrix();
matrix.createGradientBox( 100, 20, Math.PI / 2 );
 
g.beginGradientFill( GradientType.LINEAR, [ 0x000000, 0xffffff, 0x000000 ], [1,1,1], [0, 130, 255], matrix );
g.drawRect( textMask.x, textMask.y, this.width, this.height );
g.endFill();
 
gradientRect.mask = textMask;
 
addChild( gradientRect ); 

I first checked to make sure that the gradient was getting drawn and that its width and height were correct. I also checked to ensure that the text was getting placed correctly.

I need to double-check I guess that the embedded font Arial is in fact getting used - it is elsewhere in the app.

Any help here will be GREATLY appreciated.

Thanks,

B

Brandon E.B. Ward
UX & UI Designer, Flex & Flash Developer
http://www.uxd.me

[Isocase]

Here you go. I embed the Arial font into my library and just took a bitmapdata screen shot of it. Not sure if there is a cleaner way but this does work

var arial:Font = new ArialFont();

var format:TextFormat = new TextFormat();
format.color = 0x000000;
format.font = arial.fontName;
format.size = 20;

var field:TextField = new TextField();
field.antiAliasType = AntiAliasType.ADVANCED;
field.autoSize = TextFieldAutoSize.LEFT;
field.embedFonts = true;
field.defaultTextFormat = format;
field.selectable = false;
field.text = "GRADIENT TEXT";
addChild(field);

var bitmapdata:BitmapData = new BitmapData(field.width, field.height, true, 0);
var matrix:Matrix = new Matrix();
bitmapdata.draw(field, matrix);

var bitmap:Bitmap = new Bitmap(bitmapdata, "auto", true);
bitmap.cacheAsBitmap = true;
bitmap.x = Math.round((stage.stageWidth-bitmap.width)*.5);
bitmap.y = Math.round((stage.stageHeight-bitmap.height)*.5);
addChild(bitmap);
removeChild(field);

var gradientmatrix:Matrix = new Matrix();
gradientmatrix.createGradientBox(bitmap.width, bitmap.height, Math.PI/2);

var shape:Shape = new Shape();
shape.graphics.beginGradientFill(GradientType.LINEAR, [0x000000, 0xffffff, 0x000000], [1,1,1], [0, 130, 255], gradientmatrix);
shape.graphics.drawRect(0, 0, bitmap.width, bitmap.height);
shape.graphics.endFill();
shape.cacheAsBitmap = true;
shape.x = Math.round((stage.stageWidth-bitmap.width)*.5);
shape.y = Math.round((stage.stageHeight-bitmap.height)*.5);

shape.mask = bitmap;
addChild(shape);

[wraevn]

Okay - so, what I have up above also works in Flash (and you don't need to take a bitmap snapshot).

But I guess what you're saying is try this in Flex?

[Isocase]

Yeah try that out in Flex. My above was is just another way to do it you know what I mean. Also try embedding a different font than Arial. Maybe a non-standard font or something like that.