Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
simonjkendrew

Splittextfield renders differently

Recommended Posts

I have a simple splittextfield animation that animates some letters into place. Once complete, I call the destroy() method on the stf, returning the original textfield into place, as I need to dynamically update the contents of the text field as the program is running. When the destroy() method is called, and the original textfield is returned, there is quite a noticeable difference in how the text is rendered between the original text field and the splittextfield. It appears that the stf renders the font slightly thicker. Is there a solution or setting that will resolve this?

 

Regards

 

Simon

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Sorry to hear you are having problems.

 

There can be slight variances between how the split text and the original are rendered due most often to anti-aliasing settings, kerning, the particular font that is being used and perhaps some new "feature" Adobe has introduced.

 

Most often there is zero visible variation between split and pre-split text.

 

Our docs do list a few limitations:

 

  • Does not recognize "Auto kern" feature in Flash.
  • Positioning may be incorrect when non-standard anti-aliasing is used (like "anti-alias for readability"). Even with standard anti-aliasing, depending on the specific font you use positioning may be slightly off.
  • Does not work with htmlText

If after trying multiple fonts and checking that anti-aliasing, kerning etc aren't to blame, feel free to upload a very basic FLA so that we can give it a look. I'm sure we can confirm if there is something that needs fixing of if things are working normally. 

 

 

 

The simpler the better, just include your ActionScript code and whatever assets (a textfield and or custom fonts) that are necessary to replicate the issue. Please refrain from uploading your GreenSock files. 

 

Thanks

Link to comment
Share on other sites

Many thanks for your help.

 

Can I upload a sample FLA to you, without it being made public?

Link to comment
Share on other sites

Sure, just visit my profile and send message. Rollover my avatar / name on the right for options.

 

Just be sure to zip your files before sending and please try to make them as simple as possible (just enough to replicate the error). More often than not the process of simplifying the files reveals the issue. 

Link to comment
Share on other sites

Hi Carl,

 

Simplified file attached. Open and run the FLA (Flash CC), click on the first line of text to start the animation.

 

 

Sure, just visit my profile and send message. Rollover my avatar / name on the right for options.

 

Just be sure to zip your files before sending and please try to make them as simple as possible (just enough to replicate the error). More often than not the process of simplifying the files reveals the issue. 

 

Text anims to send.zip

Link to comment
Share on other sites

Thanks for the file. 

 

A few things.

 

I did not have the font you were using (Tom-bold), so I used Arial instead.

It appeared the anti-aliasing was set to bitmap which makes things look quite bad in general. 

Don't know if you had it this way or if that mode got reset when Tom was being substituted.

 

Either way, for best results use "anti-alias for animation". That alone will make things much better.

 

Once the font was set with the proper anti-aliasing, there was still some issues at play.

 

Mainly you are doing  a rotation in 3D space... which creates bitmaps of your text.

 

Once your object is put into 3D-space it will always appear different and most likely softer than it did prior.

 

For a test, make copy of your top textfield, move it below the original and remove its instance name.

 

run just this code:

 

 
TweenLite.to(titleTextF, 1, {rotationX:360});
 
You will see that the instance rotated 360 degrees looks different than the original.
 
---
 
So that alone is enough to make the text look different between the rotated split text and original. 
 
This issue comes up a lot on Flash blogs and in these forums:
 
The thing is, none of those solutions really work for you because you are going to revert to the original text anyway. So there really isn't a need to remove the transformMatrix because you are just getting rid of those little textfields anyway when you call destroy().
 
The only thing you might consider doing is giving the original text a z value (forcing it to render in 3D) after it is reverted so that maybe it matches the text that was animated. 
 
---
 
In addition i noticed your text wasn't sitting on whole pixel values. the y was at 42.05 or something like that. Placing the text on whole pixel values will help things match up better too.
 
 
---
 
In summary, this is just an issue related to the way Flash does things. You're options are.
 
Make sure the x/y of both textfields is on whole pixel values
Use anti-alias for animation 
Try removing a combination of blur and or rotationX.
 
Hopefully you find a solution that is suitable. Unfortunately there really isn't much we can do in the engine to make up for these slight variances.
Link to comment
Share on other sites

Hi Carl,

 

I had already tried every different anti-alias setting, and left it as bitmap before I sent you the FLA. The solution that has worked is to remove the 3D rotation tween. Keeping the blur worked, but the 3D rotation was the problem.

 

Many thanks for your help!

 

Simon

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×