AS3 How-Tos and Tips > Rotating Dynamic Text

There's nothing more disconcerting to a new Flash user than to experiment with assets on the stage and witness mysterious behavior that requires deeper understanding of Flash. One example of this comes when one discovers that there is something strange about changing .rotation and .alpha properties of a dynamic textbox.

We imagine our intrepid beginner constructing the following example in which a rectangle is first drawn on the stage and converted to a MovieClip object. Within the ActionScript code are handlers for the sliders that adjust the .alpha property and the .rotation property of the MovieClip object.

The excited beginner decides to change the application to use a dynamic textbox instead of a simple rectangle. "I'll make a text box with a border and have the text display the values of .alpha and .rotation." Should be simple, right? The result of the change is the shown in the example below. But when the proud programmer moves the sliders... nothing!

To fix this problem we need to embed the fonts in order for text to persist on the screen while these properties are being updated in ActionScript.

To embed fonts within the Flash authoring environment, select the dynamic textbox and press the button labeled Embed... on the Property panel. (See figure below.) When this button is clicked, you will see the Character Embedding dialog box. It is wise to select only the glyphs that your application will use.

Embed Panel

The application below shows the result of embedding fonts within our previous attempt at this simple application.

So why doesn't Flash just always embed all fonts? One reason has to do with the size of the resulting swf file. If all fonts are embedded in the previous example, the resulting swf file is over 250KB in size, whereas the one shown above is around 30KB.

Download

Download the three fla files for this example in the following compressed folder.

The code for the dynamic text versions

The following code is used for both the second and third examples above. Once again, the third example functions differently only because we embedded fonts in the dynamic textbox.

The slAlpha slider is created on stage from the Components panel, using minimum = 0 and maximum = 10, as set in the Parameters panel. Within the Parameters panel, we also set liveDragging to be true so that we get continuous updating as the slider changes. As the slider changes, the alpha value of txtDisplay is changed and the updateDisplay function is called.

slAlpha.addEventListener(Event.CHANGE, changeAlpha);

 

function changeAlpha(e:Event):void {

txtDisplay.alpha = slAlpha.value/10;

updateDisplay();

}

The slRotation slider is created on stage from the Components panel, using minimum = 0 and maximum = 360, as set in the Parameters panel. Within the Parameters panel, we also set liveDragging to be true so that we get continuous updating as the slider changes. As the slider is moved the rotation property of txtDisplay is changed and the updateDisplay function is called.

slRotation.addEventListener(Event.CHANGE, changeRotation);

 

function changeRotation(e:Event):void {

txtDisplay.rotation = slRotation.value;

updateDisplay();

}

The updateDisplay function changes the sentence within the txtDisplay box to reflect the current values of rotation and alpha.

function updateDisplay():void {

var stDisplay:String = "Rotation="+String(slRotation.value)+ " and alpha=" + String(slAlpha.value/10);

txtDisplay.text = stDisplay;

}

Rotating Text in Flash Player 10

If you are authoring for FP10, you can use the 3D .rotationZ property instead of the 2D .rotation property on a dynamic TextField. Curiosly, if you apply the native 3D methods to a TextField, embedding fonts is no longer neccessary. That is because 3D objects in FP10 are rendered as Bitmaps. It is not a TextField that rotates anymore but it is its bitmap 'snapshot'. The tradeoff is blurring that happens for 3D objects.

This undesirable blurring effect can be greatly reduced using the 'scaling correction' described in our tutorial: Simple and Sleek Solution to Blurring 3D Objects in Flash Player 10.

We will demonstrate rotating text without embedding fonts in an upcoming how-to.

Embedding Fonts Programmatically

In this how-to we show how to embed fonts in Flash IDE. Embedding fonts programmatically in AS3 is, of course, also possible. We will describe the process in another upcoming How-To.

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.