You make a text field, give it a text format, and put some text in it. All is good, until you start doing something to that text field. There are at least two specific problems you’ll run into:
Rotate it and your text disappears.
Scale it up or down, and it’s going to be all jittery as the text field chooses different sizes of text to match the scale.
Normally, the handling for all of these is to embed the font in the text field. But with Flash 10, there’s a quick trick that might get you by in a lot of these cases: use 3D properties.
To see what I mean, here’s our text field guinea pig:
[as]var tf:TextField = new TextField();
tf.defaultTextFormat = new TextFormat(“Arial”, 24);
tf.text = “Hello World”;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.height = tf.textHeight;
tf.x = 100;
tf.y = 100;
addChild(tf);[/as]
And here’s how we are going to abuse this poor text field:
[as]addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(event:Event):void
{
tf.rotation = mouseY;
// tf.scaleX = tf.scaleY = mouseX / stage.stageWidth * 2;
}[/as]
As is, this will rotate the text field according to the position of the mouse. Because the fonts aren’t embedded, you’ll only see the text when the mouse is at 0 y, or possibly at 360 y. Comment out that line and uncomment the other, and the text will scale according to the mouse x position. It might look fine at first, but if you move your mouse slowly, you’ll see the jittering I was talking about. If you are trying to scale some text smoothly and somewhat slowly, it’s going to look like crap.
Again, the usual fix for this is to embed the font the text field is using. But let’s look at the alternate hacks using Flash 10.
First for rotation, just use rotationZ instead of rotation.
[as]tf.rotationZ = mouseY;[/as]
Voila! Rotate and retain visibility.
And for scaling, just set the z property of the text field to anything. Even zero:
[as]tf.x = 100;
tf.y = 100;
tf.z = 0;[/as]
Now your scaling will be perfectly smooth. This works best for scaling down, as you can probably see. If you need to scale it up, you’re best to start out with a larger size, set the z, then scale down to the size you want. That way when you are scaling up, you’re actually scaling to the original size.
So how does this work? Basically, as soon as you start messing with the new 3D properties, a display object turns into a 3D object. Instead of altering it’s transform.matrix property, you are now altering its transform.matrix3D property. When this happens, the object isn’t simply transformed the “old fashioned” way. It’s actually drawn to a bitmap and then this bitmap is drawn to 3D transformed coordinates using the Flash 10 drawing API. So you aren’t actually rotating or scaling the text field anymore, but rotating and scaling the bitmap representation of it. This is the reason why scaling up looks bad. You are scaling up a bitmap representation of the originally sized text.
Naturally, this doesn’t solve all the problems that embedding a font would, e.g. using a special font that the end user may not have. And as you can see with the scaling, there may be other artifacts. But I found this is a neat hack that can save you time now and then.