AS3 Tweener antialias and alpha problem

Question

I have a strange problem with Tweener library and alpha transition. (no.. it's not the "no embbed problem")

See the example on this page (All fonts are embbed, I'm using CS4 with AS3)

The white-texts on black-background have problem with animation of alpha from 0 to 1. Their alpha "jump" and the text become bolder and whiter suddenly, not following the transition. But, look the black-text: they don't have any problem on transitions.

The problem is the anti-alias. The text with "anti-alias for animation" don't have problem like the texts with "anti-alias from readability" and "custom alias".

It's seen a little detail, but I'm doing this website for perfectionist designers. They are getting crazy with "this little detail" and want me to fix it asap. They think the "anti-alias for animation" is to bad for read.

Is there another option for anti-alias or textbox on flash? Or an alternative to tweener? Anouther combination on the "custom anti-alias"?

Thank you!

Answer 1

When I have issues with TextFields displaying incorrectly during a tween, I do the following:

1) Start your tween

2) Set the textField's antiAliasType property to AntiAliasType.NORMAL

3) When your tween completes (every good tween library will dispatch a COMPLETE event), switch the textField's antiAliasType property to AntiAliasType.ADVANCED

Answer 2

Looks like the Flash Player set "cache as bitmap" property ON when alpha not 1.

@geraldalewis – say a good things, try to cheat player, by switching antiAliasType and cacheAsBitmap properties, before and after animation.

You also can try to directly render your TextField as an Bitmap and then animate it.

Answer 3

@geraldalewis's answer might work under certain circumstances, but you might still notice a snap when you get to alpha 100 and change the antialias from one to the other. The best workaround I've found is to cache the text as bitmap... DisplayObject.cacheAsBitmap might work but is tricky (if rotated or scaled for instance)... an "empty" filter might do the trick (BlurFilter(0,0,0)), or you can set z=0 (fp10)... The bullet proof method is drawing the text in a BitmapData, but is much more work ;)

Answer 4

I went to the main site and I have to agree that the pop is very irritating. You may have to go with bitmaps for the text.

But I have to say that waiting for text to fade in for two seconds drives me nuts. Just as a test, how does it look if you fade the text in over, say, 0.25 seconds instead of two seconds? I'd find that much easier to accept, as a user.

Although the site is very well done and beautiful, the slow fades feel unresponsive to me. In general, I find the site frustrating (in a dreamlike way). I tend to run away from Flash sites because of such usability issues. I want my actions to result in snappy responses.

By the way, how well does this site work on cell phones that don't support Flash?