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 | posts | 22 Comments | Tags: as3, source, tips, bug, textfield, flash ideComments
- David Darx on September 27, 2011, at 01:15 PM
- October 21, 2010, at 03:57 PM Lachlann on
- htmltext springt nach MouseOver - Flashforum on October 21, 2010, at 09:17 AM
- marpies on August 27, 2010, at 11:53 PM
- May 19, 2010, at 12:13 PM Col.Kurtz on
- February 2, 2010, at 02:06 AM Pier on
- January 12, 2010, at 04:06 AM Saurabh Gautam on
- January 8, 2010, at 02:03 AM Fabio Paes on
- January 6, 2010, at 08:35 PM Fabio Paes on
- December 8, 2009, at 12:01 AM Sam on
- October 6, 2009, at 12:04 AM YuriZkit on
- October 5, 2009, at 11:55 PM YuriZkit on
- October 5, 2009, at 11:51 PM YuriZkit on
- August 11, 2009, at 05:09 PM O Plummer on
- Og2t on July 31, 2009, at 11:10 AM
- Flash video on July 30, 2009, at 05:16 PM
- Max on July 28, 2009, at 04:37 AM
- Og2t on June 26, 2009, at 05:25 PM
- Luke Sturgeon on June 26, 2009, at 10:42 AM
- Martin on June 22, 2009, at 03:34 PM
- June 10, 2009, at 08:21 PM Pat on
- ickydime on June 3, 2009, at 02:41 PM
Adding comments disabled for now.