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. Notice that the DisplayObject.rotation help contains NO useful information.


Using Embedded Fonts

This is how to embed fonts and use them in code. Remember, the more characters you add, the larger the final file will be.

This is a code example

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


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). 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

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, creates an empty array.

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

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

This is the test code ... pretty simple. As it says, the trace shows 0 when the application fails and 1 when it works.


Author: Robert Clemenzi - clemenzi@cpcug.org
URL: http:// cpcug.org / user / clemenzi / technical / Languages / ActionScript / Rotating_Text.html