Home Tutorials Forums Articles Blogs Movies Library Employment Press
By Haik Sahakian

Flex 3 or Flash doesn’t natively support using a color gradient as the color for text. Instead, you need to create a gradient bitmap and use a bitmap of the text as a mask against the gradient.
Here’s a quick function that does this, using the GradientCanvas class from Nick Schneble’s blog.  To use the function, pass in an ID of a Flex 3 text field, the X and Y coordinates at which the gradient text is to appear, and the name of a CSS class defining the gradient colors.

For example, if you had a text field that looked like:

<mx:Text text="Gradient Text" id="myTextField" x=”10” y=”10” />

Then the function call would look like:

drawGradientText(this, myTextField, 10, 10, "gradientStyle");

Your code would also need to include the GradientCanvas class, and define a CSS class like this:

.gradientStyle    {fill-alphas: 1,1; fill-colors: #ff0000, #0000ff; corner-radius: 0}

The complete function is:

    public static function drawGradientText(container:UIComponent, sourceText:Text, sourceTextX:Number, sourceTextY:Number, gradientStyleName:String)
       // check text height and width as zero values will lead to an invalid bitmap error
   if ( (sourceText.height < 1) || (sourceText.width < 1) ) return;

       // create a bitmap version of text to be used as a stencil
       var bitmapData:BitmapData = new BitmapData(sourceText.width, sourceText.height, true, 0);
       // use a matrix when writing into the bitmap to preserve transparency
       bitmapData.draw(sourceText, new Matrix());
       // convert the bitmap data into an image object to be able to add it to the flex stage as a UI Component
       var bitmap:Bitmap = new Bitmap(bitmapData, "auto", true);
       var image:Image = new Image();
       image.source = bitmap;
       image.cacheAsBitmap = true;
       // object and mask have to be directly over each other on the stage
       image.x = sourceTextX;
       image.y = sourceTextY;
       // add to the stage
       // create a gradient with the same size as the text bitmap
       var gradientCanvas:GradientCanvas = new GradientCanvas();
       gradientCanvas.width = sourceText.width;
       gradientCanvas.height = sourceText.height;
       // object and mask have to be directly over each other on the stage
       gradientCanvas.x = sourceTextX;
       gradientCanvas.y = sourceTextY;
       // set gradient colors
       gradientCanvas.styleName = gradientStyleName;
       // make the gradient's vector art available as a bitmap in Flash
       gradientCanvas.cacheAsBitmap = true;
       // mask the gradient with the text stencil
       gradientCanvas.mask = image;
       // add to the stage

Spread The Word


Leave a reply:
Your Name *: Email (private) *: Website:
Please copy the characters from the image below into the text field below. Doing this helps us prevent automated submissions.
Security Code: img

Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.