Assassinating jumpy htmlText hyperlinks

UPDATE: Read this great tutorial on styling the HTML text field

I read quite recently that people are still swearing Flash jumpy hyperlinks in htmlText with Anti-aliased for readability option turned on. What are they talking about? – here's the example.

Roll over and out the links in the left column and carefully observe what happens to the text. Pretty bad stuff.

Fortunately, there is a perfect workaround discovered by Jonnie Hallman aka Destroy Today, but not everybody knows about it yet. So, (to save the world), I wrote a simple TextField wrapper class that automatically deals with the issue, additionally it also fixes another annoying bug – selectable code>TextField scrolls one line on text select – when you click and drag down the mouse while selecting the text, the content scrolls vertically! (and it shouldn't as the text height is the same as the box height, so there's nothing to scroll)

The fixed TextField is presented in the right column – again, try rollover the links.

How does the fix work then?
Basically, after setting the htmlText property, store the height of the TextField, then set autoSize to NONE. That will lock it, so no no more jumping is happening. It is all done at one go by overriding htmlText setter method.

override public function set htmlText(value:String):void
{
    autoSize = TextFieldAutoSize.LEFT;
    super.htmlText = value;
    recordedHeight = height;
    autoSize = TextFieldAutoSize.NONE;
    // adding extra height will prevent "vertical scroll on text select" bug
    // the extra height value should be just bigger than the default leading
    height = recordedHeight + getTextFormat().leading + 1;
}

Additionally, we're adding few pixels extra the TextField default leading value plus 1 to the height there (discovered by Luke Sturgeon), it will prevent "vertical scroll on text select" bug described above.

How should I apply this fix to my broken TextField?
By creating a FixedTextField instance instead, exactly the same way as you would instantiate an ordinary TextField:

var textTF:FixedTextField = new FixedTextField();

Alternatively, you could clone an existing TextField by referencing to it:

var textFieldFixed:FixedTextField = new FixedTextField(someOtherTextFieldToClonePropertiesFrom);

In fact, you can even attach the TextField stored in the Flash IDE library (obviously wrapped up in a MovieClip symbol) – I wrote a separate blog post on that matter.

Download zipped demo including the FixedTextField class.

01:30 PM | | 22 Comments | Tags: , , , , ,

Comments

  1. OMG! Thank you for that help! I've search a solution for this bug for years!!! YIHA!

    David Darx on
  2. Amazing! solved a real headache, thanks for your hard work.

    Lachlann on
  3. [...] [...]

    htmltext springt nach MouseOver - Flashforum on
  4. Wohoo, thanks! Now I got my own bug free text field class yay!

    marpies on
  5. You saved my day! My client was about to send a killing squad to my office..

    Col.Kurtz on
  6. Thank you!

    Pier on
  7. the line no 70 says : // clone the textFormat of referenceTextField as well defaultTextFormat = referenceTextField.getTextFormat();

    I think it should be within the if (referenceTextField) bloack since on a null object you cannot access the getTextFormat();

    The rest of class works as a charm. Thanks

    Saurabh Gautam on
  8. Thanks again Tomek.

    Fabio Paes on
  9. Hi. First of all this solution is very $#&^%$ great. But i need some help with one issue here ... Im working on a project in CS4, which causes a bug when trying to access a blendShader property in the TextField describeType (there is a blendShader on TextField on CS4 - a writeOnly property) and a blur problem in the fonts.

    Anyone knows how to do a work around to this problem?

    Gracias

    Fabio Paes on
  10. I'm trying to get this work with as2 and i'm not quite understanding your comment about that above:

    "just use the setter method (code above) to fix the bug, change void to Void and that should work."

    Would you please be able to show how this is done? sorry if this is a dumb question.

    Sam on
  11. i just don't how to use this blog i will post it with spaces

    Hello everybody. I think I found a better solution!!! create text and call fixTextScroll every time after updating text

    < t e x t f o r m a t l e a d i n g = " 0 " > œ < / t e x t f o r m a t >

    var txtFieldWithText:TextField //etc...

    SomeClass.fixTextScroll(txtFieldWithText);

    class SomeClass { public static function fixTextScroll(txtField:TextField):void { txtField.htmlText += œ } }

    I used "œ" because i don't think that anybody has it embedded, but u can change it by anything u want.. I think u can add more text after that and it will not be broken because "œ" is not embedded :) if it works delete the my older posts plz

    YuriZkit on
  12. sorry about that post, the blog readed the htmlFormat tags :(

    will try one more time

    var txtFieldWithText:TextField //etc... SomeClass.fixTextScroll(txtFieldWithText);

    class SomeClass {

    public static function fixTextScroll(txtField:TextField):void { txtField.htmlText += 'œ' } }

    YuriZkit on
  13. Hello everybody. I think I found a better solution!!! create text and call fixTextScroll every time after updating text

    var txtFieldWithText:TextField //etc...

    SomeClass.fixTextScroll(txtFieldWithText);

    class SomeClass { public static function fixTextScroll(txtField:TextField):void { txtField.htmlText += "œ" } }

    I used "œ" because i don't think that anybody has it embedded, but u can change it by anything u want.. I think u can add more text after that and it will not be broken because "œ" is not embedded :)

    home it will work just so well as for me!!

    YuriZkit on
  14. Thanks a lot man, we have being trying to figure the best work around for this issue and you have definitely found the absolute the best fix.

    O Plummer on
  15. @Max @Flashvideo: just use the setter method (code above) to fix the bug, change void to Void and that should work.

    Og2t on
  16. yes i would be also interested in a AS2 solution!

    Flash video on
  17. Is there an AS2 solution to this issue? Thanks,

    Max on
  18. @Luke: thanks so much, I couldn't figure it out myself. I will update the class soon.

    Og2t on
  19. I'm so glad I found your solution, after doing some experimenting myself I found that rather than adding a random amount to the height, you only need to add the leading value of the text, which you can find dynamically so it should work in all situations.

    I just wrote a little post about it: http://www.lukesturgeon.co.uk/lab/2009/06/fixed-vertical-scrolling-text-bug/

    Luke Sturgeon on
  20. nice one. I noticed this error once in a while but I didn't have the time to investigate further

    Martin on
  21. Wow!!!! Been trying to figure this out. Advanced Aliasing is the way to go and it's been a shame to sacrifice that for non-jumpy text. Thanks to your fix I can keep my readable text and not have to worry about this stupid bug!

    Pat on
  22. Your solution looks good. We've been turning MouseScroll to false to take care of the scroll and setting TextFieldAntiAlias to Normal to take care of the jumping.

    Nice to have another option just in case we need advanced AntiAlias.

    Thanks!

    ickydime on

Adding comments disabled for now.