Yahoo! Flash (R) Blog

The Knack to Rotating Device Fonts in Flash 10

In Flash Player 10, Adobe developers added a great new feature: the ability to rotate dynamic text generated using device fonts already present on the user’s machine, not the fonts embedded in the SWF. However, using this feature is a bit tricky, and we’ll describe two possible methods here.

Rotating device fonts is quite useful in many applications (as labels on a Chart, for example), and not embedding the fonts is essential to keeping the SWFs small and taking advantage of the internationalization already built into the user’s system. In previous versions of the Flash player, rotating dynamic text was only possible if the Sprite containing a dynamic TextField was first copied into a Bitmap object, and then rotated. This somewhat “hacky” approach produced results, albeit not very visually pleasing ones.

In the new Flash player, the new feature is not as simple as modifying the TextField.rotation property — if you set rotation of a TextField to anything other than 0, your text will disappear, just as in previous versions of the player. Instead, there are two new methods of producing rotated text — let’s look at both of them, and then discuss their advantages and disadvantages:

The first method, used in the top row in the example above, simply modifies the rotationZ property of the TextField. This property, newly introduced in player 10, is generally used to rotate display objects in 3D space; however, rotation in Z-plane is mathematically equivalent to the regular, flat rotation. In some sense, it behaves similarly to the “old” method of rotating dynamic text: it first caches text as a bitmap, and only then rotates it. You can ascertain its bitmap nature by simply zooming in on the SWF: you’ll see the obvious pixelation around the edges of the text.
Depending on the end user’s platform (Windows, OS X or Linux), this method may actually produce better-looking results for small to medium font sizes. It’s also quite simple to use — there is only one property to modify.

The second method (used for the bottom row) is using new native AS3 class, called TextBlock. Part of the new flash.text.engine package, TextBlock allows you to generate a special kind of DisplayObject, called TextLine, which can be subjected to all standard DisplayObject transformations.

This method is a bit more involved, because TextLines cannot be instantiated on their own — you have to use the factory within TextBlock to generate them. This method also behaves somewhat differently on different platforms. I have given it a cursory test on OS X and Windows XP, and it appears that on OS X, all but the smallest TextLines are anti-aliased properly. On Windows, however, some of the medium-size lines come out looking very jagged, whereas the smallest and largest font sizes are properly anti-aliased. Of course, another thing to note with this method is that it preserves font glyphs as vector objects: if you zoom in on the SWF, you’ll see that they remain sharp and anti-aliased.

There’s a lot more investigating to do with these two methods, but I hope this will be a good start for you. The code for the example is below.

package {
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.engine.*;
 
public class TextTest extends Sprite {
 
public function TextTest () {
 
for (var i:int = 0; i <= 20; i++) {
	var txt:TextField = new TextField();
	txt.selectable = false;
	txt.width = 300;
	txt.height = 100;
	txt.text = "Hello world!";
	txt.setTextFormat(new TextFormat("Georgia", 2 + 2*i));
 
	txt.x = 6*(i*(i+1)/2);
	txt.y = 30;
	txt.rotationZ = 20;
	addChild(txt);
}
 
for (var j:int=0; j<=20; j++) {
	trace(j);
	var myString:String = "Hello world!";
	var myFormat:ElementFormat = new ElementFormat();
 
	var myFontDesc:FontDescription = new FontDescription("Georgia");
	myFormat.fontSize = 2 + 2*j;
	myFormat.fontDescription = myFontDesc; 
 
	var textElement:TextElement = new TextElement(myString, myFormat);
	var textBlock:TextBlock = new TextBlock();
	textBlock.content = textElement; 
 
	var myTextLine:TextLine = textBlock.createTextLine(null, 300); 
 
	myTextLine.x = 6*(j*(j+1)/2);
	myTextLine.y = 150;
	myTextLine.rotation = 20;
 
	addChild(myTextLine);
}
 
  }
 }
}

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!