Hash family comprises a set of committed team

The dedicated web development wing of Hash Technologies Pvt Ltd comes under the brand name of Hashlive. The ISO 9001:2000 certified Hash Technologies Pvt. Ltd is a part of JIS Group.

Using a Color Gradient as the Text Color in Flex 3

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” 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

Comments are closed.