Tweening the scale of TextFields "jerky"

[IqAndreas]

I have a simple TextField on the stage, though it doesn't matter if I add it dynamically via code, the results are still the same when it is being tweened up. If you tween the size via scaleX and scaleY, it will be "jerky", and now and then the number of lines will change and the text will rearrange slightly, but with annoying results.

Note that even if the object you tween is a MovieClip, all TextFields inside of it will tween individually, and with the same "jerky" motion.

Here is the SWF and FLA if anyone wants to take a look:
http://iqandreas.isbetterthanyou.org...FieldTween.swf
http://iqandreas.isbetterthanyou.org...FieldTween.fla

This is the only code I'm using:

stage.addEventListener(MouseEvent.CLICK, onClick);
function onClick(me:MouseEvent)
{
    //Not even caching as bitmap will make any difference
    //text.cacheAsBitmap = true;
    TweenLite.to(text, 5, {scaleX:2, scaleY:2});
}

Here is my own personal babble...
I believe this happens because Flash is smart enough to instead of only Tweening up the text as if it were an image, once it has tweened up to a certain size, it will instead increase the font size. So, instead of treating it as a shape, vector image, or a bitmap, it will treat it as text.

This is usually never a problem, and instead a very smart system, because this avoids the text from being pixelated from being a bitmap, or if it were stored as a vector image, small fonts show up very differently from when they are scaled up, so the text preserves it's appearance.

However, since I am tweening it, when the textField jumps from a +scale to a +fontSize, it jumps a little, and this is noticed by the user. Bummer.


A workaround I have thought of, draw a BitmapData for the textField instead of using and Tweening the actual textField.
CONS: If tweened too large will pixelate. Also, each individual TextField inside of the movieClip would need to be cached at the same time. Otherwise, they wouldn't be able to listen for individual MouseEvents (without a crapload of code)

I found a post on the TweenLite forums covering this as well, but no solution.

Does anyone know any easy, efficient, workarounds?
There must be some way around this.

[glosrfc]

Two things:
1. Is the font embedded?
2. Is the textfield set for "Anti-alias for animation"?

[0L4F]

Hi IqAndreas,

I just tested this (a textfield in a MovieClip, and scaling the clip), and if the textfield is set to 'Anti-alias for animation', it looks better than in your example.

Even if you turn the textfield into vectors (CTRL+B CTRL+B) the result is the same. Not perfect, but at least acceptable.

[IqAndreas]

How would I go about doing that in code? Would I need to do that for each and every TextField? (seems so, and that's fine)

The example has two textFields in it, so my code looks like this:

header.embedFonts = true;
header.antiAliasType = AntiAliasType.NORMAL;

text.embedFonts = true;
text.antiAliasType = AntiAliasType.NORMAL;

But for some reason NOTHING is showing up on the stage. Not even when I set AntiAliasType to ADVANCED.

EDIT: Checked the language reference, and I need to embed the font in order to be able to set the antiAliasType it seems.

I don't understand, why do you have to go through such an enormous hassle just to scale fonts properly?!? I don't care if it shows up different elsewhere, I just want it to sit still while scaled!

[glosrfc]

You users might care about it showing up in a different font!

But yes, if you want to interact with the visual properties of a font (rotation, alpha, scale, etc), it has to be embedded. It's part of the trade-off you get with using Flash - small SWFs which means the minimum amount of font data as possible. The more you want to do with a font, the more data you need to include.

[IqAndreas]

Originally Posted by 0L4F

Hi IqAndreas,

I just tested this (a textfield in a MovieClip, and scaling the clip), and if the textfield is set to 'Anti-alias for animation', it looks better than in your example.

Even if you turn the textfield into vectors (CTRL+B CTRL+B) the result is the same. Not perfect, but at least acceptable.

Finally, embedding the font via the IDE worked, as it was only the click of a button to embed it too. Sadly, I need to be able to do the same with fields created via code, which I am looking into right now.

Breaking the text apart is just what I am looking for. It treats the text as one big image, and works just right. I'm guessing there is no quick, simple way to do break apart TextFields via code, as all my textFields are added dynamically.


Forgive me for being stubborn, but I am annoyed at this, and it shouldn't be an issue. Why should you have to embed common Arial font just so it will show up on the same line when scaled?

[0L4F]

Well, the other end of the equation is that with HTML, you are 100% restricted to using the fonts that are on the user's machine.

With Flash, you can use any font that you have on your own computer, as long as you embed it in the .swf.

That is, until you have a dynamic textfield with that font, and want to scale it as if it were a vector. I'd also be very curious about how to break a dynamic textfield into vectors at runtime.

Maybe, as a workaround, you could take a bitmap snapshot of your textfield in it's zoomed-in state, and tween that (from scale 0.5 to 1, for example)?

[IqAndreas]

Well, I finally got it to work, however, now it seems as though bold isn't working. Do I need to embed that as a separate font?

This is the code I have:

[Embed(source='C:\\WINDOWS\\Fonts\\ARIAL.ttf', fontName="Arial", mimeType="application/x-font-truetype")]
        private static var ARIAL:String;
        
        private static var _questionTextFormat:TextFormat;
        public static function get questionTextFormat():TextFormat
        {
            if (_questionTextFormat)
                { return _questionTextFormat; }
            else
            {
                _questionTextFormat = new TextFormat();
                
                //_questionTextFormat.font = ARIAL; //DID NOT WORK
                _questionTextFormat.font = "Arial";
                _questionTextFormat.size = 14;
                _questionTextFormat.bold = true;
                
            }
            
            return _questionTextFormat;
        }

I finally found a smiley that matches how I feel towards Flash right now...

Originally Posted by 0L4F

Maybe, as a workaround, you could take a bitmap snapshot of your textfield in it's zoomed-in state, and tween that (from scale 0.5 to 1, for example)?

It might be a bit CPU intensive, and annoying and tedious, but I'm starting to think that's the best option.

[TheCanadian]

You can import the font into the library and select which styles you want for it.

[0L4F]

Originally Posted by IqAndreas

It might be a bit CPU intensive, and annoying and tedious, but I'm starting to think that's the best option.

Tweening a bitmap is easier on the CPU than tweening vectors, as far as I know...