ActionScript - Rotating Text

When creating graphs, it is common to rotate the y-axis label 90°.

Accomplishing this task was a challenge.

Background | Rotating Text | Using Embedded Fonts | Notes | Failure Using Embedded Fonts

Background

Simple, I was graphing some data and wanted the y-axis label to be rotated. Well, TextField is based on DisplayObject which has a rotation property.

TextField -> InteractiveObject -> DisplayObject -> EventDispatcher -> Object

So, I set the rotation and the text disappeared. After a couple of hours experimenting, I gave up and searched the web. After another hour, I found this

the text disappearing isn’t a bug – there’s a big warning in the documentation at the top of the class file – Flash won’t render any TextField that’s rotated UNLESS you embed the fonts.

Good information ... but it is NOT in the Flash AS3 help file. I eventually found

You can rotate text that uses embedded fonts

in Advanced text rendering by searching the help for embed fonts. Until I figured out the details (given below) and was actually able to rotate text, the following 2 help topics were just confusing.

TextField.embedFonts
Font.enumerateFonts

Notice that the DisplayObject.rotation help contains NO useful information.

Using Embedded Fonts

This is how to embed fonts and use them in code.

Place a Text component (from the Toolbar) on the gray area of the form - this text will NOT be displayed
Enter some dummy text (without this, the field will be automatically deleted)
Using the Properties panel (the 2 combo boxes are not labeled, hold the mouse over them and their names will be displayed)
- Set the Text type ComboBox to Dynamic Text (this displays the Embed... button)
- Select Anti-alias for animation in the Font rendering method ComboBox
- Press the Embed... button
  - Select one or more character sets (use Ctrl and Shift)
  - I used Uppercase, Lowercase, Numerals
  - In the Include these characters edit box, I added ()/^-,
    - (watts/m^2 x 1,000)
    - (Microns - um)

Remember, the more characters you add, the larger the final file will be.

This is a code example

  protected var FLabel : TextField;

public function Configure_Label():void{

  var format: TextFormat = new TextFormat();
  var a     : Array      = Font.enumerateFonts(false);

  if (a.length > 0){
    format.font = a[0]["fontName"];// required to rotate text
  } else {
    trace("***** There are no embedded fonts *****");
  }

  format.size = 14;

  FLabel = new TextField;
  FLabel.defaultTextFormat = format; // must be before setting the text
  FLabel.embedFonts = true;          // required to rotate text
  FLabel.autoSize   = TextFieldAutoSize.CENTER; // affects horizontal location
  FLabel.wordWrap   = false;

  FSprite.addChild(FLabel);  // FSprite is set elsewhere, this line displays the label
}

// This is how the text is modified after the label is defined
FLabel = "Microns - um"; // Do NOT include any characters that are NOT embedded

Instead of hardcoding a font name, this code first verifies that there is an embedded font, and then uses whatever font is found. This is useful because this code is included inside a reusable library and I prefer it to tell me that there is a problem if I didn't manually embed some font.

Note - Without embedded fonts, some rotated text will display when running from the Flash IDE but not from the web. Personally, I prefer to know that there is a problem ... BEFORE ... deploying an application.

In an AS file, these might be needed

import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldType;

Rotating Text

Once a font is embedded, attached, and enabled, THEN it can be used to rotate the text. In my graphing component, both the x- and y-axis labels are created using Configure_Label (above) ... the y-axis label is THEN rotated and centered using displayLabel (below).

public override function displayLabel():void{
   // rotate and center label
  FLabel.rotation = -90;       // rotate first so height and width are correct
  FLabel.x        = -40;
  FLabel.y        = (FAvailable_Space + FLabel.height)/2; // center text
}

txt.width and txt.height are relative to the current rotation - always rotate before using these values.

An embedded font must be attached and enabled BEFORE setting rotation.

Notes

When first testing this, I created a text field and rotated it at design time using the Free Transform Tool ... and it displayed without embedding any fonts. This appears to be because

The text was static
The rendering method was Bitmap text

However, to change the text via code, it must be changed (at design time) from Static Text to Dynamic Text ... which made the text disappear. (Static Text fields can not be named and, therefore, can not be manipulated in any way via code. All text fields created via code are dynamic, by definition.)

It took several hours of experimenting before I decided that this was a Flash design problem. After another hour or so, I found the hint on the web about embedding fonts.

I tried embedding fonts with one field and the text displayed rotated. The *.swf file size changed from 3 kb to 5 kb (27 kb to 38 kb in a second test case). BUT ... only the one field was rendered. None of the other rotated text fields I was experimenting with were displayed until I also embedded fonts for them.

When you manually place text on the form (via the ToolBar), and make it Dynamic, the option to embed text is provided in the Properties frame. Also note that you MUST select Anti-alias for .., otherwise, some of the text will just disappear. (I use Anti-alias for animation, in my opinion, it is not as fuzzy as Anti-alias for readability.) In addition, you should not change the font size in code if Bitmap Text is selected ... the text will look terrible

When changing the ComboBox next to the Embed... button, there is a pop-up that says

The rendering method you selected requires embedded characters. Click Embed to specify the characters to embed in the SWF.

Not real help since it does not appear unless you modify the value from Use device fonts (not the default) to something else.

Failure Using Embedded Fonts

I had been using embedded fonts for several months when suddenly ... they stopped working and a new application failed. They still worked in several existing applications, just not in the new one. After 2 days of troubleshooting (I actually had to reconstruct the application from scratch to find this), I discovered that ..sometimes.. when you add text to your application the embedded fonts simply disappear. Specifically, even though the embedded fonts are still working,

  var a : Array = Font.enumerateFonts(false);

creates an empty array.

I was able to trace this to a specific Static Text field.

When I copied the component from one failing project and pasted it into a working project - the working project now failed
When the component was deleted, the project started working again
When the failing component was changed from Static Text to Dynamic Text, the project worked
When I changed it from Dynamic Text back to Static Text (with NO other changes), it failed
Both projects contained several other Static Text fields, but they did not cause any problems - just the one field caused the problem

During all this testing, there was ALWAYS another Dynamic Text field on the form that had embedded fonts.

There is no way to describe this type of design problem harshly enough.

Adding Static Text to a form should NEVER cause a program to fail ... ever ... using any known programming language.

Of course, I tried to create a simple test case to demonstrate this problem ... but it refused to fail. Instead, to document this problem, I started with a failing project and removed everything except 2 text fields and 2 lines of code. I even deleted all the library entries. I have included the following in Embed_Design_Problem.zip

Simple - fails.fla	614 kb
Will not fail - but should.fla	483 kb

This is the test code ... pretty simple.

var a : Array = Font.enumerateFonts(false);

trace("Length of array", a.length, "(should be one, 0 means failure)");

As it says, the trace shows 0 when the application fails and 1 when it works.

Author: Robert Clemenzi - clemenzi@cpcug.org