Text Highlighter - the trick

November 19, 2007 at 2:21 pm · Filed under AS3, BitmapData, TextField, source

Actually, I didn’t show the source because I wanted to know how many people was reading it, and was interested about it… so let me reveal the little trick.

First, I create a TextField, selectable(obviously) and set the alpha to zero.
Than, create a BitmapData with the TextField size, and, just draw the TextField on BitmapData each time the selection changes.
When you draw the BitmapData, there is to ways to change the selection color, using the ColorTransform or PalleteMap methods.
After that, you just place the Bitmap behind the textField.

var color = 0xff0000;
var c = ColorUtils.getRGB(color);

highlightBmpData.fillRect(highlightBmpData.rect, 0×00000000);
highlightBmpData.draw(textField);
highlightBmpData.colorTransform(highlightBmpData.rect, new ColorTransform(1, 1, 1, 1, c.r, c.g, c.b, 0));

One thing is that, using Color transform, you can change easily the smoothed fonts, and with PalleteMap is harder.
Just remember that the selection color is always black, so you need to change the black part of the BitmapData to any color you want.

Easy huh?

PS: weird thing is that some people couldn’t see the effect on Mac with Firefox… I didn’t try it yet, but I’ll try to find a way to make it work.

6 Comments »

  1. nebutch said,

    November 21, 2007 @ 8:03 am

    Ahhhh. Very sneaky ;)

    Thanks for sharing!

    PS - I’m on a Mac using FF2 right now, and I can view it fine.

  2. Scott said,

    December 6, 2007 @ 12:23 am

    It was a player bug:

    http://www.kaourantin.net/
    211813 BitmapData draw ColorTransform not affecting all text on all platforms

    Got the Update 3 released Monday and works fine for me now on Mac Firefox.

  3. Robert said,

    December 18, 2007 @ 4:00 am

    Thats awesome! I’ve been looking all over to do this. Could you send me the source file?

    Thanks, and great work!

  4. budi said,

    February 13, 2008 @ 12:20 pm

    Thanks for sharing :-) Would it be possible for you to send me the source file? I can’t quite understand based on your post.

  5. pei said,

    March 12, 2008 @ 2:44 am

    Hi,
    thank you for sharing all the tricks!
    i would love to have the source code as well.
    thanks again!

  6. Ashok Ramsankar said,

    October 29, 2008 @ 4:11 pm

    Hi,

    I was looking a code like this. If possible, pls share the entire source code as I have to change the text color for the Tooltip in Flex.

    Kindly do the needful. Your help will be really appreciated in advance!

RSS feed for comments on this post · TrackBack URI

Leave a Comment