Search code examples
actionscript-3flashdevelop

Using text as a mask to add a gradient to the text in AS3


I want to apply a gradient to my text in Flash Develop and read that using a mask is the easiest way. Problem is that I can not get it to work. I tried to create a mask with just the textField and by adding it to a sprite, neither work.

Another strange thing is that the textmask will function as a mask for start title if I reverse them like:

starttitle.mask =textmask

When I try the code below nothing displays.

var format2:TextFormat = new TextFormat();
    format2.size = 40;
    format2.font = "Times New Roman";
    format2.bold = true

starttitle = new TextField;
    starttitle.defaultTextFormat = format2;
    starttitle.text = "Memory Circles";
    starttitle.textColor = 0xFF0000
    starttitle.autoSize = "center";
    starttitle.background = false;
    starttitle.backgroundColor = 0xFF4242;
    starttitle.x = (300 - starttitle.width * .5);
    starttitle.y = (150 - starttitle.height * .5);
    starttitle.mouseEnabled = false;
addChild(starttitle)

var textmask:Shape = new Shape
var fillType:String = GradientType.LINEAR;
var colors:Array = [0xFF0000, 0];
var alphas:Array = [1, 1];
var ratios:Array = [0, 255];
var gradientBoxMatrix:Matrix = new Matrix();
    gradientBoxMatrix.createGradientBox(50,100,45,0,0);
var spreadMethod:String = SpreadMethod.REPEAT;
textmask.graphics.beginGradientFill(fillType, colors, alphas, ratios, 
                                    gradientBoxMatrix, spreadMethod);

textmask.graphics.drawRect(200,100,300,100)
addChild(textmask)

textmask.mask =starttitle

I read something about the font needing to be embedded but I'm using Times New Roman and thought this would be embedded. Also other fonts don't work.


Solution

  • Try to use bitmap caching on starttitle and textmask:

    starttitle.cacheAsBitmap=true;
    textmask.cacheAsBitmap=true;