Wednesday, May 27, 2009

Flash HTMLText Jumps on RollOver (a: css, hover, bug, as3)

This is one of those posts meant for a Google search... hence the title (I tried to include things I searched for when debugging this issue).

Scenario: You have a TextField that has a style sheet applied to it. It is being dynamically updated with HTMLText. The text that is being inserted contains "a" tags for links.

Problem: When you mouse over the TextField the links move. Some would call it a jump, others a wiggle. Regardless, they move and your client does not think its funny that you call it a feature.

Failed Solutions: Remove Hover tag, doesn't help. Use a style class instead of applying it to all "a" tags... nothing. Use an external stylesheet instead of an AS class... nope. Baseball bat to monitor??? probably not going to help, but worth a shot.

Proper Solution: Stan here at the basement noticed that the AntiAlias on the Textfield was set to Advanced and concluded that maybe the text was changing due to the antialias. DING DING DING! Stan nailed it. He changed it to Normal and we no longer had jumpy/wiggly text links.

Side Note: This same issue will have a tendency to crash your browser if you have Flash player 10.0.12 and are running Firefox or Safari (maybe IE... not tested). It was very strange, the browser would not crash in the latest Flash 9 and it also worked in 10.0.22. It just really hated page changes in 10.0.12. When I went to test Stan's fix to the text bug, we realized that it also fixed our browser crashing bug.

Sooo, long story short, if you are using HTML text and your browser is randomly crashing or text is randomly jumping then you may want to turn off Advanced AntiAlias.

Hope that helps to whoever is unlucky enough to follow our in our footsteps.


Markus said...

That's really good to know! (And I'm glad the solution to the crashing bug turned out to be that easy :-) How much time have you guys wasted on this?

Anonymous said...

Nice. This has been bugging me for a while now. Cheers!

Bryan Perry said...

So, you are changing the alias settings in the property inspector? I'm having (and have had) the same problem and none of the available aliasing options in the property inspector seem to work. Any advice? How did you turn aliasing "off"?

Bryan Perry said...

Actually, just figured out that setting it in AS works. This is what I used:

myText.antiAliasType = "normal";

tom said...

I think I faced this once before, and discovered that it was related to certain special characters in the upper unicode ranges. When I took out those characters, the problem also went away. It's been a few years, so I'm a little fuzzy on this, but you might want to investigate whether the character set has any impact on your tests.

Og2t said...

Hey all! There's a very easy fix to that problem, I've posted the solution here:

Kortex said...

See this ! AS3 CSS !
style.setStyle("a:link", link);
style.setStyle("a:hover", hover);
style.setStyle("a:active", active);
style.setStyle(".visited", visited);

Anonymous said...

This workaround does resolve the jumpy text issue. However it's not really an acceptable solution given that turning off anti-aliasing results in poor text quality.

Anonymous said...

While anti-alias resolves the issue, what causes the problem is when a dynamic textfield has autoSize set to true. Fortunately, this can be resolved by turning autoSize to false after the text has been loaded into place.

Anonymous said...

You can also get around this in most scenarios by setting autoSize to center instead of left.

sterling said...

thats nice, but i cant seem to to get it to work... tried everything..
does it matter if the text is multiline. am i doing the order wrong... embed, then multi, then word wrap, then autozise to none, then normal antialias, then width, then htmlText, then setFormat, then apply stylesheet.. text still jumps sometimes.

Anonymous said...

I love you guys.

Natacha said...

This worked for me!!!

"While anti-alias resolves the issue, what causes the problem is when a dynamic textfield has autoSize set to true. Fortunately, this can be resolved by turning autoSize to false after the text has been loaded into place."

Thank you thank you!!!
I've been having this issue for years!

Jibbles said...

Well played, good sirs. You saved me hours of busy work. A thousand thank yous.

Sel said...

You are a life saver.

BTW: Even now it's
hard to find your solution in google.
In my case this hover problem was everytime I was mousing over any text, not just links.

BIG thanks:) I was going crazy with this hover bug.

Marc said...

What I have had the same problem but I found out what makes it work WITH anti-aliased text and no other fancy stuff. Just make sure your <a href...> tags are inside of any other tags; <b> <span> etc.

<span...><b><a href...>link</a></b></span>

Marc said...

And if you use textfield.autoSize, set it to autoSize = "center" instead "left" or true.

web design perth said...

I had encountered those as well. I had to use the adapted trial and error basis that eventually lead to proficiency.

Sebastian said...

Thanks a lot. You just saved me a bunch of time

PrimeItSolution said...

I read your blog post. Excellent information thanks for sharing
web design, web design perth, web maintenance, website developers

yanmaneee said...

supreme outlet
yeezy sneakers
supreme clothing
jordan shoes
hermes bag
yeezy shoes
lebron 17
curry 7
goyard handbags