AS3 How-Tos and Tips > Rotating Text without Embedding Fonts

In this How-To, we show how to rotate a dynamic text field without embedding fonts using the new 3D methods available in Flash Player 10. We showed how to accomplish rotation by embedding fonts in our earlier How-To: Rotating and Changing Alpha of Dynamic Text in Flash. Below we use the 'scaling correction' technique to minimize blurring of 3D objects. We introduced the technique in: Simple and Sleek Solution to Blurring 3D Objects in Flash Player 10.

Download

The Idea

Rotating dynamic text in 2D using 'rotation' property of the TextField class requires embedding fonts. Another technique can be used if you are authoring for Flash Player 10. Instead of using 'rotation', you can use 'rotationZ'. Since 3D objects are converted to bitmaps before rendering, it is a bitmap 'snapshot' of your text field that rotates and not the text field itself. Thus, embedding fonts is no longer necessary.

The tradeoff is the well-known effect of blurring 3D objects, which is especially troublesome with text. In the applet above and the code presented below, we use the 'scaling correction' technique that minimizes blurring. The technique is explained in Simple and Sleek Solution to Blurring 3D Objects in Flash Player 10.

The Code

We created on the Stage two buttons, btnZPlus and btnZMinus, a slider slAlpha, and a dynamic TextField, testBox. We embeded fonts in testBox, so the text can be rotated in 2D using the 'rotation' property. The code below is placed on the Timeline.

We create programmatically a TextField, box3D. (This is the field appearing on the right in the movie). Within the function 'createBox3D' that follows, we set properties of the TextField.

var box3D:TextField;

var boxFormat:TextFormat;

createBox3D();

testBox.text="Initial text";

function createBox3D(): void {

box3D=new TextField();

box3D.type=TextFieldType.DYNAMIC;

this.addChild(box3D);

box3D.x=370;

box3D.y=140;

box3D.width=170;

box3D.height=100;

box3D.multiline=true;

box3D.wordWrap=true;

box3D.border=true;

box3D.background=true;

box3D.borderColor=0x000000;

box3D.backgroundColor=0xFFFFFF;

setFormat(0x000000,18);

box3D.defaultTextFormat=boxFormat;

box3D.text="Initial text.";

box3D.scaleX=box3D.width/(box3D.width+1);

box3D.scaleY=box3D.height/(box3D.height+1);

box3D.z=0;

}

Note the last three lines within 'function' createBox3D above. We apply the 'scaling correction':

box3D.scaleX=box3D.width/(box3D.width+1);

box3D.scaleY=box3D.height/(box3D.height+1);

before turning 'box3D' into a 3D object. The last line:

box3D.z=0;

turns box3D into a 3D object.

'setFormat' function sets format for box3D.

function setFormat(c:Number,s:Number): void {

boxFormat=new TextFormat();

boxFormat.color=c;

boxFormat.size=s;

boxFormat.bold=true;

boxFormat.font="Verdana";

}

The function 'updateDisplay' updates the text in both boxes as the user clicks the buttons or moves the slider. Note that we use slAlpha.value/10 to display alpha of each TextField instead of testBox.alpha and box3D.alpha. This is to bypass the issue of discrepancies between the 'read' and the 'write' values of alpha. We will address those discrepancies in an upcoming How-To.

function updateDisplay():void {

var stBox3D:String = "rotationZ="+String(box3D.rotationZ)+ "\nand alpha=" + String(slAlpha.value/10);

var stTestBox:String = "rotation="+String(testBox.rotation)+ "\nand alpha=" + String(slAlpha.value/10);

testBox.text = stTestBox;

box3D.text = stBox3D;

}

Event handlers for the two buttons and the slider.

btnZPlus.addEventListener(MouseEvent.CLICK, turnZPlus);

 

function turnZPlus(e:MouseEvent):void {

testBox.rotation+=10;

box3D.rotationZ+=10;

updateDisplay();

}

btnZMinus.addEventListener(MouseEvent.CLICK, turnZMinus);

 

function turnZMinus(e:MouseEvent):void {

testBox.rotation+=-10;

box3D.rotationZ+=-10;

updateDisplay();

}

slAlpha.addEventListener(Event.CHANGE, changeAlpha);

 

function changeAlpha(e:Event):void {

testBox.alpha = slAlpha.value/10;

box3D.alpha = slAlpha.value/10;

updateDisplay();

}

Note: As of Flash CS4 alpha of a dynamic TextField can be adjusted without embedding fonts. Rotation using 'rotation' property still requires embedding fonts.

The main drawback of emebdding fonts is a very substantial increase in SWF's size. The advantages include andvaced anti-aliasing option available when fonts are embedded.

Back to AS3 How To and Tips              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.