For some reason or another selection color is not an option on dynamic TextFields in Flash.
This has been one of those issues that I’ve just accepted up until now.
I’m currently working on a project that has a design featuring white text over a black background. The caveat was that the text needed to be selectable as well. As anyone working with selectable text knows, the selection color is always black. This posed a problem… the user couldn’t actually tell when the text was selected or what characters were actually selected. I remembered a while ago reading about applying a color transform to the text field to change the selection color. Only problem with that solution is that it applies the transform to the entire field as a whole, which means the text color and background color are affected by the transform as well.
I played around with this solution for quite a while and came up with a fairly reliable way of changing the selection color and maintaining the text and background colors that you initially chose. There are still some hiccups, but so far this is the best solution that I’ve found. First download the SelectionColor class and then test it with:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
package { import com.digitalflipbook.text.SelectionColor; import flash.display.Sprite; import flash.text.TextField; /** * The SelectionColorTest class runs a simple test changing a TextField selection color. * * @author Mark Walters * @since 2007.08.13 */ public class SelectionColorTest extends Sprite { public function SelectionColorTest() { var tf:TextField = new TextField(); this.addChild( tf ); tf.width = 180; tf.height = 20; tf.text = "Here's some text to try selecting."; tf.background = true; tf.backgroundColor = 0x000000; tf.border = true; tf.borderColor = 0x000000; tf.textColor = 0xFFFFFF; SelectionColor.setFieldSelectionColor( tf, 0xD3D3D3 ); } } } |
Now, this works with many color choices, but it is not a full proof solution. I have seen certain colors, depending on the colors chosen, not work out exactly as expected. If anyone notices anything in the code that could be perfected let me know and I will post an update. This seems to be one of those annoying things about Flash that would be nice to have a solid solution.
Excellent Post! I’m new to flash/flex/actionscript and this is something I’ve been wondering about.
Out of curiosity have you ever had to deal with selecting text across multiple TextField objects? Seems like it should be built into the Flash functionality, but I’ve found when I put two TextFields on the screen (via actionscript) I can’t select the text from both of them. Any thoughts on how this is supposed to be accomplished in flash?
Great post mate. I found this exceptionally useful for a recent project I had to do, really saved me alot of time. Keep up the good work! 🙂
Hi !
Sounds great..
But I’m still working with AS2 & Flash 8 and ColorTransform doesn’t have a color property. Only a rgb property.
Do you think it’s customizable for AS2 ? 😉
Thx for response (great blog anyway..)
Fro
simples great.
thank you
Hey Mark,
I used the method you devised to change the selection color of a text field in flash 8. I have been able to use it with windows. Thanks for the post. However, while testign the code on Mac OSX, I found that it doesn’t work. I tried couple of options but it did not work. Can you please check for this? This would be a great help. Thanks a lot.
Daljit
Yeah definatly something lots of us would like to know how to do… with ease!
Im surprised to have such a hardtime finding out how, when this very effect is used in the Flash Help display!
It is an interesting approach but not good enough. What if you use hmtl and pics ? The whole text color is changed.
1. put a transparent text
2. you can get the end and beginning of the selected text, using this info you can draw under the text field boxes of the size and color you want.
3. If you use scrolling text then you need further calculations to position the hilight box correctly
thanks
For anybody looking to control the selection background color AND the selection text color, this class is not adequate.
Use this instead:
http://labs.hellokeita.com/2008/03/13/textfield-selection-color/
wonderful class, did exactly what i needed. many thanks! 🙂
Amazing class, you’vd saved my day! Thanks!
Huge time saver, thank you so much for sharing – works perfectly for my use case.
Hi everyone,
I suggest only one little modification (sorry for my bad english), in order to be able to easly reset the color transform of a textfield. (For exemple when a same textField is use on both black and white background)
I added a little function in the class:
public static function resetColorTransform( field:TextField ):void
{
var colorTrans:ColorTransform = new ColorTransform();
}
Thank you for all !
Hi!
Thanks for this useful class.
I noticed a limitation: when the sprite containing the textfield is cacheAsBitmap, the coloring doesn’t work.
Any chance it could be done for cached DisplayObjects?
there has a bug . If add a blurFilter(0,0) to textField for fadeIn/fadeOut.
It don’t work well with this.
filters=[new BlurFilter(0,0)]
Doesn’t work for me. I set the selection color to red, but the text gets red itself.
can’t get it to work on a black background 🙁
sorry.. yes i can 😛
good class
Thanks, this is awesome!