How to rotate Text in Flex/AS3 without Embedding

[tweetmeme source=”@hiraash” only_single=false]Rotating text in AS3 or Flex is not magic. Its a pretty straight forward and easy thing to do. Any control that holds the text will be an extension of a DisplayObject and will have the property rotation to which you can set the angle you want the text/object to be rotated to. But the drawback is this only works if the font of the text you are using is embedded and is within or accessible to the SWF. If not you would see the text dissapear when the rotation property is changed to anything other than 0.

So how can you rotate a text without embedding? the answer actually depends on what environment you and your users are in.

Flash Text Engine (FTE) and Text Layout Framework (TLF)

Prior to Flash Player 10, if text needed to be rotated there was no option other than embedding the text. In FP10, Adobe built in the Flash Text Engine (FTE) that enables Flash alone (without flex) to do quite a bunch of stuff with text. This article in InsideRIA well explains the FTE. To actually use these capabilities of FTE Adobe also built the Text Layout Framework (TLF) which provides a set of API’s. A detailed article on the capabilities and usage of the framework can be found here. Also here is a demo app that demonstrates most of the feature of the TLF. The TLF comes built into Flex 4. Any prior version of Flex will required the TLF library to make use of the FTE.

So basically if you want to rotate text without embedding it, you will need to force the application to use FP10. So lets talk about how this can actually be done.

Rotating Text in Flex 4

Like I stated before the TLF ships in Gumbo (Flex 4) and is utilized by many components to bring the rich text capabilities into them. The starndard text components such as TextArea, TextInput and TextField would still have the issue. The components you need to be using are the spark.components.* which utilize the TLF to handle text. The below example shows how text behaves on both mx and spark components during rotation in Flex 4.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:sp="spark.components.*" layout="absolute">
    <mx:VBox width="100%" height="100%" horizontalAlign="center">
        <mx:HSlider id="slider" value="0" minimum="0" maximum="359"
            change="box.rotation=slider.value"/>
        <mx:VBox id="box">
            <sp:Label text="This is a Spark Label"/>
            <sp:TextArea text="This is a Spark TextArea"/>
            <mx:TextArea text="This is a Normal TextArea"/>
            <mx:Label text="This is a Normal Label"/>
        </mx:VBox>
    </mx:VBox>
</mx:Application>

As you move the slider you would see the text components rotate and the mx component text disappear but the spark components would continue to show the text and even let you edit.

Rotating Text in Flex 3.3

This is not as simple as getting it done in Flex 4 but is possible with a price to pay. You will need to download the TLF. The TLF bundle contants examples of how to display text using the TLF. Below is a simple example of how you can use TLF to display a line of text and rotate it. This uses the HelloWorld.as that comes in the TLF (/textlayout_framework/examples/actionscript/)

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" >
    <mx:VBox width="100%" height="100%" horizontalAlign="center">
        <mx:HSlider id="angle" minimum="0" maximum="359"
            change="box.rotation=angle.value"/>
        <mx:Canvas id="box" addedToStage="load();" x="100"
            width="50%" height="100%"/>
        <mx:Script>
            <![CDATA[
            import mx.core.UIComponent;
            import flash.text.engine.TextLine;
            import flash.text.engine.TextBlock;
            import flash.text.engine.TextElement;
            import flash.text.engine.ElementFormat;
            private function load () : void {
                var sp :Sprite = new HelloWorld();
                var ui:UIComponent = new UIComponent();
                ui.addChild( sp);
                this.box.addChild( ui );
            }
            ]]>
        </mx:Script>
    </mx:VBox>
</mx:Application>

As you may see this rotates the text just fine without having to embed the text. But like I said this comes with a price to pay. The quality of the rotated text will be quite bad. This is due to no support for anti-aliasing in FTE. However FTE does support different techniques to make the text look better which I wont be covering in this post. To really see this, you will need to open up the HelloWorld.as and change the font size from 48 to 12. Then compile and run to experience the difference. Smaller text shows the lack of quality when rotating.

All in all the best solution for rotated text without having to embed is the spark components in Gumbo. Looking forward to use more of it.

Advertisements